/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.2.6_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.2.6_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/index.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');
@font-face {
  font-family: "remixicon";
  src: url("/remixicon.woff2") format("woff2");
  font-display: swap;
}
[class^="ri-"], [class*=" ri-"] {
  font-family: 'remixicon' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ri-lg {
  font-size: 1.3333em;
  line-height: 0.75em;
  vertical-align: -.0667em;
}
.ri-xl {
  font-size: 1.5em;
  line-height: 0.6666em;
  vertical-align: -.075em;
}
.ri-xxs {
  font-size: .5em;
}
.ri-xs {
  font-size: .75em;
}
.ri-sm {
  font-size: .875em;
}
.ri-1x {
  font-size: 1em;
}
.ri-2x {
  font-size: 2em;
}
.ri-3x {
  font-size: 3em;
}
.ri-4x {
  font-size: 4em;
}
.ri-5x {
  font-size: 5em;
}
.ri-6x {
  font-size: 6em;
}
.ri-7x {
  font-size: 7em;
}
.ri-8x {
  font-size: 8em;
}
.ri-9x {
  font-size: 9em;
}
.ri-10x {
  font-size: 10em;
}
.ri-fw {
  text-align: center;
  width: 1.25em;
}
.ri-24-hours-fill:before {
  content: "\ea01";
}
.ri-24-hours-line:before {
  content: "\ea02";
}
.ri-4k-fill:before {
  content: "\ea03";
}
.ri-4k-line:before {
  content: "\ea04";
}
.ri-a-b:before {
  content: "\ea05";
}
.ri-account-box-fill:before {
  content: "\ea06";
}
.ri-account-box-line:before {
  content: "\ea07";
}
.ri-account-circle-fill:before {
  content: "\ea08";
}
.ri-account-circle-line:before {
  content: "\ea09";
}
.ri-account-pin-box-fill:before {
  content: "\ea0a";
}
.ri-account-pin-box-line:before {
  content: "\ea0b";
}
.ri-account-pin-circle-fill:before {
  content: "\ea0c";
}
.ri-account-pin-circle-line:before {
  content: "\ea0d";
}
.ri-add-box-fill:before {
  content: "\ea0e";
}
.ri-add-box-line:before {
  content: "\ea0f";
}
.ri-add-circle-fill:before {
  content: "\ea10";
}
.ri-add-circle-line:before {
  content: "\ea11";
}
.ri-add-fill:before {
  content: "\ea12";
}
.ri-add-line:before {
  content: "\ea13";
}
.ri-admin-fill:before {
  content: "\ea14";
}
.ri-admin-line:before {
  content: "\ea15";
}
.ri-advertisement-fill:before {
  content: "\ea16";
}
.ri-advertisement-line:before {
  content: "\ea17";
}
.ri-airplay-fill:before {
  content: "\ea18";
}
.ri-airplay-line:before {
  content: "\ea19";
}
.ri-alarm-fill:before {
  content: "\ea1a";
}
.ri-alarm-line:before {
  content: "\ea1b";
}
.ri-alarm-warning-fill:before {
  content: "\ea1c";
}
.ri-alarm-warning-line:before {
  content: "\ea1d";
}
.ri-album-fill:before {
  content: "\ea1e";
}
.ri-album-line:before {
  content: "\ea1f";
}
.ri-alert-fill:before {
  content: "\ea20";
}
.ri-alert-line:before {
  content: "\ea21";
}
.ri-aliens-fill:before {
  content: "\ea22";
}
.ri-aliens-line:before {
  content: "\ea23";
}
.ri-align-bottom:before {
  content: "\ea24";
}
.ri-align-center:before {
  content: "\ea25";
}
.ri-align-justify:before {
  content: "\ea26";
}
.ri-align-left:before {
  content: "\ea27";
}
.ri-align-right:before {
  content: "\ea28";
}
.ri-align-top:before {
  content: "\ea29";
}
.ri-align-vertically:before {
  content: "\ea2a";
}
.ri-alipay-fill:before {
  content: "\ea2b";
}
.ri-alipay-line:before {
  content: "\ea2c";
}
.ri-amazon-fill:before {
  content: "\ea2d";
}
.ri-amazon-line:before {
  content: "\ea2e";
}
.ri-anchor-fill:before {
  content: "\ea2f";
}
.ri-anchor-line:before {
  content: "\ea30";
}
.ri-ancient-gate-fill:before {
  content: "\ea31";
}
.ri-ancient-gate-line:before {
  content: "\ea32";
}
.ri-ancient-pavilion-fill:before {
  content: "\ea33";
}
.ri-ancient-pavilion-line:before {
  content: "\ea34";
}
.ri-android-fill:before {
  content: "\ea35";
}
.ri-android-line:before {
  content: "\ea36";
}
.ri-angularjs-fill:before {
  content: "\ea37";
}
.ri-angularjs-line:before {
  content: "\ea38";
}
.ri-anticlockwise-2-fill:before {
  content: "\ea39";
}
.ri-anticlockwise-2-line:before {
  content: "\ea3a";
}
.ri-anticlockwise-fill:before {
  content: "\ea3b";
}
.ri-anticlockwise-line:before {
  content: "\ea3c";
}
.ri-app-store-fill:before {
  content: "\ea3d";
}
.ri-app-store-line:before {
  content: "\ea3e";
}
.ri-apple-fill:before {
  content: "\ea3f";
}
.ri-apple-line:before {
  content: "\ea40";
}
.ri-apps-2-fill:before {
  content: "\ea41";
}
.ri-apps-2-line:before {
  content: "\ea42";
}
.ri-apps-fill:before {
  content: "\ea43";
}
.ri-apps-line:before {
  content: "\ea44";
}
.ri-archive-drawer-fill:before {
  content: "\ea45";
}
.ri-archive-drawer-line:before {
  content: "\ea46";
}
.ri-archive-fill:before {
  content: "\ea47";
}
.ri-archive-line:before {
  content: "\ea48";
}
.ri-arrow-down-circle-fill:before {
  content: "\ea49";
}
.ri-arrow-down-circle-line:before {
  content: "\ea4a";
}
.ri-arrow-down-fill:before {
  content: "\ea4b";
}
.ri-arrow-down-line:before {
  content: "\ea4c";
}
.ri-arrow-down-s-fill:before {
  content: "\ea4d";
}
.ri-arrow-down-s-line:before {
  content: "\ea4e";
}
.ri-arrow-drop-down-fill:before {
  content: "\ea4f";
}
.ri-arrow-drop-down-line:before {
  content: "\ea50";
}
.ri-arrow-drop-left-fill:before {
  content: "\ea51";
}
.ri-arrow-drop-left-line:before {
  content: "\ea52";
}
.ri-arrow-drop-right-fill:before {
  content: "\ea53";
}
.ri-arrow-drop-right-line:before {
  content: "\ea54";
}
.ri-arrow-drop-up-fill:before {
  content: "\ea55";
}
.ri-arrow-drop-up-line:before {
  content: "\ea56";
}
.ri-arrow-go-back-fill:before {
  content: "\ea57";
}
.ri-arrow-go-back-line:before {
  content: "\ea58";
}
.ri-arrow-go-forward-fill:before {
  content: "\ea59";
}
.ri-arrow-go-forward-line:before {
  content: "\ea5a";
}
.ri-arrow-left-circle-fill:before {
  content: "\ea5b";
}
.ri-arrow-left-circle-line:before {
  content: "\ea5c";
}
.ri-arrow-left-down-fill:before {
  content: "\ea5d";
}
.ri-arrow-left-down-line:before {
  content: "\ea5e";
}
.ri-arrow-left-fill:before {
  content: "\ea5f";
}
.ri-arrow-left-line:before {
  content: "\ea60";
}
.ri-arrow-left-right-fill:before {
  content: "\ea61";
}
.ri-arrow-left-right-line:before {
  content: "\ea62";
}
.ri-arrow-left-s-fill:before {
  content: "\ea63";
}
.ri-arrow-left-s-line:before {
  content: "\ea64";
}
.ri-arrow-left-up-fill:before {
  content: "\ea65";
}
.ri-arrow-left-up-line:before {
  content: "\ea66";
}
.ri-arrow-right-circle-fill:before {
  content: "\ea67";
}
.ri-arrow-right-circle-line:before {
  content: "\ea68";
}
.ri-arrow-right-down-fill:before {
  content: "\ea69";
}
.ri-arrow-right-down-line:before {
  content: "\ea6a";
}
.ri-arrow-right-fill:before {
  content: "\ea6b";
}
.ri-arrow-right-line:before {
  content: "\ea6c";
}
.ri-arrow-right-s-fill:before {
  content: "\ea6d";
}
.ri-arrow-right-s-line:before {
  content: "\ea6e";
}
.ri-arrow-right-up-fill:before {
  content: "\ea6f";
}
.ri-arrow-right-up-line:before {
  content: "\ea70";
}
.ri-arrow-up-circle-fill:before {
  content: "\ea71";
}
.ri-arrow-up-circle-line:before {
  content: "\ea72";
}
.ri-arrow-up-down-fill:before {
  content: "\ea73";
}
.ri-arrow-up-down-line:before {
  content: "\ea74";
}
.ri-arrow-up-fill:before {
  content: "\ea75";
}
.ri-arrow-up-line:before {
  content: "\ea76";
}
.ri-arrow-up-s-fill:before {
  content: "\ea77";
}
.ri-arrow-up-s-line:before {
  content: "\ea78";
}
.ri-artboard-2-fill:before {
  content: "\ea79";
}
.ri-artboard-2-line:before {
  content: "\ea7a";
}
.ri-artboard-fill:before {
  content: "\ea7b";
}
.ri-artboard-line:before {
  content: "\ea7c";
}
.ri-article-fill:before {
  content: "\ea7d";
}
.ri-article-line:before {
  content: "\ea7e";
}
.ri-aspect-ratio-fill:before {
  content: "\ea7f";
}
.ri-aspect-ratio-line:before {
  content: "\ea80";
}
.ri-asterisk:before {
  content: "\ea81";
}
.ri-at-fill:before {
  content: "\ea82";
}
.ri-at-line:before {
  content: "\ea83";
}
.ri-attachment-2:before {
  content: "\ea84";
}
.ri-attachment-fill:before {
  content: "\ea85";
}
.ri-attachment-line:before {
  content: "\ea86";
}
.ri-auction-fill:before {
  content: "\ea87";
}
.ri-auction-line:before {
  content: "\ea88";
}
.ri-award-fill:before {
  content: "\ea89";
}
.ri-award-line:before {
  content: "\ea8a";
}
.ri-baidu-fill:before {
  content: "\ea8b";
}
.ri-baidu-line:before {
  content: "\ea8c";
}
.ri-ball-pen-fill:before {
  content: "\ea8d";
}
.ri-ball-pen-line:before {
  content: "\ea8e";
}
.ri-bank-card-2-fill:before {
  content: "\ea8f";
}
.ri-bank-card-2-line:before {
  content: "\ea90";
}
.ri-bank-card-fill:before {
  content: "\ea91";
}
.ri-bank-card-line:before {
  content: "\ea92";
}
.ri-bank-fill:before {
  content: "\ea93";
}
.ri-bank-line:before {
  content: "\ea94";
}
.ri-bar-chart-2-fill:before {
  content: "\ea95";
}
.ri-bar-chart-2-line:before {
  content: "\ea96";
}
.ri-bar-chart-box-fill:before {
  content: "\ea97";
}
.ri-bar-chart-box-line:before {
  content: "\ea98";
}
.ri-bar-chart-fill:before {
  content: "\ea99";
}
.ri-bar-chart-grouped-fill:before {
  content: "\ea9a";
}
.ri-bar-chart-grouped-line:before {
  content: "\ea9b";
}
.ri-bar-chart-horizontal-fill:before {
  content: "\ea9c";
}
.ri-bar-chart-horizontal-line:before {
  content: "\ea9d";
}
.ri-bar-chart-line:before {
  content: "\ea9e";
}
.ri-barcode-box-fill:before {
  content: "\ea9f";
}
.ri-barcode-box-line:before {
  content: "\eaa0";
}
.ri-barcode-fill:before {
  content: "\eaa1";
}
.ri-barcode-line:before {
  content: "\eaa2";
}
.ri-barricade-fill:before {
  content: "\eaa3";
}
.ri-barricade-line:before {
  content: "\eaa4";
}
.ri-base-station-fill:before {
  content: "\eaa5";
}
.ri-base-station-line:before {
  content: "\eaa6";
}
.ri-basketball-fill:before {
  content: "\eaa7";
}
.ri-basketball-line:before {
  content: "\eaa8";
}
.ri-battery-2-charge-fill:before {
  content: "\eaa9";
}
.ri-battery-2-charge-line:before {
  content: "\eaaa";
}
.ri-battery-2-fill:before {
  content: "\eaab";
}
.ri-battery-2-line:before {
  content: "\eaac";
}
.ri-battery-charge-fill:before {
  content: "\eaad";
}
.ri-battery-charge-line:before {
  content: "\eaae";
}
.ri-battery-fill:before {
  content: "\eaaf";
}
.ri-battery-line:before {
  content: "\eab0";
}
.ri-battery-low-fill:before {
  content: "\eab1";
}
.ri-battery-low-line:before {
  content: "\eab2";
}
.ri-battery-saver-fill:before {
  content: "\eab3";
}
.ri-battery-saver-line:before {
  content: "\eab4";
}
.ri-battery-share-fill:before {
  content: "\eab5";
}
.ri-battery-share-line:before {
  content: "\eab6";
}
.ri-bear-smile-fill:before {
  content: "\eab7";
}
.ri-bear-smile-line:before {
  content: "\eab8";
}
.ri-behance-fill:before {
  content: "\eab9";
}
.ri-behance-line:before {
  content: "\eaba";
}
.ri-bell-fill:before {
  content: "\eabb";
}
.ri-bell-line:before {
  content: "\eabc";
}
.ri-bike-fill:before {
  content: "\eabd";
}
.ri-bike-line:before {
  content: "\eabe";
}
.ri-bilibili-fill:before {
  content: "\eabf";
}
.ri-bilibili-line:before {
  content: "\eac0";
}
.ri-bill-fill:before {
  content: "\eac1";
}
.ri-bill-line:before {
  content: "\eac2";
}
.ri-billiards-fill:before {
  content: "\eac3";
}
.ri-billiards-line:before {
  content: "\eac4";
}
.ri-bit-coin-fill:before {
  content: "\eac5";
}
.ri-bit-coin-line:before {
  content: "\eac6";
}
.ri-blaze-fill:before {
  content: "\eac7";
}
.ri-blaze-line:before {
  content: "\eac8";
}
.ri-bluetooth-connect-fill:before {
  content: "\eac9";
}
.ri-bluetooth-connect-line:before {
  content: "\eaca";
}
.ri-bluetooth-fill:before {
  content: "\eacb";
}
.ri-bluetooth-line:before {
  content: "\eacc";
}
.ri-blur-off-fill:before {
  content: "\eacd";
}
.ri-blur-off-line:before {
  content: "\eace";
}
.ri-body-scan-fill:before {
  content: "\eacf";
}
.ri-body-scan-line:before {
  content: "\ead0";
}
.ri-bold:before {
  content: "\ead1";
}
.ri-book-2-fill:before {
  content: "\ead2";
}
.ri-book-2-line:before {
  content: "\ead3";
}
.ri-book-3-fill:before {
  content: "\ead4";
}
.ri-book-3-line:before {
  content: "\ead5";
}
.ri-book-fill:before {
  content: "\ead6";
}
.ri-book-line:before {
  content: "\ead7";
}
.ri-book-marked-fill:before {
  content: "\ead8";
}
.ri-book-marked-line:before {
  content: "\ead9";
}
.ri-book-open-fill:before {
  content: "\eada";
}
.ri-book-open-line:before {
  content: "\eadb";
}
.ri-book-read-fill:before {
  content: "\eadc";
}
.ri-book-read-line:before {
  content: "\eadd";
}
.ri-booklet-fill:before {
  content: "\eade";
}
.ri-booklet-line:before {
  content: "\eadf";
}
.ri-bookmark-2-fill:before {
  content: "\eae0";
}
.ri-bookmark-2-line:before {
  content: "\eae1";
}
.ri-bookmark-3-fill:before {
  content: "\eae2";
}
.ri-bookmark-3-line:before {
  content: "\eae3";
}
.ri-bookmark-fill:before {
  content: "\eae4";
}
.ri-bookmark-line:before {
  content: "\eae5";
}
.ri-boxing-fill:before {
  content: "\eae6";
}
.ri-boxing-line:before {
  content: "\eae7";
}
.ri-braces-fill:before {
  content: "\eae8";
}
.ri-braces-line:before {
  content: "\eae9";
}
.ri-brackets-fill:before {
  content: "\eaea";
}
.ri-brackets-line:before {
  content: "\eaeb";
}
.ri-briefcase-2-fill:before {
  content: "\eaec";
}
.ri-briefcase-2-line:before {
  content: "\eaed";
}
.ri-briefcase-3-fill:before {
  content: "\eaee";
}
.ri-briefcase-3-line:before {
  content: "\eaef";
}
.ri-briefcase-4-fill:before {
  content: "\eaf0";
}
.ri-briefcase-4-line:before {
  content: "\eaf1";
}
.ri-briefcase-5-fill:before {
  content: "\eaf2";
}
.ri-briefcase-5-line:before {
  content: "\eaf3";
}
.ri-briefcase-fill:before {
  content: "\eaf4";
}
.ri-briefcase-line:before {
  content: "\eaf5";
}
.ri-bring-forward:before {
  content: "\eaf6";
}
.ri-bring-to-front:before {
  content: "\eaf7";
}
.ri-broadcast-fill:before {
  content: "\eaf8";
}
.ri-broadcast-line:before {
  content: "\eaf9";
}
.ri-brush-2-fill:before {
  content: "\eafa";
}
.ri-brush-2-line:before {
  content: "\eafb";
}
.ri-brush-3-fill:before {
  content: "\eafc";
}
.ri-brush-3-line:before {
  content: "\eafd";
}
.ri-brush-4-fill:before {
  content: "\eafe";
}
.ri-brush-4-line:before {
  content: "\eaff";
}
.ri-brush-fill:before {
  content: "\eb00";
}
.ri-brush-line:before {
  content: "\eb01";
}
.ri-bubble-chart-fill:before {
  content: "\eb02";
}
.ri-bubble-chart-line:before {
  content: "\eb03";
}
.ri-bug-2-fill:before {
  content: "\eb04";
}
.ri-bug-2-line:before {
  content: "\eb05";
}
.ri-bug-fill:before {
  content: "\eb06";
}
.ri-bug-line:before {
  content: "\eb07";
}
.ri-building-2-fill:before {
  content: "\eb08";
}
.ri-building-2-line:before {
  content: "\eb09";
}
.ri-building-3-fill:before {
  content: "\eb0a";
}
.ri-building-3-line:before {
  content: "\eb0b";
}
.ri-building-4-fill:before {
  content: "\eb0c";
}
.ri-building-4-line:before {
  content: "\eb0d";
}
.ri-building-fill:before {
  content: "\eb0e";
}
.ri-building-line:before {
  content: "\eb0f";
}
.ri-bus-2-fill:before {
  content: "\eb10";
}
.ri-bus-2-line:before {
  content: "\eb11";
}
.ri-bus-fill:before {
  content: "\eb12";
}
.ri-bus-line:before {
  content: "\eb13";
}
.ri-bus-wifi-fill:before {
  content: "\eb14";
}
.ri-bus-wifi-line:before {
  content: "\eb15";
}
.ri-cactus-fill:before {
  content: "\eb16";
}
.ri-cactus-line:before {
  content: "\eb17";
}
.ri-cake-2-fill:before {
  content: "\eb18";
}
.ri-cake-2-line:before {
  content: "\eb19";
}
.ri-cake-3-fill:before {
  content: "\eb1a";
}
.ri-cake-3-line:before {
  content: "\eb1b";
}
.ri-cake-fill:before {
  content: "\eb1c";
}
.ri-cake-line:before {
  content: "\eb1d";
}
.ri-calculator-fill:before {
  content: "\eb1e";
}
.ri-calculator-line:before {
  content: "\eb1f";
}
.ri-calendar-2-fill:before {
  content: "\eb20";
}
.ri-calendar-2-line:before {
  content: "\eb21";
}
.ri-calendar-check-fill:before {
  content: "\eb22";
}
.ri-calendar-check-line:before {
  content: "\eb23";
}
.ri-calendar-event-fill:before {
  content: "\eb24";
}
.ri-calendar-event-line:before {
  content: "\eb25";
}
.ri-calendar-fill:before {
  content: "\eb26";
}
.ri-calendar-line:before {
  content: "\eb27";
}
.ri-calendar-todo-fill:before {
  content: "\eb28";
}
.ri-calendar-todo-line:before {
  content: "\eb29";
}
.ri-camera-2-fill:before {
  content: "\eb2a";
}
.ri-camera-2-line:before {
  content: "\eb2b";
}
.ri-camera-3-fill:before {
  content: "\eb2c";
}
.ri-camera-3-line:before {
  content: "\eb2d";
}
.ri-camera-fill:before {
  content: "\eb2e";
}
.ri-camera-lens-fill:before {
  content: "\eb2f";
}
.ri-camera-lens-line:before {
  content: "\eb30";
}
.ri-camera-line:before {
  content: "\eb31";
}
.ri-camera-off-fill:before {
  content: "\eb32";
}
.ri-camera-off-line:before {
  content: "\eb33";
}
.ri-camera-switch-fill:before {
  content: "\eb34";
}
.ri-camera-switch-line:before {
  content: "\eb35";
}
.ri-capsule-fill:before {
  content: "\eb36";
}
.ri-capsule-line:before {
  content: "\eb37";
}
.ri-car-fill:before {
  content: "\eb38";
}
.ri-car-line:before {
  content: "\eb39";
}
.ri-car-washing-fill:before {
  content: "\eb3a";
}
.ri-car-washing-line:before {
  content: "\eb3b";
}
.ri-caravan-fill:before {
  content: "\eb3c";
}
.ri-caravan-line:before {
  content: "\eb3d";
}
.ri-cast-fill:before {
  content: "\eb3e";
}
.ri-cast-line:before {
  content: "\eb3f";
}
.ri-cellphone-fill:before {
  content: "\eb40";
}
.ri-cellphone-line:before {
  content: "\eb41";
}
.ri-celsius-fill:before {
  content: "\eb42";
}
.ri-celsius-line:before {
  content: "\eb43";
}
.ri-centos-fill:before {
  content: "\eb44";
}
.ri-centos-line:before {
  content: "\eb45";
}
.ri-character-recognition-fill:before {
  content: "\eb46";
}
.ri-character-recognition-line:before {
  content: "\eb47";
}
.ri-charging-pile-2-fill:before {
  content: "\eb48";
}
.ri-charging-pile-2-line:before {
  content: "\eb49";
}
.ri-charging-pile-fill:before {
  content: "\eb4a";
}
.ri-charging-pile-line:before {
  content: "\eb4b";
}
.ri-chat-1-fill:before {
  content: "\eb4c";
}
.ri-chat-1-line:before {
  content: "\eb4d";
}
.ri-chat-2-fill:before {
  content: "\eb4e";
}
.ri-chat-2-line:before {
  content: "\eb4f";
}
.ri-chat-3-fill:before {
  content: "\eb50";
}
.ri-chat-3-line:before {
  content: "\eb51";
}
.ri-chat-4-fill:before {
  content: "\eb52";
}
.ri-chat-4-line:before {
  content: "\eb53";
}
.ri-chat-check-fill:before {
  content: "\eb54";
}
.ri-chat-check-line:before {
  content: "\eb55";
}
.ri-chat-delete-fill:before {
  content: "\eb56";
}
.ri-chat-delete-line:before {
  content: "\eb57";
}
.ri-chat-download-fill:before {
  content: "\eb58";
}
.ri-chat-download-line:before {
  content: "\eb59";
}
.ri-chat-follow-up-fill:before {
  content: "\eb5a";
}
.ri-chat-follow-up-line:before {
  content: "\eb5b";
}
.ri-chat-forward-fill:before {
  content: "\eb5c";
}
.ri-chat-forward-line:before {
  content: "\eb5d";
}
.ri-chat-heart-fill:before {
  content: "\eb5e";
}
.ri-chat-heart-line:before {
  content: "\eb5f";
}
.ri-chat-history-fill:before {
  content: "\eb60";
}
.ri-chat-history-line:before {
  content: "\eb61";
}
.ri-chat-new-fill:before {
  content: "\eb62";
}
.ri-chat-new-line:before {
  content: "\eb63";
}
.ri-chat-off-fill:before {
  content: "\eb64";
}
.ri-chat-off-line:before {
  content: "\eb65";
}
.ri-chat-poll-fill:before {
  content: "\eb66";
}
.ri-chat-poll-line:before {
  content: "\eb67";
}
.ri-chat-private-fill:before {
  content: "\eb68";
}
.ri-chat-private-line:before {
  content: "\eb69";
}
.ri-chat-quote-fill:before {
  content: "\eb6a";
}
.ri-chat-quote-line:before {
  content: "\eb6b";
}
.ri-chat-settings-fill:before {
  content: "\eb6c";
}
.ri-chat-settings-line:before {
  content: "\eb6d";
}
.ri-chat-smile-2-fill:before {
  content: "\eb6e";
}
.ri-chat-smile-2-line:before {
  content: "\eb6f";
}
.ri-chat-smile-3-fill:before {
  content: "\eb70";
}
.ri-chat-smile-3-line:before {
  content: "\eb71";
}
.ri-chat-smile-fill:before {
  content: "\eb72";
}
.ri-chat-smile-line:before {
  content: "\eb73";
}
.ri-chat-upload-fill:before {
  content: "\eb74";
}
.ri-chat-upload-line:before {
  content: "\eb75";
}
.ri-chat-voice-fill:before {
  content: "\eb76";
}
.ri-chat-voice-line:before {
  content: "\eb77";
}
.ri-check-double-fill:before {
  content: "\eb78";
}
.ri-check-double-line:before {
  content: "\eb79";
}
.ri-check-fill:before {
  content: "\eb7a";
}
.ri-check-line:before {
  content: "\eb7b";
}
.ri-checkbox-blank-circle-fill:before {
  content: "\eb7c";
}
.ri-checkbox-blank-circle-line:before {
  content: "\eb7d";
}
.ri-checkbox-blank-fill:before {
  content: "\eb7e";
}
.ri-checkbox-blank-line:before {
  content: "\eb7f";
}
.ri-checkbox-circle-fill:before {
  content: "\eb80";
}
.ri-checkbox-circle-line:before {
  content: "\eb81";
}
.ri-checkbox-fill:before {
  content: "\eb82";
}
.ri-checkbox-indeterminate-fill:before {
  content: "\eb83";
}
.ri-checkbox-indeterminate-line:before {
  content: "\eb84";
}
.ri-checkbox-line:before {
  content: "\eb85";
}
.ri-checkbox-multiple-blank-fill:before {
  content: "\eb86";
}
.ri-checkbox-multiple-blank-line:before {
  content: "\eb87";
}
.ri-checkbox-multiple-fill:before {
  content: "\eb88";
}
.ri-checkbox-multiple-line:before {
  content: "\eb89";
}
.ri-china-railway-fill:before {
  content: "\eb8a";
}
.ri-china-railway-line:before {
  content: "\eb8b";
}
.ri-chrome-fill:before {
  content: "\eb8c";
}
.ri-chrome-line:before {
  content: "\eb8d";
}
.ri-clapperboard-fill:before {
  content: "\eb8e";
}
.ri-clapperboard-line:before {
  content: "\eb8f";
}
.ri-clipboard-fill:before {
  content: "\eb90";
}
.ri-clipboard-line:before {
  content: "\eb91";
}
.ri-clockwise-2-fill:before {
  content: "\eb92";
}
.ri-clockwise-2-line:before {
  content: "\eb93";
}
.ri-clockwise-fill:before {
  content: "\eb94";
}
.ri-clockwise-line:before {
  content: "\eb95";
}
.ri-close-circle-fill:before {
  content: "\eb96";
}
.ri-close-circle-line:before {
  content: "\eb97";
}
.ri-close-fill:before {
  content: "\eb98";
}
.ri-close-line:before {
  content: "\eb99";
}
.ri-closed-captioning-fill:before {
  content: "\eb9a";
}
.ri-closed-captioning-line:before {
  content: "\eb9b";
}
.ri-cloud-fill:before {
  content: "\eb9c";
}
.ri-cloud-line:before {
  content: "\eb9d";
}
.ri-cloud-off-fill:before {
  content: "\eb9e";
}
.ri-cloud-off-line:before {
  content: "\eb9f";
}
.ri-cloud-windy-fill:before {
  content: "\eba0";
}
.ri-cloud-windy-line:before {
  content: "\eba1";
}
.ri-cloudy-2-fill:before {
  content: "\eba2";
}
.ri-cloudy-2-line:before {
  content: "\eba3";
}
.ri-cloudy-fill:before {
  content: "\eba4";
}
.ri-cloudy-line:before {
  content: "\eba5";
}
.ri-code-box-fill:before {
  content: "\eba6";
}
.ri-code-box-line:before {
  content: "\eba7";
}
.ri-code-fill:before {
  content: "\eba8";
}
.ri-code-line:before {
  content: "\eba9";
}
.ri-code-s-fill:before {
  content: "\ebaa";
}
.ri-code-s-line:before {
  content: "\ebab";
}
.ri-code-s-slash-fill:before {
  content: "\ebac";
}
.ri-code-s-slash-line:before {
  content: "\ebad";
}
.ri-code-view:before {
  content: "\ebae";
}
.ri-codepen-fill:before {
  content: "\ebaf";
}
.ri-codepen-line:before {
  content: "\ebb0";
}
.ri-coin-fill:before {
  content: "\ebb1";
}
.ri-coin-line:before {
  content: "\ebb2";
}
.ri-coins-fill:before {
  content: "\ebb3";
}
.ri-coins-line:before {
  content: "\ebb4";
}
.ri-collage-fill:before {
  content: "\ebb5";
}
.ri-collage-line:before {
  content: "\ebb6";
}
.ri-command-fill:before {
  content: "\ebb7";
}
.ri-command-line:before {
  content: "\ebb8";
}
.ri-community-fill:before {
  content: "\ebb9";
}
.ri-community-line:before {
  content: "\ebba";
}
.ri-compass-2-fill:before {
  content: "\ebbb";
}
.ri-compass-2-line:before {
  content: "\ebbc";
}
.ri-compass-3-fill:before {
  content: "\ebbd";
}
.ri-compass-3-line:before {
  content: "\ebbe";
}
.ri-compass-4-fill:before {
  content: "\ebbf";
}
.ri-compass-4-line:before {
  content: "\ebc0";
}
.ri-compass-discover-fill:before {
  content: "\ebc1";
}
.ri-compass-discover-line:before {
  content: "\ebc2";
}
.ri-compass-fill:before {
  content: "\ebc3";
}
.ri-compass-line:before {
  content: "\ebc4";
}
.ri-compasses-2-fill:before {
  content: "\ebc5";
}
.ri-compasses-2-line:before {
  content: "\ebc6";
}
.ri-compasses-fill:before {
  content: "\ebc7";
}
.ri-compasses-line:before {
  content: "\ebc8";
}
.ri-computer-fill:before {
  content: "\ebc9";
}
.ri-computer-line:before {
  content: "\ebca";
}
.ri-contacts-book-2-fill:before {
  content: "\ebcb";
}
.ri-contacts-book-2-line:before {
  content: "\ebcc";
}
.ri-contacts-book-fill:before {
  content: "\ebcd";
}
.ri-contacts-book-line:before {
  content: "\ebce";
}
.ri-contacts-book-upload-fill:before {
  content: "\ebcf";
}
.ri-contacts-book-upload-line:before {
  content: "\ebd0";
}
.ri-contacts-fill:before {
  content: "\ebd1";
}
.ri-contacts-line:before {
  content: "\ebd2";
}
.ri-contrast-2-fill:before {
  content: "\ebd3";
}
.ri-contrast-2-line:before {
  content: "\ebd4";
}
.ri-contrast-drop-2-fill:before {
  content: "\ebd5";
}
.ri-contrast-drop-2-line:before {
  content: "\ebd6";
}
.ri-contrast-drop-fill:before {
  content: "\ebd7";
}
.ri-contrast-drop-line:before {
  content: "\ebd8";
}
.ri-contrast-fill:before {
  content: "\ebd9";
}
.ri-contrast-line:before {
  content: "\ebda";
}
.ri-copper-coin-fill:before {
  content: "\ebdb";
}
.ri-copper-coin-line:before {
  content: "\ebdc";
}
.ri-copper-diamond-fill:before {
  content: "\ebdd";
}
.ri-copper-diamond-line:before {
  content: "\ebde";
}
.ri-copyleft-fill:before {
  content: "\ebdf";
}
.ri-copyleft-line:before {
  content: "\ebe0";
}
.ri-copyright-fill:before {
  content: "\ebe1";
}
.ri-copyright-line:before {
  content: "\ebe2";
}
.ri-coreos-fill:before {
  content: "\ebe3";
}
.ri-coreos-line:before {
  content: "\ebe4";
}
.ri-coupon-2-fill:before {
  content: "\ebe5";
}
.ri-coupon-2-line:before {
  content: "\ebe6";
}
.ri-coupon-3-fill:before {
  content: "\ebe7";
}
.ri-coupon-3-line:before {
  content: "\ebe8";
}
.ri-coupon-4-fill:before {
  content: "\ebe9";
}
.ri-coupon-4-line:before {
  content: "\ebea";
}
.ri-coupon-5-fill:before {
  content: "\ebeb";
}
.ri-coupon-5-line:before {
  content: "\ebec";
}
.ri-coupon-fill:before {
  content: "\ebed";
}
.ri-coupon-line:before {
  content: "\ebee";
}
.ri-cpu-fill:before {
  content: "\ebef";
}
.ri-cpu-line:before {
  content: "\ebf0";
}
.ri-creative-commons-by-fill:before {
  content: "\ebf1";
}
.ri-creative-commons-by-line:before {
  content: "\ebf2";
}
.ri-creative-commons-fill:before {
  content: "\ebf3";
}
.ri-creative-commons-line:before {
  content: "\ebf4";
}
.ri-creative-commons-nc-fill:before {
  content: "\ebf5";
}
.ri-creative-commons-nc-line:before {
  content: "\ebf6";
}
.ri-creative-commons-nd-fill:before {
  content: "\ebf7";
}
.ri-creative-commons-nd-line:before {
  content: "\ebf8";
}
.ri-creative-commons-sa-fill:before {
  content: "\ebf9";
}
.ri-creative-commons-sa-line:before {
  content: "\ebfa";
}
.ri-creative-commons-zero-fill:before {
  content: "\ebfb";
}
.ri-creative-commons-zero-line:before {
  content: "\ebfc";
}
.ri-criminal-fill:before {
  content: "\ebfd";
}
.ri-criminal-line:before {
  content: "\ebfe";
}
.ri-crop-2-fill:before {
  content: "\ebff";
}
.ri-crop-2-line:before {
  content: "\ec00";
}
.ri-crop-fill:before {
  content: "\ec01";
}
.ri-crop-line:before {
  content: "\ec02";
}
.ri-css3-fill:before {
  content: "\ec03";
}
.ri-css3-line:before {
  content: "\ec04";
}
.ri-cup-fill:before {
  content: "\ec05";
}
.ri-cup-line:before {
  content: "\ec06";
}
.ri-currency-fill:before {
  content: "\ec07";
}
.ri-currency-line:before {
  content: "\ec08";
}
.ri-cursor-fill:before {
  content: "\ec09";
}
.ri-cursor-line:before {
  content: "\ec0a";
}
.ri-customer-service-2-fill:before {
  content: "\ec0b";
}
.ri-customer-service-2-line:before {
  content: "\ec0c";
}
.ri-customer-service-fill:before {
  content: "\ec0d";
}
.ri-customer-service-line:before {
  content: "\ec0e";
}
.ri-dashboard-2-fill:before {
  content: "\ec0f";
}
.ri-dashboard-2-line:before {
  content: "\ec10";
}
.ri-dashboard-3-fill:before {
  content: "\ec11";
}
.ri-dashboard-3-line:before {
  content: "\ec12";
}
.ri-dashboard-fill:before {
  content: "\ec13";
}
.ri-dashboard-line:before {
  content: "\ec14";
}
.ri-database-2-fill:before {
  content: "\ec15";
}
.ri-database-2-line:before {
  content: "\ec16";
}
.ri-database-fill:before {
  content: "\ec17";
}
.ri-database-line:before {
  content: "\ec18";
}
.ri-delete-back-2-fill:before {
  content: "\ec19";
}
.ri-delete-back-2-line:before {
  content: "\ec1a";
}
.ri-delete-back-fill:before {
  content: "\ec1b";
}
.ri-delete-back-line:before {
  content: "\ec1c";
}
.ri-delete-bin-2-fill:before {
  content: "\ec1d";
}
.ri-delete-bin-2-line:before {
  content: "\ec1e";
}
.ri-delete-bin-3-fill:before {
  content: "\ec1f";
}
.ri-delete-bin-3-line:before {
  content: "\ec20";
}
.ri-delete-bin-4-fill:before {
  content: "\ec21";
}
.ri-delete-bin-4-line:before {
  content: "\ec22";
}
.ri-delete-bin-5-fill:before {
  content: "\ec23";
}
.ri-delete-bin-5-line:before {
  content: "\ec24";
}
.ri-delete-bin-6-fill:before {
  content: "\ec25";
}
.ri-delete-bin-6-line:before {
  content: "\ec26";
}
.ri-delete-bin-7-fill:before {
  content: "\ec27";
}
.ri-delete-bin-7-line:before {
  content: "\ec28";
}
.ri-delete-bin-fill:before {
  content: "\ec29";
}
.ri-delete-bin-line:before {
  content: "\ec2a";
}
.ri-delete-column:before {
  content: "\ec2b";
}
.ri-delete-row:before {
  content: "\ec2c";
}
.ri-device-fill:before {
  content: "\ec2d";
}
.ri-device-line:before {
  content: "\ec2e";
}
.ri-device-recover-fill:before {
  content: "\ec2f";
}
.ri-device-recover-line:before {
  content: "\ec30";
}
.ri-dingding-fill:before {
  content: "\ec31";
}
.ri-dingding-line:before {
  content: "\ec32";
}
.ri-direction-fill:before {
  content: "\ec33";
}
.ri-direction-line:before {
  content: "\ec34";
}
.ri-disc-fill:before {
  content: "\ec35";
}
.ri-disc-line:before {
  content: "\ec36";
}
.ri-discord-fill:before {
  content: "\ec37";
}
.ri-discord-line:before {
  content: "\ec38";
}
.ri-discuss-fill:before {
  content: "\ec39";
}
.ri-discuss-line:before {
  content: "\ec3a";
}
.ri-dislike-fill:before {
  content: "\ec3b";
}
.ri-dislike-line:before {
  content: "\ec3c";
}
.ri-disqus-fill:before {
  content: "\ec3d";
}
.ri-disqus-line:before {
  content: "\ec3e";
}
.ri-divide-fill:before {
  content: "\ec3f";
}
.ri-divide-line:before {
  content: "\ec40";
}
.ri-donut-chart-fill:before {
  content: "\ec41";
}
.ri-donut-chart-line:before {
  content: "\ec42";
}
.ri-door-closed-fill:before {
  content: "\ec43";
}
.ri-door-closed-line:before {
  content: "\ec44";
}
.ri-door-fill:before {
  content: "\ec45";
}
.ri-door-line:before {
  content: "\ec46";
}
.ri-door-lock-box-fill:before {
  content: "\ec47";
}
.ri-door-lock-box-line:before {
  content: "\ec48";
}
.ri-door-lock-fill:before {
  content: "\ec49";
}
.ri-door-lock-line:before {
  content: "\ec4a";
}
.ri-door-open-fill:before {
  content: "\ec4b";
}
.ri-door-open-line:before {
  content: "\ec4c";
}
.ri-dossier-fill:before {
  content: "\ec4d";
}
.ri-dossier-line:before {
  content: "\ec4e";
}
.ri-douban-fill:before {
  content: "\ec4f";
}
.ri-douban-line:before {
  content: "\ec50";
}
.ri-double-quotes-l:before {
  content: "\ec51";
}
.ri-double-quotes-r:before {
  content: "\ec52";
}
.ri-download-2-fill:before {
  content: "\ec53";
}
.ri-download-2-line:before {
  content: "\ec54";
}
.ri-download-cloud-2-fill:before {
  content: "\ec55";
}
.ri-download-cloud-2-line:before {
  content: "\ec56";
}
.ri-download-cloud-fill:before {
  content: "\ec57";
}
.ri-download-cloud-line:before {
  content: "\ec58";
}
.ri-download-fill:before {
  content: "\ec59";
}
.ri-download-line:before {
  content: "\ec5a";
}
.ri-draft-fill:before {
  content: "\ec5b";
}
.ri-draft-line:before {
  content: "\ec5c";
}
.ri-drag-drop-fill:before {
  content: "\ec5d";
}
.ri-drag-drop-line:before {
  content: "\ec5e";
}
.ri-drag-move-2-fill:before {
  content: "\ec5f";
}
.ri-drag-move-2-line:before {
  content: "\ec60";
}
.ri-drag-move-fill:before {
  content: "\ec61";
}
.ri-drag-move-line:before {
  content: "\ec62";
}
.ri-dribbble-fill:before {
  content: "\ec63";
}
.ri-dribbble-line:before {
  content: "\ec64";
}
.ri-drive-fill:before {
  content: "\ec65";
}
.ri-drive-line:before {
  content: "\ec66";
}
.ri-drizzle-fill:before {
  content: "\ec67";
}
.ri-drizzle-line:before {
  content: "\ec68";
}
.ri-drop-fill:before {
  content: "\ec69";
}
.ri-drop-line:before {
  content: "\ec6a";
}
.ri-dropbox-fill:before {
  content: "\ec6b";
}
.ri-dropbox-line:before {
  content: "\ec6c";
}
.ri-dual-sim-1-fill:before {
  content: "\ec6d";
}
.ri-dual-sim-1-line:before {
  content: "\ec6e";
}
.ri-dual-sim-2-fill:before {
  content: "\ec6f";
}
.ri-dual-sim-2-line:before {
  content: "\ec70";
}
.ri-dv-fill:before {
  content: "\ec71";
}
.ri-dv-line:before {
  content: "\ec72";
}
.ri-dvd-fill:before {
  content: "\ec73";
}
.ri-dvd-line:before {
  content: "\ec74";
}
.ri-e-bike-2-fill:before {
  content: "\ec75";
}
.ri-e-bike-2-line:before {
  content: "\ec76";
}
.ri-e-bike-fill:before {
  content: "\ec77";
}
.ri-e-bike-line:before {
  content: "\ec78";
}
.ri-earth-fill:before {
  content: "\ec79";
}
.ri-earth-line:before {
  content: "\ec7a";
}
.ri-earthquake-fill:before {
  content: "\ec7b";
}
.ri-earthquake-line:before {
  content: "\ec7c";
}
.ri-edge-fill:before {
  content: "\ec7d";
}
.ri-edge-line:before {
  content: "\ec7e";
}
.ri-edit-2-fill:before {
  content: "\ec7f";
}
.ri-edit-2-line:before {
  content: "\ec80";
}
.ri-edit-box-fill:before {
  content: "\ec81";
}
.ri-edit-box-line:before {
  content: "\ec82";
}
.ri-edit-circle-fill:before {
  content: "\ec83";
}
.ri-edit-circle-line:before {
  content: "\ec84";
}
.ri-edit-fill:before {
  content: "\ec85";
}
.ri-edit-line:before {
  content: "\ec86";
}
.ri-eject-fill:before {
  content: "\ec87";
}
.ri-eject-line:before {
  content: "\ec88";
}
.ri-emotion-2-fill:before {
  content: "\ec89";
}
.ri-emotion-2-line:before {
  content: "\ec8a";
}
.ri-emotion-fill:before {
  content: "\ec8b";
}
.ri-emotion-happy-fill:before {
  content: "\ec8c";
}
.ri-emotion-happy-line:before {
  content: "\ec8d";
}
.ri-emotion-laugh-fill:before {
  content: "\ec8e";
}
.ri-emotion-laugh-line:before {
  content: "\ec8f";
}
.ri-emotion-line:before {
  content: "\ec90";
}
.ri-emotion-normal-fill:before {
  content: "\ec91";
}
.ri-emotion-normal-line:before {
  content: "\ec92";
}
.ri-emotion-sad-fill:before {
  content: "\ec93";
}
.ri-emotion-sad-line:before {
  content: "\ec94";
}
.ri-emotion-unhappy-fill:before {
  content: "\ec95";
}
.ri-emotion-unhappy-line:before {
  content: "\ec96";
}
.ri-empathize-fill:before {
  content: "\ec97";
}
.ri-empathize-line:before {
  content: "\ec98";
}
.ri-emphasis-cn:before {
  content: "\ec99";
}
.ri-emphasis:before {
  content: "\ec9a";
}
.ri-english-input:before {
  content: "\ec9b";
}
.ri-equalizer-fill:before {
  content: "\ec9c";
}
.ri-equalizer-line:before {
  content: "\ec9d";
}
.ri-eraser-fill:before {
  content: "\ec9e";
}
.ri-eraser-line:before {
  content: "\ec9f";
}
.ri-error-warning-fill:before {
  content: "\eca0";
}
.ri-error-warning-line:before {
  content: "\eca1";
}
.ri-evernote-fill:before {
  content: "\eca2";
}
.ri-evernote-line:before {
  content: "\eca3";
}
.ri-exchange-box-fill:before {
  content: "\eca4";
}
.ri-exchange-box-line:before {
  content: "\eca5";
}
.ri-exchange-cny-fill:before {
  content: "\eca6";
}
.ri-exchange-cny-line:before {
  content: "\eca7";
}
.ri-exchange-dollar-fill:before {
  content: "\eca8";
}
.ri-exchange-dollar-line:before {
  content: "\eca9";
}
.ri-exchange-fill:before {
  content: "\ecaa";
}
.ri-exchange-funds-fill:before {
  content: "\ecab";
}
.ri-exchange-funds-line:before {
  content: "\ecac";
}
.ri-exchange-line:before {
  content: "\ecad";
}
.ri-external-link-fill:before {
  content: "\ecae";
}
.ri-external-link-line:before {
  content: "\ecaf";
}
.ri-eye-2-fill:before {
  content: "\ecb0";
}
.ri-eye-2-line:before {
  content: "\ecb1";
}
.ri-eye-close-fill:before {
  content: "\ecb2";
}
.ri-eye-close-line:before {
  content: "\ecb3";
}
.ri-eye-fill:before {
  content: "\ecb4";
}
.ri-eye-line:before {
  content: "\ecb5";
}
.ri-eye-off-fill:before {
  content: "\ecb6";
}
.ri-eye-off-line:before {
  content: "\ecb7";
}
.ri-facebook-box-fill:before {
  content: "\ecb8";
}
.ri-facebook-box-line:before {
  content: "\ecb9";
}
.ri-facebook-circle-fill:before {
  content: "\ecba";
}
.ri-facebook-circle-line:before {
  content: "\ecbb";
}
.ri-facebook-fill:before {
  content: "\ecbc";
}
.ri-facebook-line:before {
  content: "\ecbd";
}
.ri-fahrenheit-fill:before {
  content: "\ecbe";
}
.ri-fahrenheit-line:before {
  content: "\ecbf";
}
.ri-feedback-fill:before {
  content: "\ecc0";
}
.ri-feedback-line:before {
  content: "\ecc1";
}
.ri-file-2-fill:before {
  content: "\ecc2";
}
.ri-file-2-line:before {
  content: "\ecc3";
}
.ri-file-3-fill:before {
  content: "\ecc4";
}
.ri-file-3-line:before {
  content: "\ecc5";
}
.ri-file-4-fill:before {
  content: "\ecc6";
}
.ri-file-4-line:before {
  content: "\ecc7";
}
.ri-file-add-fill:before {
  content: "\ecc8";
}
.ri-file-add-line:before {
  content: "\ecc9";
}
.ri-file-chart-2-fill:before {
  content: "\ecca";
}
.ri-file-chart-2-line:before {
  content: "\eccb";
}
.ri-file-chart-fill:before {
  content: "\eccc";
}
.ri-file-chart-line:before {
  content: "\eccd";
}
.ri-file-cloud-fill:before {
  content: "\ecce";
}
.ri-file-cloud-line:before {
  content: "\eccf";
}
.ri-file-code-fill:before {
  content: "\ecd0";
}
.ri-file-code-line:before {
  content: "\ecd1";
}
.ri-file-copy-2-fill:before {
  content: "\ecd2";
}
.ri-file-copy-2-line:before {
  content: "\ecd3";
}
.ri-file-copy-fill:before {
  content: "\ecd4";
}
.ri-file-copy-line:before {
  content: "\ecd5";
}
.ri-file-damage-fill:before {
  content: "\ecd6";
}
.ri-file-damage-line:before {
  content: "\ecd7";
}
.ri-file-download-fill:before {
  content: "\ecd8";
}
.ri-file-download-line:before {
  content: "\ecd9";
}
.ri-file-edit-fill:before {
  content: "\ecda";
}
.ri-file-edit-line:before {
  content: "\ecdb";
}
.ri-file-excel-2-fill:before {
  content: "\ecdc";
}
.ri-file-excel-2-line:before {
  content: "\ecdd";
}
.ri-file-excel-fill:before {
  content: "\ecde";
}
.ri-file-excel-line:before {
  content: "\ecdf";
}
.ri-file-fill:before {
  content: "\ece0";
}
.ri-file-forbid-fill:before {
  content: "\ece1";
}
.ri-file-forbid-line:before {
  content: "\ece2";
}
.ri-file-gif-fill:before {
  content: "\ece3";
}
.ri-file-gif-line:before {
  content: "\ece4";
}
.ri-file-history-fill:before {
  content: "\ece5";
}
.ri-file-history-line:before {
  content: "\ece6";
}
.ri-file-hwp-fill:before {
  content: "\ece7";
}
.ri-file-hwp-line:before {
  content: "\ece8";
}
.ri-file-info-fill:before {
  content: "\ece9";
}
.ri-file-info-line:before {
  content: "\ecea";
}
.ri-file-line:before {
  content: "\eceb";
}
.ri-file-list-2-fill:before {
  content: "\ecec";
}
.ri-file-list-2-line:before {
  content: "\eced";
}
.ri-file-list-3-fill:before {
  content: "\ecee";
}
.ri-file-list-3-line:before {
  content: "\ecef";
}
.ri-file-list-fill:before {
  content: "\ecf0";
}
.ri-file-list-line:before {
  content: "\ecf1";
}
.ri-file-lock-fill:before {
  content: "\ecf2";
}
.ri-file-lock-line:before {
  content: "\ecf3";
}
.ri-file-marked-fill:before {
  content: "\ecf4";
}
.ri-file-marked-line:before {
  content: "\ecf5";
}
.ri-file-music-fill:before {
  content: "\ecf6";
}
.ri-file-music-line:before {
  content: "\ecf7";
}
.ri-file-paper-2-fill:before {
  content: "\ecf8";
}
.ri-file-paper-2-line:before {
  content: "\ecf9";
}
.ri-file-paper-fill:before {
  content: "\ecfa";
}
.ri-file-paper-line:before {
  content: "\ecfb";
}
.ri-file-pdf-fill:before {
  content: "\ecfc";
}
.ri-file-pdf-line:before {
  content: "\ecfd";
}
.ri-file-ppt-2-fill:before {
  content: "\ecfe";
}
.ri-file-ppt-2-line:before {
  content: "\ecff";
}
.ri-file-ppt-fill:before {
  content: "\ed00";
}
.ri-file-ppt-line:before {
  content: "\ed01";
}
.ri-file-reduce-fill:before {
  content: "\ed02";
}
.ri-file-reduce-line:before {
  content: "\ed03";
}
.ri-file-search-fill:before {
  content: "\ed04";
}
.ri-file-search-line:before {
  content: "\ed05";
}
.ri-file-settings-fill:before {
  content: "\ed06";
}
.ri-file-settings-line:before {
  content: "\ed07";
}
.ri-file-shield-2-fill:before {
  content: "\ed08";
}
.ri-file-shield-2-line:before {
  content: "\ed09";
}
.ri-file-shield-fill:before {
  content: "\ed0a";
}
.ri-file-shield-line:before {
  content: "\ed0b";
}
.ri-file-shred-fill:before {
  content: "\ed0c";
}
.ri-file-shred-line:before {
  content: "\ed0d";
}
.ri-file-text-fill:before {
  content: "\ed0e";
}
.ri-file-text-line:before {
  content: "\ed0f";
}
.ri-file-transfer-fill:before {
  content: "\ed10";
}
.ri-file-transfer-line:before {
  content: "\ed11";
}
.ri-file-unknow-fill:before {
  content: "\ed12";
}
.ri-file-unknow-line:before {
  content: "\ed13";
}
.ri-file-upload-fill:before {
  content: "\ed14";
}
.ri-file-upload-line:before {
  content: "\ed15";
}
.ri-file-user-fill:before {
  content: "\ed16";
}
.ri-file-user-line:before {
  content: "\ed17";
}
.ri-file-warning-fill:before {
  content: "\ed18";
}
.ri-file-warning-line:before {
  content: "\ed19";
}
.ri-file-word-2-fill:before {
  content: "\ed1a";
}
.ri-file-word-2-line:before {
  content: "\ed1b";
}
.ri-file-word-fill:before {
  content: "\ed1c";
}
.ri-file-word-line:before {
  content: "\ed1d";
}
.ri-file-zip-fill:before {
  content: "\ed1e";
}
.ri-file-zip-line:before {
  content: "\ed1f";
}
.ri-film-fill:before {
  content: "\ed20";
}
.ri-film-line:before {
  content: "\ed21";
}
.ri-filter-2-fill:before {
  content: "\ed22";
}
.ri-filter-2-line:before {
  content: "\ed23";
}
.ri-filter-3-fill:before {
  content: "\ed24";
}
.ri-filter-3-line:before {
  content: "\ed25";
}
.ri-filter-fill:before {
  content: "\ed26";
}
.ri-filter-line:before {
  content: "\ed27";
}
.ri-filter-off-fill:before {
  content: "\ed28";
}
.ri-filter-off-line:before {
  content: "\ed29";
}
.ri-find-replace-fill:before {
  content: "\ed2a";
}
.ri-find-replace-line:before {
  content: "\ed2b";
}
.ri-finder-fill:before {
  content: "\ed2c";
}
.ri-finder-line:before {
  content: "\ed2d";
}
.ri-fingerprint-2-fill:before {
  content: "\ed2e";
}
.ri-fingerprint-2-line:before {
  content: "\ed2f";
}
.ri-fingerprint-fill:before {
  content: "\ed30";
}
.ri-fingerprint-line:before {
  content: "\ed31";
}
.ri-fire-fill:before {
  content: "\ed32";
}
.ri-fire-line:before {
  content: "\ed33";
}
.ri-firefox-fill:before {
  content: "\ed34";
}
.ri-firefox-line:before {
  content: "\ed35";
}
.ri-first-aid-kit-fill:before {
  content: "\ed36";
}
.ri-first-aid-kit-line:before {
  content: "\ed37";
}
.ri-flag-2-fill:before {
  content: "\ed38";
}
.ri-flag-2-line:before {
  content: "\ed39";
}
.ri-flag-fill:before {
  content: "\ed3a";
}
.ri-flag-line:before {
  content: "\ed3b";
}
.ri-flashlight-fill:before {
  content: "\ed3c";
}
.ri-flashlight-line:before {
  content: "\ed3d";
}
.ri-flask-fill:before {
  content: "\ed3e";
}
.ri-flask-line:before {
  content: "\ed3f";
}
.ri-flight-land-fill:before {
  content: "\ed40";
}
.ri-flight-land-line:before {
  content: "\ed41";
}
.ri-flight-takeoff-fill:before {
  content: "\ed42";
}
.ri-flight-takeoff-line:before {
  content: "\ed43";
}
.ri-flood-fill:before {
  content: "\ed44";
}
.ri-flood-line:before {
  content: "\ed45";
}
.ri-flow-chart:before {
  content: "\ed46";
}
.ri-flutter-fill:before {
  content: "\ed47";
}
.ri-flutter-line:before {
  content: "\ed48";
}
.ri-focus-2-fill:before {
  content: "\ed49";
}
.ri-focus-2-line:before {
  content: "\ed4a";
}
.ri-focus-3-fill:before {
  content: "\ed4b";
}
.ri-focus-3-line:before {
  content: "\ed4c";
}
.ri-focus-fill:before {
  content: "\ed4d";
}
.ri-focus-line:before {
  content: "\ed4e";
}
.ri-foggy-fill:before {
  content: "\ed4f";
}
.ri-foggy-line:before {
  content: "\ed50";
}
.ri-folder-2-fill:before {
  content: "\ed51";
}
.ri-folder-2-line:before {
  content: "\ed52";
}
.ri-folder-3-fill:before {
  content: "\ed53";
}
.ri-folder-3-line:before {
  content: "\ed54";
}
.ri-folder-4-fill:before {
  content: "\ed55";
}
.ri-folder-4-line:before {
  content: "\ed56";
}
.ri-folder-5-fill:before {
  content: "\ed57";
}
.ri-folder-5-line:before {
  content: "\ed58";
}
.ri-folder-add-fill:before {
  content: "\ed59";
}
.ri-folder-add-line:before {
  content: "\ed5a";
}
.ri-folder-chart-2-fill:before {
  content: "\ed5b";
}
.ri-folder-chart-2-line:before {
  content: "\ed5c";
}
.ri-folder-chart-fill:before {
  content: "\ed5d";
}
.ri-folder-chart-line:before {
  content: "\ed5e";
}
.ri-folder-download-fill:before {
  content: "\ed5f";
}
.ri-folder-download-line:before {
  content: "\ed60";
}
.ri-folder-fill:before {
  content: "\ed61";
}
.ri-folder-forbid-fill:before {
  content: "\ed62";
}
.ri-folder-forbid-line:before {
  content: "\ed63";
}
.ri-folder-history-fill:before {
  content: "\ed64";
}
.ri-folder-history-line:before {
  content: "\ed65";
}
.ri-folder-info-fill:before {
  content: "\ed66";
}
.ri-folder-info-line:before {
  content: "\ed67";
}
.ri-folder-keyhole-fill:before {
  content: "\ed68";
}
.ri-folder-keyhole-line:before {
  content: "\ed69";
}
.ri-folder-line:before {
  content: "\ed6a";
}
.ri-folder-lock-fill:before {
  content: "\ed6b";
}
.ri-folder-lock-line:before {
  content: "\ed6c";
}
.ri-folder-music-fill:before {
  content: "\ed6d";
}
.ri-folder-music-line:before {
  content: "\ed6e";
}
.ri-folder-open-fill:before {
  content: "\ed6f";
}
.ri-folder-open-line:before {
  content: "\ed70";
}
.ri-folder-received-fill:before {
  content: "\ed71";
}
.ri-folder-received-line:before {
  content: "\ed72";
}
.ri-folder-reduce-fill:before {
  content: "\ed73";
}
.ri-folder-reduce-line:before {
  content: "\ed74";
}
.ri-folder-settings-fill:before {
  content: "\ed75";
}
.ri-folder-settings-line:before {
  content: "\ed76";
}
.ri-folder-shared-fill:before {
  content: "\ed77";
}
.ri-folder-shared-line:before {
  content: "\ed78";
}
.ri-folder-shield-2-fill:before {
  content: "\ed79";
}
.ri-folder-shield-2-line:before {
  content: "\ed7a";
}
.ri-folder-shield-fill:before {
  content: "\ed7b";
}
.ri-folder-shield-line:before {
  content: "\ed7c";
}
.ri-folder-transfer-fill:before {
  content: "\ed7d";
}
.ri-folder-transfer-line:before {
  content: "\ed7e";
}
.ri-folder-unknow-fill:before {
  content: "\ed7f";
}
.ri-folder-unknow-line:before {
  content: "\ed80";
}
.ri-folder-upload-fill:before {
  content: "\ed81";
}
.ri-folder-upload-line:before {
  content: "\ed82";
}
.ri-folder-user-fill:before {
  content: "\ed83";
}
.ri-folder-user-line:before {
  content: "\ed84";
}
.ri-folder-warning-fill:before {
  content: "\ed85";
}
.ri-folder-warning-line:before {
  content: "\ed86";
}
.ri-folder-zip-fill:before {
  content: "\ed87";
}
.ri-folder-zip-line:before {
  content: "\ed88";
}
.ri-folders-fill:before {
  content: "\ed89";
}
.ri-folders-line:before {
  content: "\ed8a";
}
.ri-font-color:before {
  content: "\ed8b";
}
.ri-font-size-2:before {
  content: "\ed8c";
}
.ri-font-size:before {
  content: "\ed8d";
}
.ri-football-fill:before {
  content: "\ed8e";
}
.ri-football-line:before {
  content: "\ed8f";
}
.ri-footprint-fill:before {
  content: "\ed90";
}
.ri-footprint-line:before {
  content: "\ed91";
}
.ri-forbid-2-fill:before {
  content: "\ed92";
}
.ri-forbid-2-line:before {
  content: "\ed93";
}
.ri-forbid-fill:before {
  content: "\ed94";
}
.ri-forbid-line:before {
  content: "\ed95";
}
.ri-format-clear:before {
  content: "\ed96";
}
.ri-fridge-fill:before {
  content: "\ed97";
}
.ri-fridge-line:before {
  content: "\ed98";
}
.ri-fullscreen-exit-fill:before {
  content: "\ed99";
}
.ri-fullscreen-exit-line:before {
  content: "\ed9a";
}
.ri-fullscreen-fill:before {
  content: "\ed9b";
}
.ri-fullscreen-line:before {
  content: "\ed9c";
}
.ri-function-fill:before {
  content: "\ed9d";
}
.ri-function-line:before {
  content: "\ed9e";
}
.ri-functions:before {
  content: "\ed9f";
}
.ri-funds-box-fill:before {
  content: "\eda0";
}
.ri-funds-box-line:before {
  content: "\eda1";
}
.ri-funds-fill:before {
  content: "\eda2";
}
.ri-funds-line:before {
  content: "\eda3";
}
.ri-gallery-fill:before {
  content: "\eda4";
}
.ri-gallery-line:before {
  content: "\eda5";
}
.ri-gallery-upload-fill:before {
  content: "\eda6";
}
.ri-gallery-upload-line:before {
  content: "\eda7";
}
.ri-game-fill:before {
  content: "\eda8";
}
.ri-game-line:before {
  content: "\eda9";
}
.ri-gamepad-fill:before {
  content: "\edaa";
}
.ri-gamepad-line:before {
  content: "\edab";
}
.ri-gas-station-fill:before {
  content: "\edac";
}
.ri-gas-station-line:before {
  content: "\edad";
}
.ri-gatsby-fill:before {
  content: "\edae";
}
.ri-gatsby-line:before {
  content: "\edaf";
}
.ri-genderless-fill:before {
  content: "\edb0";
}
.ri-genderless-line:before {
  content: "\edb1";
}
.ri-ghost-2-fill:before {
  content: "\edb2";
}
.ri-ghost-2-line:before {
  content: "\edb3";
}
.ri-ghost-fill:before {
  content: "\edb4";
}
.ri-ghost-line:before {
  content: "\edb5";
}
.ri-ghost-smile-fill:before {
  content: "\edb6";
}
.ri-ghost-smile-line:before {
  content: "\edb7";
}
.ri-gift-2-fill:before {
  content: "\edb8";
}
.ri-gift-2-line:before {
  content: "\edb9";
}
.ri-gift-fill:before {
  content: "\edba";
}
.ri-gift-line:before {
  content: "\edbb";
}
.ri-git-branch-fill:before {
  content: "\edbc";
}
.ri-git-branch-line:before {
  content: "\edbd";
}
.ri-git-commit-fill:before {
  content: "\edbe";
}
.ri-git-commit-line:before {
  content: "\edbf";
}
.ri-git-merge-fill:before {
  content: "\edc0";
}
.ri-git-merge-line:before {
  content: "\edc1";
}
.ri-git-pull-request-fill:before {
  content: "\edc2";
}
.ri-git-pull-request-line:before {
  content: "\edc3";
}
.ri-git-repository-commits-fill:before {
  content: "\edc4";
}
.ri-git-repository-commits-line:before {
  content: "\edc5";
}
.ri-git-repository-fill:before {
  content: "\edc6";
}
.ri-git-repository-line:before {
  content: "\edc7";
}
.ri-git-repository-private-fill:before {
  content: "\edc8";
}
.ri-git-repository-private-line:before {
  content: "\edc9";
}
.ri-github-fill:before {
  content: "\edca";
}
.ri-github-line:before {
  content: "\edcb";
}
.ri-gitlab-fill:before {
  content: "\edcc";
}
.ri-gitlab-line:before {
  content: "\edcd";
}
.ri-global-fill:before {
  content: "\edce";
}
.ri-global-line:before {
  content: "\edcf";
}
.ri-globe-fill:before {
  content: "\edd0";
}
.ri-globe-line:before {
  content: "\edd1";
}
.ri-goblet-fill:before {
  content: "\edd2";
}
.ri-goblet-line:before {
  content: "\edd3";
}
.ri-google-fill:before {
  content: "\edd4";
}
.ri-google-line:before {
  content: "\edd5";
}
.ri-google-play-fill:before {
  content: "\edd6";
}
.ri-google-play-line:before {
  content: "\edd7";
}
.ri-government-fill:before {
  content: "\edd8";
}
.ri-government-line:before {
  content: "\edd9";
}
.ri-gps-fill:before {
  content: "\edda";
}
.ri-gps-line:before {
  content: "\eddb";
}
.ri-gradienter-fill:before {
  content: "\eddc";
}
.ri-gradienter-line:before {
  content: "\eddd";
}
.ri-grid-fill:before {
  content: "\edde";
}
.ri-grid-line:before {
  content: "\eddf";
}
.ri-group-2-fill:before {
  content: "\ede0";
}
.ri-group-2-line:before {
  content: "\ede1";
}
.ri-group-fill:before {
  content: "\ede2";
}
.ri-group-line:before {
  content: "\ede3";
}
.ri-guide-fill:before {
  content: "\ede4";
}
.ri-guide-line:before {
  content: "\ede5";
}
.ri-h-1:before {
  content: "\ede6";
}
.ri-h-2:before {
  content: "\ede7";
}
.ri-h-3:before {
  content: "\ede8";
}
.ri-h-4:before {
  content: "\ede9";
}
.ri-h-5:before {
  content: "\edea";
}
.ri-h-6:before {
  content: "\edeb";
}
.ri-hail-fill:before {
  content: "\edec";
}
.ri-hail-line:before {
  content: "\eded";
}
.ri-hammer-fill:before {
  content: "\edee";
}
.ri-hammer-line:before {
  content: "\edef";
}
.ri-hand-coin-fill:before {
  content: "\edf0";
}
.ri-hand-coin-line:before {
  content: "\edf1";
}
.ri-hand-heart-fill:before {
  content: "\edf2";
}
.ri-hand-heart-line:before {
  content: "\edf3";
}
.ri-hand-sanitizer-fill:before {
  content: "\edf4";
}
.ri-hand-sanitizer-line:before {
  content: "\edf5";
}
.ri-handbag-fill:before {
  content: "\edf6";
}
.ri-handbag-line:before {
  content: "\edf7";
}
.ri-hard-drive-2-fill:before {
  content: "\edf8";
}
.ri-hard-drive-2-line:before {
  content: "\edf9";
}
.ri-hard-drive-fill:before {
  content: "\edfa";
}
.ri-hard-drive-line:before {
  content: "\edfb";
}
.ri-hashtag:before {
  content: "\edfc";
}
.ri-haze-2-fill:before {
  content: "\edfd";
}
.ri-haze-2-line:before {
  content: "\edfe";
}
.ri-haze-fill:before {
  content: "\edff";
}
.ri-haze-line:before {
  content: "\ee00";
}
.ri-hd-fill:before {
  content: "\ee01";
}
.ri-hd-line:before {
  content: "\ee02";
}
.ri-heading:before {
  content: "\ee03";
}
.ri-headphone-fill:before {
  content: "\ee04";
}
.ri-headphone-line:before {
  content: "\ee05";
}
.ri-health-book-fill:before {
  content: "\ee06";
}
.ri-health-book-line:before {
  content: "\ee07";
}
.ri-heart-2-fill:before {
  content: "\ee08";
}
.ri-heart-2-line:before {
  content: "\ee09";
}
.ri-heart-3-fill:before {
  content: "\ee0a";
}
.ri-heart-3-line:before {
  content: "\ee0b";
}
.ri-heart-add-fill:before {
  content: "\ee0c";
}
.ri-heart-add-line:before {
  content: "\ee0d";
}
.ri-heart-fill:before {
  content: "\ee0e";
}
.ri-heart-line:before {
  content: "\ee0f";
}
.ri-heart-pulse-fill:before {
  content: "\ee10";
}
.ri-heart-pulse-line:before {
  content: "\ee11";
}
.ri-hearts-fill:before {
  content: "\ee12";
}
.ri-hearts-line:before {
  content: "\ee13";
}
.ri-heavy-showers-fill:before {
  content: "\ee14";
}
.ri-heavy-showers-line:before {
  content: "\ee15";
}
.ri-history-fill:before {
  content: "\ee16";
}
.ri-history-line:before {
  content: "\ee17";
}
.ri-home-2-fill:before {
  content: "\ee18";
}
.ri-home-2-line:before {
  content: "\ee19";
}
.ri-home-3-fill:before {
  content: "\ee1a";
}
.ri-home-3-line:before {
  content: "\ee1b";
}
.ri-home-4-fill:before {
  content: "\ee1c";
}
.ri-home-4-line:before {
  content: "\ee1d";
}
.ri-home-5-fill:before {
  content: "\ee1e";
}
.ri-home-5-line:before {
  content: "\ee1f";
}
.ri-home-6-fill:before {
  content: "\ee20";
}
.ri-home-6-line:before {
  content: "\ee21";
}
.ri-home-7-fill:before {
  content: "\ee22";
}
.ri-home-7-line:before {
  content: "\ee23";
}
.ri-home-8-fill:before {
  content: "\ee24";
}
.ri-home-8-line:before {
  content: "\ee25";
}
.ri-home-fill:before {
  content: "\ee26";
}
.ri-home-gear-fill:before {
  content: "\ee27";
}
.ri-home-gear-line:before {
  content: "\ee28";
}
.ri-home-heart-fill:before {
  content: "\ee29";
}
.ri-home-heart-line:before {
  content: "\ee2a";
}
.ri-home-line:before {
  content: "\ee2b";
}
.ri-home-smile-2-fill:before {
  content: "\ee2c";
}
.ri-home-smile-2-line:before {
  content: "\ee2d";
}
.ri-home-smile-fill:before {
  content: "\ee2e";
}
.ri-home-smile-line:before {
  content: "\ee2f";
}
.ri-home-wifi-fill:before {
  content: "\ee30";
}
.ri-home-wifi-line:before {
  content: "\ee31";
}
.ri-honor-of-kings-fill:before {
  content: "\ee32";
}
.ri-honor-of-kings-line:before {
  content: "\ee33";
}
.ri-honour-fill:before {
  content: "\ee34";
}
.ri-honour-line:before {
  content: "\ee35";
}
.ri-hospital-fill:before {
  content: "\ee36";
}
.ri-hospital-line:before {
  content: "\ee37";
}
.ri-hotel-bed-fill:before {
  content: "\ee38";
}
.ri-hotel-bed-line:before {
  content: "\ee39";
}
.ri-hotel-fill:before {
  content: "\ee3a";
}
.ri-hotel-line:before {
  content: "\ee3b";
}
.ri-hotspot-fill:before {
  content: "\ee3c";
}
.ri-hotspot-line:before {
  content: "\ee3d";
}
.ri-hq-fill:before {
  content: "\ee3e";
}
.ri-hq-line:before {
  content: "\ee3f";
}
.ri-html5-fill:before {
  content: "\ee40";
}
.ri-html5-line:before {
  content: "\ee41";
}
.ri-ie-fill:before {
  content: "\ee42";
}
.ri-ie-line:before {
  content: "\ee43";
}
.ri-image-2-fill:before {
  content: "\ee44";
}
.ri-image-2-line:before {
  content: "\ee45";
}
.ri-image-add-fill:before {
  content: "\ee46";
}
.ri-image-add-line:before {
  content: "\ee47";
}
.ri-image-edit-fill:before {
  content: "\ee48";
}
.ri-image-edit-line:before {
  content: "\ee49";
}
.ri-image-fill:before {
  content: "\ee4a";
}
.ri-image-line:before {
  content: "\ee4b";
}
.ri-inbox-archive-fill:before {
  content: "\ee4c";
}
.ri-inbox-archive-line:before {
  content: "\ee4d";
}
.ri-inbox-fill:before {
  content: "\ee4e";
}
.ri-inbox-line:before {
  content: "\ee4f";
}
.ri-inbox-unarchive-fill:before {
  content: "\ee50";
}
.ri-inbox-unarchive-line:before {
  content: "\ee51";
}
.ri-increase-decrease-fill:before {
  content: "\ee52";
}
.ri-increase-decrease-line:before {
  content: "\ee53";
}
.ri-indent-decrease:before {
  content: "\ee54";
}
.ri-indent-increase:before {
  content: "\ee55";
}
.ri-indeterminate-circle-fill:before {
  content: "\ee56";
}
.ri-indeterminate-circle-line:before {
  content: "\ee57";
}
.ri-information-fill:before {
  content: "\ee58";
}
.ri-information-line:before {
  content: "\ee59";
}
.ri-infrared-thermometer-fill:before {
  content: "\ee5a";
}
.ri-infrared-thermometer-line:before {
  content: "\ee5b";
}
.ri-ink-bottle-fill:before {
  content: "\ee5c";
}
.ri-ink-bottle-line:before {
  content: "\ee5d";
}
.ri-input-cursor-move:before {
  content: "\ee5e";
}
.ri-input-method-fill:before {
  content: "\ee5f";
}
.ri-input-method-line:before {
  content: "\ee60";
}
.ri-insert-column-left:before {
  content: "\ee61";
}
.ri-insert-column-right:before {
  content: "\ee62";
}
.ri-insert-row-bottom:before {
  content: "\ee63";
}
.ri-insert-row-top:before {
  content: "\ee64";
}
.ri-instagram-fill:before {
  content: "\ee65";
}
.ri-instagram-line:before {
  content: "\ee66";
}
.ri-install-fill:before {
  content: "\ee67";
}
.ri-install-line:before {
  content: "\ee68";
}
.ri-invision-fill:before {
  content: "\ee69";
}
.ri-invision-line:before {
  content: "\ee6a";
}
.ri-italic:before {
  content: "\ee6b";
}
.ri-kakao-talk-fill:before {
  content: "\ee6c";
}
.ri-kakao-talk-line:before {
  content: "\ee6d";
}
.ri-key-2-fill:before {
  content: "\ee6e";
}
.ri-key-2-line:before {
  content: "\ee6f";
}
.ri-key-fill:before {
  content: "\ee70";
}
.ri-key-line:before {
  content: "\ee71";
}
.ri-keyboard-box-fill:before {
  content: "\ee72";
}
.ri-keyboard-box-line:before {
  content: "\ee73";
}
.ri-keyboard-fill:before {
  content: "\ee74";
}
.ri-keyboard-line:before {
  content: "\ee75";
}
.ri-keynote-fill:before {
  content: "\ee76";
}
.ri-keynote-line:before {
  content: "\ee77";
}
.ri-knife-blood-fill:before {
  content: "\ee78";
}
.ri-knife-blood-line:before {
  content: "\ee79";
}
.ri-knife-fill:before {
  content: "\ee7a";
}
.ri-knife-line:before {
  content: "\ee7b";
}
.ri-landscape-fill:before {
  content: "\ee7c";
}
.ri-landscape-line:before {
  content: "\ee7d";
}
.ri-layout-2-fill:before {
  content: "\ee7e";
}
.ri-layout-2-line:before {
  content: "\ee7f";
}
.ri-layout-3-fill:before {
  content: "\ee80";
}
.ri-layout-3-line:before {
  content: "\ee81";
}
.ri-layout-4-fill:before {
  content: "\ee82";
}
.ri-layout-4-line:before {
  content: "\ee83";
}
.ri-layout-5-fill:before {
  content: "\ee84";
}
.ri-layout-5-line:before {
  content: "\ee85";
}
.ri-layout-6-fill:before {
  content: "\ee86";
}
.ri-layout-6-line:before {
  content: "\ee87";
}
.ri-layout-bottom-2-fill:before {
  content: "\ee88";
}
.ri-layout-bottom-2-line:before {
  content: "\ee89";
}
.ri-layout-bottom-fill:before {
  content: "\ee8a";
}
.ri-layout-bottom-line:before {
  content: "\ee8b";
}
.ri-layout-column-fill:before {
  content: "\ee8c";
}
.ri-layout-column-line:before {
  content: "\ee8d";
}
.ri-layout-fill:before {
  content: "\ee8e";
}
.ri-layout-grid-fill:before {
  content: "\ee8f";
}
.ri-layout-grid-line:before {
  content: "\ee90";
}
.ri-layout-left-2-fill:before {
  content: "\ee91";
}
.ri-layout-left-2-line:before {
  content: "\ee92";
}
.ri-layout-left-fill:before {
  content: "\ee93";
}
.ri-layout-left-line:before {
  content: "\ee94";
}
.ri-layout-line:before {
  content: "\ee95";
}
.ri-layout-masonry-fill:before {
  content: "\ee96";
}
.ri-layout-masonry-line:before {
  content: "\ee97";
}
.ri-layout-right-2-fill:before {
  content: "\ee98";
}
.ri-layout-right-2-line:before {
  content: "\ee99";
}
.ri-layout-right-fill:before {
  content: "\ee9a";
}
.ri-layout-right-line:before {
  content: "\ee9b";
}
.ri-layout-row-fill:before {
  content: "\ee9c";
}
.ri-layout-row-line:before {
  content: "\ee9d";
}
.ri-layout-top-2-fill:before {
  content: "\ee9e";
}
.ri-layout-top-2-line:before {
  content: "\ee9f";
}
.ri-layout-top-fill:before {
  content: "\eea0";
}
.ri-layout-top-line:before {
  content: "\eea1";
}
.ri-leaf-fill:before {
  content: "\eea2";
}
.ri-leaf-line:before {
  content: "\eea3";
}
.ri-lifebuoy-fill:before {
  content: "\eea4";
}
.ri-lifebuoy-line:before {
  content: "\eea5";
}
.ri-lightbulb-fill:before {
  content: "\eea6";
}
.ri-lightbulb-flash-fill:before {
  content: "\eea7";
}
.ri-lightbulb-flash-line:before {
  content: "\eea8";
}
.ri-lightbulb-line:before {
  content: "\eea9";
}
.ri-line-chart-fill:before {
  content: "\eeaa";
}
.ri-line-chart-line:before {
  content: "\eeab";
}
.ri-line-fill:before {
  content: "\eeac";
}
.ri-line-height:before {
  content: "\eead";
}
.ri-line-line:before {
  content: "\eeae";
}
.ri-link-m:before {
  content: "\eeaf";
}
.ri-link-unlink-m:before {
  content: "\eeb0";
}
.ri-link-unlink:before {
  content: "\eeb1";
}
.ri-link:before {
  content: "\eeb2";
}
.ri-linkedin-box-fill:before {
  content: "\eeb3";
}
.ri-linkedin-box-line:before {
  content: "\eeb4";
}
.ri-linkedin-fill:before {
  content: "\eeb5";
}
.ri-linkedin-line:before {
  content: "\eeb6";
}
.ri-links-fill:before {
  content: "\eeb7";
}
.ri-links-line:before {
  content: "\eeb8";
}
.ri-list-check-2:before {
  content: "\eeb9";
}
.ri-list-check:before {
  content: "\eeba";
}
.ri-list-ordered:before {
  content: "\eebb";
}
.ri-list-settings-fill:before {
  content: "\eebc";
}
.ri-list-settings-line:before {
  content: "\eebd";
}
.ri-list-unordered:before {
  content: "\eebe";
}
.ri-live-fill:before {
  content: "\eebf";
}
.ri-live-line:before {
  content: "\eec0";
}
.ri-loader-2-fill:before {
  content: "\eec1";
}
.ri-loader-2-line:before {
  content: "\eec2";
}
.ri-loader-3-fill:before {
  content: "\eec3";
}
.ri-loader-3-line:before {
  content: "\eec4";
}
.ri-loader-4-fill:before {
  content: "\eec5";
}
.ri-loader-4-line:before {
  content: "\eec6";
}
.ri-loader-5-fill:before {
  content: "\eec7";
}
.ri-loader-5-line:before {
  content: "\eec8";
}
.ri-loader-fill:before {
  content: "\eec9";
}
.ri-loader-line:before {
  content: "\eeca";
}
.ri-lock-2-fill:before {
  content: "\eecb";
}
.ri-lock-2-line:before {
  content: "\eecc";
}
.ri-lock-fill:before {
  content: "\eecd";
}
.ri-lock-line:before {
  content: "\eece";
}
.ri-lock-password-fill:before {
  content: "\eecf";
}
.ri-lock-password-line:before {
  content: "\eed0";
}
.ri-lock-unlock-fill:before {
  content: "\eed1";
}
.ri-lock-unlock-line:before {
  content: "\eed2";
}
.ri-login-box-fill:before {
  content: "\eed3";
}
.ri-login-box-line:before {
  content: "\eed4";
}
.ri-login-circle-fill:before {
  content: "\eed5";
}
.ri-login-circle-line:before {
  content: "\eed6";
}
.ri-logout-box-fill:before {
  content: "\eed7";
}
.ri-logout-box-line:before {
  content: "\eed8";
}
.ri-logout-box-r-fill:before {
  content: "\eed9";
}
.ri-logout-box-r-line:before {
  content: "\eeda";
}
.ri-logout-circle-fill:before {
  content: "\eedb";
}
.ri-logout-circle-line:before {
  content: "\eedc";
}
.ri-logout-circle-r-fill:before {
  content: "\eedd";
}
.ri-logout-circle-r-line:before {
  content: "\eede";
}
.ri-luggage-cart-fill:before {
  content: "\eedf";
}
.ri-luggage-cart-line:before {
  content: "\eee0";
}
.ri-luggage-deposit-fill:before {
  content: "\eee1";
}
.ri-luggage-deposit-line:before {
  content: "\eee2";
}
.ri-lungs-fill:before {
  content: "\eee3";
}
.ri-lungs-line:before {
  content: "\eee4";
}
.ri-mac-fill:before {
  content: "\eee5";
}
.ri-mac-line:before {
  content: "\eee6";
}
.ri-macbook-fill:before {
  content: "\eee7";
}
.ri-macbook-line:before {
  content: "\eee8";
}
.ri-magic-fill:before {
  content: "\eee9";
}
.ri-magic-line:before {
  content: "\eeea";
}
.ri-mail-add-fill:before {
  content: "\eeeb";
}
.ri-mail-add-line:before {
  content: "\eeec";
}
.ri-mail-check-fill:before {
  content: "\eeed";
}
.ri-mail-check-line:before {
  content: "\eeee";
}
.ri-mail-close-fill:before {
  content: "\eeef";
}
.ri-mail-close-line:before {
  content: "\eef0";
}
.ri-mail-download-fill:before {
  content: "\eef1";
}
.ri-mail-download-line:before {
  content: "\eef2";
}
.ri-mail-fill:before {
  content: "\eef3";
}
.ri-mail-forbid-fill:before {
  content: "\eef4";
}
.ri-mail-forbid-line:before {
  content: "\eef5";
}
.ri-mail-line:before {
  content: "\eef6";
}
.ri-mail-lock-fill:before {
  content: "\eef7";
}
.ri-mail-lock-line:before {
  content: "\eef8";
}
.ri-mail-open-fill:before {
  content: "\eef9";
}
.ri-mail-open-line:before {
  content: "\eefa";
}
.ri-mail-send-fill:before {
  content: "\eefb";
}
.ri-mail-send-line:before {
  content: "\eefc";
}
.ri-mail-settings-fill:before {
  content: "\eefd";
}
.ri-mail-settings-line:before {
  content: "\eefe";
}
.ri-mail-star-fill:before {
  content: "\eeff";
}
.ri-mail-star-line:before {
  content: "\ef00";
}
.ri-mail-unread-fill:before {
  content: "\ef01";
}
.ri-mail-unread-line:before {
  content: "\ef02";
}
.ri-mail-volume-fill:before {
  content: "\ef03";
}
.ri-mail-volume-line:before {
  content: "\ef04";
}
.ri-map-2-fill:before {
  content: "\ef05";
}
.ri-map-2-line:before {
  content: "\ef06";
}
.ri-map-fill:before {
  content: "\ef07";
}
.ri-map-line:before {
  content: "\ef08";
}
.ri-map-pin-2-fill:before {
  content: "\ef09";
}
.ri-map-pin-2-line:before {
  content: "\ef0a";
}
.ri-map-pin-3-fill:before {
  content: "\ef0b";
}
.ri-map-pin-3-line:before {
  content: "\ef0c";
}
.ri-map-pin-4-fill:before {
  content: "\ef0d";
}
.ri-map-pin-4-line:before {
  content: "\ef0e";
}
.ri-map-pin-5-fill:before {
  content: "\ef0f";
}
.ri-map-pin-5-line:before {
  content: "\ef10";
}
.ri-map-pin-add-fill:before {
  content: "\ef11";
}
.ri-map-pin-add-line:before {
  content: "\ef12";
}
.ri-map-pin-fill:before {
  content: "\ef13";
}
.ri-map-pin-line:before {
  content: "\ef14";
}
.ri-map-pin-range-fill:before {
  content: "\ef15";
}
.ri-map-pin-range-line:before {
  content: "\ef16";
}
.ri-map-pin-time-fill:before {
  content: "\ef17";
}
.ri-map-pin-time-line:before {
  content: "\ef18";
}
.ri-map-pin-user-fill:before {
  content: "\ef19";
}
.ri-map-pin-user-line:before {
  content: "\ef1a";
}
.ri-mark-pen-fill:before {
  content: "\ef1b";
}
.ri-mark-pen-line:before {
  content: "\ef1c";
}
.ri-markdown-fill:before {
  content: "\ef1d";
}
.ri-markdown-line:before {
  content: "\ef1e";
}
.ri-markup-fill:before {
  content: "\ef1f";
}
.ri-markup-line:before {
  content: "\ef20";
}
.ri-mastercard-fill:before {
  content: "\ef21";
}
.ri-mastercard-line:before {
  content: "\ef22";
}
.ri-mastodon-fill:before {
  content: "\ef23";
}
.ri-mastodon-line:before {
  content: "\ef24";
}
.ri-medal-2-fill:before {
  content: "\ef25";
}
.ri-medal-2-line:before {
  content: "\ef26";
}
.ri-medal-fill:before {
  content: "\ef27";
}
.ri-medal-line:before {
  content: "\ef28";
}
.ri-medicine-bottle-fill:before {
  content: "\ef29";
}
.ri-medicine-bottle-line:before {
  content: "\ef2a";
}
.ri-medium-fill:before {
  content: "\ef2b";
}
.ri-medium-line:before {
  content: "\ef2c";
}
.ri-men-fill:before {
  content: "\ef2d";
}
.ri-men-line:before {
  content: "\ef2e";
}
.ri-mental-health-fill:before {
  content: "\ef2f";
}
.ri-mental-health-line:before {
  content: "\ef30";
}
.ri-menu-2-fill:before {
  content: "\ef31";
}
.ri-menu-2-line:before {
  content: "\ef32";
}
.ri-menu-3-fill:before {
  content: "\ef33";
}
.ri-menu-3-line:before {
  content: "\ef34";
}
.ri-menu-4-fill:before {
  content: "\ef35";
}
.ri-menu-4-line:before {
  content: "\ef36";
}
.ri-menu-5-fill:before {
  content: "\ef37";
}
.ri-menu-5-line:before {
  content: "\ef38";
}
.ri-menu-add-fill:before {
  content: "\ef39";
}
.ri-menu-add-line:before {
  content: "\ef3a";
}
.ri-menu-fill:before {
  content: "\ef3b";
}
.ri-menu-fold-fill:before {
  content: "\ef3c";
}
.ri-menu-fold-line:before {
  content: "\ef3d";
}
.ri-menu-line:before {
  content: "\ef3e";
}
.ri-menu-unfold-fill:before {
  content: "\ef3f";
}
.ri-menu-unfold-line:before {
  content: "\ef40";
}
.ri-merge-cells-horizontal:before {
  content: "\ef41";
}
.ri-merge-cells-vertical:before {
  content: "\ef42";
}
.ri-message-2-fill:before {
  content: "\ef43";
}
.ri-message-2-line:before {
  content: "\ef44";
}
.ri-message-3-fill:before {
  content: "\ef45";
}
.ri-message-3-line:before {
  content: "\ef46";
}
.ri-message-fill:before {
  content: "\ef47";
}
.ri-message-line:before {
  content: "\ef48";
}
.ri-messenger-fill:before {
  content: "\ef49";
}
.ri-messenger-line:before {
  content: "\ef4a";
}
.ri-meteor-fill:before {
  content: "\ef4b";
}
.ri-meteor-line:before {
  content: "\ef4c";
}
.ri-mic-2-fill:before {
  content: "\ef4d";
}
.ri-mic-2-line:before {
  content: "\ef4e";
}
.ri-mic-fill:before {
  content: "\ef4f";
}
.ri-mic-line:before {
  content: "\ef50";
}
.ri-mic-off-fill:before {
  content: "\ef51";
}
.ri-mic-off-line:before {
  content: "\ef52";
}
.ri-mickey-fill:before {
  content: "\ef53";
}
.ri-mickey-line:before {
  content: "\ef54";
}
.ri-microscope-fill:before {
  content: "\ef55";
}
.ri-microscope-line:before {
  content: "\ef56";
}
.ri-microsoft-fill:before {
  content: "\ef57";
}
.ri-microsoft-line:before {
  content: "\ef58";
}
.ri-mind-map:before {
  content: "\ef59";
}
.ri-mini-program-fill:before {
  content: "\ef5a";
}
.ri-mini-program-line:before {
  content: "\ef5b";
}
.ri-mist-fill:before {
  content: "\ef5c";
}
.ri-mist-line:before {
  content: "\ef5d";
}
.ri-money-cny-box-fill:before {
  content: "\ef5e";
}
.ri-money-cny-box-line:before {
  content: "\ef5f";
}
.ri-money-cny-circle-fill:before {
  content: "\ef60";
}
.ri-money-cny-circle-line:before {
  content: "\ef61";
}
.ri-money-dollar-box-fill:before {
  content: "\ef62";
}
.ri-money-dollar-box-line:before {
  content: "\ef63";
}
.ri-money-dollar-circle-fill:before {
  content: "\ef64";
}
.ri-money-dollar-circle-line:before {
  content: "\ef65";
}
.ri-money-euro-box-fill:before {
  content: "\ef66";
}
.ri-money-euro-box-line:before {
  content: "\ef67";
}
.ri-money-euro-circle-fill:before {
  content: "\ef68";
}
.ri-money-euro-circle-line:before {
  content: "\ef69";
}
.ri-money-pound-box-fill:before {
  content: "\ef6a";
}
.ri-money-pound-box-line:before {
  content: "\ef6b";
}
.ri-money-pound-circle-fill:before {
  content: "\ef6c";
}
.ri-money-pound-circle-line:before {
  content: "\ef6d";
}
.ri-moon-clear-fill:before {
  content: "\ef6e";
}
.ri-moon-clear-line:before {
  content: "\ef6f";
}
.ri-moon-cloudy-fill:before {
  content: "\ef70";
}
.ri-moon-cloudy-line:before {
  content: "\ef71";
}
.ri-moon-fill:before {
  content: "\ef72";
}
.ri-moon-foggy-fill:before {
  content: "\ef73";
}
.ri-moon-foggy-line:before {
  content: "\ef74";
}
.ri-moon-line:before {
  content: "\ef75";
}
.ri-more-2-fill:before {
  content: "\ef76";
}
.ri-more-2-line:before {
  content: "\ef77";
}
.ri-more-fill:before {
  content: "\ef78";
}
.ri-more-line:before {
  content: "\ef79";
}
.ri-motorbike-fill:before {
  content: "\ef7a";
}
.ri-motorbike-line:before {
  content: "\ef7b";
}
.ri-mouse-fill:before {
  content: "\ef7c";
}
.ri-mouse-line:before {
  content: "\ef7d";
}
.ri-movie-2-fill:before {
  content: "\ef7e";
}
.ri-movie-2-line:before {
  content: "\ef7f";
}
.ri-movie-fill:before {
  content: "\ef80";
}
.ri-movie-line:before {
  content: "\ef81";
}
.ri-music-2-fill:before {
  content: "\ef82";
}
.ri-music-2-line:before {
  content: "\ef83";
}
.ri-music-fill:before {
  content: "\ef84";
}
.ri-music-line:before {
  content: "\ef85";
}
.ri-mv-fill:before {
  content: "\ef86";
}
.ri-mv-line:before {
  content: "\ef87";
}
.ri-navigation-fill:before {
  content: "\ef88";
}
.ri-navigation-line:before {
  content: "\ef89";
}
.ri-netease-cloud-music-fill:before {
  content: "\ef8a";
}
.ri-netease-cloud-music-line:before {
  content: "\ef8b";
}
.ri-netflix-fill:before {
  content: "\ef8c";
}
.ri-netflix-line:before {
  content: "\ef8d";
}
.ri-newspaper-fill:before {
  content: "\ef8e";
}
.ri-newspaper-line:before {
  content: "\ef8f";
}
.ri-node-tree:before {
  content: "\ef90";
}
.ri-notification-2-fill:before {
  content: "\ef91";
}
.ri-notification-2-line:before {
  content: "\ef92";
}
.ri-notification-3-fill:before {
  content: "\ef93";
}
.ri-notification-3-line:before {
  content: "\ef94";
}
.ri-notification-4-fill:before {
  content: "\ef95";
}
.ri-notification-4-line:before {
  content: "\ef96";
}
.ri-notification-badge-fill:before {
  content: "\ef97";
}
.ri-notification-badge-line:before {
  content: "\ef98";
}
.ri-notification-fill:before {
  content: "\ef99";
}
.ri-notification-line:before {
  content: "\ef9a";
}
.ri-notification-off-fill:before {
  content: "\ef9b";
}
.ri-notification-off-line:before {
  content: "\ef9c";
}
.ri-npmjs-fill:before {
  content: "\ef9d";
}
.ri-npmjs-line:before {
  content: "\ef9e";
}
.ri-number-0:before {
  content: "\ef9f";
}
.ri-number-1:before {
  content: "\efa0";
}
.ri-number-2:before {
  content: "\efa1";
}
.ri-number-3:before {
  content: "\efa2";
}
.ri-number-4:before {
  content: "\efa3";
}
.ri-number-5:before {
  content: "\efa4";
}
.ri-number-6:before {
  content: "\efa5";
}
.ri-number-7:before {
  content: "\efa6";
}
.ri-number-8:before {
  content: "\efa7";
}
.ri-number-9:before {
  content: "\efa8";
}
.ri-numbers-fill:before {
  content: "\efa9";
}
.ri-numbers-line:before {
  content: "\efaa";
}
.ri-nurse-fill:before {
  content: "\efab";
}
.ri-nurse-line:before {
  content: "\efac";
}
.ri-oil-fill:before {
  content: "\efad";
}
.ri-oil-line:before {
  content: "\efae";
}
.ri-omega:before {
  content: "\efaf";
}
.ri-open-arm-fill:before {
  content: "\efb0";
}
.ri-open-arm-line:before {
  content: "\efb1";
}
.ri-open-source-fill:before {
  content: "\efb2";
}
.ri-open-source-line:before {
  content: "\efb3";
}
.ri-opera-fill:before {
  content: "\efb4";
}
.ri-opera-line:before {
  content: "\efb5";
}
.ri-order-play-fill:before {
  content: "\efb6";
}
.ri-order-play-line:before {
  content: "\efb7";
}
.ri-organization-chart:before {
  content: "\efb8";
}
.ri-outlet-2-fill:before {
  content: "\efb9";
}
.ri-outlet-2-line:before {
  content: "\efba";
}
.ri-outlet-fill:before {
  content: "\efbb";
}
.ri-outlet-line:before {
  content: "\efbc";
}
.ri-page-separator:before {
  content: "\efbd";
}
.ri-pages-fill:before {
  content: "\efbe";
}
.ri-pages-line:before {
  content: "\efbf";
}
.ri-paint-brush-fill:before {
  content: "\efc0";
}
.ri-paint-brush-line:before {
  content: "\efc1";
}
.ri-paint-fill:before {
  content: "\efc2";
}
.ri-paint-line:before {
  content: "\efc3";
}
.ri-palette-fill:before {
  content: "\efc4";
}
.ri-palette-line:before {
  content: "\efc5";
}
.ri-pantone-fill:before {
  content: "\efc6";
}
.ri-pantone-line:before {
  content: "\efc7";
}
.ri-paragraph:before {
  content: "\efc8";
}
.ri-parent-fill:before {
  content: "\efc9";
}
.ri-parent-line:before {
  content: "\efca";
}
.ri-parentheses-fill:before {
  content: "\efcb";
}
.ri-parentheses-line:before {
  content: "\efcc";
}
.ri-parking-box-fill:before {
  content: "\efcd";
}
.ri-parking-box-line:before {
  content: "\efce";
}
.ri-parking-fill:before {
  content: "\efcf";
}
.ri-parking-line:before {
  content: "\efd0";
}
.ri-passport-fill:before {
  content: "\efd1";
}
.ri-passport-line:before {
  content: "\efd2";
}
.ri-patreon-fill:before {
  content: "\efd3";
}
.ri-patreon-line:before {
  content: "\efd4";
}
.ri-pause-circle-fill:before {
  content: "\efd5";
}
.ri-pause-circle-line:before {
  content: "\efd6";
}
.ri-pause-fill:before {
  content: "\efd7";
}
.ri-pause-line:before {
  content: "\efd8";
}
.ri-pause-mini-fill:before {
  content: "\efd9";
}
.ri-pause-mini-line:before {
  content: "\efda";
}
.ri-paypal-fill:before {
  content: "\efdb";
}
.ri-paypal-line:before {
  content: "\efdc";
}
.ri-pen-nib-fill:before {
  content: "\efdd";
}
.ri-pen-nib-line:before {
  content: "\efde";
}
.ri-pencil-fill:before {
  content: "\efdf";
}
.ri-pencil-line:before {
  content: "\efe0";
}
.ri-pencil-ruler-2-fill:before {
  content: "\efe1";
}
.ri-pencil-ruler-2-line:before {
  content: "\efe2";
}
.ri-pencil-ruler-fill:before {
  content: "\efe3";
}
.ri-pencil-ruler-line:before {
  content: "\efe4";
}
.ri-percent-fill:before {
  content: "\efe5";
}
.ri-percent-line:before {
  content: "\efe6";
}
.ri-phone-camera-fill:before {
  content: "\efe7";
}
.ri-phone-camera-line:before {
  content: "\efe8";
}
.ri-phone-fill:before {
  content: "\efe9";
}
.ri-phone-find-fill:before {
  content: "\efea";
}
.ri-phone-find-line:before {
  content: "\efeb";
}
.ri-phone-line:before {
  content: "\efec";
}
.ri-phone-lock-fill:before {
  content: "\efed";
}
.ri-phone-lock-line:before {
  content: "\efee";
}
.ri-picture-in-picture-2-fill:before {
  content: "\efef";
}
.ri-picture-in-picture-2-line:before {
  content: "\eff0";
}
.ri-picture-in-picture-exit-fill:before {
  content: "\eff1";
}
.ri-picture-in-picture-exit-line:before {
  content: "\eff2";
}
.ri-picture-in-picture-fill:before {
  content: "\eff3";
}
.ri-picture-in-picture-line:before {
  content: "\eff4";
}
.ri-pie-chart-2-fill:before {
  content: "\eff5";
}
.ri-pie-chart-2-line:before {
  content: "\eff6";
}
.ri-pie-chart-box-fill:before {
  content: "\eff7";
}
.ri-pie-chart-box-line:before {
  content: "\eff8";
}
.ri-pie-chart-fill:before {
  content: "\eff9";
}
.ri-pie-chart-line:before {
  content: "\effa";
}
.ri-pin-distance-fill:before {
  content: "\effb";
}
.ri-pin-distance-line:before {
  content: "\effc";
}
.ri-ping-pong-fill:before {
  content: "\effd";
}
.ri-ping-pong-line:before {
  content: "\effe";
}
.ri-pinterest-fill:before {
  content: "\efff";
}
.ri-pinterest-line:before {
  content: "\f000";
}
.ri-pinyin-input:before {
  content: "\f001";
}
.ri-pixelfed-fill:before {
  content: "\f002";
}
.ri-pixelfed-line:before {
  content: "\f003";
}
.ri-plane-fill:before {
  content: "\f004";
}
.ri-plane-line:before {
  content: "\f005";
}
.ri-plant-fill:before {
  content: "\f006";
}
.ri-plant-line:before {
  content: "\f007";
}
.ri-play-circle-fill:before {
  content: "\f008";
}
.ri-play-circle-line:before {
  content: "\f009";
}
.ri-play-fill:before {
  content: "\f00a";
}
.ri-play-line:before {
  content: "\f00b";
}
.ri-play-list-2-fill:before {
  content: "\f00c";
}
.ri-play-list-2-line:before {
  content: "\f00d";
}
.ri-play-list-add-fill:before {
  content: "\f00e";
}
.ri-play-list-add-line:before {
  content: "\f00f";
}
.ri-play-list-fill:before {
  content: "\f010";
}
.ri-play-list-line:before {
  content: "\f011";
}
.ri-play-mini-fill:before {
  content: "\f012";
}
.ri-play-mini-line:before {
  content: "\f013";
}
.ri-playstation-fill:before {
  content: "\f014";
}
.ri-playstation-line:before {
  content: "\f015";
}
.ri-plug-2-fill:before {
  content: "\f016";
}
.ri-plug-2-line:before {
  content: "\f017";
}
.ri-plug-fill:before {
  content: "\f018";
}
.ri-plug-line:before {
  content: "\f019";
}
.ri-polaroid-2-fill:before {
  content: "\f01a";
}
.ri-polaroid-2-line:before {
  content: "\f01b";
}
.ri-polaroid-fill:before {
  content: "\f01c";
}
.ri-polaroid-line:before {
  content: "\f01d";
}
.ri-police-car-fill:before {
  content: "\f01e";
}
.ri-police-car-line:before {
  content: "\f01f";
}
.ri-price-tag-2-fill:before {
  content: "\f020";
}
.ri-price-tag-2-line:before {
  content: "\f021";
}
.ri-price-tag-3-fill:before {
  content: "\f022";
}
.ri-price-tag-3-line:before {
  content: "\f023";
}
.ri-price-tag-fill:before {
  content: "\f024";
}
.ri-price-tag-line:before {
  content: "\f025";
}
.ri-printer-cloud-fill:before {
  content: "\f026";
}
.ri-printer-cloud-line:before {
  content: "\f027";
}
.ri-printer-fill:before {
  content: "\f028";
}
.ri-printer-line:before {
  content: "\f029";
}
.ri-product-hunt-fill:before {
  content: "\f02a";
}
.ri-product-hunt-line:before {
  content: "\f02b";
}
.ri-profile-fill:before {
  content: "\f02c";
}
.ri-profile-line:before {
  content: "\f02d";
}
.ri-projector-2-fill:before {
  content: "\f02e";
}
.ri-projector-2-line:before {
  content: "\f02f";
}
.ri-projector-fill:before {
  content: "\f030";
}
.ri-projector-line:before {
  content: "\f031";
}
.ri-psychotherapy-fill:before {
  content: "\f032";
}
.ri-psychotherapy-line:before {
  content: "\f033";
}
.ri-pulse-fill:before {
  content: "\f034";
}
.ri-pulse-line:before {
  content: "\f035";
}
.ri-pushpin-2-fill:before {
  content: "\f036";
}
.ri-pushpin-2-line:before {
  content: "\f037";
}
.ri-pushpin-fill:before {
  content: "\f038";
}
.ri-pushpin-line:before {
  content: "\f039";
}
.ri-qq-fill:before {
  content: "\f03a";
}
.ri-qq-line:before {
  content: "\f03b";
}
.ri-qr-code-fill:before {
  content: "\f03c";
}
.ri-qr-code-line:before {
  content: "\f03d";
}
.ri-qr-scan-2-fill:before {
  content: "\f03e";
}
.ri-qr-scan-2-line:before {
  content: "\f03f";
}
.ri-qr-scan-fill:before {
  content: "\f040";
}
.ri-qr-scan-line:before {
  content: "\f041";
}
.ri-question-answer-fill:before {
  content: "\f042";
}
.ri-question-answer-line:before {
  content: "\f043";
}
.ri-question-fill:before {
  content: "\f044";
}
.ri-question-line:before {
  content: "\f045";
}
.ri-question-mark:before {
  content: "\f046";
}
.ri-questionnaire-fill:before {
  content: "\f047";
}
.ri-questionnaire-line:before {
  content: "\f048";
}
.ri-quill-pen-fill:before {
  content: "\f049";
}
.ri-quill-pen-line:before {
  content: "\f04a";
}
.ri-radar-fill:before {
  content: "\f04b";
}
.ri-radar-line:before {
  content: "\f04c";
}
.ri-radio-2-fill:before {
  content: "\f04d";
}
.ri-radio-2-line:before {
  content: "\f04e";
}
.ri-radio-button-fill:before {
  content: "\f04f";
}
.ri-radio-button-line:before {
  content: "\f050";
}
.ri-radio-fill:before {
  content: "\f051";
}
.ri-radio-line:before {
  content: "\f052";
}
.ri-rainbow-fill:before {
  content: "\f053";
}
.ri-rainbow-line:before {
  content: "\f054";
}
.ri-rainy-fill:before {
  content: "\f055";
}
.ri-rainy-line:before {
  content: "\f056";
}
.ri-reactjs-fill:before {
  content: "\f057";
}
.ri-reactjs-line:before {
  content: "\f058";
}
.ri-record-circle-fill:before {
  content: "\f059";
}
.ri-record-circle-line:before {
  content: "\f05a";
}
.ri-record-mail-fill:before {
  content: "\f05b";
}
.ri-record-mail-line:before {
  content: "\f05c";
}
.ri-recycle-fill:before {
  content: "\f05d";
}
.ri-recycle-line:before {
  content: "\f05e";
}
.ri-red-packet-fill:before {
  content: "\f05f";
}
.ri-red-packet-line:before {
  content: "\f060";
}
.ri-reddit-fill:before {
  content: "\f061";
}
.ri-reddit-line:before {
  content: "\f062";
}
.ri-refresh-fill:before {
  content: "\f063";
}
.ri-refresh-line:before {
  content: "\f064";
}
.ri-refund-2-fill:before {
  content: "\f065";
}
.ri-refund-2-line:before {
  content: "\f066";
}
.ri-refund-fill:before {
  content: "\f067";
}
.ri-refund-line:before {
  content: "\f068";
}
.ri-registered-fill:before {
  content: "\f069";
}
.ri-registered-line:before {
  content: "\f06a";
}
.ri-remixicon-fill:before {
  content: "\f06b";
}
.ri-remixicon-line:before {
  content: "\f06c";
}
.ri-remote-control-2-fill:before {
  content: "\f06d";
}
.ri-remote-control-2-line:before {
  content: "\f06e";
}
.ri-remote-control-fill:before {
  content: "\f06f";
}
.ri-remote-control-line:before {
  content: "\f070";
}
.ri-repeat-2-fill:before {
  content: "\f071";
}
.ri-repeat-2-line:before {
  content: "\f072";
}
.ri-repeat-fill:before {
  content: "\f073";
}
.ri-repeat-line:before {
  content: "\f074";
}
.ri-repeat-one-fill:before {
  content: "\f075";
}
.ri-repeat-one-line:before {
  content: "\f076";
}
.ri-reply-all-fill:before {
  content: "\f077";
}
.ri-reply-all-line:before {
  content: "\f078";
}
.ri-reply-fill:before {
  content: "\f079";
}
.ri-reply-line:before {
  content: "\f07a";
}
.ri-reserved-fill:before {
  content: "\f07b";
}
.ri-reserved-line:before {
  content: "\f07c";
}
.ri-rest-time-fill:before {
  content: "\f07d";
}
.ri-rest-time-line:before {
  content: "\f07e";
}
.ri-restart-fill:before {
  content: "\f07f";
}
.ri-restart-line:before {
  content: "\f080";
}
.ri-restaurant-2-fill:before {
  content: "\f081";
}
.ri-restaurant-2-line:before {
  content: "\f082";
}
.ri-restaurant-fill:before {
  content: "\f083";
}
.ri-restaurant-line:before {
  content: "\f084";
}
.ri-rewind-fill:before {
  content: "\f085";
}
.ri-rewind-line:before {
  content: "\f086";
}
.ri-rewind-mini-fill:before {
  content: "\f087";
}
.ri-rewind-mini-line:before {
  content: "\f088";
}
.ri-rhythm-fill:before {
  content: "\f089";
}
.ri-rhythm-line:before {
  content: "\f08a";
}
.ri-riding-fill:before {
  content: "\f08b";
}
.ri-riding-line:before {
  content: "\f08c";
}
.ri-road-map-fill:before {
  content: "\f08d";
}
.ri-road-map-line:before {
  content: "\f08e";
}
.ri-roadster-fill:before {
  content: "\f08f";
}
.ri-roadster-line:before {
  content: "\f090";
}
.ri-robot-fill:before {
  content: "\f091";
}
.ri-robot-line:before {
  content: "\f092";
}
.ri-rocket-2-fill:before {
  content: "\f093";
}
.ri-rocket-2-line:before {
  content: "\f094";
}
.ri-rocket-fill:before {
  content: "\f095";
}
.ri-rocket-line:before {
  content: "\f096";
}
.ri-rotate-lock-fill:before {
  content: "\f097";
}
.ri-rotate-lock-line:before {
  content: "\f098";
}
.ri-rounded-corner:before {
  content: "\f099";
}
.ri-route-fill:before {
  content: "\f09a";
}
.ri-route-line:before {
  content: "\f09b";
}
.ri-router-fill:before {
  content: "\f09c";
}
.ri-router-line:before {
  content: "\f09d";
}
.ri-rss-fill:before {
  content: "\f09e";
}
.ri-rss-line:before {
  content: "\f09f";
}
.ri-ruler-2-fill:before {
  content: "\f0a0";
}
.ri-ruler-2-line:before {
  content: "\f0a1";
}
.ri-ruler-fill:before {
  content: "\f0a2";
}
.ri-ruler-line:before {
  content: "\f0a3";
}
.ri-run-fill:before {
  content: "\f0a4";
}
.ri-run-line:before {
  content: "\f0a5";
}
.ri-safari-fill:before {
  content: "\f0a6";
}
.ri-safari-line:before {
  content: "\f0a7";
}
.ri-safe-2-fill:before {
  content: "\f0a8";
}
.ri-safe-2-line:before {
  content: "\f0a9";
}
.ri-safe-fill:before {
  content: "\f0aa";
}
.ri-safe-line:before {
  content: "\f0ab";
}
.ri-sailboat-fill:before {
  content: "\f0ac";
}
.ri-sailboat-line:before {
  content: "\f0ad";
}
.ri-save-2-fill:before {
  content: "\f0ae";
}
.ri-save-2-line:before {
  content: "\f0af";
}
.ri-save-3-fill:before {
  content: "\f0b0";
}
.ri-save-3-line:before {
  content: "\f0b1";
}
.ri-save-fill:before {
  content: "\f0b2";
}
.ri-save-line:before {
  content: "\f0b3";
}
.ri-scales-2-fill:before {
  content: "\f0b4";
}
.ri-scales-2-line:before {
  content: "\f0b5";
}
.ri-scales-3-fill:before {
  content: "\f0b6";
}
.ri-scales-3-line:before {
  content: "\f0b7";
}
.ri-scales-fill:before {
  content: "\f0b8";
}
.ri-scales-line:before {
  content: "\f0b9";
}
.ri-scan-2-fill:before {
  content: "\f0ba";
}
.ri-scan-2-line:before {
  content: "\f0bb";
}
.ri-scan-fill:before {
  content: "\f0bc";
}
.ri-scan-line:before {
  content: "\f0bd";
}
.ri-scissors-2-fill:before {
  content: "\f0be";
}
.ri-scissors-2-line:before {
  content: "\f0bf";
}
.ri-scissors-cut-fill:before {
  content: "\f0c0";
}
.ri-scissors-cut-line:before {
  content: "\f0c1";
}
.ri-scissors-fill:before {
  content: "\f0c2";
}
.ri-scissors-line:before {
  content: "\f0c3";
}
.ri-screenshot-2-fill:before {
  content: "\f0c4";
}
.ri-screenshot-2-line:before {
  content: "\f0c5";
}
.ri-screenshot-fill:before {
  content: "\f0c6";
}
.ri-screenshot-line:before {
  content: "\f0c7";
}
.ri-sd-card-fill:before {
  content: "\f0c8";
}
.ri-sd-card-line:before {
  content: "\f0c9";
}
.ri-sd-card-mini-fill:before {
  content: "\f0ca";
}
.ri-sd-card-mini-line:before {
  content: "\f0cb";
}
.ri-search-2-fill:before {
  content: "\f0cc";
}
.ri-search-2-line:before {
  content: "\f0cd";
}
.ri-search-eye-fill:before {
  content: "\f0ce";
}
.ri-search-eye-line:before {
  content: "\f0cf";
}
.ri-search-fill:before {
  content: "\f0d0";
}
.ri-search-line:before {
  content: "\f0d1";
}
.ri-secure-payment-fill:before {
  content: "\f0d2";
}
.ri-secure-payment-line:before {
  content: "\f0d3";
}
.ri-seedling-fill:before {
  content: "\f0d4";
}
.ri-seedling-line:before {
  content: "\f0d5";
}
.ri-send-backward:before {
  content: "\f0d6";
}
.ri-send-plane-2-fill:before {
  content: "\f0d7";
}
.ri-send-plane-2-line:before {
  content: "\f0d8";
}
.ri-send-plane-fill:before {
  content: "\f0d9";
}
.ri-send-plane-line:before {
  content: "\f0da";
}
.ri-send-to-back:before {
  content: "\f0db";
}
.ri-sensor-fill:before {
  content: "\f0dc";
}
.ri-sensor-line:before {
  content: "\f0dd";
}
.ri-separator:before {
  content: "\f0de";
}
.ri-server-fill:before {
  content: "\f0df";
}
.ri-server-line:before {
  content: "\f0e0";
}
.ri-service-fill:before {
  content: "\f0e1";
}
.ri-service-line:before {
  content: "\f0e2";
}
.ri-settings-2-fill:before {
  content: "\f0e3";
}
.ri-settings-2-line:before {
  content: "\f0e4";
}
.ri-settings-3-fill:before {
  content: "\f0e5";
}
.ri-settings-3-line:before {
  content: "\f0e6";
}
.ri-settings-4-fill:before {
  content: "\f0e7";
}
.ri-settings-4-line:before {
  content: "\f0e8";
}
.ri-settings-5-fill:before {
  content: "\f0e9";
}
.ri-settings-5-line:before {
  content: "\f0ea";
}
.ri-settings-6-fill:before {
  content: "\f0eb";
}
.ri-settings-6-line:before {
  content: "\f0ec";
}
.ri-settings-fill:before {
  content: "\f0ed";
}
.ri-settings-line:before {
  content: "\f0ee";
}
.ri-shape-2-fill:before {
  content: "\f0ef";
}
.ri-shape-2-line:before {
  content: "\f0f0";
}
.ri-shape-fill:before {
  content: "\f0f1";
}
.ri-shape-line:before {
  content: "\f0f2";
}
.ri-share-box-fill:before {
  content: "\f0f3";
}
.ri-share-box-line:before {
  content: "\f0f4";
}
.ri-share-circle-fill:before {
  content: "\f0f5";
}
.ri-share-circle-line:before {
  content: "\f0f6";
}
.ri-share-fill:before {
  content: "\f0f7";
}
.ri-share-forward-2-fill:before {
  content: "\f0f8";
}
.ri-share-forward-2-line:before {
  content: "\f0f9";
}
.ri-share-forward-box-fill:before {
  content: "\f0fa";
}
.ri-share-forward-box-line:before {
  content: "\f0fb";
}
.ri-share-forward-fill:before {
  content: "\f0fc";
}
.ri-share-forward-line:before {
  content: "\f0fd";
}
.ri-share-line:before {
  content: "\f0fe";
}
.ri-shield-check-fill:before {
  content: "\f0ff";
}
.ri-shield-check-line:before {
  content: "\f100";
}
.ri-shield-cross-fill:before {
  content: "\f101";
}
.ri-shield-cross-line:before {
  content: "\f102";
}
.ri-shield-fill:before {
  content: "\f103";
}
.ri-shield-flash-fill:before {
  content: "\f104";
}
.ri-shield-flash-line:before {
  content: "\f105";
}
.ri-shield-keyhole-fill:before {
  content: "\f106";
}
.ri-shield-keyhole-line:before {
  content: "\f107";
}
.ri-shield-line:before {
  content: "\f108";
}
.ri-shield-star-fill:before {
  content: "\f109";
}
.ri-shield-star-line:before {
  content: "\f10a";
}
.ri-shield-user-fill:before {
  content: "\f10b";
}
.ri-shield-user-line:before {
  content: "\f10c";
}
.ri-ship-2-fill:before {
  content: "\f10d";
}
.ri-ship-2-line:before {
  content: "\f10e";
}
.ri-ship-fill:before {
  content: "\f10f";
}
.ri-ship-line:before {
  content: "\f110";
}
.ri-shirt-fill:before {
  content: "\f111";
}
.ri-shirt-line:before {
  content: "\f112";
}
.ri-shopping-bag-2-fill:before {
  content: "\f113";
}
.ri-shopping-bag-2-line:before {
  content: "\f114";
}
.ri-shopping-bag-3-fill:before {
  content: "\f115";
}
.ri-shopping-bag-3-line:before {
  content: "\f116";
}
.ri-shopping-bag-fill:before {
  content: "\f117";
}
.ri-shopping-bag-line:before {
  content: "\f118";
}
.ri-shopping-basket-2-fill:before {
  content: "\f119";
}
.ri-shopping-basket-2-line:before {
  content: "\f11a";
}
.ri-shopping-basket-fill:before {
  content: "\f11b";
}
.ri-shopping-basket-line:before {
  content: "\f11c";
}
.ri-shopping-cart-2-fill:before {
  content: "\f11d";
}
.ri-shopping-cart-2-line:before {
  content: "\f11e";
}
.ri-shopping-cart-fill:before {
  content: "\f11f";
}
.ri-shopping-cart-line:before {
  content: "\f120";
}
.ri-showers-fill:before {
  content: "\f121";
}
.ri-showers-line:before {
  content: "\f122";
}
.ri-shuffle-fill:before {
  content: "\f123";
}
.ri-shuffle-line:before {
  content: "\f124";
}
.ri-shut-down-fill:before {
  content: "\f125";
}
.ri-shut-down-line:before {
  content: "\f126";
}
.ri-side-bar-fill:before {
  content: "\f127";
}
.ri-side-bar-line:before {
  content: "\f128";
}
.ri-signal-tower-fill:before {
  content: "\f129";
}
.ri-signal-tower-line:before {
  content: "\f12a";
}
.ri-signal-wifi-1-fill:before {
  content: "\f12b";
}
.ri-signal-wifi-1-line:before {
  content: "\f12c";
}
.ri-signal-wifi-2-fill:before {
  content: "\f12d";
}
.ri-signal-wifi-2-line:before {
  content: "\f12e";
}
.ri-signal-wifi-3-fill:before {
  content: "\f12f";
}
.ri-signal-wifi-3-line:before {
  content: "\f130";
}
.ri-signal-wifi-error-fill:before {
  content: "\f131";
}
.ri-signal-wifi-error-line:before {
  content: "\f132";
}
.ri-signal-wifi-fill:before {
  content: "\f133";
}
.ri-signal-wifi-line:before {
  content: "\f134";
}
.ri-signal-wifi-off-fill:before {
  content: "\f135";
}
.ri-signal-wifi-off-line:before {
  content: "\f136";
}
.ri-sim-card-2-fill:before {
  content: "\f137";
}
.ri-sim-card-2-line:before {
  content: "\f138";
}
.ri-sim-card-fill:before {
  content: "\f139";
}
.ri-sim-card-line:before {
  content: "\f13a";
}
.ri-single-quotes-l:before {
  content: "\f13b";
}
.ri-single-quotes-r:before {
  content: "\f13c";
}
.ri-sip-fill:before {
  content: "\f13d";
}
.ri-sip-line:before {
  content: "\f13e";
}
.ri-skip-back-fill:before {
  content: "\f13f";
}
.ri-skip-back-line:before {
  content: "\f140";
}
.ri-skip-back-mini-fill:before {
  content: "\f141";
}
.ri-skip-back-mini-line:before {
  content: "\f142";
}
.ri-skip-forward-fill:before {
  content: "\f143";
}
.ri-skip-forward-line:before {
  content: "\f144";
}
.ri-skip-forward-mini-fill:before {
  content: "\f145";
}
.ri-skip-forward-mini-line:before {
  content: "\f146";
}
.ri-skull-2-fill:before {
  content: "\f147";
}
.ri-skull-2-line:before {
  content: "\f148";
}
.ri-skull-fill:before {
  content: "\f149";
}
.ri-skull-line:before {
  content: "\f14a";
}
.ri-skype-fill:before {
  content: "\f14b";
}
.ri-skype-line:before {
  content: "\f14c";
}
.ri-slack-fill:before {
  content: "\f14d";
}
.ri-slack-line:before {
  content: "\f14e";
}
.ri-slice-fill:before {
  content: "\f14f";
}
.ri-slice-line:before {
  content: "\f150";
}
.ri-slideshow-2-fill:before {
  content: "\f151";
}
.ri-slideshow-2-line:before {
  content: "\f152";
}
.ri-slideshow-3-fill:before {
  content: "\f153";
}
.ri-slideshow-3-line:before {
  content: "\f154";
}
.ri-slideshow-4-fill:before {
  content: "\f155";
}
.ri-slideshow-4-line:before {
  content: "\f156";
}
.ri-slideshow-fill:before {
  content: "\f157";
}
.ri-slideshow-line:before {
  content: "\f158";
}
.ri-smartphone-fill:before {
  content: "\f159";
}
.ri-smartphone-line:before {
  content: "\f15a";
}
.ri-snapchat-fill:before {
  content: "\f15b";
}
.ri-snapchat-line:before {
  content: "\f15c";
}
.ri-snowy-fill:before {
  content: "\f15d";
}
.ri-snowy-line:before {
  content: "\f15e";
}
.ri-sort-asc:before {
  content: "\f15f";
}
.ri-sort-desc:before {
  content: "\f160";
}
.ri-sound-module-fill:before {
  content: "\f161";
}
.ri-sound-module-line:before {
  content: "\f162";
}
.ri-soundcloud-fill:before {
  content: "\f163";
}
.ri-soundcloud-line:before {
  content: "\f164";
}
.ri-space-ship-fill:before {
  content: "\f165";
}
.ri-space-ship-line:before {
  content: "\f166";
}
.ri-space:before {
  content: "\f167";
}
.ri-spam-2-fill:before {
  content: "\f168";
}
.ri-spam-2-line:before {
  content: "\f169";
}
.ri-spam-3-fill:before {
  content: "\f16a";
}
.ri-spam-3-line:before {
  content: "\f16b";
}
.ri-spam-fill:before {
  content: "\f16c";
}
.ri-spam-line:before {
  content: "\f16d";
}
.ri-speaker-2-fill:before {
  content: "\f16e";
}
.ri-speaker-2-line:before {
  content: "\f16f";
}
.ri-speaker-3-fill:before {
  content: "\f170";
}
.ri-speaker-3-line:before {
  content: "\f171";
}
.ri-speaker-fill:before {
  content: "\f172";
}
.ri-speaker-line:before {
  content: "\f173";
}
.ri-spectrum-fill:before {
  content: "\f174";
}
.ri-spectrum-line:before {
  content: "\f175";
}
.ri-speed-fill:before {
  content: "\f176";
}
.ri-speed-line:before {
  content: "\f177";
}
.ri-speed-mini-fill:before {
  content: "\f178";
}
.ri-speed-mini-line:before {
  content: "\f179";
}
.ri-split-cells-horizontal:before {
  content: "\f17a";
}
.ri-split-cells-vertical:before {
  content: "\f17b";
}
.ri-spotify-fill:before {
  content: "\f17c";
}
.ri-spotify-line:before {
  content: "\f17d";
}
.ri-spy-fill:before {
  content: "\f17e";
}
.ri-spy-line:before {
  content: "\f17f";
}
.ri-stack-fill:before {
  content: "\f180";
}
.ri-stack-line:before {
  content: "\f181";
}
.ri-stack-overflow-fill:before {
  content: "\f182";
}
.ri-stack-overflow-line:before {
  content: "\f183";
}
.ri-stackshare-fill:before {
  content: "\f184";
}
.ri-stackshare-line:before {
  content: "\f185";
}
.ri-star-fill:before {
  content: "\f186";
}
.ri-star-half-fill:before {
  content: "\f187";
}
.ri-star-half-line:before {
  content: "\f188";
}
.ri-star-half-s-fill:before {
  content: "\f189";
}
.ri-star-half-s-line:before {
  content: "\f18a";
}
.ri-star-line:before {
  content: "\f18b";
}
.ri-star-s-fill:before {
  content: "\f18c";
}
.ri-star-s-line:before {
  content: "\f18d";
}
.ri-star-smile-fill:before {
  content: "\f18e";
}
.ri-star-smile-line:before {
  content: "\f18f";
}
.ri-steam-fill:before {
  content: "\f190";
}
.ri-steam-line:before {
  content: "\f191";
}
.ri-steering-2-fill:before {
  content: "\f192";
}
.ri-steering-2-line:before {
  content: "\f193";
}
.ri-steering-fill:before {
  content: "\f194";
}
.ri-steering-line:before {
  content: "\f195";
}
.ri-stethoscope-fill:before {
  content: "\f196";
}
.ri-stethoscope-line:before {
  content: "\f197";
}
.ri-sticky-note-2-fill:before {
  content: "\f198";
}
.ri-sticky-note-2-line:before {
  content: "\f199";
}
.ri-sticky-note-fill:before {
  content: "\f19a";
}
.ri-sticky-note-line:before {
  content: "\f19b";
}
.ri-stock-fill:before {
  content: "\f19c";
}
.ri-stock-line:before {
  content: "\f19d";
}
.ri-stop-circle-fill:before {
  content: "\f19e";
}
.ri-stop-circle-line:before {
  content: "\f19f";
}
.ri-stop-fill:before {
  content: "\f1a0";
}
.ri-stop-line:before {
  content: "\f1a1";
}
.ri-stop-mini-fill:before {
  content: "\f1a2";
}
.ri-stop-mini-line:before {
  content: "\f1a3";
}
.ri-store-2-fill:before {
  content: "\f1a4";
}
.ri-store-2-line:before {
  content: "\f1a5";
}
.ri-store-3-fill:before {
  content: "\f1a6";
}
.ri-store-3-line:before {
  content: "\f1a7";
}
.ri-store-fill:before {
  content: "\f1a8";
}
.ri-store-line:before {
  content: "\f1a9";
}
.ri-strikethrough-2:before {
  content: "\f1aa";
}
.ri-strikethrough:before {
  content: "\f1ab";
}
.ri-subscript-2:before {
  content: "\f1ac";
}
.ri-subscript:before {
  content: "\f1ad";
}
.ri-subtract-fill:before {
  content: "\f1ae";
}
.ri-subtract-line:before {
  content: "\f1af";
}
.ri-subway-fill:before {
  content: "\f1b0";
}
.ri-subway-line:before {
  content: "\f1b1";
}
.ri-subway-wifi-fill:before {
  content: "\f1b2";
}
.ri-subway-wifi-line:before {
  content: "\f1b3";
}
.ri-suitcase-2-fill:before {
  content: "\f1b4";
}
.ri-suitcase-2-line:before {
  content: "\f1b5";
}
.ri-suitcase-3-fill:before {
  content: "\f1b6";
}
.ri-suitcase-3-line:before {
  content: "\f1b7";
}
.ri-suitcase-fill:before {
  content: "\f1b8";
}
.ri-suitcase-line:before {
  content: "\f1b9";
}
.ri-sun-cloudy-fill:before {
  content: "\f1ba";
}
.ri-sun-cloudy-line:before {
  content: "\f1bb";
}
.ri-sun-fill:before {
  content: "\f1bc";
}
.ri-sun-foggy-fill:before {
  content: "\f1bd";
}
.ri-sun-foggy-line:before {
  content: "\f1be";
}
.ri-sun-line:before {
  content: "\f1bf";
}
.ri-superscript-2:before {
  content: "\f1c0";
}
.ri-superscript:before {
  content: "\f1c1";
}
.ri-surgical-mask-fill:before {
  content: "\f1c2";
}
.ri-surgical-mask-line:before {
  content: "\f1c3";
}
.ri-surround-sound-fill:before {
  content: "\f1c4";
}
.ri-surround-sound-line:before {
  content: "\f1c5";
}
.ri-survey-fill:before {
  content: "\f1c6";
}
.ri-survey-line:before {
  content: "\f1c7";
}
.ri-swap-box-fill:before {
  content: "\f1c8";
}
.ri-swap-box-line:before {
  content: "\f1c9";
}
.ri-swap-fill:before {
  content: "\f1ca";
}
.ri-swap-line:before {
  content: "\f1cb";
}
.ri-switch-fill:before {
  content: "\f1cc";
}
.ri-switch-line:before {
  content: "\f1cd";
}
.ri-sword-fill:before {
  content: "\f1ce";
}
.ri-sword-line:before {
  content: "\f1cf";
}
.ri-syringe-fill:before {
  content: "\f1d0";
}
.ri-syringe-line:before {
  content: "\f1d1";
}
.ri-t-box-fill:before {
  content: "\f1d2";
}
.ri-t-box-line:before {
  content: "\f1d3";
}
.ri-t-shirt-2-fill:before {
  content: "\f1d4";
}
.ri-t-shirt-2-line:before {
  content: "\f1d5";
}
.ri-t-shirt-air-fill:before {
  content: "\f1d6";
}
.ri-t-shirt-air-line:before {
  content: "\f1d7";
}
.ri-t-shirt-fill:before {
  content: "\f1d8";
}
.ri-t-shirt-line:before {
  content: "\f1d9";
}
.ri-table-2:before {
  content: "\f1da";
}
.ri-table-alt-fill:before {
  content: "\f1db";
}
.ri-table-alt-line:before {
  content: "\f1dc";
}
.ri-table-fill:before {
  content: "\f1dd";
}
.ri-table-line:before {
  content: "\f1de";
}
.ri-tablet-fill:before {
  content: "\f1df";
}
.ri-tablet-line:before {
  content: "\f1e0";
}
.ri-takeaway-fill:before {
  content: "\f1e1";
}
.ri-takeaway-line:before {
  content: "\f1e2";
}
.ri-taobao-fill:before {
  content: "\f1e3";
}
.ri-taobao-line:before {
  content: "\f1e4";
}
.ri-tape-fill:before {
  content: "\f1e5";
}
.ri-tape-line:before {
  content: "\f1e6";
}
.ri-task-fill:before {
  content: "\f1e7";
}
.ri-task-line:before {
  content: "\f1e8";
}
.ri-taxi-fill:before {
  content: "\f1e9";
}
.ri-taxi-line:before {
  content: "\f1ea";
}
.ri-taxi-wifi-fill:before {
  content: "\f1eb";
}
.ri-taxi-wifi-line:before {
  content: "\f1ec";
}
.ri-team-fill:before {
  content: "\f1ed";
}
.ri-team-line:before {
  content: "\f1ee";
}
.ri-telegram-fill:before {
  content: "\f1ef";
}
.ri-telegram-line:before {
  content: "\f1f0";
}
.ri-temp-cold-fill:before {
  content: "\f1f1";
}
.ri-temp-cold-line:before {
  content: "\f1f2";
}
.ri-temp-hot-fill:before {
  content: "\f1f3";
}
.ri-temp-hot-line:before {
  content: "\f1f4";
}
.ri-terminal-box-fill:before {
  content: "\f1f5";
}
.ri-terminal-box-line:before {
  content: "\f1f6";
}
.ri-terminal-fill:before {
  content: "\f1f7";
}
.ri-terminal-line:before {
  content: "\f1f8";
}
.ri-terminal-window-fill:before {
  content: "\f1f9";
}
.ri-terminal-window-line:before {
  content: "\f1fa";
}
.ri-test-tube-fill:before {
  content: "\f1fb";
}
.ri-test-tube-line:before {
  content: "\f1fc";
}
.ri-text-direction-l:before {
  content: "\f1fd";
}
.ri-text-direction-r:before {
  content: "\f1fe";
}
.ri-text-spacing:before {
  content: "\f1ff";
}
.ri-text-wrap:before {
  content: "\f200";
}
.ri-text:before {
  content: "\f201";
}
.ri-thermometer-fill:before {
  content: "\f202";
}
.ri-thermometer-line:before {
  content: "\f203";
}
.ri-thumb-down-fill:before {
  content: "\f204";
}
.ri-thumb-down-line:before {
  content: "\f205";
}
.ri-thumb-up-fill:before {
  content: "\f206";
}
.ri-thumb-up-line:before {
  content: "\f207";
}
.ri-thunderstorms-fill:before {
  content: "\f208";
}
.ri-thunderstorms-line:before {
  content: "\f209";
}
.ri-ticket-2-fill:before {
  content: "\f20a";
}
.ri-ticket-2-line:before {
  content: "\f20b";
}
.ri-ticket-fill:before {
  content: "\f20c";
}
.ri-ticket-line:before {
  content: "\f20d";
}
.ri-time-fill:before {
  content: "\f20e";
}
.ri-time-line:before {
  content: "\f20f";
}
.ri-timer-2-fill:before {
  content: "\f210";
}
.ri-timer-2-line:before {
  content: "\f211";
}
.ri-timer-fill:before {
  content: "\f212";
}
.ri-timer-flash-fill:before {
  content: "\f213";
}
.ri-timer-flash-line:before {
  content: "\f214";
}
.ri-timer-line:before {
  content: "\f215";
}
.ri-todo-fill:before {
  content: "\f216";
}
.ri-todo-line:before {
  content: "\f217";
}
.ri-toggle-fill:before {
  content: "\f218";
}
.ri-toggle-line:before {
  content: "\f219";
}
.ri-tools-fill:before {
  content: "\f21a";
}
.ri-tools-line:before {
  content: "\f21b";
}
.ri-tornado-fill:before {
  content: "\f21c";
}
.ri-tornado-line:before {
  content: "\f21d";
}
.ri-trademark-fill:before {
  content: "\f21e";
}
.ri-trademark-line:before {
  content: "\f21f";
}
.ri-traffic-light-fill:before {
  content: "\f220";
}
.ri-traffic-light-line:before {
  content: "\f221";
}
.ri-train-fill:before {
  content: "\f222";
}
.ri-train-line:before {
  content: "\f223";
}
.ri-train-wifi-fill:before {
  content: "\f224";
}
.ri-train-wifi-line:before {
  content: "\f225";
}
.ri-translate-2:before {
  content: "\f226";
}
.ri-translate:before {
  content: "\f227";
}
.ri-travesti-fill:before {
  content: "\f228";
}
.ri-travesti-line:before {
  content: "\f229";
}
.ri-treasure-map-fill:before {
  content: "\f22a";
}
.ri-treasure-map-line:before {
  content: "\f22b";
}
.ri-trello-fill:before {
  content: "\f22c";
}
.ri-trello-line:before {
  content: "\f22d";
}
.ri-trophy-fill:before {
  content: "\f22e";
}
.ri-trophy-line:before {
  content: "\f22f";
}
.ri-truck-fill:before {
  content: "\f230";
}
.ri-truck-line:before {
  content: "\f231";
}
.ri-tumblr-fill:before {
  content: "\f232";
}
.ri-tumblr-line:before {
  content: "\f233";
}
.ri-tv-2-fill:before {
  content: "\f234";
}
.ri-tv-2-line:before {
  content: "\f235";
}
.ri-tv-fill:before {
  content: "\f236";
}
.ri-tv-line:before {
  content: "\f237";
}
.ri-twitch-fill:before {
  content: "\f238";
}
.ri-twitch-line:before {
  content: "\f239";
}
.ri-twitter-fill:before {
  content: "\f23a";
}
.ri-twitter-line:before {
  content: "\f23b";
}
.ri-typhoon-fill:before {
  content: "\f23c";
}
.ri-typhoon-line:before {
  content: "\f23d";
}
.ri-u-disk-fill:before {
  content: "\f23e";
}
.ri-u-disk-line:before {
  content: "\f23f";
}
.ri-ubuntu-fill:before {
  content: "\f240";
}
.ri-ubuntu-line:before {
  content: "\f241";
}
.ri-umbrella-fill:before {
  content: "\f242";
}
.ri-umbrella-line:before {
  content: "\f243";
}
.ri-underline:before {
  content: "\f244";
}
.ri-uninstall-fill:before {
  content: "\f245";
}
.ri-uninstall-line:before {
  content: "\f246";
}
.ri-unsplash-fill:before {
  content: "\f247";
}
.ri-unsplash-line:before {
  content: "\f248";
}
.ri-upload-2-fill:before {
  content: "\f249";
}
.ri-upload-2-line:before {
  content: "\f24a";
}
.ri-upload-cloud-2-fill:before {
  content: "\f24b";
}
.ri-upload-cloud-2-line:before {
  content: "\f24c";
}
.ri-upload-cloud-fill:before {
  content: "\f24d";
}
.ri-upload-cloud-line:before {
  content: "\f24e";
}
.ri-upload-fill:before {
  content: "\f24f";
}
.ri-upload-line:before {
  content: "\f250";
}
.ri-usb-fill:before {
  content: "\f251";
}
.ri-usb-line:before {
  content: "\f252";
}
.ri-user-2-fill:before {
  content: "\f253";
}
.ri-user-2-line:before {
  content: "\f254";
}
.ri-user-3-fill:before {
  content: "\f255";
}
.ri-user-3-line:before {
  content: "\f256";
}
.ri-user-4-fill:before {
  content: "\f257";
}
.ri-user-4-line:before {
  content: "\f258";
}
.ri-user-5-fill:before {
  content: "\f259";
}
.ri-user-5-line:before {
  content: "\f25a";
}
.ri-user-6-fill:before {
  content: "\f25b";
}
.ri-user-6-line:before {
  content: "\f25c";
}
.ri-user-add-fill:before {
  content: "\f25d";
}
.ri-user-add-line:before {
  content: "\f25e";
}
.ri-user-fill:before {
  content: "\f25f";
}
.ri-user-follow-fill:before {
  content: "\f260";
}
.ri-user-follow-line:before {
  content: "\f261";
}
.ri-user-heart-fill:before {
  content: "\f262";
}
.ri-user-heart-line:before {
  content: "\f263";
}
.ri-user-line:before {
  content: "\f264";
}
.ri-user-location-fill:before {
  content: "\f265";
}
.ri-user-location-line:before {
  content: "\f266";
}
.ri-user-received-2-fill:before {
  content: "\f267";
}
.ri-user-received-2-line:before {
  content: "\f268";
}
.ri-user-received-fill:before {
  content: "\f269";
}
.ri-user-received-line:before {
  content: "\f26a";
}
.ri-user-search-fill:before {
  content: "\f26b";
}
.ri-user-search-line:before {
  content: "\f26c";
}
.ri-user-settings-fill:before {
  content: "\f26d";
}
.ri-user-settings-line:before {
  content: "\f26e";
}
.ri-user-shared-2-fill:before {
  content: "\f26f";
}
.ri-user-shared-2-line:before {
  content: "\f270";
}
.ri-user-shared-fill:before {
  content: "\f271";
}
.ri-user-shared-line:before {
  content: "\f272";
}
.ri-user-smile-fill:before {
  content: "\f273";
}
.ri-user-smile-line:before {
  content: "\f274";
}
.ri-user-star-fill:before {
  content: "\f275";
}
.ri-user-star-line:before {
  content: "\f276";
}
.ri-user-unfollow-fill:before {
  content: "\f277";
}
.ri-user-unfollow-line:before {
  content: "\f278";
}
.ri-user-voice-fill:before {
  content: "\f279";
}
.ri-user-voice-line:before {
  content: "\f27a";
}
.ri-video-add-fill:before {
  content: "\f27b";
}
.ri-video-add-line:before {
  content: "\f27c";
}
.ri-video-chat-fill:before {
  content: "\f27d";
}
.ri-video-chat-line:before {
  content: "\f27e";
}
.ri-video-download-fill:before {
  content: "\f27f";
}
.ri-video-download-line:before {
  content: "\f280";
}
.ri-video-fill:before {
  content: "\f281";
}
.ri-video-line:before {
  content: "\f282";
}
.ri-video-upload-fill:before {
  content: "\f283";
}
.ri-video-upload-line:before {
  content: "\f284";
}
.ri-vidicon-2-fill:before {
  content: "\f285";
}
.ri-vidicon-2-line:before {
  content: "\f286";
}
.ri-vidicon-fill:before {
  content: "\f287";
}
.ri-vidicon-line:before {
  content: "\f288";
}
.ri-vimeo-fill:before {
  content: "\f289";
}
.ri-vimeo-line:before {
  content: "\f28a";
}
.ri-vip-crown-2-fill:before {
  content: "\f28b";
}
.ri-vip-crown-2-line:before {
  content: "\f28c";
}
.ri-vip-crown-fill:before {
  content: "\f28d";
}
.ri-vip-crown-line:before {
  content: "\f28e";
}
.ri-vip-diamond-fill:before {
  content: "\f28f";
}
.ri-vip-diamond-line:before {
  content: "\f290";
}
.ri-vip-fill:before {
  content: "\f291";
}
.ri-vip-line:before {
  content: "\f292";
}
.ri-virus-fill:before {
  content: "\f293";
}
.ri-virus-line:before {
  content: "\f294";
}
.ri-visa-fill:before {
  content: "\f295";
}
.ri-visa-line:before {
  content: "\f296";
}
.ri-voice-recognition-fill:before {
  content: "\f297";
}
.ri-voice-recognition-line:before {
  content: "\f298";
}
.ri-voiceprint-fill:before {
  content: "\f299";
}
.ri-voiceprint-line:before {
  content: "\f29a";
}
.ri-volume-down-fill:before {
  content: "\f29b";
}
.ri-volume-down-line:before {
  content: "\f29c";
}
.ri-volume-mute-fill:before {
  content: "\f29d";
}
.ri-volume-mute-line:before {
  content: "\f29e";
}
.ri-volume-off-vibrate-fill:before {
  content: "\f29f";
}
.ri-volume-off-vibrate-line:before {
  content: "\f2a0";
}
.ri-volume-up-fill:before {
  content: "\f2a1";
}
.ri-volume-up-line:before {
  content: "\f2a2";
}
.ri-volume-vibrate-fill:before {
  content: "\f2a3";
}
.ri-volume-vibrate-line:before {
  content: "\f2a4";
}
.ri-vuejs-fill:before {
  content: "\f2a5";
}
.ri-vuejs-line:before {
  content: "\f2a6";
}
.ri-walk-fill:before {
  content: "\f2a7";
}
.ri-walk-line:before {
  content: "\f2a8";
}
.ri-wallet-2-fill:before {
  content: "\f2a9";
}
.ri-wallet-2-line:before {
  content: "\f2aa";
}
.ri-wallet-3-fill:before {
  content: "\f2ab";
}
.ri-wallet-3-line:before {
  content: "\f2ac";
}
.ri-wallet-fill:before {
  content: "\f2ad";
}
.ri-wallet-line:before {
  content: "\f2ae";
}
.ri-water-flash-fill:before {
  content: "\f2af";
}
.ri-water-flash-line:before {
  content: "\f2b0";
}
.ri-webcam-fill:before {
  content: "\f2b1";
}
.ri-webcam-line:before {
  content: "\f2b2";
}
.ri-wechat-2-fill:before {
  content: "\f2b3";
}
.ri-wechat-2-line:before {
  content: "\f2b4";
}
.ri-wechat-fill:before {
  content: "\f2b5";
}
.ri-wechat-line:before {
  content: "\f2b6";
}
.ri-wechat-pay-fill:before {
  content: "\f2b7";
}
.ri-wechat-pay-line:before {
  content: "\f2b8";
}
.ri-weibo-fill:before {
  content: "\f2b9";
}
.ri-weibo-line:before {
  content: "\f2ba";
}
.ri-whatsapp-fill:before {
  content: "\f2bb";
}
.ri-whatsapp-line:before {
  content: "\f2bc";
}
.ri-wheelchair-fill:before {
  content: "\f2bd";
}
.ri-wheelchair-line:before {
  content: "\f2be";
}
.ri-wifi-fill:before {
  content: "\f2bf";
}
.ri-wifi-line:before {
  content: "\f2c0";
}
.ri-wifi-off-fill:before {
  content: "\f2c1";
}
.ri-wifi-off-line:before {
  content: "\f2c2";
}
.ri-window-2-fill:before {
  content: "\f2c3";
}
.ri-window-2-line:before {
  content: "\f2c4";
}
.ri-window-fill:before {
  content: "\f2c5";
}
.ri-window-line:before {
  content: "\f2c6";
}
.ri-windows-fill:before {
  content: "\f2c7";
}
.ri-windows-line:before {
  content: "\f2c8";
}
.ri-windy-fill:before {
  content: "\f2c9";
}
.ri-windy-line:before {
  content: "\f2ca";
}
.ri-wireless-charging-fill:before {
  content: "\f2cb";
}
.ri-wireless-charging-line:before {
  content: "\f2cc";
}
.ri-women-fill:before {
  content: "\f2cd";
}
.ri-women-line:before {
  content: "\f2ce";
}
.ri-wubi-input:before {
  content: "\f2cf";
}
.ri-xbox-fill:before {
  content: "\f2d0";
}
.ri-xbox-line:before {
  content: "\f2d1";
}
.ri-xing-fill:before {
  content: "\f2d2";
}
.ri-xing-line:before {
  content: "\f2d3";
}
.ri-youtube-fill:before {
  content: "\f2d4";
}
.ri-youtube-line:before {
  content: "\f2d5";
}
.ri-zcool-fill:before {
  content: "\f2d6";
}
.ri-zcool-line:before {
  content: "\f2d7";
}
.ri-zhihu-fill:before {
  content: "\f2d8";
}
.ri-zhihu-line:before {
  content: "\f2d9";
}
.ri-zoom-in-fill:before {
  content: "\f2da";
}
.ri-zoom-in-line:before {
  content: "\f2db";
}
.ri-zoom-out-fill:before {
  content: "\f2dc";
}
.ri-zoom-out-line:before {
  content: "\f2dd";
}
.ri-zzz-fill:before {
  content: "\f2de";
}
.ri-zzz-line:before {
  content: "\f2df";
}
.ri-arrow-down-double-fill:before {
  content: "\f2e0";
}
.ri-arrow-down-double-line:before {
  content: "\f2e1";
}
.ri-arrow-left-double-fill:before {
  content: "\f2e2";
}
.ri-arrow-left-double-line:before {
  content: "\f2e3";
}
.ri-arrow-right-double-fill:before {
  content: "\f2e4";
}
.ri-arrow-right-double-line:before {
  content: "\f2e5";
}
.ri-arrow-turn-back-fill:before {
  content: "\f2e6";
}
.ri-arrow-turn-back-line:before {
  content: "\f2e7";
}
.ri-arrow-turn-forward-fill:before {
  content: "\f2e8";
}
.ri-arrow-turn-forward-line:before {
  content: "\f2e9";
}
.ri-arrow-up-double-fill:before {
  content: "\f2ea";
}
.ri-arrow-up-double-line:before {
  content: "\f2eb";
}
.ri-bard-fill:before {
  content: "\f2ec";
}
.ri-bard-line:before {
  content: "\f2ed";
}
.ri-bootstrap-fill:before {
  content: "\f2ee";
}
.ri-bootstrap-line:before {
  content: "\f2ef";
}
.ri-box-1-fill:before {
  content: "\f2f0";
}
.ri-box-1-line:before {
  content: "\f2f1";
}
.ri-box-2-fill:before {
  content: "\f2f2";
}
.ri-box-2-line:before {
  content: "\f2f3";
}
.ri-box-3-fill:before {
  content: "\f2f4";
}
.ri-box-3-line:before {
  content: "\f2f5";
}
.ri-brain-fill:before {
  content: "\f2f6";
}
.ri-brain-line:before {
  content: "\f2f7";
}
.ri-candle-fill:before {
  content: "\f2f8";
}
.ri-candle-line:before {
  content: "\f2f9";
}
.ri-cash-fill:before {
  content: "\f2fa";
}
.ri-cash-line:before {
  content: "\f2fb";
}
.ri-contract-left-fill:before {
  content: "\f2fc";
}
.ri-contract-left-line:before {
  content: "\f2fd";
}
.ri-contract-left-right-fill:before {
  content: "\f2fe";
}
.ri-contract-left-right-line:before {
  content: "\f2ff";
}
.ri-contract-right-fill:before {
  content: "\f300";
}
.ri-contract-right-line:before {
  content: "\f301";
}
.ri-contract-up-down-fill:before {
  content: "\f302";
}
.ri-contract-up-down-line:before {
  content: "\f303";
}
.ri-copilot-fill:before {
  content: "\f304";
}
.ri-copilot-line:before {
  content: "\f305";
}
.ri-corner-down-left-fill:before {
  content: "\f306";
}
.ri-corner-down-left-line:before {
  content: "\f307";
}
.ri-corner-down-right-fill:before {
  content: "\f308";
}
.ri-corner-down-right-line:before {
  content: "\f309";
}
.ri-corner-left-down-fill:before {
  content: "\f30a";
}
.ri-corner-left-down-line:before {
  content: "\f30b";
}
.ri-corner-left-up-fill:before {
  content: "\f30c";
}
.ri-corner-left-up-line:before {
  content: "\f30d";
}
.ri-corner-right-down-fill:before {
  content: "\f30e";
}
.ri-corner-right-down-line:before {
  content: "\f30f";
}
.ri-corner-right-up-fill:before {
  content: "\f310";
}
.ri-corner-right-up-line:before {
  content: "\f311";
}
.ri-corner-up-left-double-fill:before {
  content: "\f312";
}
.ri-corner-up-left-double-line:before {
  content: "\f313";
}
.ri-corner-up-left-fill:before {
  content: "\f314";
}
.ri-corner-up-left-line:before {
  content: "\f315";
}
.ri-corner-up-right-double-fill:before {
  content: "\f316";
}
.ri-corner-up-right-double-line:before {
  content: "\f317";
}
.ri-corner-up-right-fill:before {
  content: "\f318";
}
.ri-corner-up-right-line:before {
  content: "\f319";
}
.ri-cross-fill:before {
  content: "\f31a";
}
.ri-cross-line:before {
  content: "\f31b";
}
.ri-edge-new-fill:before {
  content: "\f31c";
}
.ri-edge-new-line:before {
  content: "\f31d";
}
.ri-equal-fill:before {
  content: "\f31e";
}
.ri-equal-line:before {
  content: "\f31f";
}
.ri-expand-left-fill:before {
  content: "\f320";
}
.ri-expand-left-line:before {
  content: "\f321";
}
.ri-expand-left-right-fill:before {
  content: "\f322";
}
.ri-expand-left-right-line:before {
  content: "\f323";
}
.ri-expand-right-fill:before {
  content: "\f324";
}
.ri-expand-right-line:before {
  content: "\f325";
}
.ri-expand-up-down-fill:before {
  content: "\f326";
}
.ri-expand-up-down-line:before {
  content: "\f327";
}
.ri-flickr-fill:before {
  content: "\f328";
}
.ri-flickr-line:before {
  content: "\f329";
}
.ri-forward-10-fill:before {
  content: "\f32a";
}
.ri-forward-10-line:before {
  content: "\f32b";
}
.ri-forward-15-fill:before {
  content: "\f32c";
}
.ri-forward-15-line:before {
  content: "\f32d";
}
.ri-forward-30-fill:before {
  content: "\f32e";
}
.ri-forward-30-line:before {
  content: "\f32f";
}
.ri-forward-5-fill:before {
  content: "\f330";
}
.ri-forward-5-line:before {
  content: "\f331";
}
.ri-graduation-cap-fill:before {
  content: "\f332";
}
.ri-graduation-cap-line:before {
  content: "\f333";
}
.ri-home-office-fill:before {
  content: "\f334";
}
.ri-home-office-line:before {
  content: "\f335";
}
.ri-hourglass-2-fill:before {
  content: "\f336";
}
.ri-hourglass-2-line:before {
  content: "\f337";
}
.ri-hourglass-fill:before {
  content: "\f338";
}
.ri-hourglass-line:before {
  content: "\f339";
}
.ri-javascript-fill:before {
  content: "\f33a";
}
.ri-javascript-line:before {
  content: "\f33b";
}
.ri-loop-left-fill:before {
  content: "\f33c";
}
.ri-loop-left-line:before {
  content: "\f33d";
}
.ri-loop-right-fill:before {
  content: "\f33e";
}
.ri-loop-right-line:before {
  content: "\f33f";
}
.ri-memories-fill:before {
  content: "\f340";
}
.ri-memories-line:before {
  content: "\f341";
}
.ri-meta-fill:before {
  content: "\f342";
}
.ri-meta-line:before {
  content: "\f343";
}
.ri-microsoft-loop-fill:before {
  content: "\f344";
}
.ri-microsoft-loop-line:before {
  content: "\f345";
}
.ri-nft-fill:before {
  content: "\f346";
}
.ri-nft-line:before {
  content: "\f347";
}
.ri-notion-fill:before {
  content: "\f348";
}
.ri-notion-line:before {
  content: "\f349";
}
.ri-openai-fill:before {
  content: "\f34a";
}
.ri-openai-line:before {
  content: "\f34b";
}
.ri-overline:before {
  content: "\f34c";
}
.ri-p2p-fill:before {
  content: "\f34d";
}
.ri-p2p-line:before {
  content: "\f34e";
}
.ri-presentation-fill:before {
  content: "\f34f";
}
.ri-presentation-line:before {
  content: "\f350";
}
.ri-replay-10-fill:before {
  content: "\f351";
}
.ri-replay-10-line:before {
  content: "\f352";
}
.ri-replay-15-fill:before {
  content: "\f353";
}
.ri-replay-15-line:before {
  content: "\f354";
}
.ri-replay-30-fill:before {
  content: "\f355";
}
.ri-replay-30-line:before {
  content: "\f356";
}
.ri-replay-5-fill:before {
  content: "\f357";
}
.ri-replay-5-line:before {
  content: "\f358";
}
.ri-school-fill:before {
  content: "\f359";
}
.ri-school-line:before {
  content: "\f35a";
}
.ri-shining-2-fill:before {
  content: "\f35b";
}
.ri-shining-2-line:before {
  content: "\f35c";
}
.ri-shining-fill:before {
  content: "\f35d";
}
.ri-shining-line:before {
  content: "\f35e";
}
.ri-sketching:before {
  content: "\f35f";
}
.ri-skip-down-fill:before {
  content: "\f360";
}
.ri-skip-down-line:before {
  content: "\f361";
}
.ri-skip-left-fill:before {
  content: "\f362";
}
.ri-skip-left-line:before {
  content: "\f363";
}
.ri-skip-right-fill:before {
  content: "\f364";
}
.ri-skip-right-line:before {
  content: "\f365";
}
.ri-skip-up-fill:before {
  content: "\f366";
}
.ri-skip-up-line:before {
  content: "\f367";
}
.ri-slow-down-fill:before {
  content: "\f368";
}
.ri-slow-down-line:before {
  content: "\f369";
}
.ri-sparkling-2-fill:before {
  content: "\f36a";
}
.ri-sparkling-2-line:before {
  content: "\f36b";
}
.ri-sparkling-fill:before {
  content: "\f36c";
}
.ri-sparkling-line:before {
  content: "\f36d";
}
.ri-speak-fill:before {
  content: "\f36e";
}
.ri-speak-line:before {
  content: "\f36f";
}
.ri-speed-up-fill:before {
  content: "\f370";
}
.ri-speed-up-line:before {
  content: "\f371";
}
.ri-tiktok-fill:before {
  content: "\f372";
}
.ri-tiktok-line:before {
  content: "\f373";
}
.ri-token-swap-fill:before {
  content: "\f374";
}
.ri-token-swap-line:before {
  content: "\f375";
}
.ri-unpin-fill:before {
  content: "\f376";
}
.ri-unpin-line:before {
  content: "\f377";
}
.ri-wechat-channels-fill:before {
  content: "\f378";
}
.ri-wechat-channels-line:before {
  content: "\f379";
}
.ri-wordpress-fill:before {
  content: "\f37a";
}
.ri-wordpress-line:before {
  content: "\f37b";
}
.ri-blender-fill:before {
  content: "\f37c";
}
.ri-blender-line:before {
  content: "\f37d";
}
.ri-emoji-sticker-fill:before {
  content: "\f37e";
}
.ri-emoji-sticker-line:before {
  content: "\f37f";
}
.ri-git-close-pull-request-fill:before {
  content: "\f380";
}
.ri-git-close-pull-request-line:before {
  content: "\f381";
}
.ri-instance-fill:before {
  content: "\f382";
}
.ri-instance-line:before {
  content: "\f383";
}
.ri-megaphone-fill:before {
  content: "\f384";
}
.ri-megaphone-line:before {
  content: "\f385";
}
.ri-pass-expired-fill:before {
  content: "\f386";
}
.ri-pass-expired-line:before {
  content: "\f387";
}
.ri-pass-pending-fill:before {
  content: "\f388";
}
.ri-pass-pending-line:before {
  content: "\f389";
}
.ri-pass-valid-fill:before {
  content: "\f38a";
}
.ri-pass-valid-line:before {
  content: "\f38b";
}
.ri-ai-generate:before {
  content: "\f38c";
}
.ri-calendar-close-fill:before {
  content: "\f38d";
}
.ri-calendar-close-line:before {
  content: "\f38e";
}
.ri-draggable:before {
  content: "\f38f";
}
.ri-font-family:before {
  content: "\f390";
}
.ri-font-mono:before {
  content: "\f391";
}
.ri-font-sans-serif:before {
  content: "\f392";
}
.ri-hard-drive-3-fill:before {
  content: "\f393";
}
.ri-hard-drive-3-line:before {
  content: "\f394";
}
.ri-kick-fill:before {
  content: "\f395";
}
.ri-kick-line:before {
  content: "\f396";
}
.ri-list-check-3:before {
  content: "\f397";
}
.ri-list-indefinite:before {
  content: "\f398";
}
.ri-list-ordered-2:before {
  content: "\f399";
}
.ri-list-radio:before {
  content: "\f39a";
}
.ri-openbase-fill:before {
  content: "\f39b";
}
.ri-openbase-line:before {
  content: "\f39c";
}
.ri-planet-fill:before {
  content: "\f39d";
}
.ri-planet-line:before {
  content: "\f39e";
}
.ri-prohibited-fill:before {
  content: "\f39f";
}
.ri-prohibited-line:before {
  content: "\f3a0";
}
.ri-quote-text:before {
  content: "\f3a1";
}
.ri-seo-fill:before {
  content: "\f3a2";
}
.ri-seo-line:before {
  content: "\f3a3";
}
.ri-slash-commands:before {
  content: "\f3a4";
}
.ri-archive-2-fill:before {
  content: "\f3a5";
}
.ri-archive-2-line:before {
  content: "\f3a6";
}
.ri-inbox-2-fill:before {
  content: "\f3a7";
}
.ri-inbox-2-line:before {
  content: "\f3a8";
}
.ri-shake-hands-fill:before {
  content: "\f3a9";
}
.ri-shake-hands-line:before {
  content: "\f3aa";
}
.ri-supabase-fill:before {
  content: "\f3ab";
}
.ri-supabase-line:before {
  content: "\f3ac";
}
.ri-water-percent-fill:before {
  content: "\f3ad";
}
.ri-water-percent-line:before {
  content: "\f3ae";
}
.ri-yuque-fill:before {
  content: "\f3af";
}
.ri-yuque-line:before {
  content: "\f3b0";
}
.ri-crosshair-2-fill:before {
  content: "\f3b1";
}
.ri-crosshair-2-line:before {
  content: "\f3b2";
}
.ri-crosshair-fill:before {
  content: "\f3b3";
}
.ri-crosshair-line:before {
  content: "\f3b4";
}
.ri-file-close-fill:before {
  content: "\f3b5";
}
.ri-file-close-line:before {
  content: "\f3b6";
}
.ri-infinity-fill:before {
  content: "\f3b7";
}
.ri-infinity-line:before {
  content: "\f3b8";
}
.ri-rfid-fill:before {
  content: "\f3b9";
}
.ri-rfid-line:before {
  content: "\f3ba";
}
.ri-slash-commands-2:before {
  content: "\f3bb";
}
.ri-user-forbid-fill:before {
  content: "\f3bc";
}
.ri-user-forbid-line:before {
  content: "\f3bd";
}
.ri-beer-fill:before {
  content: "\f3be";
}
.ri-beer-line:before {
  content: "\f3bf";
}
.ri-circle-fill:before {
  content: "\f3c0";
}
.ri-circle-line:before {
  content: "\f3c1";
}
.ri-dropdown-list:before {
  content: "\f3c2";
}
.ri-file-image-fill:before {
  content: "\f3c3";
}
.ri-file-image-line:before {
  content: "\f3c4";
}
.ri-file-pdf-2-fill:before {
  content: "\f3c5";
}
.ri-file-pdf-2-line:before {
  content: "\f3c6";
}
.ri-file-video-fill:before {
  content: "\f3c7";
}
.ri-file-video-line:before {
  content: "\f3c8";
}
.ri-folder-image-fill:before {
  content: "\f3c9";
}
.ri-folder-image-line:before {
  content: "\f3ca";
}
.ri-folder-video-fill:before {
  content: "\f3cb";
}
.ri-folder-video-line:before {
  content: "\f3cc";
}
.ri-hexagon-fill:before {
  content: "\f3cd";
}
.ri-hexagon-line:before {
  content: "\f3ce";
}
.ri-menu-search-fill:before {
  content: "\f3cf";
}
.ri-menu-search-line:before {
  content: "\f3d0";
}
.ri-octagon-fill:before {
  content: "\f3d1";
}
.ri-octagon-line:before {
  content: "\f3d2";
}
.ri-pentagon-fill:before {
  content: "\f3d3";
}
.ri-pentagon-line:before {
  content: "\f3d4";
}
.ri-rectangle-fill:before {
  content: "\f3d5";
}
.ri-rectangle-line:before {
  content: "\f3d6";
}
.ri-robot-2-fill:before {
  content: "\f3d7";
}
.ri-robot-2-line:before {
  content: "\f3d8";
}
.ri-shapes-fill:before {
  content: "\f3d9";
}
.ri-shapes-line:before {
  content: "\f3da";
}
.ri-square-fill:before {
  content: "\f3db";
}
.ri-square-line:before {
  content: "\f3dc";
}
.ri-tent-fill:before {
  content: "\f3dd";
}
.ri-tent-line:before {
  content: "\f3de";
}
.ri-threads-fill:before {
  content: "\f3df";
}
.ri-threads-line:before {
  content: "\f3e0";
}
.ri-tree-fill:before {
  content: "\f3e1";
}
.ri-tree-line:before {
  content: "\f3e2";
}
.ri-triangle-fill:before {
  content: "\f3e3";
}
.ri-triangle-line:before {
  content: "\f3e4";
}
.ri-twitter-x-fill:before {
  content: "\f3e5";
}
.ri-twitter-x-line:before {
  content: "\f3e6";
}
.ri-verified-badge-fill:before {
  content: "\f3e7";
}
.ri-verified-badge-line:before {
  content: "\f3e8";
}
.ri-armchair-fill:before {
  content: "\f3e9";
}
.ri-armchair-line:before {
  content: "\f3ea";
}
.ri-bnb-fill:before {
  content: "\f3eb";
}
.ri-bnb-line:before {
  content: "\f3ec";
}
.ri-bread-fill:before {
  content: "\f3ed";
}
.ri-bread-line:before {
  content: "\f3ee";
}
.ri-btc-fill:before {
  content: "\f3ef";
}
.ri-btc-line:before {
  content: "\f3f0";
}
.ri-calendar-schedule-fill:before {
  content: "\f3f1";
}
.ri-calendar-schedule-line:before {
  content: "\f3f2";
}
.ri-dice-1-fill:before {
  content: "\f3f3";
}
.ri-dice-1-line:before {
  content: "\f3f4";
}
.ri-dice-2-fill:before {
  content: "\f3f5";
}
.ri-dice-2-line:before {
  content: "\f3f6";
}
.ri-dice-3-fill:before {
  content: "\f3f7";
}
.ri-dice-3-line:before {
  content: "\f3f8";
}
.ri-dice-4-fill:before {
  content: "\f3f9";
}
.ri-dice-4-line:before {
  content: "\f3fa";
}
.ri-dice-5-fill:before {
  content: "\f3fb";
}
.ri-dice-5-line:before {
  content: "\f3fc";
}
.ri-dice-6-fill:before {
  content: "\f3fd";
}
.ri-dice-6-line:before {
  content: "\f3fe";
}
.ri-dice-fill:before {
  content: "\f3ff";
}
.ri-dice-line:before {
  content: "\f400";
}
.ri-drinks-fill:before {
  content: "\f401";
}
.ri-drinks-line:before {
  content: "\f402";
}
.ri-equalizer-2-fill:before {
  content: "\f403";
}
.ri-equalizer-2-line:before {
  content: "\f404";
}
.ri-equalizer-3-fill:before {
  content: "\f405";
}
.ri-equalizer-3-line:before {
  content: "\f406";
}
.ri-eth-fill:before {
  content: "\f407";
}
.ri-eth-line:before {
  content: "\f408";
}
.ri-flower-fill:before {
  content: "\f409";
}
.ri-flower-line:before {
  content: "\f40a";
}
.ri-glasses-2-fill:before {
  content: "\f40b";
}
.ri-glasses-2-line:before {
  content: "\f40c";
}
.ri-glasses-fill:before {
  content: "\f40d";
}
.ri-glasses-line:before {
  content: "\f40e";
}
.ri-goggles-fill:before {
  content: "\f40f";
}
.ri-goggles-line:before {
  content: "\f410";
}
.ri-image-circle-fill:before {
  content: "\f411";
}
.ri-image-circle-line:before {
  content: "\f412";
}
.ri-info-i:before {
  content: "\f413";
}
.ri-money-rupee-circle-fill:before {
  content: "\f414";
}
.ri-money-rupee-circle-line:before {
  content: "\f415";
}
.ri-news-fill:before {
  content: "\f416";
}
.ri-news-line:before {
  content: "\f417";
}
.ri-robot-3-fill:before {
  content: "\f418";
}
.ri-robot-3-line:before {
  content: "\f419";
}
.ri-share-2-fill:before {
  content: "\f41a";
}
.ri-share-2-line:before {
  content: "\f41b";
}
.ri-sofa-fill:before {
  content: "\f41c";
}
.ri-sofa-line:before {
  content: "\f41d";
}
.ri-svelte-fill:before {
  content: "\f41e";
}
.ri-svelte-line:before {
  content: "\f41f";
}
.ri-vk-fill:before {
  content: "\f420";
}
.ri-vk-line:before {
  content: "\f421";
}
.ri-xrp-fill:before {
  content: "\f422";
}
.ri-xrp-line:before {
  content: "\f423";
}
.ri-xtz-fill:before {
  content: "\f424";
}
.ri-xtz-line:before {
  content: "\f425";
}
.ri-archive-stack-fill:before {
  content: "\f426";
}
.ri-archive-stack-line:before {
  content: "\f427";
}
.ri-bowl-fill:before {
  content: "\f428";
}
.ri-bowl-line:before {
  content: "\f429";
}
.ri-calendar-view:before {
  content: "\f42a";
}
.ri-carousel-view:before {
  content: "\f42b";
}
.ri-code-block:before {
  content: "\f42c";
}
.ri-color-filter-fill:before {
  content: "\f42d";
}
.ri-color-filter-line:before {
  content: "\f42e";
}
.ri-contacts-book-3-fill:before {
  content: "\f42f";
}
.ri-contacts-book-3-line:before {
  content: "\f430";
}
.ri-contract-fill:before {
  content: "\f431";
}
.ri-contract-line:before {
  content: "\f432";
}
.ri-drinks-2-fill:before {
  content: "\f433";
}
.ri-drinks-2-line:before {
  content: "\f434";
}
.ri-export-fill:before {
  content: "\f435";
}
.ri-export-line:before {
  content: "\f436";
}
.ri-file-check-fill:before {
  content: "\f437";
}
.ri-file-check-line:before {
  content: "\f438";
}
.ri-focus-mode:before {
  content: "\f439";
}
.ri-folder-6-fill:before {
  content: "\f43a";
}
.ri-folder-6-line:before {
  content: "\f43b";
}
.ri-folder-check-fill:before {
  content: "\f43c";
}
.ri-folder-check-line:before {
  content: "\f43d";
}
.ri-folder-close-fill:before {
  content: "\f43e";
}
.ri-folder-close-line:before {
  content: "\f43f";
}
.ri-folder-cloud-fill:before {
  content: "\f440";
}
.ri-folder-cloud-line:before {
  content: "\f441";
}
.ri-gallery-view-2:before {
  content: "\f442";
}
.ri-gallery-view:before {
  content: "\f443";
}
.ri-hand:before {
  content: "\f444";
}
.ri-import-fill:before {
  content: "\f445";
}
.ri-import-line:before {
  content: "\f446";
}
.ri-information-2-fill:before {
  content: "\f447";
}
.ri-information-2-line:before {
  content: "\f448";
}
.ri-kanban-view-2:before {
  content: "\f449";
}
.ri-kanban-view:before {
  content: "\f44a";
}
.ri-list-view:before {
  content: "\f44b";
}
.ri-lock-star-fill:before {
  content: "\f44c";
}
.ri-lock-star-line:before {
  content: "\f44d";
}
.ri-puzzle-2-fill:before {
  content: "\f44e";
}
.ri-puzzle-2-line:before {
  content: "\f44f";
}
.ri-puzzle-fill:before {
  content: "\f450";
}
.ri-puzzle-line:before {
  content: "\f451";
}
.ri-ram-2-fill:before {
  content: "\f452";
}
.ri-ram-2-line:before {
  content: "\f453";
}
.ri-ram-fill:before {
  content: "\f454";
}
.ri-ram-line:before {
  content: "\f455";
}
.ri-receipt-fill:before {
  content: "\f456";
}
.ri-receipt-line:before {
  content: "\f457";
}
.ri-shadow-fill:before {
  content: "\f458";
}
.ri-shadow-line:before {
  content: "\f459";
}
.ri-sidebar-fold-fill:before {
  content: "\f45a";
}
.ri-sidebar-fold-line:before {
  content: "\f45b";
}
.ri-sidebar-unfold-fill:before {
  content: "\f45c";
}
.ri-sidebar-unfold-line:before {
  content: "\f45d";
}
.ri-slideshow-view:before {
  content: "\f45e";
}
.ri-sort-alphabet-asc:before {
  content: "\f45f";
}
.ri-sort-alphabet-desc:before {
  content: "\f460";
}
.ri-sort-number-asc:before {
  content: "\f461";
}
.ri-sort-number-desc:before {
  content: "\f462";
}
.ri-stacked-view:before {
  content: "\f463";
}
.ri-sticky-note-add-fill:before {
  content: "\f464";
}
.ri-sticky-note-add-line:before {
  content: "\f465";
}
.ri-swap-2-fill:before {
  content: "\f466";
}
.ri-swap-2-line:before {
  content: "\f467";
}
.ri-swap-3-fill:before {
  content: "\f468";
}
.ri-swap-3-line:before {
  content: "\f469";
}
.ri-table-3:before {
  content: "\f46a";
}
.ri-table-view:before {
  content: "\f46b";
}
.ri-text-block:before {
  content: "\f46c";
}
.ri-text-snippet:before {
  content: "\f46d";
}
.ri-timeline-view:before {
  content: "\f46e";
}
.ri-blogger-fill:before {
  content: "\f46f";
}
.ri-blogger-line:before {
  content: "\f470";
}
.ri-chat-thread-fill:before {
  content: "\f471";
}
.ri-chat-thread-line:before {
  content: "\f472";
}
.ri-discount-percent-fill:before {
  content: "\f473";
}
.ri-discount-percent-line:before {
  content: "\f474";
}
.ri-exchange-2-fill:before {
  content: "\f475";
}
.ri-exchange-2-line:before {
  content: "\f476";
}
.ri-git-fork-fill:before {
  content: "\f477";
}
.ri-git-fork-line:before {
  content: "\f478";
}
.ri-input-field:before {
  content: "\f479";
}
.ri-progress-1-fill:before {
  content: "\f47a";
}
.ri-progress-1-line:before {
  content: "\f47b";
}
.ri-progress-2-fill:before {
  content: "\f47c";
}
.ri-progress-2-line:before {
  content: "\f47d";
}
.ri-progress-3-fill:before {
  content: "\f47e";
}
.ri-progress-3-line:before {
  content: "\f47f";
}
.ri-progress-4-fill:before {
  content: "\f480";
}
.ri-progress-4-line:before {
  content: "\f481";
}
.ri-progress-5-fill:before {
  content: "\f482";
}
.ri-progress-5-line:before {
  content: "\f483";
}
.ri-progress-6-fill:before {
  content: "\f484";
}
.ri-progress-6-line:before {
  content: "\f485";
}
.ri-progress-7-fill:before {
  content: "\f486";
}
.ri-progress-7-line:before {
  content: "\f487";
}
.ri-progress-8-fill:before {
  content: "\f488";
}
.ri-progress-8-line:before {
  content: "\f489";
}
.ri-remix-run-fill:before {
  content: "\f48a";
}
.ri-remix-run-line:before {
  content: "\f48b";
}
.ri-signpost-fill:before {
  content: "\f48c";
}
.ri-signpost-line:before {
  content: "\f48d";
}
.ri-time-zone-fill:before {
  content: "\f48e";
}
.ri-time-zone-line:before {
  content: "\f48f";
}
.ri-arrow-down-wide-fill:before {
  content: "\f490";
}
.ri-arrow-down-wide-line:before {
  content: "\f491";
}
.ri-arrow-left-wide-fill:before {
  content: "\f492";
}
.ri-arrow-left-wide-line:before {
  content: "\f493";
}
.ri-arrow-right-wide-fill:before {
  content: "\f494";
}
.ri-arrow-right-wide-line:before {
  content: "\f495";
}
.ri-arrow-up-wide-fill:before {
  content: "\f496";
}
.ri-arrow-up-wide-line:before {
  content: "\f497";
}
.ri-bluesky-fill:before {
  content: "\f498";
}
.ri-bluesky-line:before {
  content: "\f499";
}
.ri-expand-height-fill:before {
  content: "\f49a";
}
.ri-expand-height-line:before {
  content: "\f49b";
}
.ri-expand-width-fill:before {
  content: "\f49c";
}
.ri-expand-width-line:before {
  content: "\f49d";
}
.ri-forward-end-fill:before {
  content: "\f49e";
}
.ri-forward-end-line:before {
  content: "\f49f";
}
.ri-forward-end-mini-fill:before {
  content: "\f4a0";
}
.ri-forward-end-mini-line:before {
  content: "\f4a1";
}
.ri-friendica-fill:before {
  content: "\f4a2";
}
.ri-friendica-line:before {
  content: "\f4a3";
}
.ri-git-pr-draft-fill:before {
  content: "\f4a4";
}
.ri-git-pr-draft-line:before {
  content: "\f4a5";
}
.ri-play-reverse-fill:before {
  content: "\f4a6";
}
.ri-play-reverse-line:before {
  content: "\f4a7";
}
.ri-play-reverse-mini-fill:before {
  content: "\f4a8";
}
.ri-play-reverse-mini-line:before {
  content: "\f4a9";
}
.ri-rewind-start-fill:before {
  content: "\f4aa";
}
.ri-rewind-start-line:before {
  content: "\f4ab";
}
.ri-rewind-start-mini-fill:before {
  content: "\f4ac";
}
.ri-rewind-start-mini-line:before {
  content: "\f4ad";
}
.ri-scroll-to-bottom-fill:before {
  content: "\f4ae";
}
.ri-scroll-to-bottom-line:before {
  content: "\f4af";
}
.ri-add-large-fill:before {
  content: "\f4b0";
}
.ri-add-large-line:before {
  content: "\f4b1";
}
.ri-aed-electrodes-fill:before {
  content: "\f4b2";
}
.ri-aed-electrodes-line:before {
  content: "\f4b3";
}
.ri-aed-fill:before {
  content: "\f4b4";
}
.ri-aed-line:before {
  content: "\f4b5";
}
.ri-alibaba-cloud-fill:before {
  content: "\f4b6";
}
.ri-alibaba-cloud-line:before {
  content: "\f4b7";
}
.ri-align-item-bottom-fill:before {
  content: "\f4b8";
}
.ri-align-item-bottom-line:before {
  content: "\f4b9";
}
.ri-align-item-horizontal-center-fill:before {
  content: "\f4ba";
}
.ri-align-item-horizontal-center-line:before {
  content: "\f4bb";
}
.ri-align-item-left-fill:before {
  content: "\f4bc";
}
.ri-align-item-left-line:before {
  content: "\f4bd";
}
.ri-align-item-right-fill:before {
  content: "\f4be";
}
.ri-align-item-right-line:before {
  content: "\f4bf";
}
.ri-align-item-top-fill:before {
  content: "\f4c0";
}
.ri-align-item-top-line:before {
  content: "\f4c1";
}
.ri-align-item-vertical-center-fill:before {
  content: "\f4c2";
}
.ri-align-item-vertical-center-line:before {
  content: "\f4c3";
}
.ri-apps-2-add-fill:before {
  content: "\f4c4";
}
.ri-apps-2-add-line:before {
  content: "\f4c5";
}
.ri-close-large-fill:before {
  content: "\f4c6";
}
.ri-close-large-line:before {
  content: "\f4c7";
}
.ri-collapse-diagonal-2-fill:before {
  content: "\f4c8";
}
.ri-collapse-diagonal-2-line:before {
  content: "\f4c9";
}
.ri-collapse-diagonal-fill:before {
  content: "\f4ca";
}
.ri-collapse-diagonal-line:before {
  content: "\f4cb";
}
.ri-dashboard-horizontal-fill:before {
  content: "\f4cc";
}
.ri-dashboard-horizontal-line:before {
  content: "\f4cd";
}
.ri-expand-diagonal-2-fill:before {
  content: "\f4ce";
}
.ri-expand-diagonal-2-line:before {
  content: "\f4cf";
}
.ri-expand-diagonal-fill:before {
  content: "\f4d0";
}
.ri-expand-diagonal-line:before {
  content: "\f4d1";
}
.ri-firebase-fill:before {
  content: "\f4d2";
}
.ri-firebase-line:before {
  content: "\f4d3";
}
.ri-flip-horizontal-2-fill:before {
  content: "\f4d4";
}
.ri-flip-horizontal-2-line:before {
  content: "\f4d5";
}
.ri-flip-horizontal-fill:before {
  content: "\f4d6";
}
.ri-flip-horizontal-line:before {
  content: "\f4d7";
}
.ri-flip-vertical-2-fill:before {
  content: "\f4d8";
}
.ri-flip-vertical-2-line:before {
  content: "\f4d9";
}
.ri-flip-vertical-fill:before {
  content: "\f4da";
}
.ri-flip-vertical-line:before {
  content: "\f4db";
}
.ri-formula:before {
  content: "\f4dc";
}
.ri-function-add-fill:before {
  content: "\f4dd";
}
.ri-function-add-line:before {
  content: "\f4de";
}
.ri-goblet-2-fill:before {
  content: "\f4df";
}
.ri-goblet-2-line:before {
  content: "\f4e0";
}
.ri-golf-ball-fill:before {
  content: "\f4e1";
}
.ri-golf-ball-line:before {
  content: "\f4e2";
}
.ri-group-3-fill:before {
  content: "\f4e3";
}
.ri-group-3-line:before {
  content: "\f4e4";
}
.ri-heart-add-2-fill:before {
  content: "\f4e5";
}
.ri-heart-add-2-line:before {
  content: "\f4e6";
}
.ri-id-card-fill:before {
  content: "\f4e7";
}
.ri-id-card-line:before {
  content: "\f4e8";
}
.ri-information-off-fill:before {
  content: "\f4e9";
}
.ri-information-off-line:before {
  content: "\f4ea";
}
.ri-java-fill:before {
  content: "\f4eb";
}
.ri-java-line:before {
  content: "\f4ec";
}
.ri-layout-grid-2-fill:before {
  content: "\f4ed";
}
.ri-layout-grid-2-line:before {
  content: "\f4ee";
}
.ri-layout-horizontal-fill:before {
  content: "\f4ef";
}
.ri-layout-horizontal-line:before {
  content: "\f4f0";
}
.ri-layout-vertical-fill:before {
  content: "\f4f1";
}
.ri-layout-vertical-line:before {
  content: "\f4f2";
}
.ri-menu-fold-2-fill:before {
  content: "\f4f3";
}
.ri-menu-fold-2-line:before {
  content: "\f4f4";
}
.ri-menu-fold-3-fill:before {
  content: "\f4f5";
}
.ri-menu-fold-3-line:before {
  content: "\f4f6";
}
.ri-menu-fold-4-fill:before {
  content: "\f4f7";
}
.ri-menu-fold-4-line:before {
  content: "\f4f8";
}
.ri-menu-unfold-2-fill:before {
  content: "\f4f9";
}
.ri-menu-unfold-2-line:before {
  content: "\f4fa";
}
.ri-menu-unfold-3-fill:before {
  content: "\f4fb";
}
.ri-menu-unfold-3-line:before {
  content: "\f4fc";
}
.ri-menu-unfold-4-fill:before {
  content: "\f4fd";
}
.ri-menu-unfold-4-line:before {
  content: "\f4fe";
}
.ri-mobile-download-fill:before {
  content: "\f4ff";
}
.ri-mobile-download-line:before {
  content: "\f500";
}
.ri-nextjs-fill:before {
  content: "\f501";
}
.ri-nextjs-line:before {
  content: "\f502";
}
.ri-nodejs-fill:before {
  content: "\f503";
}
.ri-nodejs-line:before {
  content: "\f504";
}
.ri-pause-large-fill:before {
  content: "\f505";
}
.ri-pause-large-line:before {
  content: "\f506";
}
.ri-play-large-fill:before {
  content: "\f507";
}
.ri-play-large-line:before {
  content: "\f508";
}
.ri-play-reverse-large-fill:before {
  content: "\f509";
}
.ri-play-reverse-large-line:before {
  content: "\f50a";
}
.ri-police-badge-fill:before {
  content: "\f50b";
}
.ri-police-badge-line:before {
  content: "\f50c";
}
.ri-prohibited-2-fill:before {
  content: "\f50d";
}
.ri-prohibited-2-line:before {
  content: "\f50e";
}
.ri-shopping-bag-4-fill:before {
  content: "\f50f";
}
.ri-shopping-bag-4-line:before {
  content: "\f510";
}
.ri-snowflake-fill:before {
  content: "\f511";
}
.ri-snowflake-line:before {
  content: "\f512";
}
.ri-square-root:before {
  content: "\f513";
}
.ri-stop-large-fill:before {
  content: "\f514";
}
.ri-stop-large-line:before {
  content: "\f515";
}
.ri-tailwind-css-fill:before {
  content: "\f516";
}
.ri-tailwind-css-line:before {
  content: "\f517";
}
.ri-tooth-fill:before {
  content: "\f518";
}
.ri-tooth-line:before {
  content: "\f519";
}
.ri-video-off-fill:before {
  content: "\f51a";
}
.ri-video-off-line:before {
  content: "\f51b";
}
.ri-video-on-fill:before {
  content: "\f51c";
}
.ri-video-on-line:before {
  content: "\f51d";
}
.ri-webhook-fill:before {
  content: "\f51e";
}
.ri-webhook-line:before {
  content: "\f51f";
}
.ri-weight-fill:before {
  content: "\f520";
}
.ri-weight-line:before {
  content: "\f521";
}
.ri-book-shelf-fill:before {
  content: "\f522";
}
.ri-book-shelf-line:before {
  content: "\f523";
}
.ri-brain-2-fill:before {
  content: "\f524";
}
.ri-brain-2-line:before {
  content: "\f525";
}
.ri-chat-search-fill:before {
  content: "\f526";
}
.ri-chat-search-line:before {
  content: "\f527";
}
.ri-chat-unread-fill:before {
  content: "\f528";
}
.ri-chat-unread-line:before {
  content: "\f529";
}
.ri-collapse-horizontal-fill:before {
  content: "\f52a";
}
.ri-collapse-horizontal-line:before {
  content: "\f52b";
}
.ri-collapse-vertical-fill:before {
  content: "\f52c";
}
.ri-collapse-vertical-line:before {
  content: "\f52d";
}
.ri-dna-fill:before {
  content: "\f52e";
}
.ri-dna-line:before {
  content: "\f52f";
}
.ri-dropper-fill:before {
  content: "\f530";
}
.ri-dropper-line:before {
  content: "\f531";
}
.ri-expand-diagonal-s-2-fill:before {
  content: "\f532";
}
.ri-expand-diagonal-s-2-line:before {
  content: "\f533";
}
.ri-expand-diagonal-s-fill:before {
  content: "\f534";
}
.ri-expand-diagonal-s-line:before {
  content: "\f535";
}
.ri-expand-horizontal-fill:before {
  content: "\f536";
}
.ri-expand-horizontal-line:before {
  content: "\f537";
}
.ri-expand-horizontal-s-fill:before {
  content: "\f538";
}
.ri-expand-horizontal-s-line:before {
  content: "\f539";
}
.ri-expand-vertical-fill:before {
  content: "\f53a";
}
.ri-expand-vertical-line:before {
  content: "\f53b";
}
.ri-expand-vertical-s-fill:before {
  content: "\f53c";
}
.ri-expand-vertical-s-line:before {
  content: "\f53d";
}
.ri-gemini-fill:before {
  content: "\f53e";
}
.ri-gemini-line:before {
  content: "\f53f";
}
.ri-reset-left-fill:before {
  content: "\f540";
}
.ri-reset-left-line:before {
  content: "\f541";
}
.ri-reset-right-fill:before {
  content: "\f542";
}
.ri-reset-right-line:before {
  content: "\f543";
}
.ri-stairs-fill:before {
  content: "\f544";
}
.ri-stairs-line:before {
  content: "\f545";
}
.ri-telegram-2-fill:before {
  content: "\f546";
}
.ri-telegram-2-line:before {
  content: "\f547";
}
.ri-triangular-flag-fill:before {
  content: "\f548";
}
.ri-triangular-flag-line:before {
  content: "\f549";
}
.ri-user-minus-fill:before {
  content: "\f54a";
}
.ri-user-minus-line:before {
  content: "\f54b";
}
.ri-account-box-2-fill:before {
  content: "\f54c";
}
.ri-account-box-2-line:before {
  content: "\f54d";
}
.ri-account-circle-2-fill:before {
  content: "\f54e";
}
.ri-account-circle-2-line:before {
  content: "\f54f";
}
.ri-alarm-snooze-fill:before {
  content: "\f550";
}
.ri-alarm-snooze-line:before {
  content: "\f551";
}
.ri-arrow-down-box-fill:before {
  content: "\f552";
}
.ri-arrow-down-box-line:before {
  content: "\f553";
}
.ri-arrow-left-box-fill:before {
  content: "\f554";
}
.ri-arrow-left-box-line:before {
  content: "\f555";
}
.ri-arrow-left-down-box-fill:before {
  content: "\f556";
}
.ri-arrow-left-down-box-line:before {
  content: "\f557";
}
.ri-arrow-left-up-box-fill:before {
  content: "\f558";
}
.ri-arrow-left-up-box-line:before {
  content: "\f559";
}
.ri-arrow-right-box-fill:before {
  content: "\f55a";
}
.ri-arrow-right-box-line:before {
  content: "\f55b";
}
.ri-arrow-right-down-box-fill:before {
  content: "\f55c";
}
.ri-arrow-right-down-box-line:before {
  content: "\f55d";
}
.ri-arrow-right-up-box-fill:before {
  content: "\f55e";
}
.ri-arrow-right-up-box-line:before {
  content: "\f55f";
}
.ri-arrow-up-box-fill:before {
  content: "\f560";
}
.ri-arrow-up-box-line:before {
  content: "\f561";
}
.ri-bar-chart-box-ai-fill:before {
  content: "\f562";
}
.ri-bar-chart-box-ai-line:before {
  content: "\f563";
}
.ri-brush-ai-fill:before {
  content: "\f564";
}
.ri-brush-ai-line:before {
  content: "\f565";
}
.ri-camera-ai-fill:before {
  content: "\f566";
}
.ri-camera-ai-line:before {
  content: "\f567";
}
.ri-chat-ai-fill:before {
  content: "\f568";
}
.ri-chat-ai-line:before {
  content: "\f569";
}
.ri-chat-smile-ai-fill:before {
  content: "\f56a";
}
.ri-chat-smile-ai-line:before {
  content: "\f56b";
}
.ri-chat-voice-ai-fill:before {
  content: "\f56c";
}
.ri-chat-voice-ai-line:before {
  content: "\f56d";
}
.ri-code-ai-fill:before {
  content: "\f56e";
}
.ri-code-ai-line:before {
  content: "\f56f";
}
.ri-color-filter-ai-fill:before {
  content: "\f570";
}
.ri-color-filter-ai-line:before {
  content: "\f571";
}
.ri-custom-size:before {
  content: "\f572";
}
.ri-fediverse-fill:before {
  content: "\f573";
}
.ri-fediverse-line:before {
  content: "\f574";
}
.ri-flag-off-fill:before {
  content: "\f575";
}
.ri-flag-off-line:before {
  content: "\f576";
}
.ri-home-9-fill:before {
  content: "\f577";
}
.ri-home-9-line:before {
  content: "\f578";
}
.ri-image-ai-fill:before {
  content: "\f579";
}
.ri-image-ai-line:before {
  content: "\f57a";
}
.ri-image-circle-ai-fill:before {
  content: "\f57b";
}
.ri-image-circle-ai-line:before {
  content: "\f57c";
}
.ri-info-card-fill:before {
  content: "\f57d";
}
.ri-info-card-line:before {
  content: "\f57e";
}
.ri-landscape-ai-fill:before {
  content: "\f57f";
}
.ri-landscape-ai-line:before {
  content: "\f580";
}
.ri-letter-spacing-2:before {
  content: "\f581";
}
.ri-line-height-2:before {
  content: "\f582";
}
.ri-mail-ai-fill:before {
  content: "\f583";
}
.ri-mail-ai-line:before {
  content: "\f584";
}
.ri-mic-2-ai-fill:before {
  content: "\f585";
}
.ri-mic-2-ai-line:before {
  content: "\f586";
}
.ri-mic-ai-fill:before {
  content: "\f587";
}
.ri-mic-ai-line:before {
  content: "\f588";
}
.ri-movie-ai-fill:before {
  content: "\f589";
}
.ri-movie-ai-line:before {
  content: "\f58a";
}
.ri-music-ai-fill:before {
  content: "\f58b";
}
.ri-music-ai-line:before {
  content: "\f58c";
}
.ri-notification-snooze-fill:before {
  content: "\f58d";
}
.ri-notification-snooze-line:before {
  content: "\f58e";
}
.ri-php-fill:before {
  content: "\f58f";
}
.ri-php-line:before {
  content: "\f590";
}
.ri-pix-fill:before {
  content: "\f591";
}
.ri-pix-line:before {
  content: "\f592";
}
.ri-pulse-ai-fill:before {
  content: "\f593";
}
.ri-pulse-ai-line:before {
  content: "\f594";
}
.ri-quill-pen-ai-fill:before {
  content: "\f595";
}
.ri-quill-pen-ai-line:before {
  content: "\f596";
}
.ri-speak-ai-fill:before {
  content: "\f597";
}
.ri-speak-ai-line:before {
  content: "\f598";
}
.ri-star-off-fill:before {
  content: "\f599";
}
.ri-star-off-line:before {
  content: "\f59a";
}
.ri-translate-ai-2:before {
  content: "\f59b";
}
.ri-translate-ai:before {
  content: "\f59c";
}
.ri-user-community-fill:before {
  content: "\f59d";
}
.ri-user-community-line:before {
  content: "\f59e";
}
.ri-vercel-fill:before {
  content: "\f59f";
}
.ri-vercel-line:before {
  content: "\f5a0";
}
.ri-video-ai-fill:before {
  content: "\f5a1";
}
.ri-video-ai-line:before {
  content: "\f5a2";
}
.ri-video-on-ai-fill:before {
  content: "\f5a3";
}
.ri-video-on-ai-line:before {
  content: "\f5a4";
}
.ri-voice-ai-fill:before {
  content: "\f5a5";
}
.ri-voice-ai-line:before {
  content: "\f5a6";
}
.ri-ai-generate-2:before {
  content: "\f5a7";
}
.ri-ai-generate-text:before {
  content: "\f5a8";
}
.ri-anthropic-fill:before {
  content: "\f5a9";
}
.ri-anthropic-line:before {
  content: "\f5aa";
}
.ri-apps-2-ai-fill:before {
  content: "\f5ab";
}
.ri-apps-2-ai-line:before {
  content: "\f5ac";
}
.ri-camera-lens-ai-fill:before {
  content: "\f5ad";
}
.ri-camera-lens-ai-line:before {
  content: "\f5ae";
}
.ri-clapperboard-ai-fill:before {
  content: "\f5af";
}
.ri-clapperboard-ai-line:before {
  content: "\f5b0";
}
.ri-claude-fill:before {
  content: "\f5b1";
}
.ri-claude-line:before {
  content: "\f5b2";
}
.ri-closed-captioning-ai-fill:before {
  content: "\f5b3";
}
.ri-closed-captioning-ai-line:before {
  content: "\f5b4";
}
.ri-dvd-ai-fill:before {
  content: "\f5b5";
}
.ri-dvd-ai-line:before {
  content: "\f5b6";
}
.ri-film-ai-fill:before {
  content: "\f5b7";
}
.ri-film-ai-line:before {
  content: "\f5b8";
}
.ri-font-size-ai:before {
  content: "\f5b9";
}
.ri-mixtral-fill:before {
  content: "\f5ba";
}
.ri-mixtral-line:before {
  content: "\f5bb";
}
.ri-movie-2-ai-fill:before {
  content: "\f5bc";
}
.ri-movie-2-ai-line:before {
  content: "\f5bd";
}
.ri-mv-ai-fill:before {
  content: "\f5be";
}
.ri-mv-ai-line:before {
  content: "\f5bf";
}
.ri-perplexity-fill:before {
  content: "\f5c0";
}
.ri-perplexity-line:before {
  content: "\f5c1";
}
.ri-poker-clubs-fill:before {
  content: "\f5c2";
}
.ri-poker-clubs-line:before {
  content: "\f5c3";
}
.ri-poker-diamonds-fill:before {
  content: "\f5c4";
}
.ri-poker-diamonds-line:before {
  content: "\f5c5";
}
.ri-poker-hearts-fill:before {
  content: "\f5c6";
}
.ri-poker-hearts-line:before {
  content: "\f5c7";
}
.ri-poker-spades-fill:before {
  content: "\f5c8";
}
.ri-poker-spades-line:before {
  content: "\f5c9";
}
.ri-safe-3-fill:before {
  content: "\f5ca";
}
.ri-safe-3-line:before {
  content: "\f5cb";
}
.ri-accessibility-fill:before {
  content: "\f5cc";
}
.ri-accessibility-line:before {
  content: "\f5cd";
}
.ri-alarm-add-fill:before {
  content: "\f5ce";
}
.ri-alarm-add-line:before {
  content: "\f5cf";
}
.ri-arrow-down-long-fill:before {
  content: "\f5d0";
}
.ri-arrow-down-long-line:before {
  content: "\f5d1";
}
.ri-arrow-left-down-long-fill:before {
  content: "\f5d2";
}
.ri-arrow-left-down-long-line:before {
  content: "\f5d3";
}
.ri-arrow-left-long-fill:before {
  content: "\f5d4";
}
.ri-arrow-left-long-line:before {
  content: "\f5d5";
}
.ri-arrow-left-up-long-fill:before {
  content: "\f5d6";
}
.ri-arrow-left-up-long-line:before {
  content: "\f5d7";
}
.ri-arrow-right-down-long-fill:before {
  content: "\f5d8";
}
.ri-arrow-right-down-long-line:before {
  content: "\f5d9";
}
.ri-arrow-right-long-fill:before {
  content: "\f5da";
}
.ri-arrow-right-long-line:before {
  content: "\f5db";
}
.ri-arrow-right-up-long-fill:before {
  content: "\f5dc";
}
.ri-arrow-right-up-long-line:before {
  content: "\f5dd";
}
.ri-arrow-up-long-fill:before {
  content: "\f5de";
}
.ri-arrow-up-long-line:before {
  content: "\f5df";
}
.ri-chess-fill:before {
  content: "\f5e0";
}
.ri-chess-line:before {
  content: "\f5e1";
}
.ri-diamond-fill:before {
  content: "\f5e2";
}
.ri-diamond-line:before {
  content: "\f5e3";
}
.ri-diamond-ring-fill:before {
  content: "\f5e4";
}
.ri-diamond-ring-line:before {
  content: "\f5e5";
}
.ri-figma-fill:before {
  content: "\f5e6";
}
.ri-figma-line:before {
  content: "\f5e7";
}
.ri-firefox-browser-fill:before {
  content: "\f5e8";
}
.ri-firefox-browser-line:before {
  content: "\f5e9";
}
.ri-jewelry-fill:before {
  content: "\f5ea";
}
.ri-jewelry-line:before {
  content: "\f5eb";
}
.ri-multi-image-fill:before {
  content: "\f5ec";
}
.ri-multi-image-line:before {
  content: "\f5ed";
}
.ri-no-credit-card-fill:before {
  content: "\f5ee";
}
.ri-no-credit-card-line:before {
  content: "\f5ef";
}
.ri-service-bell-fill:before {
  content: "\f5f0";
}
.ri-service-bell-line:before {
  content: "\f5f1";
}
.ri-ai-agent-fill:before {
  content: "\f5f2";
}
.ri-ai-agent-line:before {
  content: "\f5f3";
}
.ri-ai-generate-2-fill:before {
  content: "\f5f4";
}
.ri-ai-generate-2-line:before {
  content: "\f5f5";
}
.ri-ai-generate-3d-fill:before {
  content: "\f5f6";
}
.ri-ai-generate-3d-line:before {
  content: "\f5f7";
}
.ri-ai:before {
  content: "\f5f8";
}
.ri-apps-ai-fill:before {
  content: "\f5f9";
}
.ri-apps-ai-line:before {
  content: "\f5fa";
}
.ri-atom-fill:before {
  content: "\f5fb";
}
.ri-atom-line:before {
  content: "\f5fc";
}
.ri-book-ai-fill:before {
  content: "\f5fd";
}
.ri-book-ai-line:before {
  content: "\f5fe";
}
.ri-brain-3-fill:before {
  content: "\f5ff";
}
.ri-brain-3-line:before {
  content: "\f600";
}
.ri-brain-ai-3-fill:before {
  content: "\f601";
}
.ri-brain-ai-3-line:before {
  content: "\f602";
}
.ri-brush-ai-3-fill:before {
  content: "\f603";
}
.ri-brush-ai-3-line:before {
  content: "\f604";
}
.ri-camera-4-fill:before {
  content: "\f605";
}
.ri-camera-4-line:before {
  content: "\f606";
}
.ri-camera-ai-2-fill:before {
  content: "\f607";
}
.ri-camera-ai-2-line:before {
  content: "\f608";
}
.ri-chat-ai-2-fill:before {
  content: "\f609";
}
.ri-chat-ai-2-line:before {
  content: "\f60a";
}
.ri-chat-ai-3-fill:before {
  content: "\f60b";
}
.ri-chat-ai-3-line:before {
  content: "\f60c";
}
.ri-chat-ai-4-fill:before {
  content: "\f60d";
}
.ri-chat-ai-4-line:before {
  content: "\f60e";
}
.ri-chat-smile-ai-3-fill:before {
  content: "\f60f";
}
.ri-chat-smile-ai-3-line:before {
  content: "\f610";
}
.ri-deepseek-fill:before {
  content: "\f611";
}
.ri-deepseek-line:before {
  content: "\f612";
}
.ri-file-ai-2-fill:before {
  content: "\f613";
}
.ri-file-ai-2-line:before {
  content: "\f614";
}
.ri-file-ai-fill:before {
  content: "\f615";
}
.ri-file-ai-line:before {
  content: "\f616";
}
.ri-function-ai-fill:before {
  content: "\f617";
}
.ri-function-ai-line:before {
  content: "\f618";
}
.ri-game-2-fill:before {
  content: "\f619";
}
.ri-game-2-line:before {
  content: "\f61a";
}
.ri-goblet-broken-fill:before {
  content: "\f61b";
}
.ri-goblet-broken-line:before {
  content: "\f61c";
}
.ri-lightbulb-ai-fill:before {
  content: "\f61d";
}
.ri-lightbulb-ai-line:before {
  content: "\f61e";
}
.ri-loop-left-ai-fill:before {
  content: "\f61f";
}
.ri-loop-left-ai-line:before {
  content: "\f620";
}
.ri-loop-right-ai-fill:before {
  content: "\f621";
}
.ri-loop-right-ai-line:before {
  content: "\f622";
}
.ri-message-ai-3-fill:before {
  content: "\f623";
}
.ri-message-ai-3-line:before {
  content: "\f624";
}
.ri-painting-ai-fill:before {
  content: "\f625";
}
.ri-painting-ai-line:before {
  content: "\f626";
}
.ri-painting-fill:before {
  content: "\f627";
}
.ri-painting-line:before {
  content: "\f628";
}
.ri-pencil-ai-2-fill:before {
  content: "\f629";
}
.ri-pencil-ai-2-line:before {
  content: "\f62a";
}
.ri-pencil-ai-fill:before {
  content: "\f62b";
}
.ri-pencil-ai-line:before {
  content: "\f62c";
}
.ri-remix-fill:before {
  content: "\f62d";
}
.ri-remix-line:before {
  content: "\f62e";
}
.ri-search-ai-2-fill:before {
  content: "\f62f";
}
.ri-search-ai-2-line:before {
  content: "\f630";
}
.ri-search-ai-3-fill:before {
  content: "\f631";
}
.ri-search-ai-3-line:before {
  content: "\f632";
}
.ri-search-ai-4-fill:before {
  content: "\f633";
}
.ri-search-ai-4-line:before {
  content: "\f634";
}
.ri-search-ai-fill:before {
  content: "\f635";
}
.ri-search-ai-line:before {
  content: "\f636";
}
.ri-speech-to-text-fill:before {
  content: "\f637";
}
.ri-speech-to-text-line:before {
  content: "\f638";
}
.ri-target-fill:before {
  content: "\f639";
}
.ri-target-line:before {
  content: "\f63a";
}
.ri-text-to-speech-fill:before {
  content: "\f63b";
}
.ri-text-to-speech-line:before {
  content: "\f63c";
}
.ri-wrench-fill:before {
  content: "\f63d";
}
.ri-wrench-line:before {
  content: "\f63e";
}
.ri-area-chart-fill:before {
  content: "\f63f";
}
.ri-area-chart-line:before {
  content: "\f640";
}
.ri-baseball-fill:before {
  content: "\f641";
}
.ri-baseball-line:before {
  content: "\f642";
}
.ri-binoculars-fill:before {
  content: "\f643";
}
.ri-binoculars-line:before {
  content: "\f644";
}
.ri-cursor-hand:before {
  content: "\f645";
}
.ri-emotion-add-fill:before {
  content: "\f646";
}
.ri-emotion-add-line:before {
  content: "\f647";
}
.ri-file-scan-fill:before {
  content: "\f648";
}
.ri-file-scan-line:before {
  content: "\f649";
}
.ri-fiverr-fill:before {
  content: "\f64a";
}
.ri-fiverr-line:before {
  content: "\f64b";
}
.ri-font-serif:before {
  content: "\f64c";
}
.ri-ghost-3-fill:before {
  content: "\f64d";
}
.ri-ghost-3-line:before {
  content: "\f64e";
}
.ri-gitee-fill:before {
  content: "\f64f";
}
.ri-gitee-line:before {
  content: "\f650";
}
.ri-global-off-fill:before {
  content: "\f651";
}
.ri-global-off-line:before {
  content: "\f652";
}
.ri-image-download-fill:before {
  content: "\f653";
}
.ri-image-download-line:before {
  content: "\f654";
}
.ri-image-upload-fill:before {
  content: "\f655";
}
.ri-image-upload-line:before {
  content: "\f656";
}
.ri-issues-fill:before {
  content: "\f657";
}
.ri-issues-line:before {
  content: "\f658";
}
.ri-issues-reopen-fill:before {
  content: "\f659";
}
.ri-issues-reopen-line:before {
  content: "\f65a";
}
.ri-network-error-fill:before {
  content: "\f65b";
}
.ri-network-error-line:before {
  content: "\f65c";
}
.ri-network-fill:before {
  content: "\f65d";
}
.ri-network-line:before {
  content: "\f65e";
}
.ri-network-off-fill:before {
  content: "\f65f";
}
.ri-network-off-line:before {
  content: "\f660";
}
.ri-piano-fill:before {
  content: "\f661";
}
.ri-piano-grand-fill:before {
  content: "\f662";
}
.ri-piano-grand-line:before {
  content: "\f663";
}
.ri-piano-line:before {
  content: "\f664";
}
.ri-plug-3-fill:before {
  content: "\f665";
}
.ri-plug-3-line:before {
  content: "\f666";
}
.ri-send-ins-fill:before {
  content: "\f667";
}
.ri-send-ins-line:before {
  content: "\f668";
}
.ri-signal-cellular-1-fill:before {
  content: "\f669";
}
.ri-signal-cellular-1-line:before {
  content: "\f66a";
}
.ri-signal-cellular-2-fill:before {
  content: "\f66b";
}
.ri-signal-cellular-2-line:before {
  content: "\f66c";
}
.ri-signal-cellular-3-fill:before {
  content: "\f66d";
}
.ri-signal-cellular-3-line:before {
  content: "\f66e";
}
.ri-signal-cellular-off-fill:before {
  content: "\f66f";
}
.ri-signal-cellular-off-line:before {
  content: "\f670";
}
.ri-stacked-chart-fill:before {
  content: "\f671";
}
.ri-stacked-chart-line:before {
  content: "\f672";
}
.ri-upwork-fill:before {
  content: "\f673";
}
.ri-upwork-line:before {
  content: "\f674";
}
.ri-brain-4-fill:before {
  content: "\f675";
}
.ri-brain-4-line:before {
  content: "\f676";
}
.ri-certificate-2-fill:before {
  content: "\f677";
}
.ri-certificate-2-line:before {
  content: "\f678";
}
.ri-certificate-fill:before {
  content: "\f679";
}
.ri-certificate-line:before {
  content: "\f67a";
}
.ri-cookie-fill:before {
  content: "\f67b";
}
.ri-cookie-line:before {
  content: "\f67c";
}
.ri-cursor-ai-fill:before {
  content: "\f67d";
}
.ri-cursor-ai-line:before {
  content: "\f67e";
}
.ri-draw-fill:before {
  content: "\f67f";
}
.ri-draw-line:before {
  content: "\f680";
}
.ri-ghost-4-fill:before {
  content: "\f681";
}
.ri-ghost-4-line:before {
  content: "\f682";
}
.ri-gitbook-fill:before {
  content: "\f683";
}
.ri-gitbook-line:before {
  content: "\f684";
}
.ri-grok-ai-fill:before {
  content: "\f685";
}
.ri-grok-ai-line:before {
  content: "\f686";
}
.ri-hand-2:before {
  content: "\f687";
}
.ri-megaphone-2-fill:before {
  content: "\f688";
}
.ri-megaphone-2-line:before {
  content: "\f689";
}
.ri-microsoft-copilot-fill:before {
  content: "\f68a";
}
.ri-microsoft-copilot-line:before {
  content: "\f68b";
}
.ri-mosaic-fill:before {
  content: "\f68c";
}
.ri-mosaic-line:before {
  content: "\f68d";
}
.ri-qr-scan-ai-fill:before {
  content: "\f68e";
}
.ri-qr-scan-ai-line:before {
  content: "\f68f";
}
.ri-qwen-ai-fill:before {
  content: "\f690";
}
.ri-qwen-ai-line:before {
  content: "\f691";
}
.ri-reddit-2-fill:before {
  content: "\f692";
}
.ri-reddit-2-line:before {
  content: "\f693";
}
.ri-sim-card-warning-fill:before {
  content: "\f694";
}
.ri-sim-card-warning-line:before {
  content: "\f695";
}
.ri-space-ship-2-fill:before {
  content: "\f696";
}
.ri-space-ship-2-line:before {
  content: "\f697";
}
.ri-subreddit-fill:before {
  content: "\f698";
}
.ri-subreddit-line:before {
  content: "\f699";
}
.ri-zhipu-ai-fill:before {
  content: "\f69a";
}
.ri-zhipu-ai-line:before {
  content: "\f69b";
}
.ri-connector-fill:before {
  content: "\f69c";
}
.ri-connector-line:before {
  content: "\f69d";
}
.ds-editor-error {
  padding: 10px 12px;
  border: 1px solid rgba(192, 57, 43, 0.32);
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.08);
  color: var(--danger, #c0392b);
  font-size: 12px;
}
.ds-setup-shell {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  position: relative;
}
.ds-setup-shell--embedded {
  height: auto;
  overflow: visible;
  background: transparent;
}
.ds-setup-topbar {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
}
.ds-setup-topbar .primary, .ds-setup-topbar .ghost, .ds-setup-actions button, .ds-warning-card, .ds-section-actions button, .ds-publish-card label, .ds-github-access-toggle, .ds-github-access-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ds-setup-actions button, .ds-resource-inline button, .ds-drop-zone-wrap > button, .ds-github-access-toggle, .ds-github-access-actions button {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ds-setup-actions button:hover, .ds-resource-inline button:hover, .ds-drop-zone-wrap > button:hover, .ds-github-access-toggle:hover, .ds-github-access-actions button:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  color: var(--text-strong);
  transform: translateY(-1px);
}
.ds-setup-actions .primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast, #fff);
}
.ds-setup-actions .primary:disabled, .ds-resource-inline button:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}
.ds-setup-topbar .primary {
  justify-self: end;
}
.ds-setup-topbar .ghost {
  justify-self: start;
}
.ds-setup-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
}
.ds-setup-form {
  width: min(720px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 36px 0 64px;
}
.ds-setup-shell--embedded .ds-setup-form {
  width: 100%;
  padding: 0;
}
.ds-setup-shell--embedded .ds-setup-form > h1, .ds-setup-shell--embedded .ds-setup-form > p {
  display: none;
}
.ds-setup-shell--embedded .ds-setup-form > h1 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: 0;
}
.ds-setup-shell--embedded .ds-setup-form > p {
  max-width: 62ch;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ds-setup-form > h1, .ds-setup-center-card h1, .ds-review-column > h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1.08;
  margin: 0 0 10px;
}
.ds-setup-form > p, .ds-setup-center-card p {
  margin: 0 0 30px;
  color: var(--text-muted);
}
.ds-setup-field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.ds-setup-field > span {
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 700;
}
.ds-setup-field textarea {
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--text-strong);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
}
.ds-setup-field textarea::placeholder, .ds-resource-inline input::placeholder {
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 62%, transparent);
  }
}
.ds-setup-field textarea:focus, .ds-setup-field textarea:focus-visible, .ds-resource-inline input:focus, .ds-resource-inline input:focus-visible {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  outline: 0;
}
.ds-resource-section {
  margin-bottom: 18px;
}
.ds-resource-section h2 {
  margin: 0 0 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.2;
}
.ds-resource-section h2 span, .ds-resource-section p {
  color: var(--text-muted);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.ds-resource-card {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
  }
  box-shadow: 0 14px 36px var(--shadow-color, #000), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow-color, #000) 5%, transparent), var(--shadow-xs);
  }
  overflow: hidden;
}
.ds-resource-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--border-soft);
}
.ds-resource-row:first-child {
  border-top: 0;
}
.ds-resource-row > strong {
  color: var(--text-strong);
  font-size: 13.5px;
  line-height: 1.3;
}
.ds-resource-row > p {
  grid-column: 1 / -1;
  margin: -6px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.ds-resource-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.ds-resource-inline input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text-strong);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 13px;
}
.ds-github-url-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -2px;
}
.ds-github-url-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 12px;
}
.ds-github-url-list button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.ds-github-access-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.ds-github-access-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ds-github-access-header > span {
  min-width: 0;
}
.ds-github-access-header strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.ds-github-access-header p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ds-github-access-toggle {
  flex: 0 0 auto;
}
.ds-github-access-panel .accordion-collapsible[hidden] {
  display: none;
}
.ds-github-access-methods {
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.ds-github-access-method {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 14px;
}
.ds-github-access-method:first-child {
  padding-left: 0;
}
.ds-github-access-method + .ds-github-access-method {
  border-left: 1px solid var(--border-soft);
}
.ds-github-access-method .od-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-muted);
}
.ds-github-access-method-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ds-github-access-method-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-github-access-method-title strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.ds-github-access-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.ds-github-access-badge.is-success {
  border-color: var(--green-border);
  background: var(--green-bg);
  color: var(--green);
}
.ds-github-access-badge.is-warning, .ds-github-access-badge.is-loading {
  border-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  }
  background: var(--amber-bg);
  color: var(--amber);
}
.ds-github-access-badge.is-danger {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.ds-github-access-method p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.ds-github-access-method em {
  display: block;
  margin-top: 2px;
  color: var(--red);
  font-size: 12px;
  font-style: normal;
}
.ds-github-access-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ds-github-access-panel.has-connected-connector .ds-github-access-method:last-child .od-icon {
  color: var(--green);
}
.ds-drop-zone-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.ds-drop-zone {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--border-strong) 76%, var(--accent) 24%);
  }
  border-radius: 8px;
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 84%, var(--bg-panel) 16%);
  }
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ds-drop-zone:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-subtle));
  }
  color: var(--text);
}
.ds-drop-zone span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-source-upload-loading {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 68%, transparent);
  }
  backdrop-filter: blur(2px);
}
.ds-source-upload-loading__card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}
.ds-hidden-input {
  display: none;
}
.ds-local-code-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}
.ds-local-code-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}
.ds-local-code-list button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.ds-setup-shell--center {
  display: grid;
  place-items: center;
}
.ds-setup-center-card {
  width: min(560px, calc(100vw - 40px));
  text-align: center;
}
.ds-setup-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.ds-setup-actions--embedded {
  justify-content: flex-end;
  margin-top: 22px;
  margin-bottom: 54px;
}
@media (max-width: 760px) {
  .ds-setup-shell--embedded .ds-setup-form > h1 {
    font-size: 24px;
  }
  .ds-resource-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px;
  }
  .ds-resource-inline, .ds-drop-zone-wrap {
    grid-template-columns: 1fr;
  }
  .ds-setup-actions--embedded {
    justify-content: stretch;
  }
  .ds-setup-actions--embedded button {
    flex: 1;
  }
}
.ds-workspace {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  background: var(--bg);
  color: var(--text);
}
.ds-agent-rail {
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
}
.ds-project-chat {
  min-height: 100vh;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
}
.ds-project-chat__bar {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.ds-project-chat__bar .icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-project-chat__bar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.ds-project-chat__bar span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.ds-project-chat__pane {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
}
.ds-project-chat__pane > .pane {
  flex: 1 1 auto;
}
.ds-agent-title {
  font-weight: 700;
  font-size: 16px;
}
.ds-chat-block, .ds-todo-card, .ds-summary-card, .ds-source-context-card, .ds-chat-composer {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.ds-chat-block span, .ds-summary-card span {
  color: var(--text-muted);
  line-height: 1.5;
}
.ds-source-context-card > div {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.ds-source-context-card > div:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.ds-source-context-card span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ds-source-context-card small {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ds-todo-card label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-todo-card label.is-running {
  color: var(--text);
}
.ds-todo-card label.is-succeeded {
  color: var(--green);
}
.ds-todo-card label.is-failed {
  color: var(--red);
}
.ds-todo-card label > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ds-todo-card label small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ds-chat-composer {
  margin-top: auto;
}
.ds-chat-composer textarea {
  resize: vertical;
}
.ds-chat-composer > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ds-generation-stage {
  display: grid;
  place-content: center;
  text-align: center;
}
.ds-generation-stage h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  margin: 0 0 10px;
}
.ds-generation-stage p {
  margin: 0;
  color: var(--text-muted);
}
.ds-progress-line {
  width: 180px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}
.ds-progress-line span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent));
  }
  transition: width 180ms ease;
}
.ds-review-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ds-review-tabs {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ds-file-workspace-host {
  flex: 1;
  min-height: 0;
  display: flex;
}
.ds-file-workspace-host .workspace {
  min-height: calc(100vh - 56px);
}
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.segmented button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 14px;
}
.segmented button.active {
  background: var(--bg-elevated);
  color: var(--text);
}
.ds-review-column {
  width: min(760px, calc(100vw - 420px));
  margin: 0 auto;
  padding: 40px 0 64px;
}
.ds-review-rule {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 12px 0 26px;
}
.ds-publish-card, .ds-warning-card, .ds-generation-review-card, .ds-workspace-activity-card, .ds-package-card, .ds-revision-card, .ds-revision-history, .ds-review-section, .ds-body-editor {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.ds-publish-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 18px;
}
.ds-publish-card p {
  margin: 0;
  color: var(--text-muted);
}
.ds-generation-review-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
}
.ds-generation-review-card.is-succeeded {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  }
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 7%, var(--bg-panel));
  }
}
.ds-generation-review-card.is-failed {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 8%, var(--bg-panel));
  }
}
.ds-generation-review-card > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ds-generation-review-card > div:first-child > span {
  display: grid;
  gap: 3px;
}
.ds-generation-review-card small {
  color: var(--text-muted);
  line-height: 1.35;
}
.ds-workspace-activity-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 18px;
  border-color: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
  }
  background: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--blue) 6%, var(--bg-panel));
  }
}
.ds-workspace-activity-card.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
}
.ds-workspace-activity-card.is-succeeded {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  }
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 7%, var(--bg-panel));
  }
}
.ds-workspace-activity-card.is-failed {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 8%, var(--bg-panel));
  }
}
.ds-workspace-activity-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ds-workspace-activity-head > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ds-workspace-activity-head small {
  color: var(--text-muted);
  line-height: 1.35;
}
.ds-workspace-todos {
  display: grid;
  gap: 6px;
}
.ds-workspace-todos span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.ds-workspace-todos span.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  color: var(--text);
}
.ds-workspace-todos span.is-succeeded {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  }
  color: var(--green);
}
.ds-workspace-files-touched {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.ds-workspace-files-touched > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ds-workspace-files-touched > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-workspace-files-touched code {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font: 11px/1.35 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-workspace-files-touched code.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  }
  color: var(--text);
}
.ds-workspace-files-touched code.is-done {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  }
}
.ds-workspace-files-touched code.is-error {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 36%, var(--border));
  }
  color: var(--red);
}
.ds-generation-review-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}
.ds-generation-review-progress span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent));
  }
  transition: width 180ms ease;
}
.ds-generation-review-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-generation-review-steps span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
}
.ds-generation-review-steps span.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  color: var(--text);
}
.ds-generation-review-steps span.is-succeeded {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 36%, var(--border));
  }
  color: var(--green);
}
.ds-generation-review-steps span.is-failed {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 40%, var(--border));
  }
  color: var(--red);
}
.ds-warning-card {
  padding: 14px 16px;
  margin-bottom: 24px;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  }
}
.ds-package-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
}
.ds-package-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ds-package-card__head > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ds-package-card__head small, .ds-package-card h2, .ds-package-file-list small, .ds-evidence-stats small {
  color: var(--text-muted);
}
.ds-token-contract-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  }
  border-radius: 8px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-subtle));
  }
}
.ds-token-contract-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ds-token-contract-row small {
  color: var(--text-muted);
}
.ds-token-contract-row > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ds-package-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.ds-package-pill.is-ready {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 36%, var(--border));
  }
  color: var(--green);
}
.ds-package-grid, .ds-package-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ds-package-grid > div, .ds-package-files > div, .ds-evidence-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
}
.ds-package-card h2 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ds-package-chips, .ds-package-file-list, .ds-confidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-package-chips code, .ds-package-file-list code {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-panel);
  color: var(--text);
  font: 11px/1.35 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-package-metrics, .ds-evidence-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ds-package-metrics span, .ds-evidence-stats span {
  display: grid;
  gap: 2px;
}
.ds-package-metrics strong, .ds-evidence-stats strong {
  font-size: 16px;
}
.ds-package-metrics small, .ds-evidence-stats small {
  font-size: 11px;
}
.ds-package-file-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ds-confidence-row span {
  padding: 4px 7px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
}
.ds-evidence-excerpt {
  max-height: 160px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  white-space: pre-wrap;
  font: 12px/1.45 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.ds-warning-card span {
  flex: 1;
  display: grid;
  gap: 3px;
}
.ds-status-line {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-revision-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 18px;
  border-color: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
  }
  background: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--blue) 5%, var(--bg-panel));
  }
}
.ds-revision-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ds-revision-card__head > span {
  display: grid;
  gap: 3px;
}
.ds-revision-card__head small, .ds-revision-card p, .ds-revision-diff span, .ds-revision-history small {
  color: var(--text-muted);
}
.ds-revision-card__head > div {
  display: flex;
  gap: 8px;
}
.ds-revision-card p {
  margin: 0;
  line-height: 1.5;
}
.ds-revision-diff {
  display: grid;
  gap: 8px;
}
.ds-revision-diff pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text);
  white-space: pre-wrap;
  font: 12.5px/1.5 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.ds-review-sections {
  display: grid;
  gap: 12px;
}
.ds-review-section {
  overflow: hidden;
}
.ds-review-section__head {
  width: 100%;
  border: 0;
  background: var(--bg-panel);
  color: var(--text);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.ds-review-section__head span {
  display: grid;
  gap: 3px;
}
.ds-review-section__head small {
  color: var(--text-muted);
  font-size: 12px;
}
.ds-review-section__body {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 16px;
}
.ds-section-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.ds-section-actions button.active.success {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  }
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));
  }
  color: var(--green);
}
.ds-section-actions button.active.danger {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 9%, var(--bg-panel));
  }
  color: var(--red);
}
.ds-review-section pre, .ds-file-preview pre {
  white-space: pre-wrap;
  margin: 0;
  color: var(--text);
  font: 13px/1.55 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.ds-body-editor {
  display: grid;
  gap: 8px;
  padding: 16px;
  margin: 18px 0 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.ds-body-editor textarea {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  resize: vertical;
}
.ds-revision-history {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-top: 16px;
}
.ds-revision-history h2 {
  margin: 0;
  font-size: 15px;
}
.ds-revision-history div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds-revision-history span {
  min-width: 74px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  text-transform: capitalize;
}
.ds-revision-history span.is-pending {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
  color: var(--accent);
}
.ds-revision-history span.is-accepted {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 38%, var(--border));
  }
  color: var(--green);
}
.ds-revision-history span.is-rejected {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 38%, var(--border));
  }
  color: var(--red);
}
.ds-files-panel {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: minmax(360px, 48%) minmax(0, 1fr);
}
.ds-files-list {
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: auto;
}
.ds-files-path, .ds-files-drop {
  padding: 14px 18px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ds-file-row {
  min-height: 58px;
  width: 100%;
  display: grid;
  grid-template-columns: 90px 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ds-file-row:not(:disabled):hover, .ds-file-row.is-selected {
  background: var(--bg-subtle);
}
.ds-file-row:disabled {
  cursor: default;
  color: var(--text-muted);
}
.ds-file-row span:last-child {
  display: grid;
  gap: 2px;
}
.ds-file-row small, .ds-file-group {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ds-file-empty {
  padding: 16px 18px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.ds-file-preview {
  padding: 48px;
  color: var(--text-muted);
}
.ds-file-preview h2 {
  color: var(--text);
  margin: 0 0 8px;
}
.ds-file-preview > small {
  display: block;
  margin-bottom: 18px;
  color: var(--text-muted);
}
.ds-file-preview pre {
  margin-top: 22px;
  max-height: 60vh;
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
}
.ds-file-preview-frame {
  width: 100%;
  min-height: 68vh;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.ds-file-preview-frame--asset {
  min-height: 320px;
}
.design-systems-manager {
  gap: 14px;
}
.ds-manager-tabs, .ds-manager-subtabs {
  display: flex;
  align-items: center;
}
.ds-manager-tabs {
  margin-bottom: 2px;
}
.ds-manager-subtabs {
  margin-top: -4px;
  margin-bottom: 6px;
}
.ds-tag-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-tag-tabs::-webkit-scrollbar {
  display: none;
}
.ds-tag-tabs button {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}
.ds-tag-tabs button:hover:not(.active) {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-elevated);
}
.ds-tag-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}
.ds-settings-page {
  gap: 16px;
}
.ds-settings-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.ds-settings-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.ds-settings-card__head h2 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.25;
}
.ds-settings-card__head select {
  width: min(160px, 35vw);
  min-height: 34px;
}
.ds-templates-card {
  margin-top: 0;
}
.ds-private-note {
  margin: -4px 2px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-manager-toolbar {
  align-items: stretch;
  width: min(100% - 36px, 1280px);
  margin: 14px auto 0;
  padding: 0;
}
.ds-manager-toolbar > input {
  min-height: 38px;
}
.design-systems-manager .examples-filter-row {
  width: min(100% - 36px, 1280px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
  padding: 0;
  margin-bottom: 28px;
}
.design-systems-manager .ds-grid {
  width: min(100% - 36px, 1280px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.ds-manager-eyebrow {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-create-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-panel);
  text-align: left;
}
.ds-create-row:hover {
  background: var(--bg-subtle);
}
.ds-create-row strong, .ds-create-row small {
  display: block;
}
.ds-create-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-create-row small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.ds-create-row__action {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.ds-user-empty {
  padding: 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.ds-coming-soon-card .ds-user-empty {
  min-height: 108px;
  display: flex;
  align-items: center;
}
.ds-coming-soon-badge {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ds-template-list {
  display: flex;
  flex-direction: column;
}
.ds-template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.ds-template-row:first-child {
  border-top: 0;
}
.ds-template-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.ds-template-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-template-row span, .ds-template-row small {
  color: var(--text-muted);
  font-size: 12px;
}
.ds-template-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-template-row small {
  flex: 0 0 auto;
}
.ds-user-list {
  display: flex;
  flex-direction: column;
}
.ds-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.ds-user-row__open {
  appearance: none;
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ds-create-row + .ds-user-list .ds-user-row:first-child {
  border-top: 0;
}
.ds-user-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-user-row__title > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-user-row__meta {
  color: var(--text-muted);
  font-size: 12px;
}
.ds-user-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.ds-user-row__actions .compact {
  padding: 5px 10px;
  font-size: 12px;
}
.ds-user-row__actions .icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-user-row__actions .icon-btn.danger {
  color: var(--danger, #c0392b);
}
.ds-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
}
.ds-status-toggle i {
  position: relative;
  display: block;
  width: 26px;
  height: 16px;
  border-radius: 999px;
  background: var(--border-strong);
}
.ds-status-toggle i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-elevated);
  transition: transform 0.16s ease;
}
.ds-status-toggle.is-on {
  color: var(--accent);
}
.ds-status-toggle.is-on i {
  background: var(--accent);
}
.ds-status-toggle.is-on i::after {
  transform: translateX(10px);
}
@media (max-width: 900px) {
  .ds-workspace {
    grid-template-columns: 1fr;
  }
  .ds-agent-rail {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .ds-review-column {
    width: min(760px, calc(100vw - 32px));
  }
  .ds-resource-row, .ds-files-panel, .ds-publish-card, .ds-package-grid, .ds-package-files {
    grid-template-columns: 1fr;
  }
  .ds-package-metrics, .ds-evidence-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-token-contract-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .ds-token-contract-row > div {
    justify-content: flex-start;
  }
  .ds-github-access-methods {
    grid-template-columns: 1fr;
  }
  .ds-github-access-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .ds-github-access-method {
    padding: 12px 0 0;
  }
  .ds-github-access-method:first-child {
    padding-top: 0;
  }
  .ds-github-access-method + .ds-github-access-method {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }
  .ds-drop-zone-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .ds-manager-card__head, .ds-user-row {
    align-items: stretch;
    flex-direction: column;
  }
  .ds-user-row__actions {
    justify-content: flex-start;
  }
  .ds-editor-grid, .ds-source-card__row {
    grid-template-columns: 1fr;
  }
}
.ws-tab.design-system-tab {
  font-weight: 500;
  color: var(--text);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}
.ws-tab.design-system-tab.active {
  background: var(--bg-subtle);
}
.workspace.has-design-system-tab .ws-tab.design-files-tab {
  left: 148px;
  z-index: 1;
}
.ws-tabs-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ws-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-focus-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.ws-focus-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tab-action {
  padding: 4px 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.ws-tab-action:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: transparent;
}
.ws-tab-action.share {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 500;
}
.ws-tab-action.share:hover:not(:disabled) {
  background: #000;
  border-color: #000;
}
.ws-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ds-project-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: 28px 32px 48px;
}
.ds-project-panel--generating {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ds-project-generation-stage {
  width: min(560px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.ds-project-generation-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.ds-project-generation-mark svg {
  overflow: visible;
}
.ds-project-generation-mark svg rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: ds-generation-block 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ds-generation-block {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-4px) rotate(180deg);
  }
  60% {
    transform: translateY(0) rotate(360deg);
  }
  72% {
    transform: translateY(-2px) rotate(360deg);
  }
  85% {
    transform: translateY(0) rotate(360deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-project-generation-mark svg rect {
    animation: none;
  }
}
.ds-project-generation-stage h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
  letter-spacing: 0;
}
.ds-project-generation-stage p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.ds-project-generation-progress {
  width: min(320px, 100%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-soft);
}
.ds-project-generation-progress span {
  display: block;
  height: 100%;
  min-width: 10%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent));
  }
  transition: width 180ms ease;
}
.ds-project-main {
  width: min(940px, 100%);
  margin: 0 auto;
}
.ds-project-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.ds-project-head h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: 0;
}
.ds-project-head p {
  margin: 0;
  max-width: 640px;
  color: var(--text-muted);
  font-size: 15px;
}
.ds-project-badges {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ds-project-badges span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text-muted);
  background: var(--bg-panel);
  font-size: 12px;
  text-transform: capitalize;
  white-space: nowrap;
}
.ds-project-publish-card {
  margin: 22px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 14px 16px;
}
.ds-project-publish-card__top {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ds-project-publish-card__top p {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}
.ds-project-publish-card__top strong {
  color: var(--text);
  font-size: 14px;
}
.ds-project-publish-card__top span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ds-project-publish-card__toggles {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ds-project-publish-card__toggles label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.ds-project-publish-trigger {
  display: inline-flex;
  align-items: center;
}
.ds-project-publish-trigger > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 10px;
  line-height: 1;
}
.ds-project-publish-trigger > button svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.ds-project-publish-trigger:has(> button:disabled) {
  cursor: not-allowed;
}
.ds-project-publish-trigger > button:disabled {
  pointer-events: none;
}
.ds-project-use-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ds-project-use-row > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-project-use-row strong {
  color: var(--text);
  font-size: 14px;
}
.ds-project-use-row small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.ds-project-use-row button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ds-project-review-card {
  margin: 14px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 16px;
}
.ds-project-review-card > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-project-review-card strong {
  color: var(--text);
  font-size: 14px;
}
.ds-project-review-card span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.ds-project-review-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 360px;
}
.ds-project-review-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  padding: 3px 9px;
  font-size: 12px;
  white-space: nowrap;
}
.ds-project-live-activity {
  margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}
.ds-project-live-activity strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.ds-project-live-activity > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ds-project-live-activity span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  padding: 3px 9px;
  white-space: nowrap;
}
.ds-project-live-activity span.is-reading {
  border-color: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
  }
  color: var(--blue);
}
.ds-project-live-activity span.is-planned {
  border-color: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-strong) 60%, var(--border));
  }
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.ds-project-live-activity span.is-writing {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  }
  color: var(--accent);
}
.ds-project-live-activity span.is-updated {
  border-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber) 36%, var(--border));
  }
  color: var(--amber);
}
.ds-project-live-activity span.is-error {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 38%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 7%, var(--bg));
  }
  color: var(--red);
}
.ds-project-source-card {
  margin: 14px 0 0;
  border-radius: var(--radius);
}
.ds-project-source-card > strong {
  color: var(--text);
  font-size: 13px;
}
.ds-project-warning-card {
  margin: 14px 0 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
  }
}
.ds-project-warning-card > .od-icon {
  color: var(--accent);
}
.ds-project-warning-card span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-project-warning-card strong {
  color: var(--text);
  font-size: 14px;
}
.ds-project-warning-card small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.ds-project-warning-card button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ds-warning-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-context-strip {
  margin: 22px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}
.ds-context-strip > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-context-label {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-context-strip strong {
  font-size: 14px;
  font-weight: 600;
}
.ds-context-strip button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ds-project-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ds-project-section-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.ds-project-section-head-trigger {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.ds-project-section-title {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  text-align: left;
}
.ds-project-section-title svg {
  margin-top: 1px;
  color: var(--text-faint);
}
.ds-project-section-title span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ds-project-section-title strong {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-project-section-title small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.ds-project-section-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.ds-project-section-state.is-ready {
  border-color: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--border));
  }
  color: var(--blue);
}
.ds-project-section-state.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  color: var(--accent);
}
.ds-project-section-state.is-planned {
  border-color: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-strong) 62%, var(--border));
  }
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.ds-project-section-state.is-approved {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  }
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 9%, var(--bg-panel));
  }
  color: var(--green);
}
.ds-project-section-state.is-work {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 38%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 8%, var(--bg-panel));
  }
  color: var(--red);
}
.ds-project-section-state.is-missing {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  }
  color: var(--red);
}
.ds-project-section-state.is-review {
  border-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber) 42%, var(--border));
  }
  background: var(--amber-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber-bg) 55%, var(--bg-panel));
  }
  color: var(--amber);
}
.ds-project-review-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ds-project-review-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.ds-project-review-actions button.active.success {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  }
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));
  }
  color: var(--green);
}
.ds-project-review-actions button.active.danger {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 9%, var(--bg-panel));
  }
  color: var(--red);
}
.ds-project-feedback-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: ds-feedback-pop-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ds-project-feedback-popover label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}
.ds-project-feedback-popover textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.ds-project-feedback-popover > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@keyframes ds-feedback-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ds-project-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-project-section-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.ds-project-section-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  padding: 3px 9px;
}
.ds-project-inline-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  display: block;
  height: clamp(220px, 34vw, 420px);
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.ds-project-inline-preview iframe, .ds-project-inline-preview img {
  display: block;
  width: 100%;
  height: 100%;
}
.ds-project-inline-preview iframe {
  border: 0;
}
.ds-project-inline-preview img {
  object-fit: contain;
  background: var(--bg);
}
.ds-project-review-notice {
  border: 1px solid var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--amber-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber-bg) 42%, var(--bg-panel));
  }
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.ds-project-review-notice svg {
  color: var(--amber);
  flex: none;
}
.ds-project-review-notice.is-running {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
  }
}
.ds-project-review-notice.is-running svg {
  color: var(--accent);
}
.ds-project-last-feedback {
  border: 1px solid var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red) 24%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 5%, var(--bg-panel));
  }
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
}
.ds-project-last-feedback svg {
  color: var(--red);
  flex: none;
  margin-top: 2px;
}
.ds-project-last-feedback span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-project-last-feedback strong {
  color: var(--text);
  font-size: 13px;
}
.ds-project-last-feedback small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.ds-project-feedback-box {
  border: 1px solid var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red) 28%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 6%, var(--bg-panel));
  }
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.ds-project-feedback-box label {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.ds-project-feedback-box textarea {
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  padding: 10px 11px;
  resize: vertical;
}
.ds-project-feedback-box textarea:focus {
  outline: 2px solid var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--red) 24%, transparent);
  }
  outline-offset: 1px;
}
.ds-project-feedback-box > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ds-project-file-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-panel);
}
.ds-project-file-row {
  width: 100%;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-align: left;
  color: var(--text);
}
.ds-project-file-row:last-child {
  border-bottom: 0;
}
.ds-project-file-row:hover {
  background: var(--bg-subtle);
}
.ds-project-file-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.ds-project-file-row svg:last-child {
  color: var(--text-faint);
}
.ds-project-file-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-project-file-empty svg {
  color: var(--red);
}
.ds-project-main--review {
  width: min(940px, 100%);
}
.ds-project-head--review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 0;
  padding: 16px 0 28px;
}
.ds-project-head--review h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 42px);
}
.ds-project-publish-card--review {
  margin: 0 0 30px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.ds-project-publish-card--review > p {
  margin: 0;
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}
.ds-project-publish-card--review .ds-project-use-row {
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
.ds-project-section-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}
.ds-project-section-group h2 {
  grid-column: 1 / -1;
  margin: 0 0 2px 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.ds-project-review-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.ds-project-review-item .ds-project-section-head {
  min-height: 58px;
  margin: 0;
  padding: 14px 20px;
  align-items: center;
}
.ds-project-review-item .ds-project-section-title {
  align-items: center;
}
.ds-project-review-item .ds-project-section-title svg {
  margin-top: 0;
}
.ds-project-review-item .ds-project-section-title strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ds-project-review-item .ds-project-section-title small {
  color: var(--text-muted);
  font-size: 14px;
}
.ds-project-review-item.is-collapsed .ds-project-section-head {
  padding-top: 12px;
  padding-bottom: 12px;
}
.ds-project-section-dot {
  width: 8px;
  height: 8px;
  min-height: 8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: var(--blue);
}
.ds-project-section-dot.is-approved {
  background: var(--green);
}
.ds-project-section-dot.is-work, .ds-project-section-dot.is-missing {
  background: var(--red);
}
.ds-project-section-dot.is-running, .ds-project-section-dot.is-planned {
  background: var(--accent);
}
.ds-project-review-item .ds-project-section-body {
  gap: 0;
  border-top: 1px solid var(--border);
}
.ds-project-review-item .ds-project-inline-preview {
  height: clamp(170px, 20vw, 260px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}
.ds-project-review-item--ui-kit {
  grid-column: 1 / -1;
}
.ds-project-review-item--ui-kit .ds-project-inline-preview {
  height: clamp(420px, 56vw, 760px);
  background: #d8d8d8;
}
.ds-project-review-item--asset .ds-project-inline-preview {
  height: clamp(220px, 28vw, 360px);
}
.ds-project-review-item .ds-project-review-notice, .ds-project-review-item .ds-project-last-feedback, .ds-project-review-item .ds-project-feedback-box {
  margin: 12px 16px;
}
.ds-project-preview-placeholder, .ds-project-empty-review {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-muted);
  text-align: center;
  gap: 8px;
}
.ds-project-preview-placeholder {
  border: 0;
  border-radius: 0;
  background: var(--bg-subtle);
}
@media (max-width: 760px) {
  .ds-project-panel {
    padding: 22px 18px 36px;
  }
  .ds-project-head, .ds-project-section-head, .ds-project-review-card, .ds-project-live-activity, .ds-context-strip, .ds-project-publish-card__top, .ds-project-use-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-project-publish-card__toggles {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .ds-project-warning-card {
    grid-template-columns: 1fr;
  }
  .ds-project-badges {
    justify-content: flex-start;
  }
  .ds-project-review-actions {
    justify-content: flex-start;
  }
  .ds-project-feedback-popover {
    right: auto;
    left: 0;
  }
  .ds-project-section-state {
    margin-left: 0;
    width: fit-content;
  }
}
:root {
  --bg: #faf9f7;
  --bg-app: #faf9f7;
  --bg-panel: #fdfcfa;
  --bg-subtle: #f4f5f7;
  --bg-muted: #eef1f5;
  --bg-fill-tertiary: rgba(0, 0, 0, 0.03);
  --bg-fill-secondary: rgba(0, 0, 0, 0.06);
  --bg-fill: rgba(0, 0, 0, 0.12);
  --bg-elevated: #fffefc;
  --border: #e1e5eb;
  --border-strong: #c9d0da;
  --border-soft: #edf0f4;
  --text: #1a1916;
  --text-strong: #0d0c0a;
  --text-muted: #74716b;
  --text-soft: #989590;
  --text-faint: #b3b0a8;
  --accent: #c96442;
  --accent-strong: #b45a3b;
  --accent-soft: #f5d8cb;
  --accent-tint: #fbeee5;
  --accent-hover: #b45a3b;
  --green: #1f7a3a;
  --green-bg: #e8f7ee;
  --green-border: #c6ead2;
  --blue: #2348b8;
  --blue-bg: #e8efff;
  --blue-border: #c8d6ff;
  --purple: #6c3aa6;
  --purple-bg: #f3ecf9;
  --purple-border: #e4d4f1;
  --red: #9c2a25;
  --red-bg: #fdecea;
  --red-border: #f5c6c2;
  --amber: #b26200;
  --amber-bg: #fff3e0;
  --shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.05), 0 1px 3px rgba(28, 27, 26, 0.04);
  --shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
  --shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-quick: 120ms;
  --dur-enter: 200ms;
  --dur-exit: 140ms;
  --selected: #2563eb;
  --selected-soft: rgba(37, 99, 235, 0.16);
  --serif: 'Source Serif Pro', 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei UI', 'Noto Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --prose-font-size: 15px;
  --prose-line-height: 1.75;
  --code-header-bg: #f4f5f7;
  --code-body-bg: #f9fafb;
  --code-font-size: 13px;
  --code-line-height: 1.65;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1917;
  --bg-app: #1a1917;
  --bg-panel: #222120;
  --bg-subtle: #252321;
  --bg-muted: #2e2c29;
  --bg-fill-tertiary: rgba(255, 255, 255, 0.06);
  --bg-fill-secondary: rgba(255, 255, 255, 0.10);
  --bg-fill: rgba(255, 255, 255, 0.16);
  --bg-elevated: #2a2825;
  --border: #333128;
  --border-strong: #46433c;
  --border-soft: #2a2825;
  --text: #e8e4dc;
  --text-strong: #f2ede4;
  --text-muted: #9a9690;
  --text-soft: #6e6b65;
  --text-faint: #4e4b46;
  --accent: #d97a56;
  --accent-strong: #e8896a;
  --accent-soft: #3d2318;
  --accent-tint: #2e1a12;
  --accent-hover: #e8896a;
  --green: #4caf72;
  --green-bg: #0f2a18;
  --green-border: #1a4028;
  --blue: #6b8fe8;
  --blue-bg: #0f1a38;
  --blue-border: #1a2c58;
  --purple: #a87dd4;
  --purple-bg: #1e1030;
  --purple-border: #321a50;
  --red: #e06b65;
  --red-bg: #2a0e0c;
  --red-border: #451714;
  --amber: #e09a40;
  --amber-bg: #2a1a04;
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
  --code-header-bg: #1e1e20;
  --code-body-bg: #18181b;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #1a1917;
    --bg-app: #1a1917;
    --bg-panel: #222120;
    --bg-subtle: #252321;
    --bg-muted: #2e2c29;
    --bg-fill-tertiary: rgba(255, 255, 255, 0.06);
    --bg-fill-secondary: rgba(255, 255, 255, 0.10);
    --bg-fill: rgba(255, 255, 255, 0.16);
    --bg-elevated: #2a2825;
    --border: #333128;
    --border-strong: #46433c;
    --border-soft: #2a2825;
    --text: #e8e4dc;
    --text-strong: #f2ede4;
    --text-muted: #9a9690;
    --text-soft: #6e6b65;
    --text-faint: #4e4b46;
    --accent: #d97a56;
    --accent-strong: #e8896a;
    --accent-soft: #3d2318;
    --accent-tint: #2e1a12;
    --accent-hover: #e8896a;
    --green: #4caf72;
    --green-bg: #0f2a18;
    --green-border: #1a4028;
    --blue: #6b8fe8;
    --blue-bg: #0f1a38;
    --blue-border: #1a2c58;
    --purple: #a87dd4;
    --purple-bg: #1e1030;
    --purple-border: #321a50;
    --red: #e06b65;
    --red-bg: #2a0e0c;
    --red-border: #451714;
    --amber: #e09a40;
    --amber-bg: #2a1a04;
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
    --code-header-bg: #1e1e20;
    --code-body-bg: #18181b;
  }
}
* {
  box-sizing: border-box;
}
html, body, #root {
  height: 100%;
  margin: 0;
}
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-app);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.od-loading-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--bg-app);
  font: 500 13px/1.4 var(--sans);
}
button {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
button:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(180, 90, 59, 0.18) inset, var(--shadow-xs);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
button.primary-ghost {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
button.primary-ghost:hover:not(:disabled) {
  background: var(--accent-tint);
}
button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
button.ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
button.ghost.is-success-flash {
  border-color: var(--green-border, #1f9d55);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: var(--green-border, color-mix(in srgb, #1f9d55 32%, var(--border)));
  }
  background: var(--green-bg, color-mix(in srgb, #1f9d55 8%, transparent));
  color: var(--green, #137a3d);
}
button.ghost.is-success-flash:hover:not(:disabled) {
  background: var(--green-bg, color-mix(in srgb, #1f9d55 14%, transparent));
}
button.ghost.is-success-flash svg {
  color: currentColor;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button.subtle {
  background: var(--bg-subtle);
  border-color: transparent;
  color: var(--text);
}
button.subtle:hover:not(:disabled) {
  background: var(--bg-muted);
}
button.icon-btn {
  padding: 6px 10px;
  font-size: 13px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.entry-side input:focus, .entry-side textarea:focus, .entry-side select:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(28, 27, 26, 0.08);
}
select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2374716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
select::-ms-expand {
  display: none;
}
[data-theme='dark'] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
  }
}
textarea {
  resize: vertical;
  font-family: inherit;
}
.od-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.od-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.od-select-trigger:hover:not(:disabled), .od-select-trigger[aria-expanded='true'] {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.od-select-trigger:focus-visible, .od-select-trigger[aria-expanded='true'] {
  outline: none;
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.od-select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.od-select-trigger svg {
  color: var(--text-muted);
  transition: transform 120ms ease;
}
.od-select-trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.od-select-value, .od-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-select-menu {
  z-index: 9000;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  max-width: calc(100vw - 24px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.od-select-menu.portal {
  position: fixed;
}
.od-select-menu.inline {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(280px, 48vh);
}
.od-select-option {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.od-select-option:hover:not(:disabled), .od-select-option.active:not(:disabled) {
  background: var(--bg-subtle);
}
.od-select-option.selected {
  color: var(--text);
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 9%, var(--bg-subtle));
  }
  font-weight: 600;
}
.od-select-option.selected:hover:not(:disabled), .od-select-option.selected.active:not(:disabled) {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 13%, var(--bg-subtle));
  }
}
.od-select-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.od-select-option-check {
  display: inline-flex;
  justify-content: center;
  color: var(--selected);
  opacity: 0;
}
.od-select-option.selected .od-select-option-check {
  opacity: 1;
}
.od-select-group + .od-select-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.od-select-group-label {
  padding: 6px 8px 4px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
}
button {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
button:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(180, 90, 59, 0.18) inset, var(--shadow-xs);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
button.primary-ghost {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
button.primary-ghost:hover:not(:disabled) {
  background: var(--accent-tint);
}
button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
button.ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
button.ghost.is-success-flash {
  border-color: var(--green-border, #1f9d55);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: var(--green-border, color-mix(in srgb, #1f9d55 32%, var(--border)));
  }
  background: var(--green-bg, color-mix(in srgb, #1f9d55 8%, transparent));
  color: var(--green, #137a3d);
}
button.ghost.is-success-flash:hover:not(:disabled) {
  background: var(--green-bg, color-mix(in srgb, #1f9d55 14%, transparent));
}
button.ghost.is-success-flash svg {
  color: currentColor;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button.subtle {
  background: var(--bg-subtle);
  border-color: transparent;
  color: var(--text);
}
button.subtle:hover:not(:disabled) {
  background: var(--bg-muted);
}
button.icon-btn {
  padding: 6px 10px;
  font-size: 13px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.od-tooltip {
  position: relative;
}
.od-tooltip-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  max-width: min(260px, calc(100vw - 16px));
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  contain: layout paint style;
  pointer-events: none;
  overflow-wrap: anywhere;
  white-space: normal;
  will-change: transform;
}
input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  width: 100%;
  transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.entry-side input:focus, .entry-side textarea:focus, .entry-side select:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(28, 27, 26, 0.08);
}
select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2374716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
select::-ms-expand {
  display: none;
}
[data-theme='dark'] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
  }
}
textarea {
  resize: vertical;
  font-family: inherit;
}
.od-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.od-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.od-select-trigger:hover:not(:disabled), .od-select-trigger[aria-expanded='true'] {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.od-select-trigger:focus-visible, .od-select-trigger[aria-expanded='true'] {
  outline: none;
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.od-select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.od-select-trigger svg {
  color: var(--text-muted);
  transition: transform var(--dur-quick) var(--ease-out);
}
.od-select-trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.od-select-value, .od-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-select-menu {
  z-index: 9000;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  max-width: calc(100vw - 24px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.od-select-menu.portal {
  position: fixed;
}
.od-select-menu.inline {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(280px, 48vh);
}
.od-select-option {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.od-select-option:hover:not(:disabled), .od-select-option.active:not(:disabled) {
  background: var(--bg-subtle);
}
.od-select-option.selected {
  color: var(--text);
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 9%, var(--bg-subtle));
  }
  font-weight: 600;
}
.od-select-option.selected:hover:not(:disabled), .od-select-option.selected.active:not(:disabled) {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 13%, var(--bg-subtle));
  }
}
.od-select-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.od-select-option-check {
  display: inline-flex;
  justify-content: center;
  color: var(--selected);
  opacity: 0;
}
.od-select-option.selected .od-select-option-check {
  opacity: 1;
}
.od-select-group + .od-select-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.od-select-group-label {
  padding: 6px 8px 4px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
}
code {
  font-family: var(--mono);
  background: var(--bg-subtle);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-size: 0.92em;
  color: var(--text);
}
.social-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.social-share-button {
  --social-share-brand: var(--text-muted);
  appearance: none;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1), color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.social-share-button:hover, .social-share-button:focus-visible {
  background: var(--social-share-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--social-share-brand) 7%, var(--bg-subtle));
  }
  border-color: var(--social-share-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--social-share-brand) 32%, var(--border-soft));
  }
  color: var(--text-strong);
  outline: none;
}
.social-share-button__icon {
  flex: 0 0 auto;
  width: 18px;
  color: var(--social-share-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-share-button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-share-button--x {
  --social-share-brand: #111111;
}
.social-share-button--linkedin {
  --social-share-brand: #0a66c2;
}
.social-share-button--facebook {
  --social-share-brand: #1877f2;
}
.social-share-button--reddit {
  --social-share-brand: #ff4500;
}
.social-share-button--telegram {
  --social-share-brand: #26a5e4;
}
.social-share-button--whatsapp {
  --social-share-brand: #25d366;
}
.social-share-button--weibo {
  --social-share-brand: #e6162d;
}
.social-share-button--line {
  --social-share-brand: #06c755;
}
.social-share-button--instagram {
  --social-share-brand: #e4405f;
}
.social-share-button--xiaohongshu {
  --social-share-brand: #ff2442;
}
[data-theme="dark"] .social-share-button--x {
  --social-share-brand: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .social-share-button--x {
    --social-share-brand: #f5f5f5;
  }
}
.avatar-social-share {
  margin: 2px 4px 0;
}
.entry-settings-social-share {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deploy-social-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.deploy-social-share.is-locked {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, var(--bg-panel));
  }
}
.deploy-social-share.is-protected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 36%, var(--bg-panel));
  }
}
.deploy-social-share__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.deploy-social-share__label {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.deploy-social-share__url {
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-social-share__url:hover {
  color: var(--text);
  text-decoration: underline;
}
.deploy-social-share .hint {
  margin: 0;
}
.deploy-social-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 520px) {
  .social-share-grid {
    grid-template-columns: 1fr;
  }
}
.xterm {
  cursor: text;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.xterm.focus, .xterm:focus {
  outline: none;
}
.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  z-index: 5;
}
.xterm .xterm-helper-textarea {
  padding: 0;
  border: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}
.xterm .composition-view {
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}
.xterm .composition-view.active {
  display: block;
}
.xterm .xterm-viewport {
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
.xterm .xterm-screen {
  position: relative;
}
.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.xterm .xterm-scroll-area {
  visibility: hidden;
}
.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}
.xterm.enable-mouse-events {
  cursor: default;
}
.xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer {
  cursor: pointer;
}
.xterm.column-select.focus {
  cursor: crosshair;
}
.xterm .xterm-accessibility:not(.debug), .xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
  pointer-events: none;
}
.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}
.xterm .xterm-accessibility-tree {
  user-select: text;
  white-space: pre;
}
.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.xterm-dim {
  opacity: 1 !important;
}
.xterm-underline-1 {
  text-decoration: underline;
}
.xterm-underline-2 {
  text-decoration: double underline;
}
.xterm-underline-3 {
  text-decoration: wavy underline;
}
.xterm-underline-4 {
  text-decoration: dotted underline;
}
.xterm-underline-5 {
  text-decoration: dashed underline;
}
.xterm-overline {
  text-decoration: overline;
}
.xterm-overline.xterm-underline-1 {
  text-decoration: overline underline;
}
.xterm-overline.xterm-underline-2 {
  text-decoration: overline double underline;
}
.xterm-overline.xterm-underline-3 {
  text-decoration: overline wavy underline;
}
.xterm-overline.xterm-underline-4 {
  text-decoration: overline dotted underline;
}
.xterm-overline.xterm-underline-5 {
  text-decoration: overline dashed underline;
}
.xterm-strikethrough {
  text-decoration: line-through;
}
.xterm-screen .xterm-decoration-container .xterm-decoration {
  z-index: 6;
  position: absolute;
}
.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
  z-index: 7;
}
.xterm-decoration-overview-ruler {
  z-index: 8;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}
.xterm-decoration-top {
  z-index: 2;
  position: relative;
}
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  height: 100vh;
  background: var(--bg-app);
  overflow: hidden;
}
.app > .split {
  grid-row: 2;
}
.workspace-shell {
  --workspace-tabs-chrome-height: 38px;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 36px minmax(0, 1fr);
  background: var(--bg-app);
  overflow: hidden;
}
.workspace-shell__body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.workspace-shell__body > .app, .workspace-shell__body > .entry-shell {
  height: 100%;
  min-height: 0;
}
.iframe-keep-alive-pool {
  display: none;
}
.pooled-iframe-host {
  display: contents;
}
.workspace-tabs-chrome.app-chrome-header {
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  height: 38px;
  padding: 0 8px 0 6px;
  gap: 0;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--bg-subtle));
  }
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--bg-panel) inset;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-panel) 80%, transparent) inset;
  }
  user-select: none;
  -webkit-app-region: drag;
  overflow: hidden;
  position: relative;
  z-index: 120;
}
.workspace-tabs-chrome.app-chrome-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 64%, transparent);
  }
  transform: scaleY(0.5);
  transform-origin: center bottom;
  pointer-events: none;
  z-index: 0;
}
.workspace-tabs-chrome .workspace-tabs-traffic {
  margin-right: var(--app-chrome-traffic-margin);
}
.workspace-tabs-new-btn {
  width: 28px;
  height: 28px;
  margin-left: 5px;
  margin-right: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  -webkit-app-region: no-drag;
  transition: background 100ms var(--ease-out), color 100ms var(--ease-out);
}
.workspace-tabs-strip.is-overflowing .workspace-tabs-new-btn {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: -8px 0 10px -9px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: -8px 0 10px -9px color-mix(in srgb, var(--text) 30%, transparent);
  }
}
.workspace-tabs-new-btn:hover {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 72%, var(--bg-subtle));
  }
  color: var(--text-muted);
}
.workspace-tabs-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  -webkit-app-region: no-drag;
}
.workspace-tabs-icon-btn:hover:not(:disabled), .workspace-tabs-icon-btn.is-active {
  color: var(--text-strong);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--bg-subtle));
  }
  border-color: var(--border);
}
.workspace-tabs-strip {
  align-self: stretch;
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 0;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  contain: layout style;
  -webkit-app-region: drag;
  overscroll-behavior-x: contain;
}
.workspace-tabs-strip::-webkit-scrollbar {
  height: 0;
  display: none;
}
.workspace-tab {
  position: relative;
  height: 24px;
  width: 124px;
  flex: 0 1 124px;
  min-width: var(--workspace-tab-min-width, 56px);
  max-width: 124px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  overflow: visible;
  contain: layout style;
  transition-property: background, border-color, color, opacity, transform, box-shadow;
  transition-duration: 100ms, 100ms, 100ms, 120ms, 150ms, 150ms;
  transition-timing-function: ease, ease, ease, ease, cubic-bezier(0.2, 0.8, 0.2, 1), ease;
  -webkit-app-region: no-drag;
  cursor: default;
  z-index: 1;
  will-change: transform;
}
.workspace-tab.is-pinned {
  width: 96px;
  flex: 0 0 96px;
  min-width: 96px;
  max-width: 96px;
  grid-template-columns: minmax(0, 1fr);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--bg-subtle));
  }
}
.workspace-tab.is-dragging {
  opacity: 0.88;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 28px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 14%, transparent);
  }
  cursor: default;
  z-index: 3;
}
.workspace-tab.is-drag-over-before, .workspace-tab.is-drag-over-after {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 84%, var(--bg-subtle));
  }
  border-color: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-strong) 42%, transparent);
  }
  color: var(--text);
}
.workspace-tab.is-drag-over-before {
  transform: translateX(6px);
}
.workspace-tab.is-drag-over-after {
  transform: translateX(-6px);
}
.workspace-tab + .workspace-tab::before {
  display: none;
}
.workspace-tab:hover {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 64%, transparent);
  }
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
  }
  color: var(--text);
}
.workspace-tab.is-active {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle));
  }
  border-color: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-strong) 52%, transparent);
  }
  color: var(--text-strong);
  box-shadow: 0 1px 1px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 6%, transparent);
  }
}
.workspace-tab:hover::before, .workspace-tab:hover + .workspace-tab::before, .workspace-tab:focus-within::before, .workspace-tab:focus-within + .workspace-tab::before, .workspace-tab.is-active::before, .workspace-tab.is-active + .workspace-tab::before {
  opacity: 0;
}
.workspace-tab__main {
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
  cursor: inherit;
}
.workspace-tab__main:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.workspace-tab__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.74;
  flex: 0 0 auto;
  line-height: 0;
}
.workspace-tab__icon svg, .workspace-tab__close svg, .workspace-tabs-icon-btn svg {
  display: block;
  flex: none;
}
.workspace-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 520;
  letter-spacing: 0;
}
.workspace-tab__close {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.workspace-tab:hover .workspace-tab__close, .workspace-tab.is-active .workspace-tab__close {
  opacity: 1;
}
.workspace-tab__close:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.workspace-tabs-actions {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: 4px;
  padding-left: 2px;
  z-index: 35;
  -webkit-app-region: no-drag;
}
.workspace-tabs-popover {
  position: fixed;
  top: calc(var(--workspace-tabs-chrome-height, 38px) + 7px);
  right: max(10px, env(safe-area-inset-right));
  width: min(380px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - var(--workspace-tabs-chrome-height, 38px) - 24px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 130;
  -webkit-app-region: no-drag;
}
.workspace-tabs-popover, .workspace-tabs-popover * {
  -webkit-app-region: no-drag;
}
.workspace-tabs-search {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--selected);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.workspace-tabs-search input {
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
}
.workspace-tabs-search input:focus {
  border: 0;
  box-shadow: none;
}
.workspace-tabs-popover__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 5px 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0;
}
.workspace-tabs-list {
  min-height: 0;
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  contain: layout style paint;
}
.workspace-tabs-list__item {
  min-height: 34px;
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  contain: layout style;
}
.workspace-tabs-list__item:hover, .workspace-tabs-list__item.is-active {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 9%, var(--bg-subtle));
  }
}
.workspace-tabs-list__main {
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.workspace-tabs-list__main:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.workspace-tabs-list__icon {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}
.workspace-tabs-list__icon svg, .workspace-tabs-list__close svg, .workspace-tabs-search svg {
  display: block;
  flex: none;
}
.workspace-tabs-list__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.workspace-tabs-list__title, .workspace-tabs-list__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-tabs-list__title {
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 600;
}
.workspace-tabs-list__meta {
  color: var(--text-muted);
  font-size: 11px;
}
.workspace-tabs-list__close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.workspace-tabs-list__close:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-muted);
}
.workspace-tabs-empty {
  padding: 18px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}
.workspace-tab-preview {
  position: fixed;
  z-index: 140;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: workspace-tab-preview-in 130ms cubic-bezier(0.23, 1, 0.32, 1);
}
.workspace-tab-preview__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.workspace-tab-preview__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workspace-tab-preview__title {
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.workspace-tab-preview__meta {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.workspace-tab-preview__detail {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
@keyframes workspace-tab-preview-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 720px) {
  .workspace-tabs-chrome.app-chrome-header {
    padding-right: 6px;
  }
  .workspace-tab {
    min-width: 40px;
    max-width: 44px;
    flex-basis: 44px;
    grid-template-columns: 1fr;
    padding: 0;
  }
  .workspace-tab__main {
    justify-content: center;
    padding: 0;
  }
  .workspace-tab__label, .workspace-tab__close {
    display: none;
  }
}
.app-chrome-header {
  --app-chrome-traffic-space: 0px;
  --app-chrome-traffic-margin: 0px;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 12px;
  flex-shrink: 0;
}
.app-chrome-traffic-space {
  width: var(--app-chrome-traffic-space);
  flex: 0 0 var(--app-chrome-traffic-space);
  margin-right: var(--app-chrome-traffic-margin);
}
.app-chrome-back, .settings-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-chrome-back:hover:not(:disabled), .settings-icon-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.app-chrome-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  align-self: stretch;
  flex: 1 1 auto;
}
.app-chrome-drag {
  min-width: 24px;
  flex: 1 1 auto;
  align-self: stretch;
}
.app-chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-chrome-file-actions-before {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-chrome-file-actions-before:has(> [data-app-chrome-file-actions='true']:empty), .app-chrome-file-actions:empty {
  display: none;
}
.app-chrome-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-chrome-file-actions-before:not(:empty) + .app-chrome-file-actions:not(:empty) {
  margin-left: 4px;
}
.app-chrome-file-actions:not(:empty) + .app-chrome-actions, .app-chrome-file-actions-before:not(:has(> [data-app-chrome-file-actions='true']:empty)):not(:empty) + .app-chrome-file-actions + .app-chrome-actions {
  position: relative;
  margin-left: 4px;
  padding-left: 12px;
}
.app-chrome-file-actions:not(:empty) + .app-chrome-actions::before, .app-chrome-file-actions-before:not(:has(> [data-app-chrome-file-actions='true']:empty)):not(:empty) + .app-chrome-file-actions + .app-chrome-actions::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 1px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 82%, transparent);
  }
  transform: translateY(-50%);
}
.chrome-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.chrome-action svg {
  display: block;
}
.chrome-action > svg:first-child {
  transform: translateY(1px);
}
.chrome-action:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.chrome-action-secondary {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}
.chrome-action-secondary:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.chrome-file-action-menus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chrome-action-with-label {
  gap: 8px;
}
.present-trigger[aria-expanded='true'] {
  background: var(--bg-panel);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
}
.chrome-action-primary {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--bg);
}
.chrome-action-primary:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.chrome-action-export {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 6px 14px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
.chrome-action-export:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
.chrome-action-export:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.chrome-action-export.export-ready-nudge {
  animation: export-ready-nudge 1600ms cubic-bezier(0.23, 1, 0.32, 1) 1;
}
.chrome-share-menu .share-menu-popover, .chrome-present-wrap .present-menu {
  top: calc(100% + 6px);
  right: 0;
}
.zoom-menu {
  position: relative;
  display: inline-block;
}
.zoom-menu .zoom-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.viewer-toolbar-zoom .zoom-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}
.zoom-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 110px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.viewer-toolbar-zoom .zoom-menu-popover {
  left: auto;
  right: 0;
  transform: none;
}
.zoom-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.zoom-menu-item:hover {
  background: var(--bg-subtle);
}
.zoom-menu-item.active {
  color: var(--accent-strong);
  font-weight: 600;
}
@media (max-width: 880px) {
  .chrome-action-secondary span {
    display: none;
  }
  .chrome-action-secondary {
    padding: 0 10px;
  }
  .chrome-action-secondary.chrome-action-text-only span {
    display: inline;
  }
  .chrome-action-secondary.chrome-action-text-only {
    padding: 0 12px;
  }
}
@media (max-width: 720px) {
  .app-chrome-content {
    display: none;
  }
}
.viewer.is-tab-present .viewer-toolbar, .viewer.is-tab-present .live-artifact-refresh-notice {
  display: none;
}
.viewer.is-tab-present .viewer-body {
  inset: 0;
}
.viewer .present-exit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
}
.viewer .present-exit-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.live-artifact-preview-frame-host {
  width: 100%;
  height: 100%;
  background: var(--bg);
}
.live-artifact-preview-frame-host:fullscreen {
  background: var(--bg);
}
.project-target-platforms, .project-feature-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: min(100%, 280px);
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  flex: 0 1 auto;
}
.project-feature-chips {
  max-width: min(100%, 260px);
}
.project-target-platforms-label, .project-feature-chips-label {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.project-target-platform-chip, .project-feature-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 92px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  }
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
  }
  font-size: 11px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.project-feature-chip.is-landing {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 72%, var(--text-strong));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  }
}
.project-feature-chip.is-widgets {
  color: #0891b2;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #0891b2 72%, var(--text-strong));
  }
  border-color: color-mix(in srgb, #0891b2 26%, transparent);
  background: #0891b2;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #0891b2 10%, var(--bg-subtle));
  }
}
.project-target-platform-chip.is-count {
  min-width: 28px;
  max-width: 36px;
  flex: 0 0 auto;
  color: var(--text-strong);
  background: var(--accent, #7c5cff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #7c5cff) 12%, var(--bg-subtle));
  }
}
.custom-instructions-input {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.custom-instructions-input:focus {
  outline: none;
  border-color: var(--accent, #646cff);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.topbar .title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .meta {
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.topbar .brand-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.topbar .brand-mark .brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 1px;
  user-select: none;
  -webkit-user-drag: none;
}
.topbar-left .back-btn {
  align-self: center;
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.topbar-left .back-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
.avatar-menu {
  position: relative;
}
.avatar-agent-trigger {
  width: 58px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  grid-template-columns: 32px 24px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), background 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.avatar-agent-trigger:hover:not(:disabled) {
  border-color: var(--border-strong, var(--border));
}
.avatar-agent-trigger > svg:last-child {
  color: var(--text-muted);
}
.avatar-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.avatar-btn:hover:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.18);
  border-color: transparent;
}
.avatar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.32);
  border-color: transparent;
}
.avatar-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.avatar-btn-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.avatar-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 280px;
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[dir='rtl'] .avatar-popover {
  right: auto;
  left: 0;
}
.avatar-popover-head {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.avatar-popover-head .who {
  font-weight: 600;
  font-size: 13px;
}
.avatar-popover-head .where {
  font-size: 11.5px;
  color: var(--text-muted);
}
.avatar-amr-account-link, .avatar-amr-account-link:visited {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  margin: 0 6px 6px;
  padding: 9px 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-soft));
  }
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 34%, var(--bg-panel));
  }
}
.avatar-amr-account-link:hover {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 52%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
}
.avatar-amr-account-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}
.avatar-amr-account-link__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.avatar-amr-account-link__copy span:first-child {
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-amr-account-link__copy span:last-child {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
}
.avatar-item:hover {
  background: var(--bg-subtle);
}
a.avatar-item, a.avatar-item:visited {
  color: var(--text);
}
.avatar-item .avatar-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--text-muted);
  flex-shrink: 0;
}
.avatar-item .avatar-item-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avatar-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 8px 10px 4px;
}
.avatar-model-section {
  padding: 2px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--border-soft);
  margin-top: 4px;
}
.avatar-select-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  font-size: 12px;
  color: var(--text-muted);
}
.avatar-select-label {
  flex-shrink: 0;
  min-width: 0;
}
.avatar-select {
  display: block;
  width: 100%;
  min-width: min(340px, 100%);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}
.avatar-select:focus {
  outline: 2px solid var(--accent-soft, var(--border-strong));
}
.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  max-width: 360px;
  min-width: 0;
  font: inherit;
  color: inherit;
}
.env-pill:hover {
  background: var(--bg-panel);
  border-color: var(--border-strong);
}
.env-pill-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97757 0%, #b85a3b 100%);
  flex-shrink: 0;
}
.env-pill-dot[data-mode="api"] {
  background: linear-gradient(135deg, #1c1b1a 0%, #4b4948 100%);
}
.env-pill-label {
  font-weight: 500;
  font-size: 12px;
}
.env-pill-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.split {
  --project-chat-panel-width: 460px;
  --project-workspace-panel-track: minmax(400px, 1fr);
  display: grid;
  grid-template-columns: var(--project-chat-panel-width) 8px var(--project-workspace-panel-track);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.split.is-resizing-chat {
  cursor: col-resize;
  user-select: none;
}
.split.is-resizing-chat iframe {
  pointer-events: none;
}
.split.is-resizing-chat .workspace, .split.is-resizing-chat .viewer, .split.split-focus .workspace, .split.split-focus .viewer {
  contain: layout paint;
}
.split.is-resizing-chat .html-viewer:has(.deck-nav) .preview-frame-clip, .split.split-focus .html-viewer:has(.deck-nav) .preview-frame-clip {
  background: var(--text-strong);
}
.split.split-focus {
  grid-template-columns: minmax(0, 1fr);
}
.split-chat-slot {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.split-chat-slot[hidden] {
  display: none;
}
.split-chat-slot > .pane {
  flex: 1 1 auto;
  min-width: 0;
}
.split-edit-divider {
  width: 8px;
  min-width: 8px;
  height: 100%;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
}
.comment-left-host {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-panel);
}
.comment-left-host > .comment-side-dock {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.comment-left-host > .comment-side-panel, .comment-left-host > .comment-side-dock > .comment-side-panel {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 20;
}
.comment-left-host .comment-side-header {
  min-height: 40px;
}
.comment-left-host .comment-side-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 12px;
}
.comment-side-composer {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-panel);
  overflow: hidden;
}
.split-resize-handle {
  position: relative;
  z-index: 45;
  width: 8px;
  min-width: 8px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}
.split-resize-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  right: -10px;
  cursor: col-resize;
}
.split-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  pointer-events: none;
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 92%, transparent);
  }
  opacity: 0.9;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.split-resize-handle:hover, .split-resize-handle:focus-visible, .split.is-resizing-chat .split-resize-handle {
  background: transparent;
}
.split-resize-handle:hover::after, .split-resize-handle:focus-visible::after, .split.is-resizing-chat .split-resize-handle::after {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 70%, var(--border));
  }
  box-shadow: none;
  opacity: 1;
}
.split-resize-handle:focus-visible {
  outline: none;
}
.chat-project-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: none;
  background: var(--bg-panel);
  min-width: 0;
  height: 38px;
  position: sticky;
  top: 0;
  z-index: 4;
}
.chat-project-back {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-project-back:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-project-design-system {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  margin-inline-start: auto;
}
.chat-project-header-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.chat-project-header-title .title {
  color: var(--text-strong);
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  outline: none;
  caret-color: var(--accent);
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-project-header-title .title:hover {
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }
}
.chat-project-header-title .title:focus, .chat-project-header-title .title:focus-visible {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border));
  }
}
.chat-project-header-title .meta {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.chat-session-switcher {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: 2px;
  padding-inline-start: 6px;
}
.chat-session-trigger {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-session-trigger:hover, .chat-session-switcher.open .chat-session-trigger {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-header-tabs {
  display: inline-flex;
  gap: 16px;
  flex: 1;
}
.chat-header-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.chat-header-tab:hover {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
.chat-header-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.chat-active-conversation {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-active-conversation-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.chat-active-conversation-rename {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-active-conversation-rename:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-active-conversation-rename:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-active-conversation-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.chat-active-conversation-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.chat-header-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}
.chat-header-actions .icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-header-actions .icon-only:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
  @supports (color: color-mix(in lab, red, red)) {
    scrollbar-color: color-mix(in srgb, var(--text-muted) 18%, transparent) transparent;
  }
}
.chat-log::-webkit-scrollbar {
  width: 8px;
}
.chat-log::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}
.chat-log::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  }
  border-radius: var(--radius);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-log:hover::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  }
  background-clip: padding-box;
}
.chat-log-tail-spacer {
  flex: 0 0 auto;
  height: 0;
  margin-top: -24px;
}
.chat-log.is-loading {
  position: relative;
}
.chat-loading-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  animation: chat-loading-enter 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-loading-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
}
.chat-loading-mark span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  opacity: 0.32;
  animation: chat-loading-dot 900ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.chat-loading-mark span:nth-child(2) {
  animation-delay: 120ms;
}
.chat-loading-mark span:nth-child(3) {
  animation-delay: 240ms;
}
.chat-loading-copy {
  font-size: 12px;
  font-weight: 600;
}
.chat-loading-lines {
  width: min(260px, 72%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-loading-lines span {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient( 90deg, var(--text-muted), var(--text-muted), var(--text-muted) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--text-muted) 10%, transparent), color-mix(in srgb, var(--text-muted) 18%, transparent), color-mix(in srgb, var(--text-muted) 10%, transparent) );
  }
  background-size: 200% 100%;
  animation: chat-loading-sheen 1100ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.chat-loading-lines span:nth-child(2) {
  width: 82%;
}
.chat-loading-lines span:nth-child(3) {
  width: 58%;
}
.chat-virtual-spacer {
  position: relative;
  flex: 0 0 auto;
  min-height: 100%;
}
.chat-virtual-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  will-change: transform;
}
@keyframes chat-loading-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes chat-loading-dot {
  0%, 70%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
@keyframes chat-loading-sheen {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -60% 0;
  }
}
.msg {
  padding: 0;
  background: transparent;
  border: none;
  white-space: normal;
  word-wrap: break-word;
  min-width: 0;
  max-width: 100%;
  animation: msg-enter 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes msg-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg {
    animation: none;
  }
}
.msg.user {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: min(78%, 560px);
}
.msg .role {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  text-transform: none;
  color: var(--text-strong);
  margin-bottom: 8px;
  letter-spacing: 0;
  font-weight: 600;
}
.msg-time {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.msg.user .role::before {
  content: '';
}
.msg.user .role {
  justify-content: flex-end;
  color: var(--text-muted);
}
.msg.user .user-text {
  white-space: pre-wrap;
  color: var(--text);
  background: var(--bg-fill-tertiary);
  border: none;
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  line-height: 1.5;
  font-size: 14.5px;
  box-shadow: none;
}
.msg-run-context-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  margin: 1px 0 4px;
  max-width: min(100%, 430px);
  margin-left: auto;
  overflow: hidden;
}
.msg-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  height: 18px;
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 72%, var(--bg));
  }
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 72%, var(--text-strong));
  }
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  white-space: nowrap;
}
.msg-mode-chip svg {
  width: 8px;
  height: 8px;
}
.msg-mode-chip--chat {
  border-color: var(--text-soft);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-soft) 22%, var(--border));
  }
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 78%, #fff);
  }
  color: var(--text-muted);
}
.msg-plugin-context {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.msg-plugin-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-fill-tertiary);
  border: none;
  font-size: 11.5px;
  line-height: 1;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  appearance: none;
}
.msg-plugin-chip--action {
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.msg-plugin-chip--action:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
}
.msg-plugin-chip--action:focus-visible {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  }
  outline-offset: 2px;
}
.msg-plugin-chip__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.msg-plugin-chip--design-system .msg-plugin-chip__dot {
  background: #d76445;
}
.msg-plugin-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 3px;
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-subtle));
  }
  color: var(--text-muted);
}
.msg-plugin-chip__icon svg {
  width: 7px;
  height: 7px;
}
.msg-plugin-chip--workspace {
  gap: 3px;
  padding-left: 2px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 82%, var(--bg-subtle));
  }
  border-color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-muted) 18%, var(--border));
  }
}
.msg-plugin-chip--workspace-browser .msg-plugin-chip__icon {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  }
  color: var(--accent);
}
.msg-plugin-chip__label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 12px;
}
.msg-plugin-chip__kind {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 8.5px;
  flex: 0 0 auto;
  color: var(--text-faint);
}
.msg-plugin-chip__title {
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-plugin-chip__version, .msg-plugin-chip__task {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-plugin-chip__task {
  border-left: 1px solid var(--bg-fill-secondary);
  padding-left: 8px;
}
.msg-plugin-context .context-chip-strip {
  justify-content: flex-end;
  min-width: 0;
  gap: 3px;
}
.msg-plugin-context .context-chip-strip__chip {
  box-sizing: border-box;
  height: 18px;
  max-width: 190px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  font-size: 9px;
  line-height: 12px;
}
.msg-plugin-context .context-chip-strip__body {
  height: 100%;
  gap: 3px;
  padding: 1px 5px;
  line-height: 12px;
}
.msg-plugin-context .context-chip-strip__icon svg {
  width: 7px;
  height: 7px;
}
.msg-plugin-context .context-chip-strip__icon::before {
  width: 3px;
  height: 3px;
  margin-right: 3px;
  box-shadow: none;
}
.msg-plugin-context .context-chip-strip__kind {
  font-size: 8.5px;
  letter-spacing: 0.02em;
}
.msg-plugin-context .context-chip-strip__remove {
  width: 14px;
  height: 14px;
  font-size: 11px;
}
.msg.user .user-text-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
}
.msg.user .user-status-wrap {
  display: flex;
  justify-content: flex-end;
}
.msg.assistant .op-waiting {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: min(420px, 100%);
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-muted) 16%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle));
  }
  box-shadow: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: normal;
}
.msg.assistant .op-waiting-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
}
.msg.assistant .op-waiting-label {
  color: var(--text);
  font-weight: 600;
}
.msg.assistant .op-waiting-detail {
  max-width: 180px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 5%, var(--bg-subtle));
  }
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg.assistant .op-waiting-hint {
  flex-basis: auto;
  color: var(--text-soft);
  font-size: 11px;
  font-style: italic;
}
.user-status-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, 100%);
  padding: 9px 11px;
  border-radius: 14px 14px 4px 14px;
  background: var(--bg-fill-tertiary);
  border: none;
  box-shadow: none;
  color: var(--text);
  text-align: start;
}
.user-status-card__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
.user-status-card__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.user-status-card__copy strong {
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 650;
}
.user-status-card__copy span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}
.msg.user .user-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  min-height: 20px;
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
.msg.user .user-text-wrap:hover .user-actions, .msg.user .user-text-wrap:focus-within .user-actions {
  opacity: 1;
}
.msg.user .user-actions-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.msg.user .user-copy-btn {
  padding: 4px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.msg.user .user-copy-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.msg.user .user-copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@media (hover: none) {
  .msg.user .user-actions {
    opacity: 1;
  }
}
.msg.assistant .prose {
  margin-top: 8px;
}
.msg .artifact-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-xs);
}
.msg.error {
  border: none;
  background: var(--bg-fill-tertiary);
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-error-text {
  min-width: 0;
}
.chat-error-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-error-copy {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-error-retry {
  flex: 0 0 auto;
  padding: 4px 10px;
}
.chat-error-action {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  font: inherit;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-error-action:hover {
  background: var(--accent-hover, var(--accent));
}
.amr-card {
  margin-top: 8px;
  padding: 12px 14px;
  border: none;
  background: var(--bg-fill-tertiary);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amr-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.amr-card__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.amr-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.amr-card__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.amr-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.amr-card__chip {
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  color: var(--accent);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.amr-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.amr-card__cta {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.amr-card__cta:hover {
  background: var(--accent-hover, var(--accent));
}
.pane {
  --chat-composer-inline-inset: 12px;
}
.composer {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.split:has(.session-mode-toggle__popover), .split-chat-slot:has(.session-mode-toggle__popover), .split-chat-slot > .pane:has(.session-mode-toggle__popover) {
  overflow: visible;
}
.split-chat-slot:has(.session-mode-toggle__popover), .split-chat-slot > .pane:has(.session-mode-toggle__popover), .composer:has(.session-mode-toggle__popover) {
  position: relative;
  z-index: 1500;
}
.composer:has(.composer-tools-menu), .composer:has(.composer-design-toolbox-menu), .composer:has(.composer-import-menu) {
  z-index: 80;
}
.chat-composer-slot {
  flex: 0 0 auto;
}
.chat-composer-fixed-layer {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  contain: layout style;
  transform: translateZ(0);
}
.chat-composer-fixed-layer .composer {
  pointer-events: auto;
}
.composer-shell {
  container-type: inline-size;
  border: 1px solid var(--bg-fill-secondary);
  border-radius: var(--radius-lg);
  background: var(--bg-fill-tertiary);
  box-shadow: none;
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
@container (max-width: 430px) {
  .composer-row .inline-switcher__chip {
    padding: 0 7px 0 5px;
    gap: 5px;
  }
  .composer-row .session-mode-toggle__trigger .session-mode-toggle__label {
    display: none;
  }
  .composer-row .session-mode-toggle__trigger {
    padding: 0 7px;
    gap: 3px;
  }
  .composer-row .session-mode-toggle__popover {
    left: auto;
    right: 0;
  }
  .composer-row .composer-send {
    width: 32px;
    padding: 0;
    gap: 0;
  }
  .composer-row .composer-send span {
    display: none;
  }
}
.composer-shell:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  }
  box-shadow: 0 1px 2px var(--text), 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  }
}
.composer-design-system-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.composer.drag-active .composer-shell {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.composer-active-file {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
  }
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.composer-active-file__label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 650;
}
.composer-active-file__name {
  min-width: 0;
  max-width: min(100%, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.composer-input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--bg-subtle));
  }
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.composer-input-wrap:focus-within {
  background: var(--bg-panel);
  border-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--selected) 28%, var(--border));
  }
}
.composer-input-editor {
  position: relative;
  min-height: 72px;
  max-height: min(184px, 34vh);
  overflow-y: auto;
}
.composer.composer-active-file-mode .composer-input-editor {
  min-height: clamp(150px, 20vh, 210px);
  max-height: min(300px, 32vh);
}
.composer-input-editor [contenteditable='true'], .composer-input-editor .composer-editable {
  outline: none;
  min-height: 72px;
  padding: 8px 9px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  caret-color: var(--accent);
  -webkit-user-modify: read-write-plaintext-only;
}
.composer.composer-active-file-mode .composer-input-editor [contenteditable='true'], .composer.composer-active-file-mode .composer-input-editor .composer-editable {
  min-height: clamp(150px, 20vh, 210px);
}
.composer-input-placeholder {
  position: absolute;
  top: 8px;
  left: 9px;
  pointer-events: none;
  user-select: none;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 8px);
}
.composer-input-editor p, .composer-editor-paragraph {
  margin: 0;
  line-height: inherit;
}
.composer-inline-mention {
  --m-hue: var(--accent);
  --m-tint: var(--accent-tint);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  max-width: min(240px, 25vw);
  margin: 0 0.5px;
  padding: 0 7px 0 6px;
  border: 1px solid var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--m-hue) 26%, var(--border));
  }
  border-radius: var(--radius-sm);
  background: var(--m-tint);
  color: var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--m-hue) 72%, var(--text));
  }
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.composer-inline-mention::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--m-hue);
  box-shadow: 0 0 0 2px var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-hue) 18%, transparent);
  }
}
.composer-inline-mention:hover {
  border-color: var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--m-hue) 40%, var(--border));
  }
  background: var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--m-hue) 14%, var(--bg-panel));
  }
}
.composer-inline-mention.selected {
  border-color: var(--selected);
  box-shadow: 0 0 0 2px var(--selected-soft);
  background: var(--m-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--m-hue) 16%, var(--bg-panel));
  }
}
.composer-inline-mention--plugin {
  --m-hue: var(--accent);
  --m-tint: var(--accent-tint);
}
.composer-inline-mention--skill {
  --m-hue: var(--accent);
  --m-tint: var(--accent-tint);
}
.composer-inline-mention--design, .composer-inline-mention--mcp {
  --m-hue: var(--purple);
  --m-tint: var(--purple-bg);
}
.composer-inline-mention--file {
  --m-hue: var(--blue);
  --m-tint: var(--blue-bg);
}
.composer-inline-mention--connector {
  --m-hue: var(--green);
  --m-tint: var(--green-bg);
}
.composer-inline-mention--asset {
  --m-hue: var(--text-soft);
  --m-tint: var(--bg-subtle);
}
.composer-workdir-row {
  display: flex;
  justify-content: flex-start;
  margin-top: -4px;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.composer-toolbox-standalone {
  display: contents;
}
.composer-toolbox-standalone-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
}
.composer-row .composer-toolbox-standalone-popup {
  position: absolute;
  left: 8px;
  right: auto;
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 90;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  scrollbar-width: thin;
  animation: composer-toolbox-pop-in 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes composer-toolbox-pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.composer-row .icon-btn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.composer-row .icon-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
.composer-row .icon-btn:active:not(:disabled) {
  background: var(--bg-muted);
}
.composer-row .icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.composer-spacer {
  flex: 1;
}
.app .composer-row .working-dir-pill-trigger, .app .composer-row .avatar-agent-trigger, .app .composer-row .session-mode-toggle__trigger, .app .composer-row .composer-send, .app .composer-row .icon-btn {
  height: 28px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.app .composer-row .working-dir-pill-trigger {
  padding-top: 0;
  padding-bottom: 0;
}
.app .composer-row .session-mode-toggle__trigger {
  box-shadow: none;
}
.app .composer-row .avatar-agent-trigger {
  width: 48px;
  grid-template-columns: 26px 20px;
}
.app .composer-row .avatar-btn {
  width: 22px;
  height: 22px;
}
.app .composer-row .icon-btn {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
}
.session-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-width: 0;
  flex-shrink: 0;
}
.session-mode-toggle__trigger, .session-mode-toggle__option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.session-mode-toggle__trigger {
  height: 32px;
  max-width: 132px;
  padding: 0 8px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.session-mode-toggle__trigger:hover:not(:disabled), .session-mode-toggle__trigger.is-open {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.session-mode-toggle__trigger:disabled {
  cursor: default;
  opacity: 0.65;
}
.session-mode-toggle__popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 1502;
  display: flex;
  width: max-content;
  max-width: calc(100vw - 32px);
  align-items: flex-end;
  gap: 8px;
}
.session-mode-toggle__menu {
  width: max-content;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
}
.session-mode-toggle__options {
  display: grid;
  gap: 2px;
}
.session-mode-toggle__option {
  width: 100%;
  height: 30px;
  justify-content: flex-start;
  text-align: left;
  padding: 0 8px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
}
.session-mode-toggle__option:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.session-mode-toggle__option.is-active {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  color: var(--text-strong);
}
.session-mode-toggle__label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.session-mode-toggle__check {
  display: inline-flex;
  width: 13px;
  flex: 0 0 13px;
  align-items: center;
  justify-content: center;
}
.session-mode-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.session-mode-toggle__popover-card {
  width: 320px;
  flex: 0 0 320px;
  background: var(--bg-panel);
  max-height: min(360px, calc(100vh - 84px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.composer .session-mode-toggle__popover-card {
  display: none;
}
.session-mode-card__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.session-mode-card__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--text-strong);
}
.session-mode-card__heading {
  min-width: 0;
}
.session-mode-card__title {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}
.session-mode-card__label {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}
.session-mode-card__summary, .session-mode-card__section-text {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.session-mode-card__section {
  margin-top: 9px;
}
.session-mode-card__section-label {
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
}
.session-mode-card__queries {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.session-mode-card__query {
  padding: 6px 7px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .session-mode-toggle__trigger {
    max-width: 138px;
  }
  .session-mode-toggle__popover {
    display: grid;
    width: min(292px, calc(100vw - 24px));
  }
  .session-mode-toggle__menu, .session-mode-toggle__popover-card {
    width: 100%;
    min-width: 0;
  }
}
.composer-import {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.composer-import:hover:not(:disabled) {
  background: var(--bg-fill-tertiary);
  color: var(--text);
}
.composer-research {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.composer-research:hover:not(:disabled) {
  background: var(--bg-fill-tertiary);
  color: var(--text);
}
.composer-research.on {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
  }
  color: var(--accent);
}
.composer-research-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 0;
  height: 32px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: white;
  font-weight: 650;
  padding: 0 11px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.composer-send:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.composer-send:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--shadow-xs);
}
.composer-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.composer-send:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}
.composer-send.stop {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-panel);
}
.composer-send.stop:hover {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--bg-panel);
}
.composer-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin: 0 8px;
}
.chat-queued-send-strip {
  display: flex;
  flex-direction: column;
  align-self: auto;
  width: calc(100% - (var(--chat-composer-inline-inset, 12px) * 2));
  min-width: 0;
  max-width: none;
  gap: 3px;
  box-sizing: border-box;
  margin: 0 var(--chat-composer-inline-inset, 12px) 2px;
  padding: 7px;
  overflow: visible;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle));
  }
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chat-queued-send-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-height: min(31vh, 168px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  scrollbar-width: thin;
}
.chat-queued-send-list.is-scrollable {
  padding-right: 3px;
  overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
.chat-queued-send-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  padding: 0 4px 1px;
}
.chat-queued-send-heading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.chat-queued-send-heading strong {
  color: var(--text-strong);
  font-weight: 620;
}
.chat-queued-send-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 2px 4px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-queued-send-row-active {
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
  }
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  }
}
.chat-queued-send-row:hover {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 70%, transparent);
  }
}
.chat-queued-send-row-dragging {
  opacity: 0.45;
}
.chat-queued-send-row-drop-before::before, .chat-queued-send-row-drop-after::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 8px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--selected);
  box-shadow: 0 0 0 2px var(--selected-soft);
}
.chat-queued-send-row-drop-before::before {
  top: -2px;
}
.chat-queued-send-row-drop-after::after {
  bottom: -2px;
}
.chat-queued-send-main {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-queued-send-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-queued-send-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.chat-queued-send-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  min-width: 0;
  max-width: 124px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-queued-send-actions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  min-width: 0;
}
.chat-queued-send-drag-handle, .chat-queued-send-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}
.chat-queued-send-drag-handle {
  flex: 0 0 auto;
  color: var(--text-faint);
  cursor: grab;
}
.chat-queued-send-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}
.chat-queued-send-drag-handle:disabled {
  cursor: default;
  opacity: 0.35;
}
.chat-queued-send-drag-handle:hover:not(:disabled), .chat-queued-send-action:hover:not(:disabled) {
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 84%, transparent);
  }
  background: var(--bg-panel);
  color: var(--text);
}
.chat-queued-send-drag-handle:focus-visible, .chat-queued-send-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-queued-send-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.chat-queued-send-overflow {
  padding: 1px 4px 0 33px;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.chat-queued-send-tooltip {
  position: relative;
}
.chat-queued-send-tooltip:not(.od-tooltip)[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  z-index: 20;
  max-width: 180px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  background: var(--text-strong);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-strong) 92%, #000);
  }
  color: var(--bg-panel);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-2px, -50%);
  transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-queued-send-drag-handle:not(.od-tooltip)[data-tooltip]::after {
  right: auto;
  left: calc(100% + 6px);
  transform: translate(2px, -50%);
}
.chat-queued-send-tooltip:not(.od-tooltip)[data-tooltip]:hover::after, .chat-queued-send-tooltip:not(.od-tooltip)[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.preview-draw-note-input::placeholder {
  color: rgba(255, 225, 210, 0.86);
}
.preview-draw-note-input:focus {
  background: rgba(218, 97, 56, 0.26) !important;
  border-color: rgba(255, 184, 140, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(218, 97, 56, 0.34), 0 0 18px rgba(218, 97, 56, 0.24) !important;
}
.staged-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 4px 4px 1px;
  max-height: min(108px, 18vh);
  overflow-y: auto;
  overflow-x: hidden;
}
.staged-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 22px;
  min-width: 0;
  min-height: 22px;
  padding: 2px 5px 2px 3px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-subtle));
  }
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  max-width: min(190px, 100%);
  overflow: hidden;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 14px;
  box-shadow: none;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.staged-chip:hover {
  background: var(--bg-panel);
  border-color: var(--border-strong);
}
.staged-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: var(--radius-xs);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 7%, var(--bg-subtle));
  }
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}
.staged-context-row {
  padding-top: 2px;
}
.staged-context-picker {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 22px;
}
.staged-context-picker--design-system .project-ds-picker-trigger {
  height: 22px;
  min-height: 22px;
  max-width: 232px;
  padding: 0 7px;
  gap: 5px;
  border-radius: var(--radius);
  font-size: 11px;
  box-shadow: none;
}
.staged-context {
  gap: 4px;
  height: 22px;
  min-height: 22px;
  max-width: min(190px, 100%);
  padding: 2px 5px 2px 3px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 30%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  }
}
.staged-context .staged-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-subtle));
  }
  color: var(--accent);
}
.staged-context .staged-icon svg {
  width: 8px;
  height: 8px;
}
.staged-context .staged-name {
  max-width: 106px;
  line-height: 14px;
}
.staged-context .staged-remove {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border-radius: var(--radius-xs);
}
.staged-context .staged-remove svg {
  width: 8px;
  height: 8px;
}
.staged-context--mcp {
  background: var(--purple-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--purple-bg) 34%, var(--bg-panel));
  }
  border-color: var(--purple);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--purple) 18%, var(--border));
  }
}
.staged-context--mcp .staged-icon {
  background: var(--purple);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--purple) 10%, var(--bg-subtle));
  }
  color: var(--purple);
}
.staged-context--connector {
  background: var(--green-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green-bg) 34%, var(--bg-panel));
  }
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  }
}
.staged-context--connector .staged-icon {
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 10%, var(--bg-subtle));
  }
  color: var(--green);
}
.staged-context--plugin {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  }
}
.staged-context--plugin .staged-icon {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-subtle));
  }
  color: var(--accent);
}
.staged-context--plugin:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
}
.staged-context-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  overflow: hidden;
}
.staged-context--workspace {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 48%, var(--bg-panel));
  }
  border-color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-muted) 18%, var(--border));
  }
}
.staged-context--workspace .staged-icon {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-subtle));
  }
  color: var(--text-muted);
}
.staged-context-kind {
  margin-right: 3px;
  color: var(--text-muted);
  font-weight: 650;
}
.staged-chip img {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  object-fit: cover;
}
.staged-preview-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.staged-preview-trigger:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.staged-preview-trigger img {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.staged-preview-trigger .staged-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 12px;
}
.staged-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(4px);
}
.staged-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 12px;
  background: var(--bg-panel);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.staged-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.staged-preview-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.staged-preview-card > img {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 640px);
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg);
}
.staged-comment {
  border-radius: var(--radius-pill);
  padding: 3px 5px 3px 8px;
}
.user-attachment.staged-comment {
  max-width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.staged-comment .staged-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.staged-comment .staged-name strong {
  color: var(--accent-strong);
  font-weight: 650;
  flex: 0 0 auto;
}
.staged-comment .staged-name span {
  white-space: normal;
  word-break: break-word;
}
.staged-comment button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
}
.staged-comment button:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.staged-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.staged-icon svg {
  display: block;
  width: 8px;
  height: 8px;
}
.staged-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 106px;
  color: var(--text);
  line-height: 12px;
}
.staged-remove {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-faint);
  cursor: pointer;
  line-height: 1;
  border-radius: 3px;
}
.staged-remove svg {
  display: block;
  width: 8px;
  height: 8px;
}
.staged-remove:hover {
  color: var(--red);
  background: var(--red-bg);
}
.linked-dirs-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.linked-dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-fill-tertiary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 220px;
}
.linked-dir-chip svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.linked-dir-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-attachments {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.user-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-fill-tertiary);
  border: none;
  border-radius: var(--radius);
  font-size: 11.5px;
  max-width: 240px;
  color: var(--text);
  cursor: default;
  text-align: left;
  font-family: inherit;
  font-size: 9px;
  line-height: 12px;
}
.user-attachment.openable {
  cursor: pointer;
}
.user-attachment.openable:hover {
  background: var(--bg-fill-secondary);
}
.user-attachment img {
  width: 12px;
  height: 12px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.user-attachment > svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.user-attachment .staged-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 106px;
  line-height: 12px;
}
.caret-floating-layer {
  z-index: 1600;
}
@keyframes cflEnterAbove {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes cflEnterBelow {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.caret-floating-layer[data-placement='above'] > * {
  transform-origin: bottom left;
  animation: cflEnterAbove 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.caret-floating-layer[data-placement='below'] > * {
  transform-origin: top left;
  animation: cflEnterBelow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .caret-floating-layer > * {
    animation: none;
  }
}
.mention-popover {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: var(--cfl-max-h, 460px);
  max-height: var(--cfl-max-h, 460px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mention-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
  padding: 6px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.mention-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: max-content;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.mention-tab:hover {
  color: var(--text);
  background: var(--bg-panel);
}
.mention-tab.active {
  background: var(--bg-panel);
  color: var(--text-strong);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.mention-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 5px;
  scroll-padding-block: 6px;
}
.mention-empty {
  padding: 22px 14px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}
.mention-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) max-content;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  font-size: 12px;
  text-align: left;
  column-gap: 8px;
  color: var(--text);
  min-height: 42px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.mention-item:hover {
  background: var(--bg-subtle);
}
.mention-item[aria-selected='true'], .mention-item.is-active {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.mention-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  padding: 8px 9px 3px;
}
.mention-section-label:first-child {
  padding-top: 3px;
}
.mention-section-label + .mention-section-label, .mention-item + .mention-section-label {
  margin-top: 2px;
  border-top: none;
}
.mention-item--plugin {
  align-items: center;
}
.mention-item-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}
.mention-item-body strong {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-meta--desc {
  align-self: stretch;
  text-align: left;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.mention-meta--path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 84%, var(--text-soft));
  }
}
.mention-item code {
  flex: 1;
  font-size: 11px;
  background: transparent;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-item > svg {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 74%, transparent);
  }
  flex: 0 0 24px;
  color: var(--text-muted);
}
.mention-item[aria-selected='true'] > svg, .mention-item.is-active > svg {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--accent);
}
.mention-meta {
  min-width: 0;
  color: var(--text-soft);
  font-size: 10px;
  align-self: center;
}
.mention-item-kind {
  justify-self: end;
  max-inline-size: 86px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, transparent);
  }
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .mention-tabs {
    gap: 4px;
    padding: 6px;
  }
  .mention-tab {
    min-height: 26px;
    padding: 3px 9px;
    font-size: 11px;
    line-height: 16px;
  }
}
.mention-section-head {
  padding: 6px 10px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mention-skill-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.mention-skill-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mention-skill-row code {
  flex: none;
  font-size: 11px;
}
.mention-skill-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mention-skill-desc {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.staged-skills-row {
  gap: 6px;
  flex-wrap: wrap;
}
.staged-chip.staged-skill {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-subtle));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  }
}
.staged-chip.staged-skill .staged-icon {
  color: var(--accent);
}
.staged-chip.staged-skill-user {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 14%, var(--bg-subtle));
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in 160ms ease-out;
}
.modal {
  background: var(--bg-elevated);
  -webkit-app-region: no-drag;
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 520px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: pop-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.modal h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.modal .hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.modal .row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.updater-popup {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  z-index: 80;
  width: min(360px, calc(100vw - var(--entry-rail-width, 56px) - 24px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  -webkit-app-region: no-drag;
}
[dir='rtl'] .entry-updater-menu .updater-popup {
  left: auto;
  right: calc(100% + 12px);
}
.entry-main__topbar .entry-updater-menu .updater-popup {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
}
[dir='rtl'] .entry-main__topbar .entry-updater-menu .updater-popup {
  right: auto;
  left: 0;
}
.updater-popup__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 12%, var(--bg-subtle));
  }
  color: var(--accent);
}
.updater-popup__body {
  min-width: 0;
}
.updater-popup__body h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 650;
}
.updater-popup__body p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.updater-popup__error {
  color: var(--red) !important;
}
.updater-popup__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
}
.updater-popup__button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.updater-popup__button:hover {
  border-color: var(--text-muted);
}
.updater-popup__button:disabled {
  cursor: default;
  opacity: 0.55;
}
.updater-popup__button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
@media (max-width: 560px) {
  .updater-popup {
    width: calc(100vw - var(--entry-rail-width, 56px) - 18px);
  }
}
.modal-rename {
  width: 420px;
  gap: 14px;
}
.modal-rename input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--text-strong);
  font-size: 13px;
  outline: none;
}
.modal-rename input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}
.modal-rename .row button {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-strong);
}
.modal-rename .row button:hover {
  border-color: var(--border-strong);
}
.modal-rename .row button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.modal-rename .row button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-confirm {
  width: 420px;
  gap: 12px;
}
.modal-confirm-message {
  margin: 0;
  font-size: 13px;
  color: var(--text-strong);
  line-height: 1.55;
}
.modal-confirm-error {
  margin: 0;
  font-size: 13px;
  color: var(--red);
  line-height: 1.55;
}
.modal-confirm .row {
  margin-top: 8px;
}
.modal-confirm .row button {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-strong);
}
.modal-confirm .row button:hover {
  border-color: var(--border-strong);
}
.modal-confirm .row button.primary.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.modal-confirm .row button.primary.danger:hover {
  filter: brightness(0.95);
}
.design-card-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}
.design-card-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.design-card-tag.tag-prototype {
  color: #2348b8;
  background: #e8efff;
  border-color: rgba(35, 72, 184, 0.18);
}
.design-card-tag.tag-live-artifact {
  color: #6d4ff5;
  background: rgba(116, 92, 255, 0.12);
  border-color: rgba(116, 92, 255, 0.28);
}
.design-card-tag.tag-slide {
  color: #b15e00;
  background: rgba(255, 159, 64, 0.14);
  border-color: rgba(255, 159, 64, 0.32);
}
.design-card-tag.tag-media {
  color: #1c8a73;
  background: rgba(28, 138, 115, 0.12);
  border-color: rgba(28, 138, 115, 0.28);
}
.design-card-tag.tag-design-system {
  color: var(--red);
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 9%, var(--bg-panel));
  }
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 34%, transparent);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}
.modal-settings {
  --modal-padding: 24px;
  width: min(920px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 64px));
  padding: 0;
  gap: 0;
  overflow: hidden;
  position: relative;
}
@media (max-height: 600px) {
  .modal-settings {
    height: 90vh;
  }
}
.modal-settings .modal-body {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.modal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding: var(--modal-padding);
}
.modal-head .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
.modal-head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal-head .subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 72ch;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px var(--modal-padding, 22px) 12px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  flex-shrink: 0;
}
.settings-chrome {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-chrome > * {
  pointer-events: auto;
}
.settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  }
  color: var(--text-muted);
  cursor: pointer;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.settings-close:hover {
  color: var(--text);
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  }
  background: var(--bg-panel);
  transform: scale(1.04);
}
.settings-close:active {
  transform: scale(0.96);
}
.settings-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .settings-close {
    transition: color 80ms linear, border-color 80ms linear;
    transform: none !important;
  }
}
.settings-autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  }
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 160ms var(--ease-out), color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.settings-autosave.is-idle {
  opacity: 0;
  transform: translateY(-2px);
  padding: 0;
  border-color: transparent;
  background: transparent;
  min-height: 0;
}
.settings-autosave.is-pending, .settings-autosave.is-saving {
  opacity: 1;
  color: var(--text-muted);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-panel));
  }
  border-color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-muted) 18%, transparent);
  }
}
.settings-autosave.is-saved {
  opacity: 1;
  color: var(--green, #1f9d55);
  background: var(--green, #1f9d55);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green, #1f9d55) 14%, var(--bg-panel));
  }
  border-color: var(--green, #1f9d55);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green, #1f9d55) 30%, transparent);
  }
  animation: settingsAutosavePop 220ms ease-out;
}
.settings-autosave.is-error {
  opacity: 1;
  color: var(--red, #d23434);
  background: var(--red, #d23434);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, #d23434) 14%, var(--bg-panel));
  }
  border-color: var(--red, #d23434);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red, #d23434) 32%, transparent);
  }
}
@keyframes settingsAutosavePop {
  from {
    transform: translateY(-2px) scale(0.98);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-autosave {
    transition: opacity 80ms linear;
    animation: none !important;
  }
}
@media (max-width: 720px) {
  .settings-autosave.is-error span, .settings-autosave.is-saved span, .settings-autosave.is-pending span, .settings-autosave.is-saving span {
    display: none;
  }
  .settings-autosave.is-idle {
    padding: 0;
  }
}
.modal-settings .modal-head {
  position: relative;
  z-index: 2;
  padding-right: calc(var(--modal-padding) + 56px);
  background: var(--bg-elevated);
}
.modal-settings .modal-head-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
}
.modal-settings .modal-head-line > h2 {
  flex: 0 0 auto;
  margin: 0;
}
.modal-settings .modal-head-line > .subtitle {
  margin: 0;
  flex: 1 1 240px;
  font-size: 12.5px;
  max-width: none;
}
.settings-connectors-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.settings-connectors-save.is-busy {
  opacity: 0.85;
  cursor: progress;
}
.settings-section-connectors .field-row {
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .settings-section-connectors .field-row > input, .settings-section-connectors .field-row > .field-input-skeleton-wrap {
    flex: 1 1 100%;
  }
}
.settings-connectors-clear.is-arming {
  border-color: var(--red-border);
  color: var(--red);
  background: var(--red-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red-bg) 65%, transparent);
  }
}
.settings-connectors-clear-confirm {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--red-border);
  background: var(--red-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red-bg) 78%, transparent);
  }
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  animation: settings-connectors-clear-confirm-in 180ms ease-out;
}
.settings-connectors-clear-confirm.is-final {
  background: var(--red-bg);
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 55%, var(--red-border));
  }
  box-shadow: 0 0 0 1px var(--red), 0 8px 24px -16px var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent), 0 8px 24px -16px color-mix(in srgb, var(--red) 80%, transparent);
  }
}
@keyframes settings-connectors-clear-confirm-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.settings-connectors-clear-confirm-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red) 35%, var(--red-border));
  }
  background: var(--bg-panel);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}
.settings-connectors-clear-confirm.is-final .settings-connectors-clear-confirm-icon {
  background: var(--red);
  color: var(--bg-panel);
  border-color: var(--red);
}
.settings-connectors-clear-confirm-glyph {
  display: inline-block;
  transform: translateY(-0.5px);
}
.settings-connectors-clear-confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.settings-connectors-clear-confirm-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}
.settings-connectors-clear-confirm-copy span {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.settings-connectors-clear-confirm.is-final .settings-connectors-clear-confirm-copy strong {
  color: var(--red);
}
.settings-connectors-clear-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.settings-connectors-clear-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--red-border);
  background: var(--bg-panel);
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}
.settings-connectors-clear-step:hover {
  background: var(--red-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red-bg) 60%, var(--bg-panel));
  }
  border-color: var(--red);
}
.settings-connectors-clear-step:active {
  transform: translateY(1px);
}
.settings-connectors-clear-commit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--red);
  background: var(--red);
  color: var(--bg-panel);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out;
}
.settings-connectors-clear-commit:disabled, .settings-connectors-clear-commit[aria-disabled='true'] {
  cursor: progress;
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 70%, var(--bg-panel));
  }
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 60%, var(--red-border));
  }
}
.settings-connectors-clear-commit.is-armed {
  box-shadow: 0 0 0 3px var(--red), 0 10px 20px -12px var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent), 0 10px 20px -12px color-mix(in srgb, var(--red) 75%, transparent);
  }
}
.settings-connectors-clear-commit.is-armed:hover {
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 88%, #000);
  }
}
.settings-connectors-clear-commit.is-armed:active {
  transform: translateY(1px);
}
.settings-connectors-clear-commit-arm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 90deg, color-mix(in srgb, #fff 28%, transparent) 0%, color-mix(in srgb, #fff 12%, transparent) 100% );
  transform: translateX(-100%);
  opacity: 0.85;
  animation: settings-connectors-clear-commit-arm 700ms ease-out forwards;
}
.settings-connectors-clear-commit.is-armed .settings-connectors-clear-commit-arm {
  display: none;
}
@keyframes settings-connectors-clear-commit-arm {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
.settings-connectors-clear-commit-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
@media (max-width: 540px) {
  .settings-connectors-clear-confirm {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .settings-connectors-clear-confirm-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .settings-connectors-clear-commit {
    min-width: 0;
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-connectors-clear-confirm {
    animation: none;
  }
  .settings-connectors-clear-commit-arm {
    animation: none;
    transform: translateX(0%);
    opacity: 0.4;
  }
}
.settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.settings-nav-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
}
.settings-nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.settings-nav-item.active, .settings-nav-item.active:hover {
  background: var(--bg-subtle);
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
}
.settings-nav-item svg {
  justify-self: center;
  opacity: 0.75;
}
.settings-nav-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-item strong {
  color: currentColor;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.settings-nav-item.active strong {
  font-weight: 600;
}
.settings-nav-item small {
  display: none;
}
.settings-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: 16px var(--modal-padding) 22px;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .modal-settings {
    width: min(560px, calc(100vw - 24px));
  }
  .modal-settings .modal-body {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-nav-item {
    min-width: 150px;
  }
}
.seg-control {
  display: grid;
  grid-template-columns: repeat(var(--seg-cols, 2), minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 42px;
  min-width: 0;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: center;
  min-width: 0;
}
.seg-btn:hover:not(:disabled):not(.active) {
  color: var(--text);
}
.seg-btn.active {
  background: var(--bg-panel);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}
.seg-btn .seg-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.seg-btn.active .seg-title {
  font-weight: 600;
}
.seg-btn .seg-meta {
  display: none;
}
.seg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.seg-btn--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding-block: 8px;
}
.seg-btn--inline > .seg-title {
  min-width: 0;
  flex: 0 0 auto;
}
.seg-btn--inline > .seg-meta {
  min-width: 0;
  flex: 1 1 auto;
}
.protocol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 4px 0 8px;
  padding: 0;
  min-width: 0;
}
.protocol-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.protocol-chip-group-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.protocol-chip-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.protocol-chip {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.protocol-chip:hover:not(.active) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.protocol-chip.active {
  background: var(--selected);
  border-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--selected) 86%, var(--text-strong));
  }
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--selected-soft), 0 1px 2px var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px var(--selected-soft), 0 1px 2px color-mix(in srgb, var(--selected) 22%, transparent);
  }
}
.protocol-chip.active:hover {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 88%, var(--text-strong));
  }
  border-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--selected) 80%, var(--text-strong));
  }
  color: #fff;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-locations-section {
  gap: 14px;
}
.project-location-card, .project-location-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.project-location-card:hover, .project-location-edit:hover {
  border-color: var(--border-strong);
}
.project-location-card.is-default, .project-location-edit.is-default {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.project-location-card code {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  word-break: break-all;
}
.project-location-default-control span {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-subtle);
  white-space: nowrap;
}
.project-location-default-control {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
  cursor: pointer;
}
.project-location-default-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.project-location-default-control input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.project-location-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.project-location-edit {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.project-location-edit-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.project-location-edit-main code {
  color: var(--text-muted);
  font-size: 11px;
  word-break: break-all;
}
.project-location-edit-main small {
  color: var(--text-muted);
  font-size: 11px;
}
.project-location-add {
  align-self: flex-start;
}
@media (max-width: 720px) {
  .project-location-edit {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .project-location-default-control {
    justify-self: start;
  }
}
.settings-section-connectors {
  gap: 16px;
}
.settings-section-connectors > .settings-section-connectors-credentials {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.settings-section-connectors > .connectors-panel-embedded {
  margin-top: 0;
}
.settings-rescan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  justify-content: center;
}
.settings-rescan-btn.loading {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-rescan-status, .settings-test-status {
  margin: -4px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  background: var(--green-bg);
  color: var(--green);
  font-size: 12px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.settings-rescan-status.error, .settings-test-status.error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.settings-rescan-status-inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11.5px;
  white-space: nowrap;
}
.settings-rescan-status-inline.error {
  color: var(--red);
}
.settings-test-status.warn {
  border-color: var(--amber-border, var(--orange-border, var(--green-border)));
  background: var(--amber-bg, var(--orange-bg, var(--green-bg)));
  color: var(--amber, var(--orange, var(--green)));
}
.settings-test-status.running {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-test-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-test-actions-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.settings-test-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  justify-content: center;
}
.settings-test-btn.loading {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.section-head-actions .seg-control {
  display: inline-grid;
  grid-template-columns: repeat(var(--seg-cols, 2), auto);
  min-height: unset;
  min-width: unset;
}
.section-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.orbit-section {
  gap: 16px;
}
.orbit-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(140% 160% at 100% 0%, var(--accent-tint) 0%, transparent 60%), var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--accent-tint) 75%, transparent) 0%, transparent 60%), var(--bg-panel);
  }
  box-shadow: var(--shadow-xs);
}
.orbit-hero-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  }
  color: #fff;
  box-shadow: 0 6px 14px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  flex-shrink: 0;
}
.orbit-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.orbit-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-hero-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  line-height: 1.15;
}
.orbit-hero-lede {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 52ch;
}
.orbit-hero-lede strong {
  color: var(--text);
  font-weight: 600;
}
.orbit-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.orbit-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.orbit-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.orbit-state-pill.orbit-state-active {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 80%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  color: var(--accent-strong);
}
.orbit-state-pill.orbit-state-active .orbit-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  animation: pulse 2.4s ease-in-out infinite;
}
.orbit-run-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--accent-strong) inset, var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-strong) 22%, transparent) inset, var(--shadow-xs);
  }
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.orbit-run-cta:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.orbit-run-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.orbit-run-cta:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}
.orbit-run-cta.is-busy {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 75%, #000);
  }
  border-color: transparent;
}
.orbit-run-cta .icon-spin {
  color: #fff;
}
@media (max-width: 620px) {
  .orbit-hero {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .orbit-hero-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}
.orbit-automation {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.orbit-automation.is-on {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 40%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 40%, var(--bg-panel)) 0%, var(--bg-panel) 40%);
  }
}
.orbit-automation.is-locked {
  border-color: var(--text-soft);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-soft) 22%, var(--border));
  }
  background: repeating-linear-gradient( 135deg, var(--text-soft) 0 6px, transparent 6px 14px ), var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--text-soft) 4%, transparent) 0 6px, transparent 6px 14px ), var(--bg-subtle);
  }
  filter: saturate(0.55);
}
.orbit-automation.is-locked.is-on {
  background: repeating-linear-gradient( 135deg, var(--text-soft) 0 6px, transparent 6px 14px ), var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--text-soft) 4%, transparent) 0 6px, transparent 6px 14px ), var(--bg-subtle);
  }
}
.orbit-automation.is-locked .orbit-automation-row {
  cursor: not-allowed;
}
.orbit-automation.is-locked .orbit-automation-title, .orbit-automation.is-locked .orbit-automation-sub {
  color: var(--text-soft);
}
.orbit-automation.is-locked .orbit-time-input, .orbit-automation.is-locked .orbit-switch, .orbit-automation.is-locked .orbit-template-select-input, .orbit-automation.is-locked .orbit-automation-sub-action {
  cursor: not-allowed;
  opacity: 0.6;
}
.orbit-automation.is-locked .orbit-time-input:disabled, .orbit-automation.is-locked .orbit-template-select-input:disabled {
  background: var(--text-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-soft) 6%, var(--bg-subtle));
  }
}
.orbit-automation-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  }
  border-bottom: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  }
}
.orbit-automation-lock-banner svg {
  color: var(--accent-strong);
  flex-shrink: 0;
}
.orbit-automation-lock-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  flex-shrink: 0;
}
.orbit-automation-lock-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .orbit-automation-lock-text {
    white-space: normal;
  }
}
.orbit-automation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}
.orbit-automation-schedule-row {
  align-items: start;
}
.orbit-automation-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0 18px;
}
.orbit-automation-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.orbit-automation-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.orbit-automation-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.orbit-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.orbit-switch:hover {
  border-color: var(--border-strong);
}
.orbit-switch.is-on {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 70%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  color: var(--accent-strong);
}
.orbit-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.orbit-switch:disabled, .orbit-switch.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: var(--border);
  background: transparent;
  color: var(--text-soft);
}
.orbit-switch:disabled .orbit-switch-track, .orbit-switch.is-locked .orbit-switch-track {
  background: var(--border);
}
.orbit-switch:disabled.is-on .orbit-switch-track, .orbit-switch.is-locked.is-on .orbit-switch-track {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
}
.orbit-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background 160ms var(--ease-out);
}
.orbit-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 27, 26, 0.22);
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1);
}
.orbit-switch.is-on .orbit-switch-track {
  background: var(--accent);
}
.orbit-switch.is-on .orbit-switch-thumb {
  transform: translateX(14px);
}
.orbit-switch-text {
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: right;
}
.orbit-automation-schedule-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}
.orbit-time-input {
  width: 140px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  border-radius: var(--radius-sm);
}
.orbit-next-run {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orbit-next-run-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.orbit-next-run-value {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.orbit-next-run-value.muted {
  color: var(--text-muted);
  font-weight: 500;
}
@media (max-width: 620px) {
  .orbit-automation-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .orbit-automation-schedule-controls {
    align-items: stretch;
  }
  .orbit-time-input {
    width: 100%;
  }
  .orbit-switch {
    align-self: flex-start;
  }
}
.orbit-automation.has-template {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
}
.orbit-automation-template-row {
  align-items: start;
  padding-top: 16px;
  padding-bottom: 16px;
}
.orbit-automation-template-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
  width: clamp(220px, 36%, 320px);
}
.orbit-automation-sub-warning {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  background: #c47a2c;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #c47a2c 10%, var(--bg-panel));
  }
  color: #8a5217;
  font-weight: 500;
}
.orbit-automation-sub-warning svg {
  color: #c47a2c;
  flex-shrink: 0;
}
.orbit-automation-sub-warning strong {
  color: #6c3f0f;
  font-weight: 600;
}
.orbit-automation-sub-action {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: auto;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8a5217;
  background: var(--bg-panel);
  border: 1px solid #c47a2c;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, #c47a2c 32%, var(--border));
  }
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.orbit-automation-sub-action:hover {
  color: #6c3f0f;
  border-color: #c47a2c;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #c47a2c 55%, var(--border));
  }
  background: #c47a2c;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #c47a2c 8%, var(--bg-panel));
  }
}
.orbit-automation-sub-action:focus-visible {
  outline: 2px solid #c47a2c;
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, #c47a2c 65%, var(--accent));
  }
  outline-offset: 2px;
}
.orbit-template-select {
  display: flex;
  flex: 1;
  min-width: 0;
}
.orbit-template-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.orbit-template-select-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 32px 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.orbit-template-select-input:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}
.orbit-template-select-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.orbit-template-select-input:disabled {
  cursor: progress;
  opacity: 0.65;
}
.orbit-template-select-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
@media (max-width: 620px) {
  .orbit-automation-template-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .orbit-automation-template-controls {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
}
.orbit-receipt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.orbit-receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.orbit-receipt-head-left {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.orbit-receipt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.orbit-receipt-eyebrow svg {
  color: var(--text-soft);
}
.orbit-receipt-timestamp {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.orbit-receipt-timestamp.muted {
  color: var(--text-muted);
  font-weight: 500;
}
.orbit-trigger-pill {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.orbit-trigger-pill.orbit-trigger-manual {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue);
}
.orbit-trigger-pill.orbit-trigger-scheduled {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 80%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  color: var(--accent-strong);
}
.orbit-inline-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
}
.orbit-inline-notice.is-success {
  border-color: var(--green-border);
  background: var(--green-bg);
  color: var(--green);
}
.orbit-inline-notice.is-error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.orbit-meter {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.orbit-meter-seg {
  height: 100%;
  transition: width 260ms var(--ease-out);
}
.orbit-meter-seg.is-succeeded {
  background: var(--green);
}
.orbit-meter-seg.is-skipped {
  background: var(--border-strong);
}
.orbit-meter-seg.is-failed {
  background: var(--red);
}
.orbit-meter-seg.is-empty {
  width: 100%;
  background: repeating-linear-gradient( 45deg, var(--bg-subtle) 0 6px, var(--bg-muted) 6px 12px );
}
.orbit-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orbit-counts .orbit-count {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px;
}
.orbit-counts .orbit-count + .orbit-count::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-soft);
}
.orbit-count dt {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.orbit-count dd {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.orbit-count.is-succeeded dd {
  color: var(--green);
}
.orbit-count.is-skipped dd {
  color: var(--text-muted);
}
.orbit-count.is-failed dd {
  color: var(--red);
}
@media (max-width: 620px) {
  .orbit-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }
  .orbit-counts .orbit-count + .orbit-count::before {
    display: none;
  }
}
.orbit-config-gate {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  border-radius: var(--radius);
  background: radial-gradient(120% 160% at 0% 50%, var(--accent-tint) 0%, transparent 60%), var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--accent-tint) 90%, transparent) 0%, transparent 60%), var(--bg-panel);
  }
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  animation: orbitConfigGateIn 220ms ease-out;
}
.orbit-config-gate::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  pointer-events: none;
  z-index: 0;
}
@keyframes orbitConfigGateIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.orbit-config-gate-glyph {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.orbit-config-gate-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent);
  }
}
.orbit-config-gate-ring-outer {
  inset: 0;
  animation: orbitFirstrunSpin 22s linear infinite;
}
.orbit-config-gate-ring-inner {
  inset: 9px;
  border-style: solid;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  }
  animation: orbitFirstrunSpin 16s linear infinite reverse;
}
.orbit-config-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  }
  color: var(--btn-primary-fg, #fff);
  box-shadow: 0 4px 10px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-config-gate-ring {
    animation: none !important;
  }
}
.orbit-config-gate-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.orbit-config-gate-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-config-gate-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  line-height: 1.3;
}
.orbit-config-gate-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 56ch;
}
.orbit-config-gate-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.orbit-config-gate-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--btn-primary-fg, #fff);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  }
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  }
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), filter 140ms var(--ease-out);
  box-shadow: 0 6px 14px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.orbit-config-gate-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 20px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}
.orbit-config-gate-action:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.orbit-config-gate-action svg {
  transition: transform 160ms var(--ease-out);
}
.orbit-config-gate-action:hover svg {
  transform: translateX(2px);
}
@media (max-width: 620px) {
  .orbit-config-gate {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .orbit-config-gate-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
.composer-shell .plugins-section {
  display: flex;
  flex-direction: column;
}
.composer-shell .plugins-section__active {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.orbit-artifact-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--bg-panel) 55%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-tint) 60%, var(--bg-panel)) 0%, var(--bg-panel) 55%);
  }
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.orbit-artifact-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
  }
}
.orbit-artifact-strip.is-legacy {
  background: var(--bg-subtle);
  border-color: var(--border);
  border-style: dashed;
}
.orbit-artifact-strip.is-legacy::before {
  display: none;
}
.orbit-artifact-strip-icon {
  grid-row: 1;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  }
  color: var(--accent-strong);
  flex-shrink: 0;
}
.orbit-artifact-strip.is-legacy .orbit-artifact-strip-icon {
  border-color: var(--border);
  color: var(--text-muted);
}
.orbit-artifact-strip-copy {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.orbit-artifact-strip-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-artifact-strip.is-legacy .orbit-artifact-strip-kicker {
  color: var(--text-muted);
}
.orbit-artifact-strip-title {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orbit-artifact-strip-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.orbit-artifact-strip-actions {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.orbit-artifact-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.orbit-artifact-ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.orbit-artifact-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 var(--accent-strong) inset, var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-strong) 20%, transparent) inset, var(--shadow-xs);
  }
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.orbit-artifact-open:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.orbit-artifact-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.orbit-artifact-peek {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
  border-top: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  }
  padding-top: 8px;
}
.orbit-artifact-strip.is-legacy .orbit-artifact-peek {
  border-top-color: var(--border-soft);
}
.orbit-artifact-peek summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  user-select: none;
}
.orbit-artifact-peek summary::-webkit-details-marker {
  display: none;
}
.orbit-artifact-peek summary svg {
  transition: transform 160ms var(--ease-out);
  color: var(--text-soft);
}
.orbit-artifact-peek[open] summary svg {
  transform: rotate(90deg);
}
.orbit-artifact-peek[open] summary {
  color: var(--text);
}
.orbit-artifact-peek pre {
  margin: 8px 0 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font: 11.5px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .orbit-artifact-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .orbit-artifact-strip-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
  }
  .orbit-artifact-peek {
    grid-column: 1 / -1;
  }
}
.settings-field-error {
  color: var(--red);
  font-size: 12px;
  line-height: 1.4;
}
.settings-about-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcp-client-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcp-capabilities-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.55;
}
.mcp-capabilities-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mcp-capabilities-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
}
.mcp-setup-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mcp-setup-card .ds-picker {
  margin-bottom: 0;
}
.mcp-running-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.settings-about-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settings-about-version-row {
  justify-content: space-between;
}
.settings-about-list dt {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.settings-about-list dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.settings-notify-card {
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settings-notify-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-notify-card-header h4 {
  margin: 0;
}
.settings-notify-card-hint {
  margin: 16px 0 0;
}
.settings-about-version-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-about-version-num {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.settings-about-download-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
  white-space: nowrap;
}
.settings-about-download-link:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.settings-about-download-link:disabled {
  opacity: 0.5;
  cursor: default;
}
.media-provider-reload-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
}
.media-provider-reload-btn {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 8px;
  gap: 4px;
}
.media-provider-reload-btn:hover {
  color: var(--text);
}
.settings-about-diagnostics {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settings-about-diagnostics-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.settings-about-diagnostics h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-about-diagnostics-text .hint {
  margin: 0;
  font-size: 12px;
}
.diagnostics-export-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 220px;
}
.diagnostics-export-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.diagnostics-export-status {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
  text-align: right;
}
.diagnostics-export-status.success {
  color: var(--text);
}
.diagnostics-export-status.error {
  color: var(--danger, #d4543b);
}
.media-provider-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-provider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.media-provider-row.pending {
  background: var(--bg-subtle);
  border-style: dashed;
}
.media-provider-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.media-provider-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.media-provider-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.media-provider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.media-provider-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.media-provider-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.media-provider-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.media-provider-badge.integrated {
  color: #137a3d;
  background: color-mix(in srgb, #1f9d55 10%, transparent);
  border-color: #1f9d55;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--border));
  }
}
.media-provider-badge.unsupported {
  color: var(--text-soft);
  background: var(--bg-subtle);
  border-color: var(--border);
}
.media-provider-badge.on {
  color: #3155c9;
  background: color-mix(in srgb, #4169e1 10%, transparent);
  border-color: #4169e1;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #4169e1 28%, var(--border));
  }
}
.media-provider-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px;
}
.media-provider-coming-soon {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.media-provider-coming-soon[open] {
  padding-bottom: 12px;
}
.media-provider-coming-soon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.media-provider-coming-soon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft, var(--border));
}
.media-provider-coming-soon-item:first-child {
  border-top: 0;
}
.media-provider-coming-soon-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.media-provider-secret-field {
  position: relative;
  min-width: 0;
}
.media-provider-secret-field input {
  width: 100%;
  padding-right: 34px;
}
.secret-visibility-button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transform: translateY(-50%);
}
.secret-visibility-button:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-subtle);
  box-shadow: none;
}
.secret-visibility-button:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.section-head > div {
  max-width: 100%;
  min-width: 0;
}
.section-head > button, .section-head .section-head-actions > button {
  white-space: nowrap;
  flex-shrink: 0;
}
.section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.section-head .hint {
  margin-top: 2px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.memory-model-inline__select {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
}
.composer-byok-image-model__select {
  min-width: 220px;
  flex: 1 1 240px;
  max-width: 320px;
}
.field-required {
  margin-left: 4px;
  color: var(--red);
  font-weight: 700;
}
.field-error, .field-inline-status {
  font-size: 11.5px;
  line-height: 1.35;
}
.field-error {
  color: var(--red);
}
.field-inline-status.running {
  color: var(--accent-strong);
}
.field-inline-status.success {
  color: var(--green);
}
.field-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.field-row input {
  flex: 1;
}
.field-row .icon-btn {
  white-space: nowrap;
  padding: 6px 12px;
}
.settings-base-url-readonly .field-row input[readonly] {
  background-color: var(--bg-panel);
  color: var(--text);
  cursor: default;
}
.settings-base-url-customize {
  flex-shrink: 0;
}
.settings-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.settings-language-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
  box-shadow: none;
  min-width: 0;
}
.settings-language-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-language-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.settings-language-tile-code {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.settings-language-tile:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.settings-language-tile.active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.settings-language-tile.active .settings-language-tile-title {
  color: var(--accent);
}
.settings-language-tile.active:hover {
  background: var(--accent-soft);
}
.settings-language-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.empty-card {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  background: var(--bg-subtle);
}
.agent-scan-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 20px;
  overflow: hidden;
  min-height: 296px;
  padding: 30px 34px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  }
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 38%, var(--accent), transparent 34%), linear-gradient(180deg, var(--bg-panel), var(--bg-subtle));
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 90%, var(--accent) 10%), var(--bg-subtle));
  }
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 18px 42px color-mix(in srgb, #000 18%, transparent);
}
.agent-scan-card::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  }
  pointer-events: none;
}
.agent-scan-card__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.agent-scan-card__ring {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at center, var(--bg-subtle) 50%, transparent 52%), conic-gradient(from 0deg, var(--accent) 0 84deg, var(--accent) 84deg 180deg, transparent 180deg 360deg);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at center, var(--bg-subtle) 50%, transparent 52%), conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 92%, #fff) 0 84deg, color-mix(in srgb, var(--accent) 22%, transparent) 84deg 180deg, transparent 180deg 360deg);
  }
  box-shadow: 0 0 0 1px var(--accent), 0 0 32px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  animation: agent-scan-ring 1.15s linear infinite;
}
.agent-scan-card__ring::after {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 42%, transparent);
  }
}
.agent-scan-card__stage strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.agent-scan-card__stage > span:not(.agent-scan-card__ring) {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.agent-scan-card__progress {
  width: min(240px, 70%);
  height: 2px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }
}
.agent-scan-card__progress span {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: agent-scan-progress 1.35s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.agent-scan-card__rows {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(640px, 100%);
  justify-self: center;
}
.agent-scan-card__rows span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 10px 8px;
  gap: 8px 10px;
  align-items: center;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  }
  opacity: 0.7;
}
.agent-scan-card__rows i, .agent-scan-card__rows b, .agent-scan-card__rows em {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--text), transparent), var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent), color-mix(in srgb, var(--text) 9%, transparent);
  }
  background-size: 220% 100%, 100% 100%;
  animation: agent-scan-row 1.45s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.agent-scan-card__rows i {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}
.agent-scan-card__rows b {
  width: 82%;
  height: 10px;
}
.agent-scan-card__rows em {
  width: 54%;
  height: 8px;
}
.agent-scan-card__rows span:nth-child(2) {
  opacity: 0.58;
}
.agent-scan-card__rows span:nth-child(3) {
  opacity: 0.46;
}
.agent-scan-card__rows span:nth-child(2) i, .agent-scan-card__rows span:nth-child(2) b, .agent-scan-card__rows span:nth-child(2) em {
  animation-delay: 120ms;
}
.agent-scan-card__rows span:nth-child(3) i, .agent-scan-card__rows span:nth-child(3) b, .agent-scan-card__rows span:nth-child(3) em {
  animation-delay: 240ms;
}
@keyframes agent-scan-ring {
  to {
    transform: rotate(360deg);
  }
}
@keyframes agent-scan-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(230%);
  }
}
@keyframes agent-scan-row {
  from {
    background-position: 120% 0, 0 0;
  }
  to {
    background-position: -120% 0, 0 0;
  }
}
.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.agent-grid-installed {
  grid-template-columns: minmax(0, 1fr);
}
.agent-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.agent-group-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}
.agent-group-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.agent-group-rescan-btn {
  min-width: 92px;
  min-height: 32px;
}
.agent-install-collapse {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.agent-install-collapse-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}
.agent-install-collapse-summary::-webkit-details-marker {
  display: none;
}
.agent-install-collapse-summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s var(--ease-out);
}
.agent-install-collapse[open] > .agent-install-collapse-summary::before {
  transform: rotate(90deg);
}
.agent-grid-unavailable {
  margin-top: 10px;
}
.agent-test-result-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-test-result-row > .settings-test-status {
  margin: 0;
}
.agent-test-result-row > .settings-test-actions {
  margin-top: 0;
}
.agent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms var(--ease-out);
}
.agent-card-installed {
  display: block;
  padding: 0;
  min-height: 72px;
  overflow: hidden;
}
.agent-card--amr-highlight {
  border-color: var(--accent);
  animation: amr-card-pulse 1s cubic-bezier(0.23, 1, 0.32, 1) 2;
}
@keyframes amr-card-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  35% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 34%, transparent);
  }
}
.amr-auth-anchor {
  position: relative;
  display: inline-flex;
}
.amr-coachmark {
  position: absolute;
  left: 50%;
  margin-left: -12px;
  bottom: 7px;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 4;
  animation: amr-coachmark-in 460ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes amr-coachmark-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.amr-coachmark__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: amr-coachmark-ring 1.5s cubic-bezier(0.23, 1, 0.32, 1) 460ms infinite;
}
@keyframes amr-coachmark-ring {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  30% {
    opacity: 0.65;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
.amr-coachmark__cursor {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 1px 2px var(--text-muted));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--text-muted) 45%, transparent));
  }
}
.agent-card-main {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.agent-card-select {
  flex: 1;
  min-width: 0;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.agent-card-test-btn {
  align-self: stretch;
  flex-shrink: 0;
  min-width: 112px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.agent-card-test-btn:hover:not(:disabled) {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 58%, transparent);
  }
  color: var(--accent-strong);
}
.agent-card:hover:not(.disabled) {
  border-color: var(--border-strong);
}
.agent-card.active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  background: var(--bg-panel);
  box-shadow: 0 1px 0 var(--bg-panel) inset, 0 10px 28px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-panel) 88%, transparent) inset, 0 10px 28px color-mix(in srgb, var(--text) 9%, transparent);
  }
}
.agent-card.active::before {
  content: '';
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 56%, var(--selected)));
  }
}
.agent-card-installed.active .agent-card-main {
  background: linear-gradient( 180deg, var(--accent-tint), var(--accent-tint) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--accent-tint) 32%, var(--bg-panel)), color-mix(in srgb, var(--accent-tint) 10%, var(--bg-panel)) );
  }
}
.agent-card-installed.active .agent-card-select {
  min-height: 78px;
  padding: 14px 18px 12px 22px;
}
.agent-card-installed.active .agent-icon {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 18px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, var(--border-soft)), 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
.agent-card-installed.active .agent-card-name {
  font-size: 13px;
}
.agent-card-installed.active .agent-card-meta {
  margin-top: 1px;
}
.agent-card.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.agent-card.disabled.agent-card-unavailable {
  opacity: 0.72;
}
.agent-card.agent-card-unavailable {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.agent-card-unavailable-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.agent-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
}
.agent-card-actions--inline {
  margin-top: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
}
.agent-card-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 120ms var(--ease-out);
}
.agent-card-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agent-card-link--muted {
  color: var(--text-muted);
  font-weight: 500;
}
.agent-card-link--muted:hover {
  color: var(--text);
}
.agent-card-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
}
.agent-card-link--icon:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}
.agent-card-link--ghost {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}
.agent-card-link--ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  text-decoration: none;
}
.agent-install-path-hint {
  margin-top: 10px;
  margin-bottom: 0;
}
.agent-install-guide {
  margin-top: 10px;
}
.agent-install-steps {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.agent-install-steps li + li {
  margin-top: 4px;
}
.agent-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.agent-card-name {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.agent-card-name > span:first-child, .agent-card-tagline {
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-name > span:first-child {
  flex: 0 1 auto;
}
.agent-card-title {
  min-width: 0;
}
.agent-card-name--amr {
  align-items: center;
  gap: 8px;
}
.agent-card-name--amr .agent-card-title {
  flex: 0 0 auto;
}
.agent-card-benefits {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.agent-card-benefit {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  }
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  color: var(--accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent-strong) 82%, var(--text-strong));
  }
  font-size: 10.5px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}
.agent-card-name-divider, .agent-card-tagline {
  color: var(--text-muted);
  font-weight: 500;
}
.agent-card-tagline {
  flex: 1 1 auto;
}
.agent-card-description {
  margin-top: 1px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.agent-card-meta .muted {
  color: var(--text-soft);
  font-style: italic;
}
.agent-card-amr-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-amr-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-amr-profile-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
.agent-card-model-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-model-summary span {
  flex: 0 0 auto;
}
.agent-card-model-summary strong {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-amr-auth {
  align-self: stretch;
  flex: 0 1 auto;
  min-width: 112px;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-soft);
}
.agent-card-amr-auth--placeholder {
  visibility: hidden;
  pointer-events: none;
}
.agent-card-amr-auth .amr-account-control {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 8px;
  padding: 0 14px;
}
.agent-card-amr-auth .amr-account-control__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 150px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-card-amr-auth .amr-account-control__status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-card-amr-auth .amr-account-control__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 62%, var(--bg-panel));
  }
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.agent-card-amr-auth .amr-account-control__action:hover:not(:disabled) {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 76%, var(--bg-panel));
  }
  color: var(--accent-strong);
  transform: translateY(-1px);
}
.agent-card-amr-auth .amr-account-control__action:disabled {
  cursor: default;
  opacity: 0.62;
}
.agent-card-amr-auth .amr-account-control--error {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 6px;
  padding: 6px 12px;
}
.agent-card-amr-auth .amr-account-control__error {
  flex: 1 1 100%;
  max-width: 100%;
  color: var(--danger-text, #991b1b);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
}
.agent-card-amr-auth .amr-login-pill-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
.agent-model-row-head {
  font-size: 12px;
  color: var(--text);
}
.agent-model-row-head strong {
  font-weight: 600;
}
.agent-model-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.agent-card-config {
  display: grid;
  gap: 9px;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-soft));
  }
  background: linear-gradient( 180deg, var(--bg-subtle), var(--bg-panel) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--bg-subtle) 52%, var(--bg-panel)), color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle)) );
  }
}
.agent-card-config select, .agent-card-config input, .agent-model-row select, .agent-model-row input, .agent-cli-env select, .agent-cli-env input {
  background-color: var(--bg-subtle);
}
.settings-section-card {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.settings-section-byok .section-head {
  align-items: center;
}
.settings-byok-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.settings-byok-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.settings-byok-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: help;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.settings-byok-info-button:hover, .settings-byok-info-button:focus-visible {
  border-color: var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.settings-byok-info-tooltip {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  transform: translate(-16px, -2px);
  opacity: 0;
  pointer-events: none;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: normal;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.settings-byok-info-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 23px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.settings-byok-info-wrap:hover .settings-byok-info-tooltip, .settings-byok-info-button:focus-visible + .settings-byok-info-tooltip {
  opacity: 1;
  transform: translate(-16px, 0);
}
.settings-section-byok .field-label {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.settings-section-byok select, .settings-section-byok input {
  background-color: var(--bg-panel);
}
.settings-section-byok .settings-base-url-readonly .field-row input[readonly] {
  background-color: var(--bg-panel);
  color: var(--text);
}
.settings-section-byok .settings-byok-required-empty .field-row input, .settings-section-byok .settings-byok-required-empty > input, .settings-section-byok .settings-base-url-empty .field-row input {
  border-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--selected) 48%, var(--border));
  }
  background-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--selected) 5%, var(--bg-panel));
  }
}
.settings-section-byok .settings-byok-required-empty .field-row input::placeholder, .settings-section-byok .settings-byok-required-empty > input::placeholder, .settings-section-byok .settings-base-url-empty .field-row input::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.settings-section-byok .field-label-link {
  color: var(--selected);
  font-size: 12px;
  font-weight: 500;
}
.settings-section-byok .field-label-link:hover, .settings-section-byok .field-label-link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-section-byok .settings-byok-key-label, .settings-section-byok .settings-byok-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.settings-section-byok .field-label-error {
  margin-left: 8px;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}
.settings-byok-connection-test {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 32px;
}
.settings-byok-connection-test-status {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
.settings-byok-ready {
  color: var(--text-muted);
}
.settings-section-byok .settings-test-btn, .settings-section-byok .settings-test-btn.loading {
  border-color: var(--selected);
  background: var(--selected);
  color: #fff;
  box-shadow: 0 0 0 3px var(--selected-soft), 0 1px 2px var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px var(--selected-soft), 0 1px 2px color-mix(in srgb, var(--selected) 22%, transparent);
  }
}
.settings-section-byok .settings-test-btn:hover:not(:disabled), .settings-section-byok .settings-test-btn:focus-visible:not(:disabled) {
  border-color: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--selected) 82%, var(--text-strong));
  }
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 88%, var(--text-strong));
  }
  color: #fff;
}
.settings-section-byok .settings-test-btn:disabled {
  opacity: 0.72;
  color: #fff;
}
.settings-memory-summary-value {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.settings-memory-summary-value::before {
  content: '·';
  margin: 0 6px 0 2px;
  color: var(--text-muted);
}
.agent-card-config .field, .agent-model-row .field {
  gap: 4px;
}
.agent-card-config .field-label, .agent-model-row .field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.agent-card-config .field-label {
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.agent-model-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.agent-model-source-badge.live {
  border-color: var(--green-border);
  background: var(--green-bg);
  color: var(--green);
}
.agent-model-source-badge.fallback {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.agent-model-source-badge.fallback::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-muted);
}
.agent-card-config .hint, .agent-model-row .hint {
  margin: 0;
  font-size: 11.5px;
}
.agent-model-select-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
}
.model-select-searchable {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.model-select-searchable.is-open {
  z-index: 1400;
}
.model-select-searchable__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1401;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.model-select-searchable__search-row {
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.model-select-searchable__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.model-select-searchable__list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.model-select-searchable__option {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 30px 8px 10px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.model-select-searchable__option:hover {
  background: var(--bg-subtle);
}
.model-select-searchable__option.is-active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.model-select-searchable__option[data-selected='true']::after {
  content: '✓';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: currentColor;
}
.settings-byok-select-popover .model-select-searchable__option.is-active {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 10%, var(--bg-panel));
  }
  color: var(--text);
}
.settings-byok-select-popover .model-select-searchable__option.is-active:hover {
  background: var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--selected) 14%, var(--bg-panel));
  }
}
.settings-byok-select-popover .model-select-searchable__option[data-selected='true']::after {
  color: var(--selected);
}
.model-select-searchable__option-label {
  font-size: 12.5px;
  line-height: 1.35;
}
.model-select-searchable__option-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.model-select-searchable__empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.agent-card-config .hint {
  color: var(--text-muted);
  line-height: 1.35;
}
.agent-model-select-wrap {
  position: relative;
  overflow: visible;
}
.settings-model-select {
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.35;
}
.settings-section-byok .model-select-searchable > .settings-model-select {
  height: 34px;
  min-height: auto;
  padding: 7px 32px 7px 10px;
  line-height: 18px;
  background: var(--bg-panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2374716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 12px;
}
.settings-model-select--byok {
  min-width: min(420px, 100%);
}
.agent-model-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 28px;
  width: 100%;
}
.agent-model-select-wrap .model-select-searchable select {
  background: var(--bg-subtle) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374716b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 82%, var(--bg-panel)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374716b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  }
}
.agent-card-config .agent-model-select-wrap select {
  min-height: 36px;
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
  }
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 82%, var(--bg-panel));
  }
}
.agent-card-config .agent-model-select-wrap select:hover {
  border-color: var(--border-strong);
}
.agent-model-select-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.agent-cli-env {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.agent-cli-env-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.agent-cli-env-summary::-webkit-details-marker {
  display: none;
}
.agent-cli-env-summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--text-muted);
  transition: transform 0.15s var(--ease-out);
}
.agent-cli-env[open] > .agent-cli-env-summary::before {
  transform: rotate(90deg);
}
.agent-cli-env-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.agent-cli-env-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.agent-cli-env-body .hint {
  margin: 0;
  font-size: 11.5px;
}
.agent-cli-env-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.status-dot.active {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.agent-icon {
  flex-shrink: 0;
  color: var(--text);
}
.agent-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0;
}
.agent-icon-mono {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.activity {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}
.activity-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}
.activity-header .dot[data-active="true"] {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.activity-title {
  font-weight: 500;
}
.activity-stats {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 0;
}
.activity-item .badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  min-width: 56px;
  text-align: center;
}
.activity-item .badge-tool {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue);
}
.activity-item .badge-result {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
}
.activity-item .badge-error, .activity-item .badge-result.badge-error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.activity-item .badge-thinking {
  background: var(--purple-bg);
  border-color: var(--purple-border);
  color: var(--purple);
}
.activity-item .badge-status {
  background: var(--bg-panel);
}
.activity-item .badge-text {
  background: transparent;
  border-color: var(--border);
}
.activity-item .badge-usage {
  background: var(--bg-panel);
  color: var(--text-muted);
}
.activity-item .detail {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.activity-item .detail.muted {
  color: var(--text-muted);
}
.activity-item .thinking-text {
  font-style: italic;
  color: var(--text-muted);
}
.activity-waiting {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.entry-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  background: var(--bg);
}
.entry {
  display: grid;
  grid-template-columns: var(--entry-rail-width, 64px) 1fr;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.entry-side {
  border-right: 1px solid var(--border);
  background: transparent;
  display: flex;
  flex-direction: column;
}
.newproj {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: 24px;
}
.newproj-tabs-shell {
  position: relative;
  overflow: visible;
  padding: 0 24px;
  margin-bottom: -1px;
  z-index: 2;
  flex: 0 0 auto;
}
.newproj-tabs {
  display: flex;
  padding: 0;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.newproj-tabs::-webkit-scrollbar {
  display: none;
}
.newproj-tabs-shell::before, .newproj-tabs-shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.newproj-tabs-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.newproj-tabs-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}
.newproj-tabs-shell.can-left::before, .newproj-tabs-shell.can-right::after {
  opacity: 1;
}
.newproj-tabs-arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.newproj-tabs-arrow:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-tabs-arrow svg {
  display: block;
  flex: none;
}
.newproj-tabs-arrow.left {
  left: 6px;
}
.newproj-tabs-arrow.right {
  right: 6px;
}
.newproj-tabs-arrow.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}
.newproj-tab {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 7px 14px;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  position: relative;
  transition: none;
}
.newproj-tab:focus, .newproj-tab:active {
  background: transparent;
  border-color: transparent;
  outline: none;
  color: var(--text-muted);
}
.newproj-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--selected);
  border-radius: 8px 8px 0 0;
  color: var(--text);
}
.newproj-tab:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  outline: none;
  color: var(--text);
}
.newproj-tab.active, .newproj-tab.active:hover:not(:disabled), .newproj-tab.active:focus, .newproj-tab.active:focus-visible {
  color: var(--text);
  background: var(--bg-panel);
  border-color: var(--border);
  border-bottom-color: var(--bg-panel);
  z-index: 3;
}
.newproj-body {
  margin: 0 24px;
  padding: 16px 18px 12px;
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.newproj-title {
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 8px;
}
.newproj-title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.newproj-title-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.newproj-name {
  width: 100%;
  height: 30px;
  padding: 0 10px;
}
.newproj-working-dir-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.newproj-working-dir {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.newproj-working-dir.picked {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-working-dir span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newproj-working-dir-clear {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-muted);
}
.newproj-working-dir-clear:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-subtle);
}
.newproj-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-picker-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.newproj-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.newproj-media-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.newproj-media-field, .newproj-media-options .newproj-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newproj-model-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newproj-model-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newproj-provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.newproj-provider-badge {
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.newproj-provider-badge.configured {
  border: 1px solid color-mix(in srgb, #4169e1 24%, transparent);
  background: color-mix(in srgb, #4169e1 10%, transparent);
  color: #3155c9;
}
.newproj-provider-badge.integrated {
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 78%, var(--text-strong));
  }
}
.newproj-provider-badge.unsupported {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.newproj-model-grid, .newproj-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.newproj-option-grid.aspect-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.newproj-option-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}
.newproj-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.newproj-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-card.active {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  box-shadow: none;
}
.newproj-model-card {
  min-height: 74px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.newproj-model-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.newproj-model-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.newproj-option-card {
  min-height: 62px;
  min-width: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.newproj-option-card small {
  color: var(--text-muted);
  font-size: 11px;
}
.aspect-grid .newproj-option-card {
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px;
}
.aspect-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  line-height: 1.15;
  min-width: 0;
  max-width: 100%;
}
.aspect-copy strong {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.aspect-copy small {
  color: var(--text-muted);
  font-size: 11.5px;
}
.aspect-glyph {
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  }
}
.aspect-1-1 {
  width: 22px;
  height: 22px;
}
.aspect-16-9 {
  width: 32px;
  height: 18px;
}
.aspect-9-16 {
  width: 18px;
  height: 32px;
}
.aspect-4-3 {
  width: 28px;
  height: 21px;
}
.aspect-3-4 {
  width: 21px;
  height: 28px;
}
@media (max-width: 560px) {
  .newproj-model-grid, .newproj-option-grid, .newproj-option-grid.aspect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.newproj-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.skill-radio {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: flex-start;
  background: var(--bg-panel);
}
.skill-radio:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.skill-radio.active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.skill-radio input {
  width: auto;
  margin-top: 2px;
}
.skill-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.skill-radio-name {
  font-weight: 500;
  font-size: 13px;
}
.skill-radio-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.newproj-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}
.video-body, .audio-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-subtle);
  flex: 1;
  min-height: 0;
}
.video-body video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  background: #000;
}
.audio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 480px);
  padding: 28px 32px;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.audio-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  word-break: break-word;
}
.audio-card audio {
  width: 100%;
}
.newproj-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  margin-top: 2px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.newproj-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.newproj-create svg, .newproj-import svg {
  display: block;
  flex: 0 0 auto;
}
.newproj-open-folder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.newproj-footer {
  padding: 6px 24px 16px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  flex: 0 0 auto;
  margin-top: 0;
}
.fidelity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fidelity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms var(--ease-out);
}
.fidelity-card:hover {
  border-color: var(--border-strong);
}
.fidelity-card.active {
  border-color: var(--selected);
  box-shadow: 0 0 0 1px var(--selected), 0 1px 0 rgba(37, 99, 235, 0.04);
}
.fidelity-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
}
.fidelity-thumb-wireframe {
  background: #fbfaf6;
}
.fidelity-thumb-high-fidelity {
  background: var(--bg-panel);
}
.fidelity-card.active .fidelity-thumb {
  border-color: var(--selected-soft);
}
.fidelity-label {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.toggle-row:hover {
  border-color: var(--border-strong);
}
.toggle-row.on {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.toggle-row.disabled, .toggle-row:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  background: var(--bg-subtle);
}
.toggle-row.disabled:hover, .toggle-row:disabled:hover {
  border-color: var(--border);
}
.toggle-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.toggle-row-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.toggle-row-switch {
  flex: none;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background 160ms var(--ease-out);
}
.toggle-row-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 27, 26, 0.18);
  transition: transform 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.toggle-row.on .toggle-row-switch {
  background: var(--text);
}
.toggle-row.on .toggle-row-switch::after {
  transform: translateX(14px);
}
.compact-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compact-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background 120ms var(--ease-out);
}
.compact-toggle:hover {
  background: var(--bg-subtle);
}
.compact-toggle.disabled, .compact-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  background: transparent;
}
.compact-toggle.disabled:hover, .compact-toggle:disabled:hover {
  background: transparent;
}
.compact-toggle-label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-toggle-switch {
  flex: none;
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background 160ms var(--ease-out);
}
.compact-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 27, 26, 0.18);
  transition: transform 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.compact-toggle.on .compact-toggle-switch {
  background: var(--text);
}
.compact-toggle.on .compact-toggle-switch::after {
  transform: translateX(12px);
}
.template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-option {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.template-option:hover {
  border-color: var(--border-strong);
}
.template-option.active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.template-option-select {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.template-option-delete {
  flex: none;
  padding: 4px 10px;
  margin-right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 120ms var(--ease-out), color 120ms var(--ease-out);
}
.template-option:hover .template-option-delete {
  opacity: 1;
}
.template-option-delete:hover {
  color: var(--danger, #e53e3e);
}
.template-radio {
  flex: none;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  position: relative;
}
.template-radio.active {
  border-color: var(--accent);
  background: var(--bg-panel);
}
.template-radio.active::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.template-option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.template-option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.template-option-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.template-howto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.template-howto-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.template-howto-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.newproj-connectors {
  gap: 8px;
}
.newproj-connectors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.newproj-connectors-manage {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.newproj-connectors-manage:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-connectors-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.newproj-connectors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.newproj-connector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  max-width: 100%;
  min-width: 0;
}
.newproj-connector-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: #3bb273;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3bb273 22%, transparent);
  flex: none;
}
.newproj-connector-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.newproj-connector-account {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.newproj-connectors-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.newproj-connectors-empty:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-subtle));
  }
}
.newproj-connectors-empty:active {
  transform: translateY(1px);
}
.newproj-connectors-empty:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
.newproj-connectors-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.newproj-connectors-empty:hover .newproj-connectors-empty-icon {
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
}
.newproj-connectors-empty-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.newproj-connectors-empty-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.newproj-connectors-empty-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.newproj-connectors-empty-cta {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
}
.ds-picker {
  position: relative;
}
.ds-picker:has(.ds-picker-popover) {
  z-index: 31;
}
.ds-picker-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.newproj-section .ds-picker-trigger {
  min-height: 38px;
  padding: 2px 10px;
}
.ds-picker-trigger:hover {
  border-color: var(--border-strong);
}
.ds-picker-trigger.open {
  border-color: var(--border-strong);
  box-shadow: none;
}
.ds-picker-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ds-picker-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-extra-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
}
.ds-picker-sub {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 160ms var(--ease-out);
}
.ds-picker-trigger.empty .ds-picker-title {
  color: var(--text-muted);
  font-weight: 500;
}
.ds-avatar {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-avatar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.ds-avatar-cell {
  display: block;
}
.ds-avatar-stack {
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  background: var(--text-strong);
  color: #fff;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-panel);
}
.ds-avatar-none {
  background: var(--bg-subtle);
  color: var(--text-faint);
}
.ds-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ds-pop-in 140ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes ds-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ds-picker-search {
  flex: 1;
  padding: 6px 10px !important;
  font-size: 12.5px;
  background: var(--bg-panel);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.ds-picker-mode {
  flex: none;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ds-picker-mode-btn {
  padding: 3px 12px !important;
  font-size: 11px !important;
  font-weight: 500;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.ds-picker-mode-btn:hover:not(.active) {
  color: var(--text) !important;
}
.ds-picker-mode-btn.active {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xs) !important;
}
.ds-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.ds-picker-list-design-systems {
  min-height: 120px;
}
.ds-picker-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.ds-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.ds-picker-item:hover {
  background: var(--bg-subtle);
}
.ds-picker-item.active {
  border-color: var(--border-strong);
}
.ds-picker-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ds-picker-item-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-item-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.ds-picker-item-sub {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  color: transparent;
}
.ds-picker-mark.radio {
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  position: relative;
}
.ds-picker-mark.radio.active {
  border-color: var(--text);
}
.ds-picker-mark.radio.active::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
}
.ds-picker-mark.check {
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--bg-panel);
}
.ds-picker-mark.check.active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg-panel);
}
.ds-picker-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ds-picker-foot-text {
  flex: 1;
  min-width: 0;
}
.ds-picker-foot-text strong {
  color: var(--text);
  font-weight: 600;
}
.ds-picker-clear {
  flex: none;
  padding: 4px 10px !important;
  font-size: 11px !important;
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.ds-picker-clear:hover {
  border-color: var(--border-strong) !important;
}
.entry-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 24px 20px;
}
.entry-side-foot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.entry-side-foot .foot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  min-height: 24px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  color: var(--text-muted);
  align-self: flex-start;
  cursor: pointer;
  text-decoration: none;
}
.entry-side-foot-row .foot-pill {
  min-width: 0;
}
.entry-side-foot-row .foot-pill-follow {
  flex: 0 1 auto;
}
.entry-side-foot-social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.entry-side-foot-row .foot-pill-pet-label, .entry-side-foot-row .foot-pill-follow-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-side-foot .foot-pill:hover {
  background: var(--bg-panel);
  border-color: var(--border-strong);
  color: var(--text);
}
.entry-side-foot .foot-pill .ico {
  font-size: 12px;
  opacity: 0.7;
}
.entry-side-foot .foot-pill svg {
  width: 10px;
  height: 10px;
  opacity: 0.55;
  transition: opacity 120ms var(--ease-out);
}
.entry-side-foot .foot-pill:hover svg {
  opacity: 0.75;
}
.lang-menu-wrap {
  position: relative;
  align-self: flex-start;
}
.lang-menu-wrap .lang-pill {
  font-variant-numeric: tabular-nums;
}
.lang-menu-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 180px;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.lang-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lang-menu-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lang-menu-item:hover {
  background: var(--bg-subtle);
}
.lang-menu-item.active {
  background: var(--bg-subtle);
}
.lang-menu-item .lang-menu-code {
  color: var(--text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lang-menu-item .lang-menu-check {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}
.entry-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.entry-header-tabs-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.entry-tabs {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.entry-tabs::-webkit-scrollbar {
  display: none;
}
.entry-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: none;
}
.entry-tab:focus, .entry-tab:active {
  background: transparent;
  border-color: transparent;
  border-bottom-color: transparent;
  outline: none;
  color: var(--text-muted);
}
.entry-tab:focus-visible {
  outline: 2px solid var(--selected);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  color: var(--text);
}
.entry-tab:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  border-bottom-color: transparent;
  outline: none;
  color: var(--text);
}
.entry-tab.active, .entry-tab.active:hover:not(:disabled), .entry-tab.active:focus, .entry-tab.active:focus-visible {
  color: var(--text);
  border-bottom-color: var(--text);
}
.entry-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.entry-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 32px;
  background: var(--bg);
}
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tab-panel-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-panel);
}
.tab-panel-toolbar .toolbar-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.tab-panel-toolbar .toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.tab-panel-toolbar .toolbar-search {
  position: relative;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
}
@media (max-width: 720px) {
  .tab-panel-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .tab-panel-toolbar .toolbar-left {
    justify-content: flex-start;
  }
  .tab-panel-toolbar .toolbar-right {
    justify-content: space-between;
  }
  .tab-panel-toolbar .toolbar-search {
    max-width: none;
  }
}
.tab-panel-toolbar .toolbar-search input {
  padding-left: 30px;
  background: var(--bg-panel);
}
.tab-panel-toolbar .toolbar-search input[type='search']::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}
.tab-panel-toolbar .toolbar-search input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.tab-panel-toolbar.designs-toolbar {
  background: transparent;
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.tab-panel-toolbar .toolbar-search .search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 13px;
  pointer-events: none;
}
.tab-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.connector-inline-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #ff6b6b;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in oklab, #ff6b6b 45%, var(--line) 55%);
  }
  border-radius: var(--radius-lg);
  background: #ff6b6b;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #ff6b6b 10%, var(--panel) 90%);
  }
  color: #ff6b6b;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #ff6b6b 70%, var(--fg) 30%);
  }
  font-size: 13px;
  line-height: 1.45;
}
.connectors-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}
.connectors-heading p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.tab-panel-toolbar .toolbar-search.connectors-search {
  flex: 0 1 320px;
  width: min(320px, 100%);
}
.tab-panel-toolbar .toolbar-search.connectors-search input {
  padding-right: 32px;
}
.connectors-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 16px;
  text-align: center;
}
.connectors-empty-title {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  max-width: 480px;
  word-break: break-word;
}
.connectors-empty-body {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 480px;
}
.connectors-empty-action {
  margin-top: 8px;
}
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}
.connector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 16px 16px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms var(--ease-out), border-color 140ms var(--ease-out), box-shadow 180ms var(--ease-out), background 140ms var(--ease-out);
}
.connector-card:hover:not(.is-locked) {
  transform: translateY(-1px);
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  }
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.25), var(--shadow-xs);
}
.connector-card:focus-visible {
  outline: none;
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 48%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--text), 0 8px 24px -14px rgba(0, 0, 0, 0.25);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent), 0 8px 24px -14px rgba(0, 0, 0, 0.25);
  }
}
.connector-card.status-connected {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  }
  background: linear-gradient( 180deg, var(--green) 0%, var(--bg-panel) 60% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--green) 5%, var(--bg-panel)) 0%, var(--bg-panel) 60% );
  }
}
.connector-card.status-disabled {
  background: var(--bg-subtle);
}
.connector-card.status-error {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 35%, var(--border));
  }
}
.connector-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.connector-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.connector-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.connector-card-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connector-card-title-dot {
  flex: 0 0 auto;
  margin-top: -1px;
}
.connector-logo {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-xs);
  user-select: none;
}
.connector-logo.size-lg {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
}
.connector-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  z-index: 1;
}
.connector-logo.size-lg .connector-logo-img {
  padding: 6px;
}
.connector-logo.state-loaded .connector-logo-img {
  opacity: 1;
  transform: scale(1);
}
.connector-logo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: transparent;
  background: var(--bg-subtle);
  text-transform: uppercase;
  z-index: 0;
  transition: color 140ms ease-out, background-color 140ms ease-out, opacity 120ms ease-out;
}
.connector-logo.size-lg .connector-logo-fallback {
  font-size: 14px;
  letter-spacing: 0.04em;
}
.connector-logo.state-pending .connector-logo-fallback {
  background: linear-gradient( 90deg, var(--bg-subtle) 0%, var(--bg-subtle) 50%, var(--bg-subtle) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, var(--bg-subtle) 0%, color-mix(in srgb, var(--bg-subtle) 60%, var(--bg-panel)) 50%, var(--bg-subtle) 100% );
  }
  background-size: 200% 100%;
  animation: connector-logo-shimmer 1400ms ease-in-out infinite;
}
@keyframes connector-logo-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.connector-logo.state-loaded .connector-logo-fallback {
  visibility: hidden;
  opacity: 0;
}
.connector-logo.state-error .connector-logo-fallback, .connector-logo.is-fallback .connector-logo-fallback {
  color: var(--text-muted);
  background: var(--bg-subtle);
  animation: none;
}
.connector-logo.state-error[data-palette='0'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='0'] .connector-logo-fallback {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 6%, var(--bg-subtle));
  }
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--accent) 35%, var(--text-muted));
  }
}
.connector-logo.state-error[data-palette='1'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='1'] .connector-logo-fallback {
  background: #6b8afd;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #6b8afd 7%, var(--bg-subtle));
  }
  color: #6b8afd;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #6b8afd 38%, var(--text-muted));
  }
}
.connector-logo.state-error[data-palette='2'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='2'] .connector-logo-fallback {
  background: #2dbfa8;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #2dbfa8 7%, var(--bg-subtle));
  }
  color: #2dbfa8;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #2dbfa8 38%, var(--text-muted));
  }
}
.connector-logo.state-error[data-palette='3'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='3'] .connector-logo-fallback {
  background: #d18b3a;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #d18b3a 7%, var(--bg-subtle));
  }
  color: #d18b3a;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #d18b3a 40%, var(--text-muted));
  }
}
.connector-logo.state-error[data-palette='4'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='4'] .connector-logo-fallback {
  background: #c356b3;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #c356b3 6%, var(--bg-subtle));
  }
  color: #c356b3;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #c356b3 38%, var(--text-muted));
  }
}
.connector-logo.state-error[data-palette='5'] .connector-logo-fallback, .connector-logo.is-fallback[data-palette='5'] .connector-logo-fallback {
  background: #5d6b85;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #5d6b85 9%, var(--bg-subtle));
  }
  color: #5d6b85;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, #5d6b85 42%, var(--text-muted));
  }
}
.connector-logo.state-error, .connector-logo.is-fallback {
  border-color: var(--border-soft, var(--border));
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .connector-logo-img {
    transition: none;
    transform: none;
  }
  .connector-logo.state-pending .connector-logo-fallback {
    animation: none;
    background: var(--bg-subtle);
  }
}
.connectors-panel-embedded .connector-logo.size-sm {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
}
.connectors-panel-embedded .connector-logo.size-sm .connector-logo-img {
  padding: 3px;
}
.connectors-panel-embedded .connector-logo.size-sm .connector-logo-fallback {
  font-size: 10px;
}
.connector-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.connector-meta-item {
  white-space: nowrap;
}
.connector-meta-dot {
  color: var(--text-faint);
}
.connector-tools-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transform-origin: left center;
  will-change: transform, opacity;
}
.connector-tools-badge svg {
  opacity: 0.65;
}
.connector-tools-badge.is-ready {
  animation: connector-tools-badge-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.connector-tools-badge.is-ready svg {
  animation: connector-tools-badge-icon-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}
@keyframes connector-tools-badge-in {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.92);
    border-color: color-mix(in srgb, var(--border) 40%, transparent);
    background: color-mix(in srgb, var(--bg-subtle) 60%, transparent);
  }
  55% {
    opacity: 1;
    border-color: color-mix(in srgb, var(--accent, var(--text-muted)) 30%, var(--border));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: var(--border);
    background: var(--bg-subtle);
  }
}
@keyframes connector-tools-badge-icon-in {
  0% {
    opacity: 0;
    transform: rotate(-12deg) scale(0.8);
  }
  100% {
    opacity: 0.65;
    transform: rotate(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .connector-tools-badge.is-ready {
    animation: connector-tools-badge-fade 180ms ease-out both;
  }
  .connector-tools-badge.is-ready svg {
    animation: none;
  }
  @keyframes connector-tools-badge-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
.connector-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.connector-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  box-shadow: 0 0 0 2px currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
  }
}
.connector-status.status-connected, .connector-status-pill.status-connected {
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 12%, transparent);
  }
  color: var(--green);
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 32%, transparent);
  }
}
.connector-status.status-error, .connector-status-pill.status-error {
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 10%, transparent);
  }
  color: var(--red);
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
  }
}
.connector-status.status-disabled, .connector-status-pill.status-disabled {
  opacity: 0.7;
}
.connector-status.status-pending, .connector-status-pill.status-pending {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
.connector-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.connector-description {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.connector-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
button.connector-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: transform 120ms var(--ease-out), background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
button.connector-action.is-connect {
  min-width: 92px;
}
button.connector-action.is-disconnect {
  min-width: 106px;
  color: var(--text-muted);
}
button.connector-action.is-disconnect:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 35%, var(--border));
  }
}
button.connector-action.is-cancel-authorization {
  min-width: 74px;
  color: var(--text-muted);
}
button.connector-action.is-loading {
  cursor: wait;
}
.connector-authorization-hint {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.connector-panel-alerts {
  display: grid;
  gap: 6px;
}
.connector-panel-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red) 28%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 8%, var(--bg-panel));
  }
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.connector-panel-alert-copy {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.connector-panel-alert-copy strong {
  min-width: 0;
  max-width: min(160px, 34vw);
  overflow: hidden;
  color: var(--red);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connector-panel-alert-copy span {
  display: -webkit-box;
  max-height: calc(12px * 1.35 * 2);
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.connector-panel-alert-action {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--red);
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 22%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 7%, transparent);
  }
}
.connector-panel-alert-action:hover:not(:disabled) {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  }
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 12%, transparent);
  }
}
.connector-authorization-block {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.connector-authorization-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.connector-card > .connector-authorization-link {
  margin-top: -2px;
}
.connector-grid-wrap {
  position: relative;
}
.connector-grid-wrap.is-masked .connector-grid {
  filter: blur(2px) saturate(0.85);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  transition: filter 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.entry-tab-content:has(> .tab-panel.connectors-panel > .connector-grid-wrap.is-masked) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tab-panel.connectors-panel:has(> .connector-grid-wrap.is-masked) {
  flex: 1 1 auto;
  min-height: 0;
}
.connector-grid-wrap.is-masked {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.connector-grid-wrap.is-masked .connector-grid {
  max-height: 100%;
  overflow: hidden;
}
.connector-card.is-locked {
  cursor: not-allowed;
}
.tab-panel.connectors-panel.connectors-panel-embedded {
  gap: 14px;
  position: relative;
}
.connectors-toast-anchor {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  width: max-content;
}
.connectors-toast-anchor .od-toast {
  position: static;
  transform: none;
  pointer-events: auto;
}
.connectors-panel-embedded .tab-panel-toolbar {
  justify-content: flex-end;
  margin-top: -4px;
}
.connectors-panel-embedded .toolbar-left.connectors-heading {
  display: none;
}
.connectors-panel-embedded .toolbar-right {
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}
.connectors-panel-embedded .tab-panel-toolbar .toolbar-search.connectors-search {
  flex: 0 1 320px;
  width: min(320px, 100%);
  max-width: 320px;
  min-width: 180px;
}
.connectors-provider-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.connectors-provider-tabs:has(> :only-child) {
  display: none;
}
.connectors-provider-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.connectors-provider-tab:hover:not(.is-active) {
  color: var(--text);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 6%, transparent);
  }
}
.connectors-provider-tab.is-active {
  color: var(--text);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--text) 12%, var(--border));
  }
}
.connectors-provider-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--text), 0 1px 2px rgba(0, 0, 0, 0.06);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent), 0 1px 2px rgba(0, 0, 0, 0.06);
  }
}
.connectors-panel-embedded .connector-grid-wrap.is-masked {
  min-height: clamp(320px, 45vh, 420px);
  max-height: clamp(360px, 56vh, 560px);
  overflow: hidden;
  border-radius: var(--radius);
}
.connectors-panel-embedded .connector-grid-wrap.is-masked .connector-grid {
  max-height: 100%;
  overflow: hidden;
}
.connectors-panel-embedded .connector-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}
.connectors-panel-embedded .connector-card {
  min-height: 0;
  padding: 10px 10px 10px 12px;
  gap: 6px;
}
.connectors-panel-embedded .connector-card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.connectors-panel-embedded .connector-meta {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  font-size: 11px;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.connectors-panel-embedded .connector-meta-category {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.connectors-panel-embedded .connector-meta-tools {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  position: relative;
}
.connectors-panel-embedded .connector-meta-tools[aria-hidden="true"]::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 10%, transparent);
  }
  border-radius: var(--radius-pill);
}
.connectors-panel-embedded .connector-meta .connector-meta-dot {
  display: none;
}
.connectors-panel-embedded .connector-tools-badge {
  padding: 1px 6px;
  font-size: 10px;
  border-radius: var(--radius-pill);
}
.connectors-panel-embedded .connector-card-top {
  align-items: flex-start;
  gap: 8px;
}
.connectors-panel-embedded .connector-card-actions {
  margin-top: 1px;
}
.connectors-panel-embedded .connector-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.connectors-panel-embedded button.connector-action.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.connectors-panel-embedded button.connector-action.icon-only {
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 10%, transparent);
  }
}
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.icon-only:not(:disabled), .connectors-panel-embedded .connector-card:focus-visible button.connector-action.icon-only:not(:disabled) {
  color: var(--text);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
  }
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.icon-only:hover:not(:disabled) {
  color: var(--text);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 12%, transparent);
  }
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 24%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.icon-only:active:not(:disabled) {
  transform: scale(0.92);
}
.connectors-panel-embedded button.connector-action.icon-only:focus-visible {
  outline: none;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.icon-only:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .connectors-panel-embedded button.connector-action.icon-only {
    transition: background 80ms linear, color 80ms linear;
  }
  .connectors-panel-embedded button.connector-action.icon-only:active:not(:disabled) {
    transform: none;
  }
}
.connectors-panel-embedded button.connector-action.is-connect {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 76%, var(--text-muted));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.is-connect:not(:disabled), .connectors-panel-embedded .connector-card:focus-visible button.connector-action.is-connect:not(:disabled) {
  color: var(--accent-strong, var(--accent));
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.is-connect:hover:not(:disabled) {
  color: var(--accent-strong, var(--accent));
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  }
  box-shadow: 0 4px 14px -8px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.is-connect:active:not(:disabled) {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.is-disconnect {
  color: var(--text-muted);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 4%, transparent);
  }
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 10%, transparent);
  }
}
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.is-disconnect:not(:disabled), .connectors-panel-embedded .connector-card:focus-visible button.connector-action.is-disconnect:not(:disabled) {
  color: var(--text);
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
  }
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
  }
}
.connectors-panel-embedded button.connector-action.is-disconnect:hover:not(:disabled) {
  color: var(--red, var(--text));
  background: var(--red, var(--text));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, var(--text)) 14%, transparent);
  }
  border-color: var(--red, var(--text));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red, var(--text)) 42%, transparent);
  }
}
.connectors-panel-embedded .connector-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  flex: 0 0 auto;
}
.connectors-panel-embedded .connector-status-dot.status-connected {
  background: var(--green, #22c55e);
  box-shadow: 0 0 0 3px var(--green, #22c55e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #22c55e) 22%, transparent);
  }
}
.connectors-panel-embedded .connector-status-dot.status-error {
  background: var(--red, #ef4444);
}
.connectors-panel-embedded .connector-status-dot.status-disabled {
  background: var(--text-faint);
}
.connectors-panel-embedded .connector-card .connector-status-pill {
  font-size: 10px;
  padding: 1px 6px;
}
@media (max-width: 540px) {
  .connectors-provider-tabs {
    flex-shrink: 0;
  }
  .connectors-panel-embedded .tab-panel-toolbar .toolbar-search.connectors-search {
    min-width: 0;
  }
}
.connector-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at top, var(--bg-panel) 0%, var(--bg) 65%), var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--bg-panel) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 65%), color-mix(in srgb, var(--bg) 45%, transparent);
  }
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  animation: connector-gate-fade 220ms ease-out;
  pointer-events: auto;
}
@keyframes connector-gate-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.connector-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 28px 28px 24px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.18));
}
.connector-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.connector-gate-title {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.connector-gate-body {
  margin: 0;
  max-width: 340px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.connector-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, #111827 18%, transparent);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 24px 24px 12px;
  animation: connector-drawer-fade 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes connector-drawer-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.connector-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(456px, 92vw);
  height: clamp(480px, 68vh, 640px);
  max-height: calc(100vh - 36px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -34px rgba(15, 23, 42, 0.5);
  overflow: hidden;
  animation: connector-drawer-slide 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes connector-drawer-slide {
  from {
    transform: translateX(18px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.connector-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 36%, var(--bg-panel));
  }
}
.connector-drawer-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connector-drawer-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.connector-drawer-titles h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}
.connector-drawer-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.connector-drawer-tool-count-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 72%, var(--bg-subtle));
  }
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
}
.connector-drawer-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}
.connector-drawer-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.connector-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.connector-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.connector-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.connector-drawer-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.connector-drawer-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.connector-drawer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.connector-drawer-description {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.connector-drawer-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 2px 0 0;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
}
.connector-drawer-details > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
}
.connector-drawer-details > div + div {
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
  }
}
.connector-drawer-details dt {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}
.connector-drawer-details dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}
.connector-drawer-details-error dd {
  color: var(--red);
}
.connector-drawer-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  }
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.connector-drawer-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.connector-drawer-tool {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 74%, var(--bg-subtle));
  }
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  }
  border-radius: var(--radius);
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.connector-drawer-tool:hover {
  background: var(--bg-panel);
  border-color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text) 16%, var(--border));
  }
}
.connector-drawer-tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.connector-drawer-tool-title {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.connector-drawer-tool-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.connector-drawer-tool-badge.side-read {
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 10%, transparent);
  }
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
  }
  color: var(--green);
}
.connector-drawer-tool-badge.side-write {
  background: var(--amber, #d97706);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber, #d97706) 10%, transparent);
  }
  border-color: var(--amber, #d97706);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber, #d97706) 28%, transparent);
  }
  color: var(--amber, #d97706);
}
.connector-drawer-tool-badge.side-destructive {
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 10%, transparent);
  }
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
  }
  color: var(--red);
}
.connector-drawer-tool-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.42;
}
.connector-drawer-tool-name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  color: var(--text-faint);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 76%, transparent);
  }
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connector-drawer-load-more {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 14px;
}
.connector-drawer-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 28%, var(--bg-panel));
  }
}
.connector-drawer-foot button.connector-action {
  padding: 7px 18px;
  font-size: 13px;
}
@media (max-width: 520px) {
  .connector-drawer-backdrop {
    align-items: stretch;
    padding: 0;
  }
  .connector-drawer {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }
  .connector-drawer-head {
    padding: 16px 16px 14px;
  }
  .connector-drawer-body {
    padding: 16px 16px 20px;
  }
  .connector-drawer-foot {
    padding: 12px 16px 16px;
  }
  .connector-drawer-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .connector-drawer-details > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.connectors-panel-embedded:has(.connector-drawer-backdrop) {
  min-height: clamp(500px, 62vh, 700px);
  overflow: hidden;
  border-radius: var(--radius);
}
.connectors-panel-embedded .connector-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 6;
  align-items: stretch;
  padding: 12px;
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 24%, transparent);
  }
  border-radius: inherit;
}
.connectors-panel-embedded .connector-drawer {
  width: min(440px, 58%);
  height: 100%;
  max-height: none;
  border-radius: var(--radius);
  box-shadow: 0 20px 48px -28px rgba(15, 23, 42, 0.55);
}
@media (max-width: 720px) {
  .connectors-panel-embedded:has(.connector-drawer-backdrop) {
    min-height: clamp(520px, 70vh, 640px);
  }
  .connectors-panel-embedded .connector-drawer-backdrop {
    padding: 0;
  }
  .connectors-panel-embedded .connector-drawer {
    width: 100%;
    border-radius: var(--radius);
  }
}
.subtab-pill {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtab-pill::-webkit-scrollbar {
  display: none;
}
.subtab-pill button {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.subtab-pill button:hover:not(.active) {
  background: var(--bg-muted);
  border-color: transparent;
  color: var(--text);
}
.subtab-pill button.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.subtab-pill button:has(> svg:only-child) {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.design-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 168px;
}
.design-card.is-design-system-project {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 62%, var(--border));
  }
  box-shadow: 0 0 0 1px var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 42%, transparent);
  }
}
.design-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.design-card.is-design-system-project:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-sm);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 54%, transparent), var(--shadow-sm);
  }
}
.design-card-thumb {
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  color: var(--text-faint);
  font-size: 38px;
  position: relative;
}
.design-card-thumb::before {
  content: '';
  width: 56px;
  height: 44px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px 6px 6px 6px;
  position: relative;
  box-shadow: var(--shadow-xs);
}
.design-card-thumb::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-top: -52px;
  margin-left: -26px;
}
.design-card-meta-block {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.design-card-name {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong);
}
.design-card-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.design-card-meta-main {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-card-meta-time {
  flex: 0 0 auto;
  color: var(--text-muted);
}
.design-card-meta .ds {
  color: var(--accent);
}
.design-card-status {
  font-weight: 500;
}
.design-card-status-running {
  color: var(--accent);
}
.design-card-status-awaiting_input {
  color: var(--amber);
}
.design-card-status-queued, .design-card-status-not_started, .design-card-status-canceled {
  color: var(--text-muted);
}
.design-card-status-succeeded {
  color: var(--green);
}
.design-card-status-failed {
  color: var(--red);
}
.design-card-status-published {
  color: var(--green);
}
.design-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  background: var(--bg-panel);
  opacity: 0;
  transition: opacity 0.15s;
  border-color: var(--border);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.design-card:hover .design-card-close, .design-card:focus-within .design-card-close, .design-kanban-card:hover .design-card-close, .design-kanban-card:focus-within .design-card-close, .design-card-close:focus-visible {
  opacity: 1;
}
.design-card-close:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.design-card-menu-anchor {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
.design-card-more {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.design-card:hover .design-card-more, .design-card:focus-within .design-card-more, .design-card-more[aria-expanded="true"], .design-card-more:focus-visible {
  opacity: 1;
}
.design-card-more:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}
@media (hover: none) {
  .design-card .design-card-more {
    opacity: 1;
  }
}
.design-card-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 144px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.design-card-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.design-card-menu button:hover {
  background: var(--bg-subtle);
}
.design-card-menu button.danger {
  color: var(--red);
}
.design-card-menu button.danger:hover {
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 12%, transparent);
  }
}
.design-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-panel);
  z-index: 3;
}
.design-card-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.design-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
.design-card.select-mode {
  cursor: pointer;
}
.designs-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-strong);
  font-size: 12.5px;
  cursor: pointer;
}
.designs-select-toggle:hover {
  border-color: var(--border-strong);
}
.designs-select-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
}
.designs-select-count {
  font-size: 12.5px;
  color: var(--text-strong);
}
.designs-select-delete {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.designs-select-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.designs-select-cancel {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.designs-select-cancel:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}
@media (hover: none) {
  .design-card .design-card-close, .design-kanban-card .design-card-close {
    opacity: 1;
  }
}
.design-card.featured .design-card-thumb {
  background: linear-gradient(180deg, #e8efff 0%, #d8e3ff 100%);
}
.design-card.featured .design-card-thumb::before {
  background: var(--bg-panel);
  border-color: rgba(35, 72, 184, 0.18);
}
.design-card.featured .design-card-thumb::after {
  display: none;
}
.live-artifact-card {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
}
.live-artifact-card:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
  }
}
.project-thumb::before, .project-thumb::after {
  display: none;
}
.design-card-thumb .thumb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.design-card-thumb .thumb-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 250%;
  transform: scale(0.4);
  transform-origin: top left;
  border: 0;
  background: var(--bg-panel);
  pointer-events: none;
}
.project-thumb-image, .project-thumb-video, .project-thumb-html, .project-thumb-logo {
  background: var(--bg-subtle);
}
.project-thumb-logo .thumb-media {
  inset: 22%;
  width: 56%;
  height: 56%;
  object-fit: contain;
}
.project-thumb-image .project-thumb-glyph, .project-thumb-video .project-thumb-glyph, .project-thumb-html .project-thumb-glyph, .project-thumb-logo .project-thumb-glyph {
  display: none;
}
.project-thumb-glyph {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  color: var(--text-strong);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.live-artifact-thumb {
  background: radial-gradient(circle at 32% 28%, rgba(116, 92, 255, 0.18), transparent 36%), linear-gradient(135deg, rgba(66, 153, 225, 0.16), rgba(116, 92, 255, 0.12));
}
.live-artifact-thumb::before, .live-artifact-thumb::after {
  display: none;
}
.live-artifact-thumb-glyph {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  }
  box-shadow: var(--shadow-xs);
  font-size: 18px;
  line-height: 1;
}
.design-card-badges, .live-artifact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 18px;
}
.live-artifact-badge, .design-live-count {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
  background: var(--bg-panel);
}
.live-artifact-badge.live {
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  }
}
.live-artifact-badge.refreshing {
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.22);
  background: rgba(29, 78, 216, 0.08);
}
.live-artifact-badge.refresh-failed {
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.08);
}
.live-artifact-badge.archived {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.live-artifact-badges.compact {
  display: inline-flex;
  gap: 4px;
  min-height: 0;
  vertical-align: middle;
}
.live-artifact-badges.compact .live-artifact-badge {
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.25;
}
.design-live-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  }
  box-shadow: var(--shadow-xs);
}
.design-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
.tab-panel.design-kanban-view {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.design-kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
}
.design-kanban-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 12px;
  gap: 12px;
  min-height: 0;
  scroll-snap-align: start;
}
.design-kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  padding-left: 2px;
  min-width: 0;
}
.design-kanban-header > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.design-kanban-count {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.design-kanban-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
  flex: 1 1 auto;
  min-height: 0;
}
.design-kanban-empty {
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}
.design-kanban-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.design-kanban-card.is-design-system-project {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 62%, var(--border));
  }
  box-shadow: 0 0 0 1px var(--red), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 42%, transparent), var(--shadow-xs);
  }
}
.design-kanban-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.design-kanban-card.is-design-system-project:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-sm);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 54%, transparent), var(--shadow-sm);
  }
}
.design-kanban-card:active {
  transform: none;
}
.design-kanban-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
.design-kanban-card::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--text-muted);
}
.design-kanban-card.status-running::before {
  background: var(--accent);
}
.design-kanban-card.status-awaiting_input::before {
  background: var(--amber);
}
.design-kanban-card.status-succeeded::before {
  background: var(--green);
}
.design-kanban-card.status-failed::before {
  background: var(--red);
}
.design-kanban-card.status-not_started::before, .design-kanban-card.status-queued::before, .design-kanban-card.status-canceled::before {
  background: var(--text-muted);
}
.design-kanban-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.design-kanban-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-kanban-card-meta .ds {
  color: var(--text-strong);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .design-card, .design-kanban-card {
    transition: none;
  }
  .design-card:hover, .design-kanban-card:hover {
    transform: none;
  }
}
.examples-panel {
  gap: 32px;
}
.examples-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.example-card {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: center;
}
.example-preview {
  position: relative;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 320px;
  overflow: hidden;
}
.example-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  pointer-events: none;
}
.example-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}
.example-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.example-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.example-prompt {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: italic;
}
.example-cta {
  align-self: flex-start;
  padding: 8px 18px;
}
.example-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: white;
  flex-shrink: 0;
}
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ds-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ds-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ds-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ds-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.ds-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.ds-card-thumb iframe {
  width: 200%;
  height: 200%;
  border: none;
  display: block;
  background: white;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
}
.ds-card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-card-thumb-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}
.ds-card-thumb-swatches > span {
  display: block;
}
.ds-card-thumb-overlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(15, 15, 18, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}
.ds-card:hover .ds-card-thumb-overlay, .ds-card-thumb:focus-visible .ds-card-thumb-overlay {
  opacity: 1;
}
.ds-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1;
}
.ds-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.ds-card-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.ds-card-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.ds-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-card-swatches {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  height: 18px;
}
.ds-card-swatches > span {
  display: block;
  width: 14px;
  height: 100%;
}
.ds-card-swatches > span + span {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.ds-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ds-row:hover {
  border-color: var(--border-strong);
}
.ds-row.active {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.ds-row-body {
  flex: 1;
  min-width: 0;
}
.ds-row-title {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-row-default {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-xs);
}
.ds-row-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ds-row-swatches {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  height: 24px;
}
.ds-row-swatch {
  display: block;
  width: 16px;
  height: 100%;
}
.ds-row-swatch + .ds-row-swatch {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 900px) {
  .entry {
    grid-template-columns: 56px 1fr !important;
    height: 100%;
    min-height: 0;
  }
  .example-card {
    grid-template-columns: 1fr;
  }
  .example-preview {
    height: 240px;
  }
}
.workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  flex: 1;
  overflow: hidden;
}
.ws-tabs-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  height: 38px;
  position: sticky;
  top: 0;
  z-index: 4;
}
.ws-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.ws-tabs-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.ws-tabs-file-actions, .ws-tabs-project-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ws-tabs-actions .present-wrap {
  display: inline-flex;
  align-items: center;
}
.ws-tabs-file-actions:not(:empty) + .ws-tabs-project-actions {
  margin-inline-start: 2px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--border);
}
.app .ws-tabs-actions .chrome-action {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  align-items: center;
  box-shadow: none;
}
.app .ws-tabs-actions .chrome-action-icon {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
}
.app .ws-tabs-actions .handoff-trigger {
  height: 28px;
  min-height: 28px;
  align-items: center;
}
.app .ws-tabs-actions .avatar-agent-trigger {
  height: 28px;
  min-height: 28px;
  align-items: center;
}
.app .ws-tabs-actions .chrome-action > svg:first-child {
  transform: none;
}
.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 110px;
  min-width: 0;
  color: var(--text-muted);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.ws-tab.live-artifact-tab {
  max-width: 260px;
}
.ws-tab:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab.draggable {
  cursor: grab;
}
.ws-tab.dragging {
  cursor: grabbing;
  opacity: 0.55;
}
.ws-tab.drag-over-before {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab.drag-over-after {
  box-shadow: inset -2px 0 0 var(--accent);
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tab.active {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 500;
}
.ws-tab .tab-icon {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-muted);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-align: center;
}
.ws-tab .tab-icon svg, .ws-tab-close svg {
  display: block;
  flex: none;
}
.ws-tab.active .tab-icon {
  color: var(--text);
}
.ws-tab-text {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
}
.ws-tab-label {
  flex: 1 1 auto;
  min-width: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}
.ws-tab.has-meta {
  max-width: 320px;
}
.ws-tab.has-meta .ws-tab-label {
  flex: 0 1 auto;
  min-width: 42px;
  max-width: 150px;
}
.ws-tab-meta {
  flex: 1 1 auto;
  min-width: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 450;
}
.ws-tab-meta::before {
  content: "/";
  margin-right: 5px;
  color: var(--text-faint);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-faint) 72%, transparent);
  }
}
.ws-tab.live-artifact-tab .ws-tab-label {
  max-width: none;
}
.ws-tab.live-artifact-tab .ws-tab-text {
  flex-shrink: 100;
}
.ws-live-artifact-badges {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
.ws-live-artifact-badges .live-artifact-badge:not(.live):not(.refreshing):not(.refresh-failed):not(.archived) {
  display: none;
}
.ws-live-artifact-badges:has(.refreshing) .live-artifact-badge.live {
  display: none;
}
.ws-tab-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  border-radius: var(--radius-xs);
  margin-left: 2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-tab-close:hover {
  background: var(--border);
  color: var(--text);
}
.ws-tab.design-files-tab {
  font-weight: 500;
  color: var(--text);
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-panel);
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}
.ws-tab.design-files-tab.active {
  background: var(--bg-subtle);
}
.ws-add-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  z-index: 3;
  margin-left: 2px;
}
.ws-tabs-bar.is-overflowing + .ws-add-tab {
  padding-left: 4px;
  background: var(--bg-panel);
  box-shadow: -8px 0 10px -9px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: -8px 0 10px -9px color-mix(in srgb, var(--text) 30%, transparent);
  }
}
.ws-tab-add {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.ws-tab-add:hover, .ws-tab-add.active, .ws-tab-add[aria-expanded='true'] {
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tabs-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ws-focus-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}
.ws-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-focus-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.ws-focus-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tab-action {
  padding: 4px 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.ws-tab-action:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: transparent;
}
.ws-tab-action.share {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 500;
}
.ws-tab-action.share:hover:not(:disabled) {
  background: #000;
  border-color: #000;
}
.ws-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.ws-browser-panel {
  display: none;
  position: absolute;
  inset: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ws-browser-panel.active {
  display: flex;
}
.designs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.designs-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 24px 0;
  letter-spacing: -0.01em;
}
.designs-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 4px 12px -3px var(--accent), var(--shadow-sm);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-sm);
  }
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.designs-empty-cta:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px -4px var(--accent), var(--shadow-md);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-md);
  }
}
.designs-empty-cta:active {
  transform: scale(0.98);
}
.df-panel {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 380px);
  min-height: 0;
  background: var(--bg);
}
.df-panel.no-preview {
  grid-template-columns: minmax(0, 1fr);
}
.df-reloading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 70%, transparent);
  }
  backdrop-filter: blur(1px);
}
.df-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  container-type: inline-size;
}
.df-main:last-child {
  border-right: none;
}
.df-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.df-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px 6px;
  font-size: 14px;
  color: var(--text-muted);
  min-width: 0;
}
.df-breadcrumb-btn {
  all: unset;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 14px;
  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-breadcrumb-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.df-breadcrumb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.df-breadcrumb-segment {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.df-breadcrumb-sep {
  padding: 0 2px;
  color: var(--text-faint);
  font-size: 12px;
  user-select: none;
}
.df-breadcrumb-current {
  padding: 2px 4px;
  color: var(--text-strong);
  font-weight: 600;
  font-size: 14px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-topbar {
  margin: 0 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.df-topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.df-topbar-left .df-breadcrumbs {
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.df-topbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.df-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.df-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 6px 10px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.df-actions button:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.df-actions button.danger {
  color: var(--red);
}
.df-actions button.danger:hover:not(:disabled) {
  background: var(--red-bg);
  color: var(--red);
}
@container (max-width: 470px) {
  .df-actions button > span {
    display: none;
  }
  .df-actions button {
    padding: 6px;
  }
}
.df-upload-banner {
  margin: 0 20px 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--red-border, var(--border));
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
  font-size: 12px;
}
.df-upload-banner button {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.df-batch-bar {
  margin: 0 20px 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  animation: df-batch-enter 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes df-batch-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.df-batch-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-strong);
}
.df-batch-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.df-batch-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.df-batch-actions button:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.df-batch-actions button.danger {
  color: var(--red);
}
.df-batch-actions button.danger:hover:not(:disabled) {
  background: var(--red-bg);
  color: var(--red);
}
.df-batch-clear {
  color: var(--text-faint);
}
.df-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.df-section + .df-section {
  margin-top: 0;
}
.df-section-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
  padding: 8px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-soft);
}
.df-section-count {
  margin-left: 8px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0;
}
.df-file-row {
  transition: background 120ms var(--ease-out);
}
.df-file-row:hover {
  background: var(--blue-bg);
}
.df-file-row.active:not(.selected) {
  background: var(--blue-bg);
}
.df-file-row.active.selected {
  background: var(--blue);
}
.df-file-row.active:not(.selected) .df-row-name {
  color: var(--text-strong);
}
.df-file-row.selected {
  background: var(--blue);
}
.df-cell-check {
  text-align: center;
  vertical-align: middle;
}
.df-cell-icon {
  text-align: center;
  vertical-align: middle;
}
.df-cell-name {
  padding: 10px 12px 10px 0;
  vertical-align: middle;
  max-width: 0;
  min-width: 0;
}
.df-cell-openable {
  cursor: pointer;
}
.df-row-name-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.df-row-name-btn:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.df-row-name-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.df-row-openable {
  cursor: pointer;
}
.df-row {
  display: grid;
  grid-template-columns: 20px 30px 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.df-row-live-artifact {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.df-row-plugin-folder {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
  cursor: default;
}
.df-row-folder-main {
  appearance: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.df-plugin-install {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.df-plugin-install:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.df-plugin-install:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.df-plugin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.df-inline-notice {
  margin: 0 20px 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
}
.df-inline-notice a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.df-row:hover {
  background: var(--blue-bg);
}
.df-row.active:not(.selected) {
  background: var(--blue-bg);
  color: var(--text);
}
.df-row.active:not(.selected) .df-row-name {
  color: var(--text-strong);
}
.df-row.selected {
  background: var(--blue);
}
.df-row.selected .df-row-name {
  color: #fff;
}
.df-row.selected .df-row-sub, .df-row.selected .df-row-time {
  color: rgba(255, 255, 255, 0.82);
}
.df-row.selected .df-row-check {
  color: #fff;
}
.df-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.df-row:hover .df-row-check, .df-row-check:focus-visible, .df-row-check[aria-checked="true"], .df-panel.has-selection .df-row-check {
  opacity: 1;
}
.df-row-check:hover {
  background: var(--border);
  color: var(--text);
}
.df-row-check[aria-checked="true"] {
  color: var(--accent-strong);
}
.df-dir-row .df-row-check {
  cursor: default;
}
.df-row-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 14px;
  position: relative;
}
.df-row-icon[data-kind="folder"] {
  background: var(--bg-muted);
  color: var(--text-soft);
}
.df-row-icon[data-kind="html"] {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.df-row-icon[data-kind="image"] {
  background: var(--green-bg);
  color: var(--green);
}
.df-row-icon[data-kind="code"] {
  background: #fff7d8;
  color: #8c6700;
}
.df-row-icon[data-kind="text"] {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.df-row-icon[data-kind="sketch"] {
  background: var(--purple-bg);
  color: var(--purple);
}
.df-row-icon[data-kind="stylesheet"] {
  background: var(--blue-bg);
  color: var(--blue, var(--accent-strong));
}
.df-row-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.df-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.df-rename-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 3px 6px;
}
.df-row-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.35;
}
.df-row-sub > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-row-sub-kind, .df-row-sub-time {
  display: none;
}
.df-row-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.df-row-menu {
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-muted);
  font-size: 16px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.df-row:hover .df-row-menu {
  opacity: 1;
}
.df-row-menu:focus {
  opacity: 1;
}
.df-row-menu:hover {
  background: var(--border);
  color: var(--text);
}
.df-row-menu-placeholder {
  pointer-events: none;
  visibility: hidden;
}
.df-section-more {
  margin: 6px 20px 10px;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.df-section-more:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text);
}
.df-row-collapse {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0;
  width: 18px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.df-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 13px;
  min-height: 320px;
  background-color: var(--bg);
  background-image: linear-gradient(to right, var(--border-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.df-empty-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.02), 0 8px 24px -12px rgba(15, 15, 15, 0.08);
  max-width: min(420px, 92%);
  text-align: center;
}
.df-empty-title {
  font-size: 16px;
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.df-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.df-empty-cta:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.df-empty-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.df-footer-info {
  margin: auto 0 0;
  min-height: 100px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 3.5%, transparent);
  }
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.df-drop-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.df-drop-hint-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-faint);
}
.df-drop-hint-label svg {
  flex: 0 0 auto;
  opacity: 0.8;
}
.df-drop-hint-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.df-useful-info {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.df-useful-info-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
}
.df-useful-info-head > svg {
  flex: 0 0 auto;
  color: var(--accent);
}
.df-useful-info-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.df-useful-info-tip {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  min-height: 1.5em;
}
.df-tip-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}
.df-tip-link:hover {
  color: var(--accent);
}
.df-tip-caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: df-tip-caret-blink 1s steps(1) infinite;
}
@keyframes df-tip-caret-blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .df-tip-caret {
    animation: none;
    opacity: 0;
  }
}
.df-drop-overlay {
  position: absolute;
  inset: 8px;
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.df-drop-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 26px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(0, 0, 0, 0.14));
  color: var(--text);
  text-align: center;
}
.df-drop-overlay-card svg {
  color: var(--accent);
}
.df-drop-overlay-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 600;
}
.df-drop-overlay-card .desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 48ch;
}
.df-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-left: 1px solid var(--border);
  position: relative;
}
.df-preview-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 32px;
}
.df-preview-thumb {
  margin: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  aspect-ratio: 16/10;
  flex-shrink: 0;
  position: relative;
}
.df-preview-thumb.is-openable {
  cursor: pointer;
  transition: border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.df-preview-thumb.is-openable:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
}
.df-preview-thumb-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.df-preview-thumb-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.df-preview-thumb iframe, .df-preview-thumb img, .df-preview-thumb video {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  object-fit: cover;
  display: block;
}
.df-preview-thumb iframe {
  pointer-events: none;
}
.df-preview-thumb .sketch-preview, .df-preview-thumb .sketch-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
.df-preview-thumb audio {
  width: calc(100% - 24px);
  position: absolute;
  left: 12px;
  bottom: 12px;
}
.df-preview-meta {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: center;
  align-items: center;
}
.df-preview-open-cta {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin-bottom: 4px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.df-preview-open-cta:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
}
.df-preview-open-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.df-preview-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.df-preview-download:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.df-preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-word;
}
.df-preview-kind {
  font-size: 12px;
  color: var(--text-muted);
}
.df-preview-stats {
  font-size: 11.5px;
  color: var(--text-muted);
}
.df-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.df-preview-actions button, .df-preview-actions .ghost-link {
  font-size: 12px;
  min-height: 30px;
  padding: 0 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.df-preview-actions button:hover, .df-preview-actions .ghost-link:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.df-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: opacity 120ms var(--ease-out), background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .df-preview-close {
    opacity: 0;
    pointer-events: none;
  }
  .df-preview:hover .df-preview-close, .df-preview-close:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (any-pointer: coarse) {
  .df-preview-close {
    opacity: 1;
    pointer-events: auto;
  }
}
.df-preview-close:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.df-row-popover {
  position: fixed;
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}
.df-row-popover button {
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12.5px;
  text-align: left;
  border-radius: var(--radius-xs);
  color: var(--text);
}
.df-row-popover button:hover {
  background: var(--bg-subtle);
}
.df-row-popover button.danger {
  color: var(--red);
}
.df-row-popover button.danger:hover {
  background: var(--red-bg);
}
.design-browser {
  container: design-browser / inline-size;
  isolation: isolate;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.db-chrome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(180px, 740px) max-content;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  background: var(--bg-panel);
  box-shadow: 0 1px 0 var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 45%, transparent);
  }
  z-index: 500;
}
.db-nav, .db-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.db-actions {
  position: relative;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: visible;
}
.db-action-item {
  flex: 0 0 auto;
}
.db-tooltip-anchor {
  position: relative;
  display: inline-flex;
}
.db-tooltip-anchor:not(.od-tooltip)::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 300;
  max-width: 220px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  border-radius: var(--radius);
  background: var(--text-strong);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-strong) 92%, var(--text));
  }
  color: var(--bg-panel);
  box-shadow: 0 8px 24px rgba(28, 27, 26, 0.18);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 130ms cubic-bezier(0.23, 1, 0.32, 1), transform 130ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-tooltip-anchor:not(.od-tooltip):hover::after, .db-tooltip-anchor:not(.od-tooltip):focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.db-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 130ms cubic-bezier(0.23, 1, 0.32, 1), color 130ms cubic-bezier(0.23, 1, 0.32, 1), transform 130ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-icon-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, transparent);
  }
  color: var(--text);
}
.db-icon-btn.is-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.db-icon-btn:active:not(:disabled) {
  transform: scale(0.93);
}
.db-icon-btn:disabled {
  cursor: default;
  opacity: 0.34;
}
.db-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.db-icon-btn.is-spinning svg {
  animation: db-spin 900ms linear infinite;
}
@keyframes db-spin {
  to {
    transform: rotate(360deg);
  }
}
.db-viewport-switcher {
  position: relative;
  display: inline-flex;
}
.db-viewport-switcher .db-icon-btn {
  width: auto;
  min-width: 76px;
  gap: 4px;
  padding: 0 8px;
}
.db-viewport-label {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
}
.db-viewport-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 720;
  width: 156px;
  padding: 6px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  animation: db-pop 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-viewport-menu button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 6px 8px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
.db-viewport-menu button:hover, .db-viewport-menu button.active {
  background: var(--bg-subtle);
}
.db-address-form {
  position: relative;
  height: 38px;
  min-width: 0;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  overflow: visible;
  transition: background 150ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-address-form:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}
.db-address-form:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  }
}
.db-site-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  overflow: hidden;
}
.db-site-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
  object-fit: contain;
}
.db-address-site-icon {
  width: 17px;
  height: 17px;
}
.db-address-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.db-address-form input {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
}
.db-address-form input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
.db-address-form input::placeholder {
  color: var(--text-faint);
}
.db-address-display {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  pointer-events: none;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}
.db-address-url, .db-address-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-address-url {
  color: var(--text);
  flex: 0 1 auto;
}
.db-address-separator, .db-address-title {
  color: var(--text-faint);
}
.db-address-title {
  flex: 1 1 auto;
}
.db-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(520px, calc(100vh - 136px));
  padding: 7px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  z-index: 220;
  animation: db-pop 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes db-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.db-suggestions button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-suggestions button:hover {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 70%, transparent);
  }
}
.db-suggestion-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.db-suggestion-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-suggestion-copy span, .db-suggestion-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-suggestion-copy span {
  font-size: 12.5px;
  font-weight: 600;
}
.db-suggestion-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
.db-suggestion-type {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 68%, transparent);
  }
}
.db-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 252px;
  padding: 7px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  z-index: 720;
  animation: db-pop 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-menu button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1), color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-menu button svg {
  color: var(--text-soft);
  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-menu button:hover:not(:disabled) {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 70%, transparent);
  }
}
.db-menu button:hover:not(:disabled) svg {
  color: var(--text);
}
.db-menu button:disabled {
  color: var(--text-faint);
  cursor: default;
}
.db-menu button:disabled svg {
  color: var(--text-faint);
}
.db-menu-separator {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.db-browser-use-menu {
  width: min(430px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 112px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.db-browser-use-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px 7px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
}
.db-browser-use-head strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.25;
}
.db-browser-use-head small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.db-browser-use-search {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  }
  border-radius: var(--radius);
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }
  color: var(--text-soft);
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-browser-use-search:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.db-browser-use-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
}
.db-browser-use-search input:focus {
  border: 0;
  box-shadow: none;
}
.db-browser-use-search input::placeholder {
  color: var(--text-faint);
}
.db-browser-use-search span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  }
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
}
.db-browser-use-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.db-browser-use-section + .db-browser-use-section {
  margin-top: 8px;
}
.db-browser-use-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 7px;
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.db-menu button.db-browser-use-action {
  min-height: 46px;
  grid-template-columns: 20px minmax(0, 1fr) minmax(56px, 118px);
  align-items: center;
  gap: 9px;
}
.db-browser-use-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-browser-use-action-copy > span, .db-browser-use-action-copy small, .db-browser-use-action-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-browser-use-action-copy > span {
  font-size: 12.5px;
  font-weight: 650;
}
.db-browser-use-action-copy small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
}
.db-browser-use-action-input {
  justify-self: end;
  max-width: 118px;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, transparent);
  }
  color: var(--text-soft);
  font-size: 10.5px;
  line-height: 1.2;
}
.db-browser-use-empty {
  padding: 18px 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.db-status {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 240;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 32px);
  padding: 9px 17px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  border-radius: var(--radius-pill);
  background: var(--text-strong);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-strong) 92%, var(--text));
  }
  color: var(--bg-panel);
  box-shadow: 0 14px 34px rgba(28, 27, 26, 0.24);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: db-toast-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes db-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.db-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
  z-index: 0;
  display: flex;
  background: var(--bg);
  overflow: hidden;
}
.db-content-viewport-tablet, .db-content-viewport-mobile {
  background: linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(45deg, color-mix(in srgb, var(--border) 26%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--border) 26%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--border) 26%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--border) 26%, transparent) 75%);
  }
  background-color: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
  }
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.db-viewport-frame {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.db-viewport-tablet, .db-viewport-mobile {
  inset: 16px auto auto 50%;
  width: min(var(--db-viewport-width), calc(100% - 32px));
  height: min(var(--db-viewport-height), calc(100% - 32px));
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(28, 27, 26, 0.16);
  transform: translateX(-50%);
}
.db-viewport-mobile {
  border-radius: 24px;
}
.db-webview, .db-fallback, .db-fallback iframe {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.db-fallback {
  position: relative;
  display: flex;
  background: var(--bg);
}
.db-fallback iframe {
  background: #fff;
}
.db-comment-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.db-comment-marker {
  position: absolute;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 2px solid #1677ff;
  border-radius: var(--radius);
  background: rgba(22, 119, 255, 0.12);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
}
.db-comment-marker span {
  position: absolute;
  top: -13px;
  right: -13px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: #1677ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.32);
  font-size: 11px;
  font-weight: 700;
}
.db-comment-marker.active {
  border-color: #da6138;
  background: rgba(218, 97, 56, 0.14);
}
.db-comment-marker.active span {
  background: #da6138;
  box-shadow: 0 4px 12px rgba(218, 97, 56, 0.34);
}
.design-browser .comment-popover, .db-comment-popover {
  z-index: 240;
}
.db-comment-popover textarea {
  width: 100%;
}
.design-browser .db-inspect-panel {
  z-index: 360;
  isolation: isolate;
}
.db-inspect-text {
  min-height: 96px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.db-tool-hint {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 130;
  max-width: calc(100% - 32px);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 20, 0.88);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 12.5px;
  line-height: 1.3;
  pointer-events: none;
  transform: translateX(-50%);
}
@container design-browser (max-width: 920px) {
  .db-chrome {
    grid-template-columns: minmax(0, auto) minmax(150px, 560px) max-content;
    gap: 8px;
    padding-inline: 10px;
  }
  .db-action-save {
    display: none;
  }
  .db-address-title {
    display: none;
  }
}
@container design-browser (max-width: 760px) {
  .db-chrome {
    grid-template-columns: minmax(0, auto) minmax(120px, 420px) max-content;
    gap: 6px;
    padding-inline: 8px;
  }
  .db-viewport-switcher .db-icon-btn {
    min-width: 46px;
    padding-inline: 6px;
  }
  .db-viewport-label {
    display: none;
  }
  .db-action-mark, .db-action-edit {
    display: none;
  }
}
@container design-browser (max-width: 620px) {
  .db-chrome {
    grid-template-columns: minmax(0, auto) minmax(88px, 1fr) auto;
    gap: 4px;
  }
  .db-nav {
    gap: 0;
  }
  .db-nav .db-tooltip-anchor:nth-child(2) {
    display: none;
  }
  .db-actions {
    gap: 0;
  }
  .db-action-comment, .db-action-tune {
    display: none;
  }
  .db-icon-btn {
    width: 30px;
    height: 30px;
  }
  .db-address-form {
    height: 34px;
    padding-inline: 9px;
  }
}
.db-start {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(120% 78% at 50% -12%, var(--accent) 0%, transparent 56%), linear-gradient(180deg, var(--bg-panel) 0%, var(--bg) 28%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 78% at 50% -12%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 55%, var(--bg)) 0%, var(--bg) 28%);
  }
}
.db-start-hero {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: flex-end;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 30px 16px;
  animation: db-rise 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.db-start-hero-copy {
  min-width: 0;
}
@keyframes db-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.db-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.db-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.db-start h2 {
  max-width: 720px;
  margin: 11px 0 0;
  color: var(--text-strong);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.db-start-sub {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.db-reference-toolbar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 30px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 94%, var(--bg-panel));
  }
  box-shadow: 0 1px 0 var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-panel) 75%, transparent);
  }
  animation: db-rise 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.db-reference-chips {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.db-reference-chips::-webkit-scrollbar {
  display: none;
}
.db-reference-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.db-reference-chip.is-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.db-reference-chip-count {
  min-width: 18px;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 40%, transparent);
  }
}
.db-reference-chip.is-active .db-reference-chip-count {
  color: var(--accent-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.db-reference-search {
  flex: 0 0 226px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-search:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.db-reference-search-icon {
  display: inline-flex;
  color: var(--text-soft);
}
.db-reference-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.db-reference-search input:focus {
  border: 0;
  box-shadow: none;
}
.db-reference-search input::placeholder {
  color: var(--text-soft);
}
.db-reference-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.db-reference-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 2px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-search-clear:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.db-reference-board {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 30px 44px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.db-reference-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 30px;
  text-align: center;
}
.db-reference-empty-title {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.db-reference-empty-action {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-empty-action:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.db-reference-group {
  min-width: 0;
  animation: db-rise 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.db-reference-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.db-reference-group-count {
  flex: 0 0 auto;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}
.db-reference-group h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--border) 85%, transparent), transparent);
  }
}
.db-reference-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 12px;
}
.db-reference-card {
  min-width: 0;
  position: relative;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-card:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  box-shadow: 0 12px 28px rgba(28, 27, 26, 0.10), 0 2px 6px rgba(28, 27, 26, 0.05);
  transform: translateY(-3px);
}
.db-reference-card > button {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.db-reference-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  }
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: 6px;
  transition: border-color 180ms cubic-bezier(0.23, 1, 0.32, 1), background 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-card:hover .db-reference-icon {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 45%, var(--bg));
  }
}
.db-reference-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db-reference-title span, .db-reference-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-reference-title span {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.db-reference-title small {
  color: var(--text-soft);
  font-size: 11.5px;
}
.db-reference-card p {
  margin: 12px 0 14px;
  min-height: 36px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.db-reference-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-reference-actions button {
  flex: 1 1 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-actions button svg {
  color: var(--text-soft);
  transition: color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.db-reference-actions button:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.db-reference-actions button:hover:not(:disabled) svg {
  color: var(--text);
}
.db-reference-actions button:disabled {
  opacity: 0.46;
  cursor: default;
}
@media (max-width: 720px) {
  .db-chrome {
    grid-template-columns: minmax(0, 1fr);
  }
  .db-nav, .db-actions {
    justify-content: flex-start;
  }
  .db-start-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    padding: 18px 20px 12px;
  }
  .db-start h2 {
    font-size: 24px;
  }
  .db-reference-toolbar {
    padding: 10px 20px;
  }
  .db-reference-search {
    flex: 1 1 100%;
  }
  .db-reference-board {
    padding: 18px 20px 32px;
  }
}
.viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}
.workspace:has(.share-menu-popover, .present-menu), .viewer:has(.share-menu-popover, .present-menu) {
  position: relative;
  z-index: 220;
  overflow: visible;
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 12.5px;
  color: var(--text-muted);
  gap: 8px;
  min-height: 44px;
  flex-shrink: 0;
}
.viewer-toolbar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.viewer-toolbar-actions {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.viewer-toolbar-tool-divider {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--border);
}
.viewer-toolbar .icon-only, .viewer-toolbar-actions .icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.viewer-toolbar .icon-only:hover:not(:disabled), .viewer-toolbar-actions .icon-only:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-module-pointer {
  max-width: 460px;
  margin: 64px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--text-muted);
}
.viewer-module-pointer__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.viewer-module-pointer__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.viewer-module-pointer__cta {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.viewer-module-pointer__entries {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}
.viewer-module-pointer__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.viewer-module-pointer__link:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}
.viewer-module-pointer__link:disabled {
  cursor: default;
  opacity: 0.6;
}
.viewer-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.viewer-action:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-action.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.viewer-action.active:hover:not(:disabled) {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.viewer-action.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: white;
}
.viewer-action.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
.viewer-action.primary[data-running='true'] {
  opacity: 0.75;
  cursor: progress;
}
.viewer-action-icon {
  position: relative;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
}
.viewer-comment-count-trigger {
  position: relative;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 8px;
  gap: 5px;
}
.viewer-comment-count {
  min-width: 12px;
  color: currentColor;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: left;
}
.viewer-action-icon:not(.od-tooltip)[data-tooltip]::after, .viewer-comment-count-trigger:not(.od-tooltip)[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg-panel);
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.viewer-action-icon:not(.od-tooltip)[data-tooltip]:hover::after, .viewer-action-icon:not(.od-tooltip)[data-tooltip]:focus-visible::after, .viewer-comment-count-trigger:not(.od-tooltip)[data-tooltip]:hover::after, .viewer-comment-count-trigger:not(.od-tooltip)[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.artifact-tool-menu-anchor {
  position: relative;
  display: inline-flex;
}
.artifact-tool-menu-trigger[aria-expanded='true'] {
  background: var(--bg-subtle);
  color: var(--text);
}
.artifact-tool-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 59;
  min-width: 216px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.artifact-tool-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.artifact-tool-menu-item:hover {
  background: var(--bg-subtle);
}
.artifact-tool-menu-item.active {
  background: var(--bg-muted);
  color: var(--text);
}
.artifact-tool-menu-item .palette-tweaks-badge {
  margin-left: auto;
}
.viewer-preview-controls {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  transition: opacity 140ms var(--ease-out);
}
.viewer-preview-controls[data-active='false'] {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.viewer-zoom-level {
  min-width: 60px;
  justify-content: center;
}
.viewer-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.viewer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.viewer-toggle .switch {
  position: relative;
  width: 28px;
  height: 16px;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  transition: background 120ms var(--ease-out);
}
.viewer-toggle .switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: var(--bg-panel);
  border-radius: 50%;
  transition: transform 120ms var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.viewer-toggle.on .switch, .viewer-toggle.active .switch {
  background: var(--text);
  border-color: var(--text);
}
.viewer-toggle.on .switch::after, .viewer-toggle.active .switch::after {
  transform: translateX(12px);
}
.viewer-tabs {
  display: inline-flex;
  gap: 2px;
}
.viewer-mode-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 96px;
}
.viewer-mode-trigger {
  width: 100%;
  min-height: 26px;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border-color: var(--border);
  background-color: var(--bg-panel);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
}
.viewer-mode-trigger:hover:not(:disabled), .viewer-mode-trigger[aria-expanded='true'] {
  border-color: var(--border-strong);
  background-color: var(--bg-subtle);
}
.viewer-mode-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.viewer-mode-menu-item {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: left;
}
.viewer-mode-menu-item:hover, .viewer-mode-menu-item.active {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-mode-menu-item.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.viewer-tab {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.viewer-tab:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-tab.active {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 500;
}
.viewer-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.ghost-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ghost-link:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: var(--bg);
  overflow: auto;
}
.live-artifact-refresh-notice {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
}
.live-artifact-refresh-notice-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-artifact-refresh-notice strong {
  color: var(--text);
  font-weight: 600;
}
.live-artifact-refresh-notice .icon-only {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: 16px;
}
.live-artifact-refresh-notice .icon-only:hover {
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
.live-artifact-refresh-notice.running {
  background: var(--bg-subtle);
}
.live-artifact-refresh-notice.success {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
}
.live-artifact-refresh-notice.error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.live-artifact-refresh-notice.success strong, .live-artifact-refresh-notice.error strong {
  color: inherit;
}
.live-artifact-code-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.live-artifact-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.live-artifact-code-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live-artifact-code-copy strong {
  font-size: 13px;
  color: var(--text);
}
.live-artifact-code-copy span {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-artifact-code-tabs {
  flex-shrink: 0;
}
.live-artifact-code-panel pre.viewer-source {
  flex: 1 1 auto;
  min-height: 0;
}
.live-artifact-refresh-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 28px;
  color: var(--text);
  background: var(--bg);
  min-height: 100%;
}
.live-artifact-refresh-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.04));
}
.live-artifact-refresh-hero-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.live-artifact-refresh-hero-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.live-artifact-refresh-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.live-artifact-refresh-hero-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.live-artifact-refresh-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.live-artifact-refresh-value.muted {
  color: var(--text-muted);
  font-weight: 500;
}
.live-artifact-refresh-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.live-artifact-badge.refresh-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.live-artifact-badge.refresh-status.tone-neutral {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--bg-panel);
}
.live-artifact-badge.refresh-status.tone-running {
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.22);
  background: rgba(29, 78, 216, 0.08);
}
.live-artifact-badge.refresh-status.tone-success {
  color: var(--green);
  border-color: var(--green-border);
  background: var(--green-bg);
}
.live-artifact-badge.refresh-status.tone-warning {
  color: var(--amber);
  border-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber) 28%, transparent);
  }
  background: var(--amber-bg);
}
.live-artifact-badge.refresh-status.tone-error {
  color: var(--red);
  border-color: var(--red-border);
  background: var(--red-bg);
}
.live-artifact-refresh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.live-artifact-refresh-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  min-width: 0;
}
.live-artifact-refresh-fact .live-artifact-refresh-value {
  font-size: 13px;
  font-weight: 600;
}
.live-artifact-refresh-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-artifact-refresh-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.live-artifact-refresh-section-header h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-hint {
  font-size: 11.5px;
  color: var(--text-muted);
}
.live-artifact-refresh-empty {
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.live-artifact-refresh-empty em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}
.live-artifact-refresh-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-event {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  position: relative;
}
.live-artifact-refresh-event:last-child {
  border-bottom: none;
}
.live-artifact-refresh-event-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  margin-top: 5px;
  justify-self: center;
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--bg-panel);
}
.live-artifact-refresh-event.tone-running .live-artifact-refresh-event-dot {
  background: #1d4ed8;
  animation: liveArtifactRefreshPulse 1.5s ease-in-out infinite;
}
.live-artifact-refresh-event.tone-success .live-artifact-refresh-event-dot {
  background: var(--green);
}
.live-artifact-refresh-event.tone-error .live-artifact-refresh-event-dot {
  background: var(--red);
}
@keyframes liveArtifactRefreshPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.85);
  }
}
.live-artifact-refresh-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.live-artifact-refresh-event-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.live-artifact-refresh-event-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.live-artifact-refresh-event-detail {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.live-artifact-refresh-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  align-items: center;
}
.live-artifact-refresh-tile:last-child {
  border-bottom: none;
}
.live-artifact-refresh-tile-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live-artifact-refresh-tile-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-artifact-refresh-tile-meta code {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}
.live-artifact-refresh-tile-side {
  display: inline-flex;
  justify-self: end;
}
.live-artifact-refresh-tile-error {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  line-height: 1.5;
  word-break: break-word;
}
.live-artifact-refresh-tile-error.neutral {
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-color: var(--border);
}
.live-artifact-refresh-kv {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.live-artifact-refresh-kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.live-artifact-refresh-kv dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-kv dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.live-artifact-refresh-kv dd code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}
.live-artifact-refresh-raw {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-raw > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
}
.live-artifact-refresh-raw > summary::-webkit-details-marker {
  display: none;
}
.live-artifact-refresh-raw > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  transition: transform 120ms var(--ease-out);
  color: var(--text-faint);
}
.live-artifact-refresh-raw[open] > summary::before {
  transform: rotate(90deg);
}
.live-artifact-refresh-raw > summary:hover {
  background: var(--bg-subtle);
}
.live-artifact-refresh-raw-note {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.live-artifact-refresh-raw pre.viewer-source {
  border-top: 1px solid var(--border);
  min-height: 0;
  max-height: 320px;
  overflow: auto;
}
@media (max-width: 640px) {
  .live-artifact-refresh-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .live-artifact-refresh-hero-meta {
    align-items: flex-start;
  }
  .live-artifact-refresh-hero-metric {
    align-items: flex-start;
    text-align: left;
  }
}
.viewer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}
.artifact-preview-transport-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.artifact-preview-transport-stack iframe {
  position: absolute;
  inset: 0;
}
.artifact-preview-transport-stack iframe[data-od-active='false'] {
  visibility: hidden;
  pointer-events: none;
}
.viewer-viewport-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 124px;
}
.viewer-viewport-trigger {
  width: 100%;
  min-height: 26px;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border-color: var(--border);
  background-color: var(--bg-panel);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
}
.viewer-viewport-trigger > svg {
  flex: 0 0 auto;
}
.viewer-viewport-trigger > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-viewport-trigger:hover:not(:disabled), .viewer-viewport-trigger[aria-expanded='true'] {
  border-color: var(--border-strong);
  background-color: var(--bg-subtle);
}
.viewer-viewport-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  width: max-content;
  min-width: 144px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.viewer-viewport-menu-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}
.viewer-viewport-menu-item:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.viewer-viewport-menu-item.active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 82%, var(--bg-panel));
  }
  color: var(--accent-strong);
}
.viewer-viewport-menu-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.viewer-viewport-menu-label span {
  white-space: nowrap;
}
.live-artifact-preview-layer, .comment-preview-layer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.live-artifact-preview-layer.preview-viewport[data-active='false'] {
  display: none;
}
.comment-preview-layer {
  --comment-side-dock-width: 320px;
  --comment-side-dock-rail-width: 42px;
  --comment-side-dock-stacked-height: 220px;
  --comment-side-dock-stacked-rail-height: 48px;
}
.comment-preview-layer-with-side-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--comment-side-dock-width);
  gap: 12px;
  padding: 8px;
  overflow: hidden;
}
.preview-viewport:not(.preview-viewport-desktop).comment-preview-layer-with-side-dock {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  padding: 24px;
  overflow: hidden;
}
.preview-viewport:not(.preview-viewport-desktop).comment-preview-layer-side-dock-stacked {
  padding: 8px;
}
.comment-preview-layer-with-side-dock.comment-preview-layer-dock-collapsed {
  grid-template-columns: minmax(0, 1fr) var(--comment-side-dock-rail-width);
}
.comment-preview-layer-with-side-dock.comment-preview-layer-side-dock-stacked {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--comment-side-dock-stacked-height);
}
.comment-preview-layer-with-side-dock.comment-preview-layer-side-dock-stacked.comment-preview-layer-dock-collapsed {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--comment-side-dock-stacked-rail-height);
}
.comment-preview-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.comment-preview-layer-with-side-dock .comment-preview-canvas {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
}
.preview-viewport:not(.preview-viewport-desktop) {
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 24px;
  background: linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%), var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(45deg, color-mix(in srgb, var(--border) 28%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--border) 28%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--border) 28%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--border) 28%, transparent) 75%), var(--bg-subtle);
  }
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.preview-viewport:not(.preview-viewport-desktop) .preview-frame-clip, .preview-viewport:not(.preview-viewport-desktop):not(.comment-preview-layer-with-side-dock) .comment-preview-canvas, .preview-viewport:not(.preview-viewport-desktop).manual-edit-workspace .manual-edit-canvas {
  width: calc(var(--preview-viewport-width) * var(--preview-scale, 1));
  height: calc(var(--preview-viewport-height) * var(--preview-scale, 1));
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  background: var(--bg-panel);
}
.preview-viewport:not(.preview-viewport-desktop).comment-preview-layer-with-side-dock .comment-preview-canvas {
  width: auto;
  height: auto;
}
.preview-viewport:not(.preview-viewport-desktop) .preview-frame-clip > div, .preview-viewport:not(.preview-viewport-desktop) .comment-frame-clip > div, .preview-viewport:not(.preview-viewport-desktop) .comment-preview-canvas > .comment-frame-clip > div, .preview-viewport:not(.preview-viewport-desktop).manual-edit-workspace .manual-edit-canvas > div {
  will-change: transform;
}
.preview-viewport:not(.preview-viewport-desktop) .preview-frame-clip, .preview-viewport:not(.preview-viewport-desktop).manual-edit-workspace .manual-edit-canvas {
  position: relative;
  inset: auto;
}
.preview-viewport-mobile .preview-frame-clip, .preview-viewport-mobile:not(.comment-preview-layer-with-side-dock) .comment-preview-canvas, .preview-viewport-mobile.manual-edit-workspace .manual-edit-canvas {
  border-radius: 28px;
}
.preview-frame-clip, .comment-frame-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.preview-viewport:not(.preview-viewport-desktop).preview-draw-active {
  padding-bottom: 84px;
}
.comment-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.board-pod-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.board-pod-stroke polyline {
  fill: none;
  stroke: rgba(22, 119, 255, 0.95);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(22, 119, 255, 0.28));
}
.comment-target-overlay {
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--comment-overlay-border, #1677ff);
  background: var(--comment-overlay-bg, rgba(22, 119, 255, 0.24));
  box-shadow: 0 0 0 1px var(--comment-overlay-ring, rgba(22, 119, 255, 0.18));
}
.comment-target-overlay.selected {
  border-width: 2px;
}
.comment-target-overlay--member.is-hover-focused {
  outline: 2px solid rgb(22, 119, 255);
  outline-offset: 2px;
  z-index: 2;
}
.comment-target-overlay-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.comment-saved-marker {
  position: absolute;
  pointer-events: none;
}
.comment-saved-outline {
  display: none;
}
.comment-saved-pin, .comment-active-pin {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 10px;
  background: #d96a46;
  color: white;
  font-size: 18px;
  font-weight: 800;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(33, 24, 18, 0.22);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.comment-saved-pin:hover, .comment-active-pin:hover {
  background: #c95e3e;
  transform: translate(-50%, calc(-50% - 1px));
}
.comment-active-pin {
  pointer-events: none;
}
.comment-popover {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 40;
  width: min(320px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
}
.comment-popover-section {
  min-width: 0;
}
.comment-popover-section + .comment-popover-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.comment-popover-section-params {
  display: grid;
  gap: 8px;
}
.annotation-style-summary {
  display: grid;
  gap: 8px;
  min-width: 220px;
}
.annotation-style-row {
  display: grid;
  grid-template-columns: minmax(52px, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  font-size: 13px;
  line-height: 1.35;
}
.annotation-style-row span {
  color: var(--text-muted);
  font-weight: 500;
}
.annotation-style-row strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annotation-style-row strong i {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.comment-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.comment-popover-head div {
  display: grid;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.comment-popover-head strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-popover-head span {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-popover-head button.ghost {
  flex: 0 0 auto;
  white-space: nowrap;
}
.board-pod-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.board-pod-summary strong {
  font-size: 12px;
}
.board-pod-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
}
.board-pod-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
}
.board-pod-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.board-pod-chip:hover .board-pod-chip-remove, .board-pod-chip-remove:focus-visible {
  opacity: 1;
}
.board-pod-chip-remove:hover, .board-pod-chip-remove:focus-visible {
  color: var(--text-default, var(--text-strong));
}
.board-note-list {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.board-note-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 12px;
}
.board-note-item span {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.comment-popover textarea {
  height: 112px;
  max-height: 112px;
  overflow-y: auto;
  resize: none;
}
.comment-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.comment-popover-actions > * {
  max-width: 100%;
}
.comment-popover-actions-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.comment-popover-actions-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.comment-popover-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.comment-popover-image {
  position: relative;
  flex: 0 0 auto;
}
.comment-popover-image-thumb {
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
  cursor: zoom-in;
}
.comment-popover-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comment-popover-image-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-panel, #fff);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.comment-popover-image-remove:hover {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.comment-popover-delete:hover {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.comment-side-dock {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: var(--comment-side-dock-width);
  height: 100%;
  display: flex;
}
.comment-side-dock.collapsed {
  width: var(--comment-side-dock-rail-width);
}
.comment-preview-layer-side-dock-stacked .comment-side-dock {
  width: 100%;
  height: var(--comment-side-dock-stacked-height);
}
.comment-preview-layer-side-dock-stacked .comment-side-dock.collapsed {
  width: 100%;
  height: var(--comment-side-dock-stacked-rail-height);
}
.comment-preview-layer-side-dock-stacked .comment-side-dock.collapsed .comment-side-rail {
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  padding: 0 12px;
  gap: 12px;
}
.comment-preview-layer-side-dock-stacked .comment-side-dock.collapsed .comment-side-rail span {
  writing-mode: horizontal-tb;
}
.comment-side-panel {
  --comment-accent: #ff5a3c;
  --comment-accent-strong: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --comment-accent-strong: color-mix(in srgb, var(--comment-accent) 78%, var(--text));
  }
  --comment-accent-surface: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --comment-accent-surface: color-mix(in srgb, var(--comment-accent) 10%, var(--bg-panel));
  }
  --comment-accent-surface-strong: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --comment-accent-surface-strong: color-mix(in srgb, var(--comment-accent) 18%, var(--bg-panel));
  }
  --comment-accent-border: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --comment-accent-border: color-mix(in srgb, var(--comment-accent) 64%, var(--border));
  }
  position: relative;
  width: 320px;
  height: 100%;
  max-width: 100%;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comment-preview-layer-side-dock-stacked .comment-side-panel {
  width: 100%;
}
.comment-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel, #fff);
}
.comment-side-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.comment-side-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-side-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.comment-side-select-all {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.comment-side-select-all:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.comment-side-select-all:disabled {
  cursor: default;
  opacity: 0.45;
}
.comment-side-collapse {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.comment-side-collapse:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.comment-side-rail {
  position: relative;
  width: 42px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel, #fff);
  color: var(--text-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.comment-side-rail:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.comment-side-rail span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.comment-side-rail strong {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: #ff5a3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.comment-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment-side-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}
.comment-side-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 12px 10px 8px;
  background: transparent;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comment-side-item.selected {
  background: var(--comment-accent-surface);
  border-color: var(--comment-accent-border);
}
.comment-side-item.active {
  background: var(--comment-accent-surface-strong);
  border-color: var(--comment-accent-border);
  box-shadow: inset 3px 0 0 var(--comment-accent);
}
.comment-side-item.dragging {
  opacity: 0.45;
}
.comment-side-item-drop-before::before, .comment-side-item-drop-after::after {
  content: '';
  position: absolute;
  left: 32px;
  right: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--selected);
  box-shadow: 0 0 0 2px var(--selected-soft);
}
.comment-side-item-drop-before::before {
  top: -2px;
}
.comment-side-item-drop-after::after {
  bottom: -2px;
}
.comment-side-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-side-drag-handle {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: grab;
}
.comment-side-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}
.comment-side-drag-handle:disabled {
  cursor: default;
  opacity: 0.35;
}
.comment-side-drag-handle:hover:not(:disabled), .comment-side-drag-handle:focus-visible {
  border-color: var(--border);
  background: var(--bg-panel);
  color: var(--text);
}
.comment-side-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.comment-side-author strong {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-side-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.comment-side-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.comment-side-check {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  flex-shrink: 0;
}
.comment-side-check.checked {
  background: var(--comment-accent);
  border-color: var(--comment-accent);
}
.comment-side-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.comment-side-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.comment-side-attachment {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
}
.comment-side-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comment-side-selectbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--comment-accent-surface);
}
.comment-side-selectcount {
  flex: 1;
  font-size: 12px;
  color: var(--comment-accent-strong);
}
.comment-side-selectbar .ghost {
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 6px;
}
.comment-side-selectbar .ghost:hover {
  color: var(--text);
  text-decoration: underline;
}
.comment-side-selectbar .primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--comment-accent);
  color: #fff;
  border: 1px solid var(--comment-accent);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.comment-side-selectbar .primary:disabled {
  background: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--comment-accent) 45%, var(--bg-panel));
  }
  border-color: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--comment-accent) 45%, var(--border));
  }
  color: #fff;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #fff 68%, var(--text-muted));
  }
  cursor: not-allowed;
}
.comment-side-selectbar .primary:hover:not(:disabled) {
  background: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--comment-accent) 88%, #000);
  }
  border-color: var(--comment-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--comment-accent) 88%, #000);
  }
}
.comment-side-new-comment {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg-panel, #fff);
}
.comment-side-new-comment .comment-side-new-comment-shell {
  padding: 8px 10px 6px;
  gap: 6px;
}
.comment-side-new-comment textarea {
  min-height: 88px;
  max-height: 160px;
}
.comment-side-new-comment .composer-row {
  padding-top: 4px;
}
.comment-side-new-comment .composer-send {
  min-width: 0;
  max-width: 170px;
}
.comment-side-new-comment .composer-send.is-sending:disabled {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  opacity: 1;
}
.comment-side-new-comment .composer-send span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-toast-anchor {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: auto;
}
.screenshot-toast-anchor {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  pointer-events: auto;
}
.screenshot-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(87, 149, 206, 0.5);
  border-radius: 16px;
  background: #0d3858;
  color: #fff;
  box-shadow: 0 12px 32px rgba(6, 22, 36, 0.28);
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}
.screenshot-toast > i {
  color: #fff;
  flex: 0 0 auto;
}
.screenshot-toast button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
.screenshot-toast button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.inspect-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: min(296px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
}
.inspect-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.inspect-panel-head > button {
  flex-shrink: 0;
}
.inspect-panel-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.inspect-panel-title strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspect-panel-title code {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspect-ancestor-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  color: var(--text);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  font-size: 11px;
  line-height: 1.4;
}
.inspect-ancestor-notice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--accent);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  }
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.inspect-ancestor-notice-text {
  min-width: 0;
}
.inspect-ancestor-notice-text strong {
  font-weight: 600;
}
.inspect-ancestor-notice-text code {
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }
  font-family: var(--font-mono);
  font-size: 10px;
}
button.ghost.mcp-copy-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
button.ghost.mcp-copy-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.inspect-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspect-section-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inspect-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
}
.inspect-row > label {
  color: var(--text-muted);
  font-size: 11px;
}
.inspect-row input[type='color'] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
}
.inspect-row input[type='text'], .inspect-row select {
  min-width: 0;
  padding: 3px 26px 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background-color: var(--bg);
  font-size: 11px;
  font-family: inherit;
}
.inspect-row input[type='text'] {
  padding-right: 6px;
}
.inspect-row input[type='range'] {
  width: 100%;
}
.inspect-row-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 11px;
  min-width: 42px;
  text-align: right;
}
.inspect-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.inspect-panel-error {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--red-border);
  border-radius: var(--radius-xs);
  background: var(--red-bg);
  color: var(--red);
  font-size: 11px;
}
.inspect-empty-hint-container {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.inspect-empty-hint-container button, .inspect-empty-hint-container .close-button {
  pointer-events: auto;
}
.inspect-empty-hint code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg);
  font-size: 11px;
}
.comments-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comments-section h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comments-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: 12px;
}
.comment-card {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.comment-card.attached {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
}
.comment-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.comment-card-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.comment-card p {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.comment-card-action {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
}
.comment-card-action:hover {
  border-color: var(--accent-soft);
  color: var(--accent-strong);
}
.comment-card-action.danger {
  color: var(--red);
}
.comment-card-action.danger:hover {
  border-color: var(--red-border);
  background: var(--red-bg);
}
.comment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--text-faint);
  font-size: 11px;
}
.comment-card-meta span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-card-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 4px;
  color: var(--text-faint);
}
.comments-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}
.comments-footer .primary {
  padding: 6px 12px;
  font-size: 12px;
}
.comment-history-attachments {
  gap: 6px;
}
.comment-history-attachments .user-attachment.staged-comment {
  max-height: none;
  overflow: visible;
  align-items: flex-start;
}
.viewer-source {
  margin: 0;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--bg-panel);
  min-height: 100%;
}
.code-viewer {
  background: var(--bg-panel);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  min-height: 100%;
}
.code-viewer .gutter {
  background: var(--bg);
  color: var(--text-faint);
  text-align: right;
  padding: 16px 12px 16px 16px;
  user-select: none;
  border-right: 1px solid var(--border-soft);
  white-space: pre;
  font-variant-numeric: tabular-nums;
}
.code-viewer .lines {
  padding: 16px 16px 16px 18px;
  white-space: pre;
  overflow-x: auto;
  color: var(--text);
}
.viewer-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.viewer-empty.viewer-empty-dismissible {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}
.document-preview {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 40px 56px;
  color: var(--text);
}
.document-preview h2 {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.25;
}
.document-preview section {
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  margin-top: 18px;
}
.document-preview h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.document-preview p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.markdown-rendered {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  color: var(--text);
  line-height: 1.65;
  white-space: normal;
}
.markdown-status {
  margin: 12px auto 0;
  max-width: 900px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
}
.markdown-status-error {
  border-color: var(--danger, #d04b4b);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--danger, #d04b4b) 45%, var(--border-soft));
  }
  color: var(--danger, #d04b4b);
}
.markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3, .markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6 {
  margin: 20px 0 10px;
  line-height: 1.25;
}
.markdown-rendered p {
  margin: 10px 0;
}
.markdown-rendered ul, .markdown-rendered ol {
  margin: 10px 0;
  padding-left: 24px;
}
.markdown-rendered blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-panel);
}
.markdown-code-block {
  position: relative;
}
.markdown-code-copy {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-fill-secondary);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.markdown-code-block:hover .markdown-code-copy, .markdown-code-block:focus-within .markdown-code-copy {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .markdown-code-copy {
    opacity: 1;
    transform: translateY(0);
  }
}
.markdown-code-copy:hover, .markdown-code-copy:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-elevated, var(--bg));
}
.markdown-code-toast {
  position: absolute;
  top: 18px;
  right: 82px;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 18%, var(--bg-panel));
  }
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  box-shadow: 0 10px 26px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 18%, transparent);
  }
}
.markdown-rendered pre {
  margin: 12px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 40px 12px 12px;
  overflow: auto;
}
.markdown-rendered code {
  font-family: var(--mono);
  font-size: 12px;
}
.markdown-rendered a {
  color: var(--accent);
}
.image-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.image-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sketch-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.sketch-preview svg {
  width: 100%;
  height: 100%;
  display: block;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sketch-preview.loading {
  background: radial-gradient(circle at 8px 8px, #d7d4ce 1px, transparent 1px), #f7f5f1;
  background-size: 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sketch-preview-empty-mark path {
  stroke: #bfbcb6;
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}
.sketch-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.sketch-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-wrap: wrap;
}
.sketch-tool {
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  min-width: 32px;
}
.sketch-tool:hover {
  background: var(--bg-subtle);
}
.sketch-tool.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.sketch-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}
.sketch-color {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sketch-size {
  width: 80px;
  background: transparent;
  border: none;
}
.sketch-spacer {
  flex: 1;
}
.sketch-canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg);
}
.sketch-canvas-wrap canvas {
  display: block;
  cursor: crosshair;
}
.chat-empty-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 8px;
  min-height: 100%;
}
.chat-empty {
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 44ch;
}
.chat-empty-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 15px;
}
.chat-empty-hint {
  line-height: 1.6;
}
.chat-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.chat-example {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  background: var(--bg-fill-tertiary);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  overflow: hidden;
  transition: background 160ms var(--ease-out);
  opacity: 0;
  animation: chat-example-in 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chat-example::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.chat-example:hover {
  background: var(--bg-fill-secondary);
}
.chat-example:hover::before {
  opacity: 0;
}
.chat-example:active {
  transform: translateY(0);
}
.chat-example:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-example-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-fill-secondary);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
}
.chat-example-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.chat-example-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-example-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13.5px;
}
.chat-example-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-fill-tertiary);
  border: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
  white-space: nowrap;
}
.chat-example-prompt {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-example-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-soft);
  font-size: 13px;
  transition: color 160ms var(--ease-out);
}
.chat-example:hover .chat-example-cta {
  background: var(--accent);
  color: #fff;
  transform: translateX(2px);
}
.chat-connect-repo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  padding: 14px 16px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  animation: chat-example-in 380ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}
.chat-connect-repo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
}
.chat-connect-repo-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.chat-connect-repo-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13.5px;
}
.chat-connect-repo-text {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.chat-connect-repo button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
@keyframes chat-example-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.assistant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.assistant-header .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}
.assistant-header .dot[data-active="true"] {
  background: var(--green);
  animation: pulse 1.2s ease-in-out infinite;
}
.assistant-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11px;
}
.assistant-stats {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.assistant-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.prose-block {
  line-height: var(--prose-line-height, 1.75);
  color: var(--text);
  font-size: var(--prose-font-size, 15px);
  letter-spacing: -0.01em;
}
.prose-block[data-stream-cursor="true"] > *:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--purple);
  border-radius: 1px;
  animation: stream-caret-blink 1s steps(2, start) infinite;
}
@keyframes stream-caret-blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prose-block[data-stream-cursor="true"] > *:last-child::after {
    animation: none;
    opacity: 1;
  }
}
.prose-block .md-p {
  margin: 0;
}
.prose-block .md-p + .md-p {
  margin-top: 14px;
}
.prose-block .md-h {
  margin: 24px 0 10px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--text-strong, var(--text));
  letter-spacing: -0.02em;
}
.prose-block .md-h:first-child {
  margin-top: 2px;
}
.prose-block .md-h1 {
  font-size: 24px;
}
.prose-block .md-h2 {
  font-size: 19px;
}
.prose-block .md-h3 {
  font-size: 16px;
}
.prose-block .md-h4 {
  font-size: 14.5px;
  text-transform: none;
}
.prose-block .md-ul, .prose-block .md-ol {
  margin: 12px 0;
  padding-left: 24px;
}
.prose-block .md-ul li, .prose-block .md-ol li {
  margin: 6px 0;
  line-height: 1.65;
}
.prose-block .md-ul li::marker {
  color: var(--text-faint);
}
.prose-block .md-ol li::marker {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.prose-block .md-task-list {
  list-style: none;
  padding-left: 4px;
}
.prose-block .md-task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.prose-block .md-task-item::marker {
  content: none;
}
.prose-block .md-task-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-soft);
  background: var(--bg-panel);
  color: #fff;
}
.prose-block .md-task-item[data-checked="true"] .md-task-check {
  background: var(--green);
  border-color: var(--green);
}
.prose-block .md-task-item[data-checked="true"] > span:last-child {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.prose-block .md-quote {
  margin: 14px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--border-soft);
  color: var(--text-muted);
}
.prose-block .md-inline-code {
  background: var(--bg-fill-tertiary);
  border: none;
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--text);
  font-weight: 450;
}
.prose-block .md-code-block {
  position: relative;
  margin: 16px 0;
  border: none;
  border-radius: var(--radius);
  background: var(--bg-fill-tertiary);
  overflow: hidden;
  box-shadow: none;
}
.prose-block .md-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px 5px 14px;
  border-bottom: 1px solid var(--bg-fill-secondary);
  background: transparent;
}
.prose-block .md-code-lang {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.prose-block .md-code-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.prose-block .md-code-action {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.prose-block .md-code-action-icon {
  padding: 4px;
}
.prose-block .md-code-action:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.prose-block .md-code-body {
  position: relative;
}
.prose-block .md-code-block[data-collapsed="true"] .md-code-body {
  max-height: 7em;
  overflow: hidden;
}
.prose-block .md-code-block[data-collapsed="true"] .md-code-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3.2em;
  background: linear-gradient(to bottom, transparent, var(--bg-fill-tertiary));
  pointer-events: none;
}
.prose-block .md-color-token {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  vertical-align: -0.08em;
  white-space: nowrap;
}
.prose-block .md-color-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .prose-block .md-color-swatch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.prose-block .md-code {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 18px;
  margin: 0;
  overflow-x: auto;
  font-size: var(--code-font-size, 13px);
  line-height: var(--code-line-height, 1.65);
}
.prose-block .md-code code {
  font-family: var(--mono);
  tab-size: 2;
}
.prose-block .md-code-highlighted {
  overflow-x: auto;
}
.prose-block .md-code-highlighted pre {
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none;
}
.prose-block .md-code-highlighted code {
  font-family: var(--mono);
  tab-size: 2;
  font-size: var(--code-font-size, 13px);
  line-height: var(--code-line-height, 1.65);
}
.prose-block .md-code-highlighted .shiki {
  background: transparent !important;
}
.prose-block .md-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  }
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.prose-block .md-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-strong);
}
.prose-block .md-link-bare {
  word-break: break-all;
  overflow-wrap: anywhere;
}
.prose-block .md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}
.prose-block .md-image {
  margin: 14px 0;
  border-radius: var(--radius-md);
}
.prose-block .md-code-comment {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  }
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose-block .md-code-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.prose-block .md-code-comment-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.prose-block .md-code-comment-priority {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  color: var(--accent);
  font-weight: 600;
}
.prose-block .md-code-comment-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.prose-block .md-code-comment-file {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.md-table-wrap {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.md-table th, .md-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.md-table th + th, .md-table td + td {
  border-left: 1px solid var(--border);
}
.md-table thead th {
  background: var(--bg-panel);
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--border);
}
.md-table tbody tr:last-child td {
  border-bottom: none;
}
.md-table tbody tr:nth-child(even) td {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--bg-panel) 40%, transparent);
  }
}
.op-waiting {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.thinking-block {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.thinking-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
}
.thinking-toggle:hover {
  background: var(--bg-fill-tertiary);
}
.thinking-status {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.thinking-status.op-status-running {
  color: var(--purple);
  border-color: var(--purple);
  background: none;
}
.thinking-status-active {
  color: var(--purple);
}
.thinking-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 13px;
}
.thinking-chev {
  color: var(--text-faint);
  font-size: 10px;
  margin-left: auto;
  transition: transform 120ms var(--ease-out);
}
.thinking-body {
  margin: 0;
  padding: 4px 8px 8px 32px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  max-height: min(40vh, 320px);
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 16px), transparent 100%);
}
.thinking-body .md-p + .md-p, .thinking-body .md-p + .md-h1, .thinking-body .md-p + .md-h2, .thinking-body .md-p + .md-h3, .thinking-body .md-h1, .thinking-body .md-h2, .thinking-body .md-h3 {
  margin-top: 10px;
}
.thinking-body .md-h1, .thinking-body .md-h2, .thinking-body .md-h3, .thinking-body strong {
  color: var(--text-soft);
  font-weight: 600;
}
.thinking-body .md-h1, .thinking-body .md-h2, .thinking-body .md-h3 {
  font-size: 13px;
  line-height: 1.5;
}
@keyframes shimmer {
  from {
    background-position: 100% center;
  }
  to {
    background-position: -100% center;
  }
}
.shimmer-text {
  color: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text) 45%, transparent);
  }
  background: linear-gradient(120deg, transparent 40%, var(--text-muted) 50%, transparent 60% );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}
.shimmer-text.shimmer-prepare {
  background-image: linear-gradient(120deg, var(--text-muted) 38%, var(--text) 50%, var(--text-muted) 62% );
  background-size: 200% 100%;
  animation-duration: 5s;
}
.status-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  padding: 2px 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.status-label {
  letter-spacing: 0.02em;
  font-weight: 500;
}
.status-detail {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: normal;
  font-family: var(--mono);
  font-size: 11.5px;
}
.status-pill.is-warning {
  background: var(--amber, #b26200);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber, #b26200) 12%, transparent);
  }
  color: var(--amber, #b26200);
  border-color: var(--amber, #b26200);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber, #b26200) 32%, transparent);
  }
}
.status-pill.is-warning .status-detail {
  color: var(--amber, #b26200);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--amber, #b26200) 85%, var(--text));
  }
}
.status-pill.is-error {
  background: var(--red, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, #dc2626) 10%, transparent);
  }
  color: var(--red, #dc2626);
  border-color: var(--red, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red, #dc2626) 30%, transparent);
  }
}
.status-pill.is-error .status-detail {
  color: var(--red, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--red, #dc2626) 85%, var(--text));
  }
}
.action-card {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: none;
  overflow: hidden;
  box-shadow: none;
}
.action-card:hover {
  background: none;
}
.action-card-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms var(--ease-out);
}
.action-card-toggle:hover {
  background: var(--bg-fill-tertiary);
}
.action-card-status {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.action-card-status.op-status-running {
  color: var(--purple);
}
.action-card-status.op-status-ok {
  color: var(--green);
}
.action-card-status.op-status-error {
  color: var(--red);
}
.action-card-toggle .summary {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-card-toggle .chev {
  color: var(--text-faint);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 120ms var(--ease-out);
}
.action-card-body {
  padding: 8px 0 8px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: none;
}
.action-card-body > .op-card {
  border-color: transparent;
  box-shadow: none;
  padding: 4px 0;
}
.action-card-body > .op-card .op-card-head {
  padding: 6px 0;
}
.op-card {
  border: none;
  border-radius: 0;
  background: none;
  overflow: hidden;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  transition: background 160ms var(--ease-out);
}
.op-card:hover {
  background: none;
}
.op-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  font-size: 13px;
  flex-wrap: nowrap;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms var(--ease-out);
  font-family: inherit;
}
.op-card-head:hover {
  background: var(--bg-fill-tertiary);
}
.op-card-detail {
  padding: 8px 4px 8px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.op-card-detail .op-path {
  max-width: 100%;
}
.op-card-detail .op-command {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.op-card-detail .op-output {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 300px;
  overflow-y: auto;
}
.op-expand-chev {
  color: var(--text-faint);
  font-size: 10px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 120ms var(--ease-out);
}
.op-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
}
.op-meta {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.live-code-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-fill-secondary);
  overflow: hidden;
}
.live-code-box .live-code-head {
  cursor: default;
  border-radius: 0;
}
.live-code-box .live-code-head:hover {
  background: transparent;
}
.live-code-pre {
  margin: 0;
  padding: 8px 12px 10px;
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--border);
  scrollbar-width: thin;
}
.live-code-pre code {
  font-family: inherit;
}
.live-code-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--purple);
  border-radius: 1px;
  animation: stream-caret-blink 1s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-code-caret {
    animation: none;
    opacity: 1;
  }
}
.op-meta {
  color: var(--text-muted);
  font-size: 11.5px;
}
.op-desc {
  font-style: italic;
}
.op-path {
  background: var(--bg-fill-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(220px, 100%);
}
.op-status {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 12px;
}
.op-status-running {
  color: var(--purple);
}
.op-status-ok {
  color: var(--green);
}
.op-status-error {
  color: var(--red);
}
.op-toggle {
  font-size: 10.5px;
  padding: 2px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
}
.op-open {
  font-size: 10.5px;
  padding: 2px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.op-open:hover {
  background: var(--bg-fill-tertiary);
  color: var(--text);
}
.produced-files {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.produced-files-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.produced-files-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.produced-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: none;
  border: none;
  font-size: 12.5px;
  box-shadow: none;
  transition: background 160ms var(--ease-out);
}
.produced-file:hover {
  background: var(--bg-fill-tertiary);
}
.produced-file-icon {
  width: 22px;
  text-align: center;
  color: var(--text-muted);
}
.produced-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}
.produced-file-size {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.produced-file-actions {
  display: flex;
  gap: 4px;
}
.produced-file-actions .ghost, .produced-file-actions .ghost-link {
  font-size: 11px;
  padding: 2px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.produced-file-actions .ghost:hover, .produced-file-actions .ghost-link:hover {
  background: var(--bg-fill-tertiary);
  color: var(--text);
}
.plugin-action-panel {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  }
  box-shadow: var(--shadow-xs);
}
.plugin-action-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
}
.plugin-action-panel__icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.plugin-action-panel__title {
  font-weight: 650;
  font-size: 13px;
  color: var(--text);
}
.plugin-action-panel__subtitle {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}
.plugin-action-panel__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugin-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.plugin-action-panel__list .plugin-action-card:first-child {
  padding-top: 0;
  border-top: none;
}
.plugin-action-card__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plugin-action-card__folder-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  flex-shrink: 0;
}
.plugin-action-card__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.plugin-action-card__path {
  max-width: 220px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-action-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plugin-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
}
.plugin-action-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.plugin-action-button:disabled {
  opacity: 0.58;
  cursor: default;
}
.plugin-action-button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.plugin-action-button--primary:hover:not(:disabled) {
  color: #fff;
  filter: brightness(0.85);
}
.plugin-action-card__notice {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.plugin-action-card__notice a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.file-ops {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.file-ops.is-streaming {
  border-style: dashed;
  background: var(--bg-subtle);
}
.file-ops-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
}
.file-ops-toggle:hover {
  background: var(--bg-subtle);
}
.file-ops-icon {
  display: inline-flex;
  color: var(--text-muted);
}
.file-ops-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.file-ops-summary-line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.file-ops-count {
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.file-ops.is-streaming .file-ops-count {
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  }
}
.file-ops-chev {
  display: inline-flex;
  color: var(--text-muted);
}
.file-ops-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--border-soft, var(--border));
}
.file-ops-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  min-width: 0;
}
.file-ops-row:hover {
  background: var(--bg-subtle);
}
.file-ops-row--running {
  color: var(--text);
}
.file-ops-row--error {
  color: var(--text);
}
.file-ops-row-badges {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.file-ops-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.file-ops-badge-count {
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.file-ops-badge--read {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--accent) 80%, var(--text));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  }
}
.file-ops-badge--write {
  color: #2e7d32;
  border-color: #2e7d32;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, #2e7d32 35%, var(--border));
  }
  background: #2e7d32;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #2e7d32 8%, var(--bg-subtle));
  }
}
.file-ops-badge--edit {
  color: #b26500;
  border-color: #b26500;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, #b26500 35%, var(--border));
  }
  background: #b26500;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, #b26500 8%, var(--bg-subtle));
  }
}
.file-ops-row-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  background: transparent;
  padding: 0;
}
.file-ops-row-count {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.file-ops-row-status {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.file-ops-row-status--running {
  color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 10%, transparent);
  }
}
.file-ops-row-status--error {
  color: #c0392b;
  background: color-mix(in oklab, #c0392b 12%, transparent);
}
.file-ops-row-open {
  font-size: 11px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.file-ops-row-open:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.op-bash .op-command, .op-bash .op-output {
  margin: 0;
  padding: 8px 12px;
  background: #1c1b1a;
  color: #f0eee9;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}
.op-bash .op-output {
  background: #2a2926;
}
.op-todo .todo-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
}
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 8px;
  line-height: 1.45;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.todo-check {
  width: 16px;
  flex-shrink: 0;
  color: var(--text-soft);
  font-family: var(--mono);
  text-align: center;
  line-height: 1.45;
}
.todo-text {
  color: var(--text);
}
.todo-pending .todo-check {
  color: var(--text-faint);
}
.todo-pending .todo-text {
  color: var(--text-muted);
}
.todo-in_progress {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  }
}
.todo-in_progress .todo-check {
  color: var(--accent);
}
.todo-in_progress .todo-text {
  color: var(--text-strong);
  font-weight: 600;
}
.todo-completed .todo-check {
  color: var(--green);
}
.todo-completed .todo-text {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  }
  color: var(--text-muted);
}
.todo-stopped {
  background: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red) 8%, var(--bg-panel));
  }
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 24%, transparent);
  }
}
.todo-stopped .todo-check {
  color: var(--red);
  font-weight: 700;
}
.todo-stopped .todo-text {
  color: var(--text);
}
.composer.drag-active {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}
.present-wrap, .share-menu {
  --viewer-action-menu-z: 220;
}
.present-wrap {
  position: relative;
  display: inline-block;
}
.present-trigger .caret {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.7;
}
.present-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--viewer-action-menu-z);
  min-width: 168px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.present-menu button {
  background: transparent;
  border: none;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.present-menu button:hover {
  background: var(--bg-subtle);
  border-color: transparent;
}
.present-icon {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}
.share-menu {
  position: relative;
  display: inline-block;
}
.template-share-menu > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.template-share-trigger[aria-expanded='true'] {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}
.viewer-action-export {
  gap: 6px;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 6px 14px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}
.viewer-action-export:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
@keyframes export-ready-nudge {
  0% {
    transform: translateY(0);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  18% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  36% {
    transform: translateY(0);
  }
  54% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent), 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chrome-action-export.export-ready-nudge {
    animation: export-ready-nudge-reduced 1200ms ease-out 1;
  }
}
@keyframes export-ready-nudge-reduced {
  0%, 100% {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  35% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.share-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--viewer-action-menu-z);
  min-width: 300px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
.share-menu-item:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: transparent;
}
.share-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.share-menu-icon {
  flex: 0 0 auto;
  width: 18px;
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
}
.share-menu-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.share-menu-text small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
}
.share-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}
.template-share-popover {
  min-width: 320px;
  gap: 6px;
  padding: 8px;
}
.template-share-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 9px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.template-share-summary__eyebrow {
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.template-share-summary strong {
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-share-summary span:last-child {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-share-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-share-section + .template-share-section {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 6px;
}
.template-share-section__label {
  padding: 2px 8px 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.template-share-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.template-share-platform {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.template-share-platform:hover:not(:disabled):not([aria-disabled='true']), .template-share-platform:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }
  outline: none;
}
.template-share-platform:disabled, .template-share-platform[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.template-share-platform__mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg-panel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.template-share-platform--reddit .template-share-platform__mark {
  background: #ff4500;
  color: white;
}
.template-share-platform--facebook .template-share-platform__mark {
  background: #1877f2;
  color: white;
}
.template-share-platform--linkedin .template-share-platform__mark {
  background: #0a66c2;
  color: white;
}
.template-share-platform--instagram .template-share-platform__mark {
  background: #e4405f;
  color: white;
}
.template-share-platform--xiaohongshu .template-share-platform__mark {
  background: #ff2442;
  color: white;
}
.share-menu-subitem {
  padding-left: 18px;
}
.share-menu-section-label {
  padding: 8px 10px 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.share-menu-subsection-label {
  padding: 6px 10px 2px 18px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}
.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.button-like:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.deploy-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.deploy-flow-backdrop.modal-backdrop {
  box-sizing: border-box;
  padding: clamp(48px, 7vh, 88px) 16px;
}
.viewer-modal-backdrop.modal-backdrop {
  z-index: 1700;
}
.deploy-flow-modal.modal {
  --modal-padding: 22px;
  max-height: min(760px, calc(100vh - 112px));
  max-height: min(760px, calc(100dvh - 112px));
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.deploy-flow-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 18px;
  scrollbar-width: thin;
}
.image-export-modal.modal {
  width: min(430px, calc(100vw - 32px));
  gap: 0;
  padding: 0;
}
.image-export-modal .modal-head {
  padding: 22px 24px 12px;
}
.image-export-modal .modal-head .kicker {
  display: none;
}
.image-export-modal .modal-head h2 {
  font-size: 20px;
  letter-spacing: 0;
}
.image-export-modal .modal-head .subtitle {
  max-width: none;
  margin-top: 6px;
  line-height: 1.5;
  text-wrap: pretty;
}
.image-export-form {
  padding: 0 24px 18px;
}
.image-export-format-field {
  margin: 0;
  padding: 0;
  border: 0;
}
.image-export-format-field legend {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.image-export-format-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.image-export-format-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.image-export-format-option:hover {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  }
}
.image-export-format-option.active {
  border-color: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-strong) 72%, transparent);
  }
  background: var(--bg-panel);
  box-shadow: 0 1px 1px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 7%, transparent);
  }
}
.image-export-format-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.image-export-format-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  }
  outline-offset: 2px;
}
.image-export-format-text {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  gap: 0;
}
.image-export-format-text strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.image-export-format-text span {
  display: none;
}
.image-export-modal .modal-foot {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--border);
}
.deploy-flow-modal .modal-foot {
  padding-top: 16px;
}
.deploy-flow-modal .modal-foot .viewer-action.primary {
  justify-content: center;
  min-width: 104px;
}
.deploy-flow-modal .deploy-form {
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--modal-padding) 18px;
  margin-top: 0;
}
.deploy-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.deploy-flow-modal .deploy-form {
  gap: 12px;
  margin-top: 16px;
}
.deploy-provider-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deploy-form .deploy-field-title {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.deploy-form label.deploy-field-title {
  display: inline;
}
.deploy-form .deploy-field-title.required::after {
  content: ' *';
  color: var(--accent);
  font-weight: 700;
}
.deploy-token-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.deploy-token-input-row input {
  min-width: 0;
}
.deploy-token-input-row .button-like {
  min-height: 44px;
}
.deploy-field-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.deploy-field-inline-action {
  border: 0;
  padding: 0 2px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.deploy-field-inline-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.deploy-token-label-row {
  margin-bottom: -2px;
}
.deploy-token-hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deploy-token-hints .hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}
.field-label-row a:not(.field-label-link) {
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}
.field-label-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.field-label-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms var(--ease-out);
}
.field-label-link:hover {
  color: var(--accent);
}
.field-label-link svg {
  opacity: 0.75;
  transition: transform 120ms var(--ease-out), opacity 120ms var(--ease-out);
}
.field-label-link:hover svg {
  opacity: 1;
  transform: translate(1px, -1px);
}
.field-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  color: #137a3d;
  background: color-mix(in srgb, #1f9d55 10%, transparent);
  border: 1px solid #1f9d55;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, #1f9d55 28%, var(--border));
  }
  font-variant-numeric: tabular-nums;
}
.field-status-badge--inline {
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-color: var(--border);
  font-weight: 500;
}
.field-status-badge-skeleton {
  width: 86px;
  height: 18px;
  border: 1px solid var(--border);
  background: linear-gradient( 90deg, var(--text-soft) 0%, var(--text-soft) 50%, var(--text-soft) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--text-soft) 8%, var(--bg-subtle)) 0%, color-mix(in srgb, var(--text-soft) 18%, var(--bg-subtle)) 50%, color-mix(in srgb, var(--text-soft) 8%, var(--bg-subtle)) 100% );
  }
  background-size: 200% 100%;
  animation: settingsSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-pill);
  padding: 0;
  color: transparent;
}
.field-input-skeleton-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}
.field-input-skeleton-wrap > input {
  flex: 1;
  min-width: 0;
}
.field-input-skeleton-shimmer {
  position: absolute;
  inset: 1px;
  border-radius: var(--radius);
  pointer-events: none;
  background: linear-gradient( 90deg, transparent 0%, var(--text-soft) 50%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--text-soft) 14%, transparent) 50%, transparent 100% );
  }
  background-size: 220% 100%;
  animation: settingsSkeletonShimmer 1.6s ease-in-out infinite;
}
.settings-section-connectors-credentials.is-loading .field-label {
  color: var(--text-muted);
}
.settings-section-connectors-credentials.is-loading input:disabled {
  cursor: progress;
  background: var(--text-soft);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-soft) 4%, var(--bg-subtle));
  }
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}
.settings-section-connectors-credentials.is-loading input:disabled::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.field-hint-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.field-hint-loading svg {
  color: var(--accent-strong);
  flex-shrink: 0;
}
@keyframes settingsSkeletonShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .field-status-badge-skeleton, .field-input-skeleton-shimmer {
    animation: none;
  }
  .field-input-skeleton-shimmer {
    background: var(--text-soft);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-soft) 8%, transparent);
    }
  }
}
.deploy-form input, .deploy-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
}
.deploy-config-actions {
  display: flex;
  justify-content: flex-end;
}
.deploy-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cloudflare-domain-grid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.15fr);
}
.deploy-field-grid.single-field {
  grid-template-columns: minmax(0, 1fr);
}
.deploy-field-grid label, .deploy-field-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.deploy-error {
  margin: 0;
  color: var(--red);
}
.deploy-result-block {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.deploy-result-block.ready {
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 26%, var(--border));
  }
}
.deploy-result-block.delayed {
  border-color: #b7791f;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #b7791f 34%, var(--border));
  }
}
.deploy-result-block.protected, .deploy-result-block.failed {
  border-color: #c96442;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #c96442 38%, var(--border));
  }
}
.deploy-result-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 64%, var(--bg-panel));
  }
}
.deploy-result-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.deploy-result-link-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.deploy-result-badge, .deploy-result-link-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.deploy-result-badge.ready, .deploy-result-link-state.ready {
  color: #137a3d;
  background: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green) 14%, transparent);
  }
  border: 1px solid var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border));
  }
}
.deploy-result-badge.delayed, .deploy-result-link-state.delayed {
  color: #9a5b12;
  background: color-mix(in srgb, #b7791f 14%, transparent);
  border: 1px solid #b7791f;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, #b7791f 28%, var(--border));
  }
}
.deploy-result-badge.protected, .deploy-result-badge.failed, .deploy-result-link-state.protected, .deploy-result-link-state.failed {
  color: #a34828;
  background: color-mix(in srgb, #c96442 14%, transparent);
  border: 1px solid #c96442;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, #c96442 30%, var(--border));
  }
}
.deploy-result-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.deploy-result-message {
  margin: 0;
  color: var(--text-muted);
}
.deploy-result-links {
  display: grid;
  border-top: 1px solid var(--border);
}
.deploy-result-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  background: var(--bg-panel);
}
.deploy-result-link + .deploy-result-link {
  border-top: 1px solid var(--border);
}
.deploy-result-link-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.deploy-result-link-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.deploy-result-link-message {
  margin: 0;
  color: var(--text-muted);
}
.deploy-result-url {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.deploy-result-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.deploy-result-actions .viewer-action, .deploy-result-actions .ghost-link {
  min-height: 28px;
  border: 0;
  background: transparent;
}
.deploy-result-actions .viewer-action:hover:not(:disabled), .deploy-result-actions .ghost-link:hover {
  background: var(--bg-panel);
}
@media (max-width: 640px) {
  .deploy-form .field-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .deploy-field-grid, .cloudflare-domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .deploy-result-link {
    grid-template-columns: minmax(0, 1fr);
  }
  .deploy-result-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: fit-content;
  }
}
.ghost-link.disabled, .ghost-link[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.present-overlay {
  position: fixed;
  top: var(--workspace-tabs-chrome-height, 38px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: black;
  display: flex;
}
.present-overlay iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.present-exit {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: calc(env(safe-area-inset-right, 0px) + 20px);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.present-exit:hover {
  background: white;
}
.picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.picker-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.picker select {
  border: none;
  background-color: transparent;
  padding: 4px 26px 4px 6px;
  width: auto;
  min-width: 120px;
  box-shadow: none;
}
.picker select:focus {
  outline: none;
  box-shadow: none;
}
.picker.agent-picker select {
  min-width: 140px;
}
.picker.agent-picker .icon-btn {
  padding: 2px 8px;
  background: transparent;
  border: none;
}
.preview {
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  min-height: 0;
}
.preview-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.preview-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.preview-actions .muted {
  font-size: 11px;
}
.preview-actions button {
  padding: 4px 10px;
  font-size: 12px;
}
.preview-body {
  flex: 1;
  min-height: 0;
  position: relative;
}
.preview-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  padding: 24px;
  text-align: center;
  font-size: 13px;
}
.topbar-title .title.editable, .app-project-title .title.editable {
  outline: none;
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  margin: 0px;
  max-width: min(100%, 420px);
}
.topbar-title .title.editable:focus, .app-project-title .title.editable:focus {
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px var(--accent);
}
.conv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  font: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  user-select: none;
  max-width: 220px;
}
.conv-pill:hover {
  background: var(--bg-subtle);
}
.conv-pill.open {
  background: var(--bg-subtle);
  border-color: var(--accent);
}
.conv-pill-icon {
  font-size: 13px;
  line-height: 1;
}
.conv-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10px;
}
.conv-menu {
  position: fixed;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 200;
  padding: 8px;
}
.conv-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.conv-add-btn {
  padding: 2px 8px;
  font-size: 11px;
}
.conv-menu-empty {
  padding: 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.conv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conv-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-radius: var(--radius-sm);
}
.conv-item.active {
  background: var(--bg-subtle);
}
.conv-item-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.conv-item-button:hover {
  background: var(--bg-subtle);
}
.conv-item-name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-item-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.conv-item-del {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  width: 24px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.conv-item-del:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.conv-rename-input {
  flex: 1;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}
.system-reminder-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0;
}
.system-reminder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
}
.system-reminder-toggle:hover {
  background: rgba(0, 0, 0, 0.03);
}
.system-reminder-icon {
  color: var(--text-muted);
}
.system-reminder-label {
  font-weight: 500;
  color: var(--text);
}
.system-reminder-preview {
  flex: 1;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-reminder-chev {
  color: var(--text-muted);
  font-size: 10px;
}
.system-reminder-body {
  margin: 0;
  padding: 0 12px 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.system-reminder-block.injection .system-reminder-icon, .system-reminder-block.injection .system-reminder-label, .system-reminder-block.injection .system-reminder-chev {
  color: var(--warning, #d97706);
}
.op-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
}
.op-waiting-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}
.op-waiting-label {
  font-weight: 500;
  color: var(--text);
}
.op-waiting-detail {
  min-width: 0;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-panel);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}
.op-waiting-hint {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-soft);
  font-style: italic;
}
.op-todo {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 60%);
}
.op-todo .op-card-head {
  border-bottom: 1px solid var(--accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 70%, transparent);
  }
  background: transparent;
}
.op-todo .op-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.op-todo .op-title {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-strong);
}
.op-todo .op-meta {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-strong);
}
.accordion-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-collapsible.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-collapsible-inner {
  min-height: 0;
  overflow: hidden;
}
.op-todo .op-todo-head {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.op-todo .op-todo-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.op-todo .op-todo-done {
  display: inline-flex;
  align-items: center;
  margin: 6px 10px 6px 0;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--green-border);
  border-radius: var(--radius-pill);
  background: var(--green-bg);
  color: var(--green);
  cursor: pointer;
}
.op-todo .op-todo-done:hover {
  filter: brightness(1.05);
}
.op-todo-collapsed .op-card-head {
  border-bottom-color: transparent;
}
.op-todo-current {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.op-todo-chev {
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 120ms var(--ease-out);
}
.question-form {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.question-form-locked {
  background: var(--bg-subtle);
  box-shadow: none;
  opacity: 0.92;
}
.question-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 100%);
}
.question-form-locked .question-form-head {
  background: var(--bg-subtle);
}
.question-form-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.question-form-titles {
  flex: 1;
  min-width: 0;
}
.question-form-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.question-form-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.question-form-pill {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.question-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.qf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qf-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}
.qf-required {
  color: var(--accent);
}
.qf-help {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}
.qf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.qf-chip input {
  width: auto;
  margin: 0;
  display: none;
}
.qf-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.qf-chip-desc {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}
.qf-chip-on .qf-chip-desc {
  color: inherit;
  opacity: 0.72;
}
.qf-chip:hover {
  border-color: var(--border-strong);
}
.qf-chip-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.qf-chip-disabled:hover {
  border-color: var(--border);
}
.qf-chip-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 500;
}
.question-form-locked .qf-chip {
  cursor: not-allowed;
}
.qf-input, .qf-select, .qf-textarea {
  font-size: 13px;
}
.question-form-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.qf-hint, .qf-locked-note {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.qf-direction-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.qf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s var(--ease-out), background 0.12s var(--ease-out), transform 0.06s var(--ease-out);
}
.qf-card input {
  display: none;
}
.qf-card:hover {
  border-color: var(--border-strong);
}
.qf-card:active {
  transform: translateY(1px);
}
.qf-card-on {
  border-color: var(--accent, #c96442);
  background: var(--accent, #c96442);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklch, var(--accent, #c96442) 4%, var(--bg));
  }
  box-shadow: 0 0 0 1px var(--accent, #c96442) inset;
}
.qf-card-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.qf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qf-card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}
.qf-card-pill {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--accent, #c96442);
  color: #fff;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.qf-card-swatches {
  display: flex;
  gap: 4px;
  height: 18px;
}
.qf-card-swatch {
  flex: 1;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 0;
}
.qf-card-types {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.qf-card-type-display {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.qf-card-type-body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qf-card-mood {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.qf-card-refs {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.qf-card-refs-label {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}
.questions-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 100%);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  color: var(--text);
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.questions-banner:hover {
  border-color: var(--accent);
}
.questions-banner:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.questions-banner-answered, .questions-banner-answered:hover {
  cursor: default;
  border-color: var(--border);
  background: var(--bg-panel);
  box-shadow: none;
  color: var(--text-muted);
}
.questions-banner-answered .questions-banner-icon {
  background: var(--success, #16a34a);
}
.questions-banner-answered .questions-banner-label {
  font-weight: 500;
}
.questions-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: white;
  flex-shrink: 0;
}
.questions-banner-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.questions-banner-cta {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.questions-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.questions-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}
.questions-panel-body .question-form {
  margin: 0;
  box-shadow: var(--shadow-md);
}
.questions-panel-body .question-form-body {
  gap: 18px;
  padding: 18px 16px;
}
.questions-panel-body .qf-field {
  animation: qf-field-in 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes qf-field-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.questions-panel-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 18px 2px;
}
.questions-panel-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  opacity: 0.3;
  animation: questions-dot 1.1s ease-in-out infinite;
}
.questions-panel-dot:nth-child(2) {
  animation-delay: 0.16s;
}
.questions-panel-dot:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes questions-dot {
  0%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .questions-panel-body .qf-field {
    animation: none;
  }
  .questions-panel-dot {
    animation: none;
    opacity: 0.55;
  }
}
.questions-panel-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: var(--text-muted);
}
.questions-panel-body .question-form-head {
  padding: 16px 18px;
}
.questions-panel-body .question-form-title {
  font-size: 15px;
}
.questions-panel-body .question-form-icon {
  width: 30px;
  height: 30px;
  font-size: 15px;
}
.questions-panel-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.18);
}
.questions-panel-status {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.questions-skip, .questions-continue {
  flex-shrink: 0;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.questions-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
}
.questions-skip-timer {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.questions-skip:disabled .questions-skip-timer {
  opacity: 0.7;
}
.questions-skip:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--text-muted);
}
.questions-skip:disabled {
  opacity: 0.45;
  cursor: default;
}
.questions-continue {
  border: 1px solid transparent;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 10px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 34%, transparent);
  }
}
.questions-continue:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 4px 16px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 44%, transparent);
  }
}
.questions-continue:disabled {
  box-shadow: none;
  opacity: 0.5;
  cursor: default;
}
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(2px);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 32px;
}
.ds-modal {
  width: 100%;
  max-width: 1320px;
  background: var(--bg);
  -webkit-app-region: no-drag;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ds-modal-fullscreen {
  max-width: none;
  border-radius: 0;
}
.ds-modal-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ds-modal-header-top {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ds-modal-title-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-modal-header-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong, var(--text));
}
.ds-modal-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ds-modal-actions {
  flex-shrink: 0;
}
.ds-modal-header-top .ds-modal-close {
  flex-shrink: 0;
}
.ds-modal-tabs {
  display: inline-flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.ds-modal-tab {
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.ds-modal-tab:hover {
  color: var(--text);
}
.ds-modal-tab.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ds-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
}
.ds-modal-actions > button, .ds-modal-actions .share-menu > button {
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-modal-stage {
  flex: 1;
  min-height: 0;
  background: white;
  position: relative;
  display: flex;
  align-items: stretch;
}
.ds-modal-stage-iframe {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: white;
}
.ds-modal-stage-iframe-scaler {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background: white;
  will-change: transform;
}
.ds-modal-stage-iframe-scaler iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: white;
}
.ds-modal-stage.has-sidebar .ds-modal-stage-iframe {
  flex: 1 1 60%;
}
.ds-modal-stage-fullscreen {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease, background 140ms ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.ds-modal-stage-iframe:hover .ds-modal-stage-fullscreen, .ds-modal-stage-fullscreen:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.ds-modal-stage-fullscreen:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.ds-modal-sidebar {
  position: relative;
  flex: 1 1 40%;
  min-width: 320px;
  max-width: 560px;
  border-left: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  animation: ds-modal-sidebar-in 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ds-modal-sidebar-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.ds-modal-sidebar .plugin-info-pane {
  animation: ds-modal-sidebar-content-in 360ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
@keyframes ds-modal-sidebar-content-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-modal-sidebar {
    animation: none;
  }
}
.ds-modal-stage-handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 56px;
  transform: translateY(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.ds-modal-stage-handle:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.ds-modal-stage-handle.is-expand {
  right: 0;
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.ds-modal-stage-handle.is-collapse {
  position: sticky;
  left: 0;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
.ds-modal-fullscreen .ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler, .ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler {
  height: 100vh;
}
.ds-modal-stage-custom {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--bg-subtle, #f6f5f1);
}
.plugin-media-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  min-height: 0;
}
.plugin-media-stage__empty {
  color: var(--text-muted);
  font-size: 13px;
}
.plugin-media-stage__image, .plugin-media-stage__video, .plugin-media-stage__audio-poster {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  background: white;
}
.plugin-media-stage__video {
  width: auto;
  height: auto;
}
.plugin-media-stage__audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 480px;
}
.plugin-media-stage__audio-poster {
  width: 320px;
  height: 320px;
  object-fit: cover;
}
.plugin-media-stage__audio-glyph {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 135deg, var(--accent), var(--accent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) );
  }
  color: var(--accent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}
.plugin-media-stage__audio-player {
  width: 100%;
}
.plugin-media-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plugin-media-sidebar__prompt {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface-1, var(--bg-panel));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugin-media-sidebar__prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plugin-media-sidebar__prompt-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plugin-media-sidebar__prompt-copy {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.plugin-media-sidebar__prompt-copy:hover {
  color: var(--text);
  background: var(--bg-subtle);
  border-color: var(--border);
}
.plugin-media-sidebar__prompt-body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}
.ds-modal-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-modal-error {
  flex-direction: column;
  gap: 10px;
  padding: 0 24px;
  text-align: center;
}
.ds-modal-error-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-modal-error-body {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 48ch;
  line-height: 1.5;
}
.ds-modal-unavailable {
  flex-direction: column;
  gap: 10px;
  padding: 0 24px;
  text-align: center;
}
.ds-modal-unavailable-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-modal-unavailable-body {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 48ch;
  line-height: 1.5;
}
.ds-modal-actions .ghost.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}
.ds-modal-primary-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.ds-modal-primary-action:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
.ds-modal-primary-action:active:not(:disabled) {
  transform: translateY(0.5px);
}
.ds-modal-primary-action:disabled {
  cursor: progress;
  opacity: 0.6;
}
.ds-modal-primary-action-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.ds-modal-primary-action--split {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ds-modal-primary-action-caret {
  padding-left: 8px;
  padding-right: 8px;
  gap: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: rgba(255, 255, 255, 0.32);
  margin-left: -1px;
}
.ds-modal-primary-action-popover {
  min-width: 248px;
  z-index: var(--viewer-action-menu-z, 240);
}
.ds-modal-primary-action-option {
  align-items: flex-start;
}
.ds-modal-primary-action-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-modal-primary-action-option__label {
  font-weight: 600;
  color: var(--text);
}
.ds-modal-primary-action-option__desc {
  font-size: 11px;
  color: var(--text-muted);
}
.ds-modal-close {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.ds-modal-close svg {
  display: block;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.9;
}
.ds-modal-close:hover, .ds-modal-close:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
  outline: none;
}
.design-spec-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12px;
}
.design-spec-pre {
  margin: 0;
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg-panel);
  flex: 1;
}
.design-spec-pre code {
  font: inherit;
  color: inherit;
  background: transparent;
}
.design-spec-line {
  display: inline;
}
.design-spec-line.is-h1 {
  color: #2563eb;
  font-weight: 700;
}
.design-spec-line.is-h2 {
  color: #0891b2;
  font-weight: 700;
}
.design-spec-line.is-h3 {
  color: #0d9488;
  font-weight: 600;
}
.design-spec-line.is-h4 {
  color: #16a34a;
  font-weight: 600;
}
.design-spec-line.is-quote {
  color: #6b7280;
  font-style: italic;
}
.design-spec-line.is-list {
  color: var(--text);
}
.design-spec-line.is-table {
  color: #7c3aed;
}
.design-spec-line.is-fence {
  color: #dc2626;
}
.design-spec-line.is-blank {
  color: var(--text-muted);
}
.md-tk-bold {
  font-weight: 700;
  color: var(--text);
}
.md-tk-em {
  font-style: italic;
  color: var(--text);
}
.md-tk-code {
  background: var(--bg-subtle);
  padding: 0 4px;
  border-radius: 3px;
  color: #0f766e;
}
.md-tk-color {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #be185d;
}
.md-tk-color-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}
.ds-modal-sidebar-toggle--compact-only {
  display: none;
}
@media (max-width: 760px) {
  .ds-modal-backdrop {
    padding: 0;
  }
  .ds-modal {
    border-radius: 0;
  }
  .ds-modal-header {
    gap: 10px;
    padding: 12px 14px;
  }
  .ds-modal-actions {
    justify-content: flex-start;
  }
  .ds-modal-stage {
    flex-direction: column;
  }
  .ds-modal-stage.has-sidebar .ds-modal-stage-iframe {
    flex: 1 1 50%;
  }
  .ds-modal-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
  }
  .ds-modal-stage-handle {
    display: none;
  }
  .ds-modal-sidebar-toggle--compact-only {
    display: inline-flex;
  }
}
.examples-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  margin: 0;
  padding: 0 0 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.examples-search {
  position: relative;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  background: var(--bg);
}
.examples-search input {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 7px 12px 7px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
}
.examples-search input::placeholder {
  color: var(--text-faint);
}
.examples-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.examples-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}
.examples-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.examples-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 6px;
  font-weight: 500;
}
.filter-pill {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
button.filter-pill:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text);
}
.filter-pill.active {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text);
  font-weight: 600;
}
button.filter-pill.active:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text);
}
.filter-pill-count {
  font-size: 11px;
  opacity: 0.7;
}
button.filter-pill:hover:not(:disabled) .filter-pill-count, .filter-pill.active .filter-pill-count {
  color: currentColor;
  opacity: 0.9;
}
.example-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.example-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.example-tag.platform-mobile {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}
.example-tag.mode-deck {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}
.example-preview {
  cursor: zoom-in;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.example-preview:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.10);
}
.example-preview:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.example-preview-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: white;
  background: rgba(28, 27, 26, 0.78);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.example-preview:hover .example-preview-overlay, .example-preview:focus-visible .example-preview-overlay {
  opacity: 1;
}
@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.icon-spin {
  animation: icon-spin 0.9s linear infinite;
  transform-origin: center;
}
.loading-spinner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.loading-spinner-label {
  font-size: 12px;
}
.skeleton-block, .skeleton-shimmer {
  display: inline-block;
  background-color: var(--bg-subtle);
  background-image: linear-gradient( 90deg, var(--bg-subtle) 0%, var(--bg-muted) 50%, var(--bg-subtle) 100% );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-block + .skeleton-block {
  margin-top: 6px;
}
.design-card-skeleton {
  cursor: default;
  pointer-events: none;
}
.design-card-skeleton .design-card-thumb {
  background: none;
}
.design-card-skeleton .design-card-thumb::before, .design-card-skeleton .design-card-thumb::after {
  display: none;
}
.design-card-skeleton .design-card-thumb {
  background-image: linear-gradient( 90deg, var(--bg-subtle) 0%, var(--bg-muted) 50%, var(--bg-subtle) 100% );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.centered-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 12px;
  color: var(--text-muted);
}
.centered-loader-label {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.entry-side {
  position: relative;
  min-width: 280px;
  max-width: 560px;
  min-height: 0;
}
.entry-side-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  border: 0;
  padding: 0;
  transition: background-color 120ms var(--ease-out);
}
.entry-side-resizer:hover, .entry-side-resizer.dragging {
  background: var(--accent-soft);
}
body.entry-resizing {
  cursor: col-resize;
  user-select: none;
}
.composer-import-wrap {
  position: relative;
}
.composer-import-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
  animation: pop-in 180ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.composer-import-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: not-allowed;
  font-size: 12.5px;
  text-align: left;
  width: 100%;
}
.composer-import-item:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-import-item-enabled {
  cursor: pointer;
  color: var(--text);
}
.composer-import-item-enabled:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-import-item-label {
  flex: 1;
}
.composer-import-item-soon {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
}
.composer-import-item .ico {
  display: inline-flex;
  width: 16px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.chat-history-wrap {
  position: static;
  display: inline-flex;
  align-items: center;
}
.chat-history-wrap .icon-only {
  position: relative;
}
.chat-history-wrap.open .icon-only {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-history-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-history-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  right: 12px;
  width: auto;
  max-height: min(360px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg));
  }
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  border-radius: var(--radius);
  box-shadow: 0 18px 48px color-mix(in srgb, #000 12%, transparent), 0 1px 0 color-mix(in srgb, #fff 42%, transparent) inset;
  z-index: 30;
  overflow: hidden;
  transform-origin: top right;
  animation: pop-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-history-menu-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 5px;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg));
  }
}
.chat-history-menu-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.chat-history-menu-count {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
}
.chat-history-search {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  margin: 6px 8px 3px;
  padding: 0 7px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  }
  border-radius: var(--radius);
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 88%, var(--bg-panel));
  }
  color: var(--text-faint);
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-history-search:hover {
  border-color: var(--text-faint);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-faint) 34%, var(--border));
  }
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 94%, var(--bg-panel));
  }
}
.chat-history-search:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  }
  box-shadow: 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.chat-history-search svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
.chat-history-search input {
  min-width: 0;
  flex: 1;
  height: 20px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  line-height: 20px;
}
.chat-history-search input::placeholder {
  color: var(--text-faint);
}
.chat-history-search-clear {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-faint);
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-history-search-clear:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.chat-history-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  height: 22px;
  padding: 0 7px;
  font-size: 10.5px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 84%, transparent);
  }
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  }
  color: var(--text-muted);
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-history-new:hover {
  background: var(--bg-muted);
  border-color: var(--text-faint);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-faint) 28%, var(--border));
  }
  color: var(--text);
}
.chat-history-new:disabled {
  cursor: default;
  opacity: 0.55;
}
.chat-history-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.chat-history-list.is-virtualized {
  gap: 0;
}
.chat-history-virtual-spacer {
  position: relative;
  flex: 0 0 auto;
}
.chat-history-virtual-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  will-change: transform;
}
.chat-history-empty {
  padding: 14px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 7px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-conv-item:hover {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, transparent);
  }
}
.chat-conv-item.active {
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 76%, transparent);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  }
  color: var(--text-strong);
}
.chat-conv-item:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  }
  box-shadow: 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}
.chat-conv-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font: inherit;
  line-height: 18px;
}
.chat-conv-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.chat-conv-message-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
}
.chat-conv-message-count svg {
  width: 10px;
  height: 10px;
}
.chat-conv-item-del {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-conv-item:hover .chat-conv-item-del {
  opacity: 1;
}
.chat-conv-item-del:hover {
  background: var(--red-bg);
  color: var(--red);
}
.chat-log-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
}
.chat-log-wrap .chat-log {
  flex: 1;
}
.chat-jump-btn {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 140ms;
}
.chat-jump-btn-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}
.chat-jump-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.assistant-completion-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.assistant-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 11px;
  color: var(--text-faint);
  width: fit-content;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.msg.assistant:hover .assistant-footer, .assistant-footer[data-streaming="true"], .assistant-footer[data-last="true"] {
  opacity: 1;
}
.assistant-footer .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}
.assistant-footer .dot[data-active="true"] {
  background: var(--green);
  animation: pulse 1.2s ease-in-out infinite;
}
.assistant-footer .assistant-label {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 11px;
}
.assistant-footer .assistant-stats {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-size: 11px;
}
.assistant-footer[data-unfinished="true"] {
  background: none;
}
.assistant-footer[data-unfinished="true"] .dot {
  background: var(--amber);
}
.assistant-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}
.assistant-action-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.assistant-action-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.theater-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.theater-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.theater-stage-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.theater-stage-rounds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theater-stage-round {
  display: contents;
}
.theater-stage-lanes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theater-round-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border);
}
.theater-round-divider[data-status="in-progress"] {
  color: var(--text);
}
.theater-round-score {
  font-variant-numeric: tabular-nums;
}
.theater-round-score[data-meets-threshold="true"] {
  color: var(--text-strong);
}
.theater-round-score[data-meets-threshold="false"] {
  color: var(--amber);
}
.theater-round-score-value {
  font-weight: 600;
}
.theater-round-score-scale {
  opacity: 0.7;
}
.theater-score-ticker {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.theater-score-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  flex: 0 0 auto;
}
.theater-score-tick {
  width: 6px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  border-radius: 2px;
}
.theater-score-tick[data-meets-threshold="true"] {
  background: var(--accent);
}
.theater-score-threshold {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
.theater-score-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.theater-score-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.theater-score-threshold-label {
  font-size: 10.5px;
}
.theater-lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  background: var(--bg-panel);
}
.theater-lane[data-active="true"] {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
  }
}
.theater-lane[data-role="designer"] {
  border-left-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  }
}
.theater-lane[data-role="critic"] {
  border-left-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--amber) 60%, var(--border));
  }
}
.theater-lane[data-role="brand"] {
  border-left-color: var(--purple, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--purple, var(--accent)) 60%, var(--border));
  }
}
.theater-lane[data-role="a11y"] {
  border-left-color: var(--green, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--green, var(--accent)) 60%, var(--border));
  }
}
.theater-lane[data-role="copy"] {
  border-left-color: var(--blue, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--blue, var(--accent)) 60%, var(--border));
  }
}
.theater-lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.theater-lane-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.theater-lane-mustfix {
  font-size: 11px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.theater-lane-rounds {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theater-lane-round {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  font-variant-numeric: tabular-nums;
}
.theater-lane-round[data-state="pending"] {
  opacity: 0.5;
}
.theater-lane-round[data-state="open"][data-current="true"] {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-subtle));
  }
  color: var(--text);
}
.theater-lane-round-n {
  font-weight: 600;
}
.theater-lane-round-score {
  font-weight: 600;
  color: var(--text-strong);
}
.theater-lane-round-dims {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}
.theater-lane-round-dim {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber) 60%, transparent);
  }
}
.theater-lane-round-dim[data-meets-half="true"] {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
  }
}
.theater-interrupt {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.theater-interrupt:hover {
  background: var(--bg-subtle);
}
.theater-interrupt:disabled {
  opacity: 0.6;
  cursor: default;
}
.theater-interrupt[data-pending="true"] {
  background: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber) 12%, var(--bg-subtle));
  }
}
.theater-degraded {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber) 8%, var(--bg-subtle));
  }
  border: 1px solid var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));
  }
  border-radius: var(--radius);
  color: var(--text);
}
.theater-degraded-heading {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.theater-degraded-reason {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.theater-collapsed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  color: var(--text-muted);
}
.theater-collapsed[data-phase="shipped"][data-ship-status="shipped"] {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
}
.theater-collapsed[data-phase="interrupted"], .theater-collapsed[data-phase="shipped"][data-ship-status="below_threshold"], .theater-collapsed[data-phase="shipped"][data-ship-status="timed_out"], .theater-collapsed[data-phase="failed"] {
  background: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber) 10%, var(--bg-subtle));
  }
  border-color: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--amber) 35%, var(--border));
  }
}
.theater-collapsed-badge {
  font-weight: 600;
  color: var(--text-strong);
}
.theater-transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.theater-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.theater-transcript-readonly {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.theater-transcript-speed-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.theater-transcript-speed {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font: inherit;
  font-size: 11.5px;
  color: var(--text);
}
.theater-transcript-loading, .theater-transcript-empty, .theater-transcript-error {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.theater-transcript-lanes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .theater-score-tick, .theater-lane, .theater-lane-round {
    transition: none !important;
  }
}
.assistant-feedback-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: min(360px, 100%);
}
.assistant-feedback {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
}
.assistant-footer-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
}
.assistant-footer-controls .assistant-feedback {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.assistant-copy-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  overflow: visible;
}
.assistant-copy-button:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-strong);
}
.assistant-copy-button:disabled {
  cursor: default;
  opacity: 0.55;
}
.assistant-copy-button:disabled:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.assistant-copy-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.assistant-copy-button[data-copied="true"] {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.assistant-feedback-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  overflow: visible;
}
.assistant-feedback-button:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-strong);
}
.assistant-feedback-button[data-selected="true"] {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.assistant-feedback-button[data-selected="true"] svg {
  fill: currentColor;
}
.assistant-copy-button:not(.od-tooltip)[data-tooltip]::after, .assistant-feedback-button:not(.od-tooltip)[data-tooltip]::after {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 7px);
  max-width: 220px;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}
.assistant-copy-button:not(.od-tooltip)[data-tooltip]:hover::after, .assistant-copy-button:not(.od-tooltip)[data-tooltip]:focus-visible::after, .assistant-feedback-button:not(.od-tooltip)[data-tooltip]:hover::after, .assistant-feedback-button:not(.od-tooltip)[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.assistant-feedback-burst {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 30px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.assistant-feedback-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: assistant-feedback-burst 620ms ease-out forwards;
}
.assistant-feedback-burst span:nth-child(2) {
  background: var(--amber);
  animation-delay: 25ms;
  --burst-angle: 58deg;
}
.assistant-feedback-burst span:nth-child(3) {
  background: var(--green);
  animation-delay: 45ms;
  --burst-angle: 116deg;
}
.assistant-feedback-burst span:nth-child(4) {
  animation-delay: 65ms;
  --burst-angle: 174deg;
}
.assistant-feedback-burst span:nth-child(5) {
  background: var(--blue);
  animation-delay: 85ms;
  --burst-angle: 232deg;
}
.assistant-feedback-burst span:nth-child(6) {
  background: var(--accent);
  animation-delay: 105ms;
  --burst-angle: 290deg;
}
@keyframes assistant-feedback-burst {
  0% {
    opacity: 0;
    transform: rotate(var(--burst-angle, 0deg)) translate(0, 0) scale(0.5);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--burst-angle, 0deg)) translate(18px, 0) scale(0.9);
  }
}
.assistant-feedback-reasons {
  width: min(340px, 100%);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.assistant-feedback-reason-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-muted);
}
.assistant-feedback-reason-emoji {
  font-size: 12px;
  line-height: 1;
}
.assistant-feedback-reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assistant-feedback-reason-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.assistant-feedback-reason-option:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.assistant-feedback-reason-option[data-selected="true"] {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent);
}
.assistant-feedback-reason-option input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--accent);
}
.assistant-feedback-custom {
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  resize: vertical;
}
.assistant-feedback-custom:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.assistant-feedback-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.assistant-feedback-submit:hover:not(:disabled) {
  background: var(--accent-hover);
}
.assistant-feedback-submit:disabled {
  opacity: 0.45;
  cursor: default;
}
.assistant-feedback-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.assistant-feedback-discord-note {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.assistant-feedback-discord-note a {
  color: #5865f2;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.assistant-feedback-discord-note a:hover {
  color: #5865f2;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #5865f2 78%, var(--text-strong));
  }
}
.unfinished-todos {
  margin-top: 10px;
  width: min(520px, 100%);
  padding: 10px 12px;
  border: 1px solid var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--amber) 8%, var(--bg-panel));
  }
  color: var(--text);
}
.unfinished-todos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.unfinished-todos-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}
.unfinished-todos-continue {
  flex: 0 0 auto;
  border: 1px solid var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border-strong));
  }
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 9px;
  cursor: pointer;
}
.unfinished-todos-continue:hover {
  background: var(--bg-subtle);
}
.unfinished-todos-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.unfinished-todos-list li + li {
  margin-top: 3px;
}
.unfinished-todos-more {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.viewer-action[data-coming-soon='true'] {
  position: relative;
  z-index: 5;
  opacity: 0.55;
  cursor: not-allowed;
}
.viewer-action[data-coming-soon='true']:hover {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.viewer-action[data-coming-soon='true']::after {
  content: 'Coming soon';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.95);
  color: white;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
  z-index: 10;
  text-transform: uppercase;
  font-weight: 600;
}
.viewer-action[data-coming-soon='true']:hover::after {
  opacity: 1;
}
.viewer-toggle[data-coming-soon='true'] {
  position: relative;
  z-index: 5;
  opacity: 0.55;
  cursor: not-allowed;
}
.viewer-toggle[data-coming-soon='true']:hover {
  background: var(--bg-subtle);
}
.viewer-toggle[data-coming-soon='true']::after {
  content: 'Coming soon';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.95);
  color: white;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
  z-index: 10;
  text-transform: uppercase;
  font-weight: 600;
}
.viewer-toggle[data-coming-soon='true']:hover::after {
  opacity: 1;
}
.viewer-action, .viewer-tab, .viewer-toggle {
  border: 1px solid transparent;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.viewer-action:hover:not(:disabled):not([data-coming-soon='true']), .viewer-tab:hover {
  border-color: var(--border);
}
.viewer-tab.active {
  border-color: var(--border);
}
.composer-row .icon-btn svg {
  display: block;
}
.composer-row .icon-btn.active {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-import {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.composer-send svg {
  display: block;
}
.composer-row .composer-icon-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
}
.deck-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
  height: 28px;
}
.deck-nav-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.chat-conv-rename-input {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  outline: none;
}
.prompt-templates-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prompt-templates-panel > .tab-panel-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  margin: 0;
  padding: 0 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.prompt-templates-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}
.prompt-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.prompt-template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.prompt-template-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.prompt-template-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  overflow: hidden;
}
.prompt-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prompt-template-thumb-fallback {
  color: var(--text-faint);
}
.prompt-template-thumb-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.prompt-template-thumb-provider {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-template-thumb-provider.is-hyperframes {
  background: linear-gradient(135deg, #ff5e3a 0%, #f0c14b 100%);
  color: #1a1410;
}
.prompt-template-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 12px;
}
.prompt-template-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.prompt-template-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.prompt-template-category {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-tint);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prompt-template-tag, .prompt-template-model {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.prompt-template-model {
  font-weight: 500;
}
.prompt-template-source {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 6px;
}
.prompt-templates-footer {
  font-size: 11px;
  color: var(--text-faint);
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  text-align: center;
}
.prompt-template-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 24px;
}
.prompt-template-modal {
  position: relative;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  max-height: min(90vh, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
}
.prompt-template-modal-head {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 56px;
  padding: 18px 66px 0 18px;
  background: var(--bg-panel);
}
.prompt-template-modal-titles {
  flex: 1;
  min-width: 0;
}
.prompt-template-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.prompt-template-modal-titles h2 {
  font-size: 17px;
  margin: 0 0 6px 0;
  color: var(--text);
}
.prompt-template-modal-titles p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.prompt-template-modal-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px 0;
}
.prompt-template-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  overflow: auto;
}
.prompt-template-modal-asset {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 360px;
}
.prompt-template-modal-asset img, .prompt-template-modal-asset video {
  max-width: 100%;
  max-height: 360px;
  display: block;
}
.prompt-template-modal-asset-image-trigger {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  max-height: 360px;
  line-height: 0;
}
.prompt-template-modal-asset-image-trigger img {
  transition: transform 200ms var(--ease-out);
}
.prompt-template-modal-asset-image-trigger:hover img, .prompt-template-modal-asset-image-trigger:focus-visible img {
  transform: scale(1.02);
}
.prompt-template-modal-asset-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.78;
  transition: opacity 120ms var(--ease-out), background 120ms var(--ease-out);
}
.prompt-template-modal-asset:hover .prompt-template-modal-asset-expand, .prompt-template-modal-asset-expand:hover, .prompt-template-modal-asset-expand:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.72);
}
.prompt-template-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(8, 9, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  cursor: zoom-out;
  animation: prompt-template-lightbox-fade 140ms ease-out;
}
@keyframes prompt-template-lightbox-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.prompt-template-lightbox-media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
  background: #000;
}
.prompt-template-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.prompt-template-lightbox-close:hover, .prompt-template-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .prompt-template-lightbox-backdrop {
    padding: 16px;
  }
  .prompt-template-lightbox-close {
    top: 12px;
    right: 12px;
  }
}
.prompt-template-modal-prompt {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
}
.prompt-template-modal-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.prompt-template-modal-prompt-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.prompt-template-modal-prompt-body {
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
}
.prompt-template-modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
}
.prompt-template-license {
  padding: 1px 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
}
.prompt-template-picker .prompt-template-avatar {
  background: var(--bg-subtle);
}
.prompt-template-picker .prompt-template-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prompt-template-picker .prompt-template-avatar.fallback {
  color: var(--text-muted);
}
.prompt-template-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prompt-template-edit-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prompt-template-edit-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.prompt-template-edit-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.prompt-template-edit-textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  resize: vertical;
}
.prompt-template-edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.prompt-template-edit-empty {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.prompt-template-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger, #c0392b);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
}
.prompt-template-error-msg {
  flex: 1;
  min-width: 0;
}
.prompt-template-error-retry {
  flex: none;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}
.pet-overlay {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  --pet-accent: var(--accent);
}
.pet-overlay > * {
  pointer-events: auto;
}
.pet-sprite {
  position: relative;
  width: 96px;
  height: 96px;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 160ms var(--ease-out);
}
.pet-sprite:hover {
  transform: translateY(-2px);
}
.pet-sprite:active {
  cursor: grabbing;
}
.pet-sprite-glyph {
  font-size: 52px;
  line-height: 1;
  animation: var(--pet-anim, pet-float) 3.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}
.pet-sprite-shadow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 64px;
  height: 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  filter: blur(4px);
  transform: translateX(-50%);
  animation: pet-shadow 3.4s ease-in-out infinite;
}
.pet-sprite-status {
  position: absolute;
  right: 8px;
  top: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--pet-accent);
  color: white;
  border: 2px solid var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
@keyframes pet-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes pet-sway {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes pet-float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}
@keyframes pet-wiggle {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes pet-shadow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.18;
  }
  50% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.12;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pet-sprite-glyph, .pet-sprite-shadow {
    animation: none !important;
  }
}
.pet-bubble {
  max-width: 240px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--pet-accent);
  border-radius: var(--radius-lg);
  padding: 10px 12px 8px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  line-height: 1.4;
  position: relative;
  animation: pet-bubble-in 200ms ease-out;
}
.pet-bubble::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-panel);
  border-right: 1px solid var(--pet-accent);
  border-bottom: 1px solid var(--pet-accent);
  transform: rotate(45deg);
}
.pet-bubble-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--pet-accent);
  margin-bottom: 2px;
}
.pet-bubble-line {
  color: var(--text);
}
.pet-idle-quote {
  margin: 0;
  display: grid;
  gap: 5px;
}
.pet-idle-quote blockquote {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}
.pet-idle-quote figcaption {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}
.pet-idle-quote figcaption::before {
  content: '— ';
}
.pet-task-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.pet-task-group {
  display: grid;
  gap: 5px;
}
.pet-task-group-title {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pet-task-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pet-task-item:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}
.pet-task-item--static {
  cursor: default;
}
.pet-task-item--static:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.pet-task-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--pet-accent);
  box-shadow: 0 0 0 3px var(--pet-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pet-accent) 18%, transparent);
  }
}
.pet-task-dot[data-pet-task-status="queued"] {
  opacity: 0.62;
}
.pet-task-dot[data-pet-task-status="succeeded"] {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  }
}
.pet-task-dot[data-pet-task-status="failed"] {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
  }
}
.pet-task-dot[data-pet-task-status="canceled"] {
  background: var(--text-faint);
  box-shadow: 0 0 0 3px var(--text-faint);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-faint) 18%, transparent);
  }
}
.pet-task-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
}
.pet-task-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
}
.pet-bubble-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pet-bubble-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
}
.pet-bubble-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}
body.desktop-pet-shell {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: transparent;
}
body.desktop-pet-shell .pet-overlay {
  right: 18px !important;
  bottom: 18px !important;
}
body.desktop-pet-shell .pet-bubble, body.desktop-pet-shell .pet-sprite {
  -webkit-app-region: drag;
}
body.desktop-pet-shell .pet-task-item {
  -webkit-app-region: no-drag;
}
@keyframes pet-bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.pet-pill {
  position: relative;
  height: 24px;
  padding: 0;
  gap: 0;
  cursor: default;
}
.pet-pill .pet-pill-glyph {
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  justify-content: center;
}
.pet-pill > .pet-pill-main, .pet-pill > .pet-pill-toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 7px;
}
.pet-pill > .pet-pill-main {
  gap: 5px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.pet-pill > .pet-pill-toggle {
  justify-content: center;
  padding: 0 7px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  color: var(--text-muted);
}
.pet-pill > .pet-pill-main:hover, .pet-pill > .pet-pill-toggle:hover {
  background: var(--bg-panel);
  color: var(--text);
}
.pet-pill-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  background: var(--border);
}
.pet-pill-fresh {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-tint);
}
.pet-pill-fresh > .pet-pill-divider {
  background: var(--accent);
  opacity: 0.35;
}
.pet-pill-fresh:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pet-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
  margin-left: 2px;
}
.pet-wake-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pet-source-head {
  margin-top: 14px;
  display: grid;
  gap: 4px;
}
.pet-source-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.pet-source-head .hint {
  margin: 0;
}
.pet-action-status {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  }
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.35;
}
.pet-action-status span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pet-current-summary {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.pet-current-summary__sprite {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pet-accent, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent, var(--accent)) 12%, transparent);
  }
  border: 1px solid var(--pet-accent, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--pet-accent, var(--accent)) 30%, var(--border));
  }
}
.pet-current-summary__copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pet-current-summary__label {
  color: var(--text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pet-current-summary__copy strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-current-summary__copy span:last-child {
  min-width: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-btn.small {
  padding: 4px 10px !important;
  font-size: 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
}
.seg-btn.small.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border-color: var(--accent);
}
.seg-btn.small[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.pet-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pet-tabs-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pet-tabs-top-row .subtab-pill {
  flex: 0 0 auto;
}
.pet-tabs-hint {
  margin: 0;
}
.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.pet-community {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.pet-community .pet-codex, .pet-community .pet-hatch {
  margin-top: 0;
}
.pet-tabs + .pet-custom, .pet-tabs + div + .pet-custom {
  margin-top: 4px;
}
.pet-codex-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.pet-card {
  --pet-accent: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: border-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.pet-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.pet-card.active {
  border-color: var(--pet-accent);
  box-shadow: 0 0 0 1px var(--pet-accent) inset;
  background: var(--bg-panel);
}
.pet-card-glyph {
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pet-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent) 14%, transparent);
  }
}
.pet-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.pet-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
}
.pet-card-flavor {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pet-card-cta, .pet-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pet-card-badge {
  background: var(--pet-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent) 16%, transparent);
  }
  border-color: var(--pet-accent);
  color: var(--pet-accent);
}
.pet-custom {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pet-custom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pet-custom-head h4 {
  margin: 0 0 4px;
  font-size: 13px;
}
.pet-custom-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pet-custom-sprite {
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pet-accent, var(--accent));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent, var(--accent)) 14%, transparent);
  }
}
.pet-custom-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--text);
  min-width: 0;
}
.pet-custom-bubble strong {
  color: var(--pet-accent, var(--accent));
}
.pet-custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.pet-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pet-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.pet-swatch.active {
  border-color: var(--text-strong);
}
.pet-swatch-picker {
  width: 22px;
  height: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.welcome-pet-teaser {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  width: 100%;
}
.welcome-pet-teaser:hover {
  filter: brightness(1.02);
}
.welcome-pet-glyph {
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.welcome-pet-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.welcome-pet-copy strong {
  font-size: 12.5px;
  color: var(--text-strong);
}
.welcome-pet-copy span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.welcome-pet-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
}
.composer-pet-wrap {
  position: relative;
  display: inline-flex;
}
.composer-pet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.composer-pet:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}
.composer-pet.adopted {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-tint);
}
.composer-pet-glyph {
  font-size: 14px;
  line-height: 1;
}
.composer-pet-label {
  font-weight: 500;
}
.composer-pet-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-pet-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.composer-pet-menu-head strong {
  font-size: 12px;
  color: var(--text-strong);
}
.composer-pet-menu-head span {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.composer-pet-menu-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.composer-pet-menu-row:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-pet-menu-row.toggle {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.composer-pet-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.composer-pet-menu-pet {
  --pet-accent: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--text-muted);
}
.composer-pet-menu-pet:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.composer-pet-menu-pet.active {
  border-color: var(--pet-accent);
  background: var(--pet-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent) 12%, transparent);
  }
  color: var(--text);
}
.composer-pet-menu-pet span:first-child {
  font-size: 18px;
  line-height: 1;
}
.composer-pet-menu-row.settings {
  border-top: 1px solid var(--border-soft);
  margin-top: 2px;
  padding-top: 8px;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.composer-tools-wrap {
  position: relative;
  display: inline-flex;
}
.composer-design-toolbox-wrap {
  position: relative;
  display: inline-flex;
}
.composer-plus-wrap {
  position: relative;
  display: inline-flex;
}
.composer-plus-trigger {
  position: relative;
}
.composer-plus-trigger.active {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-plus-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 184px;
  padding: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-plus-submenu-row {
  position: relative;
}
.composer-plus-item {
  appearance: none;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.composer-plus-item:hover:not(:disabled), .composer-plus-item:focus-visible, .composer-plus-item.is-open {
  outline: none;
  background: var(--bg-subtle);
}
.composer-plus-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.composer-plus-item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-plus-item-icon {
  flex: 0 0 auto;
  opacity: 0.8;
}
.composer-plus-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0.55;
}
.composer-plus-flyout.composer-design-toolbox-menu {
  bottom: auto;
  top: 0;
  left: calc(100% + 6px);
}
.composer-tools-trigger {
  position: relative;
}
.composer-toolbox-trigger {
  position: relative;
}
.composer-tools-at {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  color: currentColor;
  transform: translateY(-0.5px);
}
.composer-tools-trigger.active {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-toolbox-trigger.active {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-subtle));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  }
  color: var(--text);
}
.composer-tools-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.composer-design-toolbox-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: min(430px, calc(100vh - 120px));
  overflow-y: auto;
}
.composer-design-toolbox-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 2px;
}
.composer-design-toolbox-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}
.composer-design-toolbox-row {
  align-items: flex-start;
  gap: 9px;
}
.composer-design-toolbox-row .composer-tools-row-body {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.composer-design-toolbox-row .composer-tools-row-body strong {
  line-height: 1.25;
}
.composer-design-toolbox-row .composer-tools-row-meta {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.composer-design-toolbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  color: var(--text);
}
.composer-design-toolbox-skill {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
}
.composer-design-toolbox-badge {
  flex: 0 0 auto;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
}
.composer-tools-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.composer-tools-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 6px;
  font-size: 11.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.composer-tools-tab:hover {
  color: var(--text);
}
.composer-tools-tab.active {
  background: var(--bg-panel);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.composer-tools-tab-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}
.composer-tools-tab > svg, [role='tab'] > svg {
  display: block;
  flex: none;
  align-self: center;
}
.composer-tools-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.composer-tools-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 6px;
}
.composer-tools-segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.composer-tools-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  min-width: 0;
}
.composer-tools-segment:hover {
  color: var(--text);
  border-color: var(--border);
}
.composer-tools-segment.active {
  background: var(--bg-panel);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.composer-tools-segment {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-tools-search {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
}
.composer-tools-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.composer-tools-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.composer-tools-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-tools-section-label {
  padding: 4px 6px 2px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.composer-tools-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  width: 100%;
}
.composer-tools-row:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-tools-row.active {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.composer-tools-row-body {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.composer-tools-row-body strong {
  font-weight: 500;
  font-size: 12px;
}
.composer-tools-row-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: lowercase;
}
.composer-tools-row--plugin {
  padding: 0;
  gap: 0;
}
.composer-tools-row--plugin .composer-tools-row-body {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.composer-tools-row--plugin .composer-tools-row-meta {
  text-transform: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.composer-tools-row-main {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
  min-width: 0;
}
.composer-tools-row-main:hover {
  background: var(--bg-subtle);
}
.composer-tools-row-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.composer-tools-row-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.composer-tools-row-side:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.composer-tools-row-pending {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-left: auto;
}
.composer-tools-row-action {
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 8px;
  color: var(--text-muted);
}
.composer-tools-row-action:hover {
  color: var(--text);
}
.composer-tools-row-toggle {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.composer-tools-pet {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer-tools-pet-head {
  padding: 0 4px 4px;
}
.composer-tools-pet-head .hint {
  font-size: 11px;
  color: var(--text-muted);
}
.composer-tools-pet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 0 2px;
}
.composer-tools-pet-item {
  --pet-accent: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 10.5px;
  cursor: pointer;
}
.composer-tools-pet-item:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.composer-tools-pet-item.active {
  border-color: var(--pet-accent);
  background: var(--pet-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--pet-accent) 12%, transparent);
  }
  color: var(--text);
}
.composer-tools-pet-item span:first-child {
  font-size: 18px;
  line-height: 1;
}
.composer-tools-settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 100%;
}
.composer-tools-settings:hover {
  background: var(--bg-subtle);
}
.composer-ds-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
  max-height: 360px;
}
.composer-ds-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 4px;
}
.composer-ds-picker-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11.5px;
}
.composer-ds-picker-back:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-ds-picker-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.composer-ds-picker-search {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.composer-ds-picker-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.composer-ds-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 2px;
}
.composer-ds-picker-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-ds-picker-group-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 4px 2px;
}
.composer-ds-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.composer-ds-picker-item:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.composer-ds-picker-item:disabled {
  cursor: default;
  opacity: 0.65;
}
.composer-ds-picker-item.current {
  background: var(--bg-subtle);
}
.composer-ds-picker-item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.composer-ds-picker-item-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.composer-ds-picker-item-summary {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-ds-picker-item-swatches {
  display: inline-grid;
  grid-template-columns: repeat(2, 6px);
  grid-template-rows: repeat(2, 6px);
  gap: 1px;
  border-radius: 3px;
  overflow: hidden;
}
.composer-ds-picker-swatch {
  width: 6px;
  height: 6px;
}
.composer-ds-picker-current-tag {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
}
.composer-ds-picker-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.pet-image {
  display: inline-block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.pet-image.static {
  background-size: contain;
  background-position: center;
}
@keyframes pet-frames {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}
.pet-image.atlas {
  background-repeat: no-repeat;
  transition: background-position-y 220ms var(--ease-out);
}
@keyframes pet-atlas-frames {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: var(--pet-atlas-end-x, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pet-image.frames, .pet-image.atlas {
    animation: none !important;
    background-position-x: 0% !important;
  }
}
.pet-image-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pet-image-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.seg-btn.small.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.seg-btn.small.ghost:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.pet-image-error {
  color: var(--red) !important;
}
.pet-image-frames {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.pet-image-frames .field input {
  width: 100%;
}
.pet-custom-sprite {
  overflow: hidden;
}
.pet-atlas-preview {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  gap: 12px;
}
.pet-atlas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pet-atlas-head strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pet-atlas-thumb {
  width: 100%;
  aspect-ratio: 1536 / 1872;
  max-height: 240px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: var(--surface-2, #f6f4ee);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  image-rendering: pixelated;
}
.pet-atlas-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
}
.pet-atlas-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.pet-atlas-row:hover {
  border-color: var(--accent);
}
.pet-atlas-row.active {
  border-color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.pet-atlas-row[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.pet-atlas-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pet-atlas-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.pet-atlas-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.pet-hatch {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
  display: grid;
  gap: 10px;
}
.pet-hatch-head h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
}
.pet-hatch-prompt {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.pet-hatch-actions {
  display: flex;
  gap: 8px;
}
.pet-hatch-foot {
  margin: 0;
}
.pet-codex {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  gap: 10px;
}
.pet-codex-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pet-codex-head h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
}
.pet-codex-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pet-codex-empty {
  margin: 4px 0 0 0;
}
.pet-codex-sync-status {
  margin: 6px 0 8px 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.pet-codex-sync-status.error {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-subtle));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  color: var(--text-strong);
}
.pet-codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.pet-codex-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.pet-codex-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--surface-2, #f6f4ee);
  background-image: var(--pet-codex-src);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 800% 900%;
  image-rendering: pixelated;
}
.pet-codex-thumb-preview {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 128px;
  height: 139px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--surface-2, #f6f4ee);
  background-image: var(--pet-codex-src);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 800% 900%;
  image-rendering: pixelated;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.82);
  transform-origin: 50% 100%;
  transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out);
  z-index: 20;
}
.pet-codex-card:hover .pet-codex-thumb-preview, .pet-codex-card:focus-within .pet-codex-thumb-preview {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: pet-codex-preview-col 0.6s steps(8, jump-none) infinite, pet-codex-preview-row 5.4s steps(9, jump-none) infinite;
}
@keyframes pet-codex-preview-col {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}
@keyframes pet-codex-preview-row {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pet-codex-card:hover .pet-codex-thumb-preview, .pet-codex-card:focus-within .pet-codex-thumb-preview {
    animation: none;
    background-position: 0% 0%;
  }
}
.pet-codex-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 8px;
}
.pet-codex-title-row {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pet-codex-meta strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-codex-default-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  color: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.4;
}
.pet-codex-description {
  font-size: 11px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pet-codex-adopt-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.pet-codex-adopt-btn:not(.active) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out);
}
.pet-codex-card:hover .pet-codex-adopt-btn:not(.active), .pet-codex-card:focus-within .pet-codex-adopt-btn:not(.active) {
  opacity: 1;
  pointer-events: auto;
}
.slash-popover {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: var(--cfl-max-h, 320px);
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 5px;
}
.slash-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px 7px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.slash-popover-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.slash-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-height: 34px;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.slash-item:hover {
  background: var(--bg-subtle);
}
.slash-item.active, .slash-item[aria-selected='true'] {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.slash-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.slash-item-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.slash-item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.slash-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  background: transparent;
  padding: 0;
}
.slash-item-arg {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.slash-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
:lang(zh), :lang(zh-CN), :lang(zh-TW), :lang(ja), :lang(ko) {
  --sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[dir="rtl"] {
  --sans: "Cairo", "Inter", "Vazirmatn", "Noto Sans Arabic", "Segoe UI Arabic", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[dir="rtl"] .prose, [dir="rtl"] .chat-message, [dir="rtl"] .msg .user-text {
  line-height: 1.7;
}
[dir="rtl"] .avatar-item, [dir="rtl"] .settings-tab, [dir="rtl"] .ds-item-name {
  text-align: right;
}
[dir="rtl"] .app-chrome-back svg, [dir="rtl"] .back-btn svg, [dir="rtl"] .icon-btn svg[data-lucide="chevron-left"], [dir="rtl"] .icon-btn svg[data-lucide="chevron-right"], [dir="rtl"] .icon-btn svg[data-lucide="arrow-left"], [dir="rtl"] .icon-btn svg[data-lucide="arrow-right"], [dir="rtl"] .newproj-tabs-arrow svg, [dir="rtl"] .icon-only svg[data-lucide="chevron-left"], [dir="rtl"] .icon-only svg[data-lucide="chevron-right"], [dir="rtl"] .icon-only svg[data-lucide="arrow-left"], [dir="rtl"] .icon-only svg[data-lucide="arrow-right"], [dir="rtl"] .welcome-pet-teaser svg {
  transform: scaleX(-1);
}
[dir="rtl"] .title, [dir="rtl"] .meta {
  text-align: right;
}
.qs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 12, 10, 0.32);
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.qs-palette {
  width: min(560px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}
.qs-input {
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.qs-input::placeholder {
  color: var(--text-faint);
}
.qs-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 0;
}
.qs-empty {
  padding: 20px 16px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}
.qs-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.qs-row-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.qs-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-path {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.qs-kind {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.qs-row-active .qs-kind {
  color: var(--accent-strong);
}
.qs-footer {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-muted);
}
.qs-footer kbd {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 2px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.library-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.library-toolbar.skills-toolbar {
  flex-direction: column;
  gap: 10px;
}
.skills-toolbar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skills-toolbar-top .library-search {
  flex: 1 1 0;
  min-width: 0;
}
.library-toolbar.is-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.library-toolbar.is-row .library-filters {
  flex: 1;
  min-width: 0;
}
.library-toolbar-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.library-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--bg-panel);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-xs);
  cursor: text;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms var(--ease-out);
}
.library-search:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.library-search:focus {
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft), var(--shadow-xs);
}
.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.library-filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.library-filter-select {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
.library-filter-select-label {
  font-weight: 500;
  flex: 0 0 auto;
}
.library-filter-select select {
  padding: 5px 28px 5px 10px;
  font-size: 12px;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-width: 100px;
  max-width: 180px;
  cursor: pointer;
}
.library-toolbar.library-toolbar-row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.library-toolbar.library-toolbar-row .library-search {
  flex: 1 1 0;
  min-width: 0;
}
.library-toolbar.library-toolbar-row .library-filter-select {
  flex: 0 0 auto;
}
.library-toolbar.library-toolbar-row .library-filter-select select {
  min-height: 36px;
}
.library-filter-select select:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.library-filter-select select[data-active='true'] {
  border-color: var(--text);
  background-color: var(--bg-subtle);
  color: var(--text);
  font-weight: 500;
}
.library-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.library-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.library-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.library-group-count {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.6;
}
.library-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.library-card .library-card-action {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.library-card.disabled {
  opacity: 0.45;
}
.library-card-info {
  flex: 1;
  min-width: 0;
}
.library-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.library-card-name {
  font-size: 14px;
  font-weight: 600;
}
.library-card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}
.library-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-card-expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.library-card-expand:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.library-card-badge-user {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 16%, var(--bg-subtle));
  }
  color: var(--text);
}
.library-card-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: var(--radius-xs);
}
.library-card-delete:hover {
  background: color-mix(in oklab, #ef4444 18%, transparent);
  color: #ef4444;
}
.library-import-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.library-import-form {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  display: grid;
  gap: 10px;
}
.library-import-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.library-import-row label, .library-import-block {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.library-import-row input, .library-import-block input, .library-import-block textarea {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 9px;
  font-family: inherit;
  resize: vertical;
}
.library-import-block textarea {
  min-height: 60px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.library-import-error {
  color: #ef4444;
  font-size: 12px;
}
.library-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.library-ds-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 10px;
  gap: 10px;
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.library-ds-card.disabled {
  opacity: 0.45;
}
.library-ds-card.highlighted {
  border-color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.library-ds-card-content {
  min-width: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.library-ds-card-content:hover {
  background: var(--bg-hover);
}
.library-ds-card-content:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--selected-soft);
  background: var(--bg-hover);
}
.library-ds-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.library-ds-card-content:hover .library-ds-edit, .library-ds-edit:focus-visible {
  opacity: 1;
}
.library-ds-edit:hover {
  color: var(--text);
  background: var(--bg-muted);
}
.library-ds-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.library-ds-swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(128, 128, 128, 0.2);
}
.library-ds-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.library-ds-summary {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-ds-toggle-cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10px;
  border-left: 1px solid var(--border-subtle);
  cursor: default;
}
.library-ds-toggle-cell .toggle-switch {
  margin-top: 1px;
}
.library-preview {
  width: 100%;
  padding: 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.library-preview-body {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  color: var(--text-muted);
}
.library-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 28px 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.library-empty-title {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
.library-empty-hint {
  margin: 0;
  font-size: 12px;
  max-width: 420px;
  line-height: 1.5;
}
.library-empty-hint code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xs);
}
.memory-disabled-banner {
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(255, 159, 64, 0.12);
  color: var(--text-muted, #b06a00);
  border: 1px solid rgba(255, 159, 64, 0.32);
  font-size: 12px;
  margin: 8px 0 12px;
}
.memory-noprovider-banner {
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(220, 53, 69, 0.10);
  color: var(--text-danger, #b02a37);
  border: 1px solid rgba(220, 53, 69, 0.32);
  font-size: 12px;
  margin: 8px 0 12px;
}
.memory-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.memory-source-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.memory-source-tabs button:hover {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text);
}
.memory-source-tabs button.active {
  background: var(--bg-panel);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 26%, var(--border-strong));
  }
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent), var(--shadow-xs);
  }
}
.memory-source-tab-icon, .memory-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.memory-source-tabs button.active .memory-source-tab-icon, .memory-block-icon {
  color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 10%, var(--bg-panel));
  }
}
.memory-source-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.memory-source-tab-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.memory-source-tab-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.memory-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}
.memory-management-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.memory-records-section .memory-management-panel {
  gap: 14px;
  padding-top: 0;
  border-top: 0;
}
.memory-records-section .memory-subsection-head {
  align-items: center;
  padding-top: 0;
}
.memory-records-section .memory-subsection-head h4 {
  font-size: 14px;
}
.memory-records-section .memory-subsection-head .hint {
  max-width: 560px;
}
.memory-records-section .memory-source-badge {
  min-height: 28px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--bg-subtle) 74%, var(--bg-panel));
  }
}
.memory-records-section .library-toolbar.is-row {
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.memory-management-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.memory-management-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.memory-clear-extractions, .memory-refresh-extractions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.memory-unified-list {
  gap: 14px;
  padding-top: 2px;
}
.memory-extraction-card {
  align-items: flex-start;
  background: var(--bg-panel);
}
.memory-records-section .library-group {
  gap: 7px;
}
.memory-records-section .library-group-title {
  display: grid;
  grid-template-columns: auto auto minmax(24px, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 0 1px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
}
.memory-records-section .library-group-title::after {
  content: '';
  height: 1px;
  background: var(--border-soft);
}
.memory-records-section .library-group-count {
  font-size: 11px;
}
.memory-records-section .library-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px 10px 14px;
  border-color: var(--border-soft);
  background: var(--bg-panel);
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.memory-records-section .library-card:hover {
  border-color: var(--border);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--bg-panel) 76%, var(--bg-subtle));
  }
}
.memory-records-section .library-card-info {
  display: grid;
  gap: 4px;
}
.memory-records-section .library-card-title-row {
  gap: 7px;
  margin-bottom: 0;
  min-width: 0;
}
.memory-records-section .library-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}
.memory-records-section .library-card-badge {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-records-section .library-card-desc {
  -webkit-line-clamp: 1;
  font-size: 12px;
  line-height: 1.35;
}
.memory-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  justify-self: end;
}
.memory-tree-child-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.memory-records-section .library-card-expand, .memory-records-section .library-card .library-card-action {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.memory-records-section .library-card-expand:hover, .memory-records-section .library-card .library-card-action:hover {
  border-color: var(--border);
  background: var(--bg-subtle);
}
.memory-records-section .library-preview {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.memory-records-section .memory-extraction-card {
  grid-template-columns: minmax(0, 1fr) 30px;
}
.memory-extraction-card.is-running {
  border-color: rgba(64, 137, 255, 0.28);
}
.memory-extraction-card.is-success {
  border-color: rgba(34, 139, 90, 0.24);
}
.memory-extraction-card.is-failed {
  border-color: rgba(220, 53, 69, 0.22);
}
.memory-extraction-card .library-card-title-row {
  flex-wrap: wrap;
}
.memory-extraction-card .memory-extraction-counts {
  margin-top: 6px;
}
.memory-manual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.75fr);
  gap: 12px;
}
.memory-field-block, .memory-action-block, .memory-source-summary {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.memory-field-block {
  padding: 12px;
}
.memory-action-block, .memory-source-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.memory-action-block {
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg-subtle);
}
.memory-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
}
.memory-block-head h4, .memory-source-summary h4, .memory-subsection-head h4 {
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.3;
}
.memory-block-head .hint, .memory-source-summary .hint, .memory-subsection-head .hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.memory-global-rules-input {
  min-height: 78px;
  margin-top: 10px;
  resize: vertical;
}
.instructions-rules-card .memory-block-head {
  grid-template-columns: minmax(0, 1fr);
}
.instructions-rules-card {
  padding: 0;
  border: 0;
  background: transparent;
}
.memory-source-summary > div {
  flex: 1;
  min-width: 0;
}
.memory-connected-summary {
  background: linear-gradient( 180deg, var(--bg-panel), var(--bg-panel) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in oklab, var(--bg-panel) 92%, var(--accent) 8%), var(--bg-panel) );
  }
}
.memory-subsection-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.memory-source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.memory-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.memory-source-toggle:has(input:checked) {
  color: var(--text);
}
.memory-source-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
.memory-chat-learning-toggle, .modal label.memory-chat-learning-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
}
.memory-chat-learning-toggle:has(input:checked) {
  color: var(--text);
}
.memory-chat-learning-toggle > span:first-child {
  min-width: 20px;
  text-align: right;
}
.memory-source-action {
  justify-content: center;
  min-width: 136px;
  white-space: nowrap;
}
.memory-connector-workbench {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.memory-connector-picker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.memory-connector-picker-head h4 {
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.3;
}
.memory-connector-picker-head .hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.memory-connector-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 7px;
  overflow: visible;
}
.memory-connector-row, .modal label.memory-connector-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}
.memory-connector-row.is-selected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border-soft));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 4%, var(--bg-panel));
  }
}
.memory-connector-row.is-disabled {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--bg-subtle) 76%, var(--bg-panel));
  }
  color: var(--text-muted);
  cursor: default;
}
.memory-connector-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.memory-connector-row:has(.memory-connector-input:focus-visible) {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  }
  outline-offset: 2px;
}
.memory-connector-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.memory-connector-brand .connector-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
}
.memory-connector-brand .connector-logo-img {
  padding: 4px;
}
.memory-connector-row.is-disabled .memory-connector-brand .connector-logo {
  filter: saturate(0.7);
  opacity: 0.68;
}
.memory-connector-selected-mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--bg-panel);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.memory-connector-brand.is-selected .memory-connector-selected-mark {
  opacity: 1;
  transform: scale(1);
}
.memory-connector-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.memory-connector-row:not(.is-disabled):hover .memory-connector-picker {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  }
  color: var(--text);
}
.memory-connector-picker.is-selected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 34%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 9%, var(--bg-panel));
  }
  color: var(--accent);
}
.memory-connector-picker-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
}
.memory-connector-picker.is-selected .memory-connector-picker-box {
  background: var(--accent);
  color: white;
}
.memory-connector-connect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border-soft));
  }
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-panel));
  }
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.memory-connector-connect-button:hover:not(:disabled) {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 12%, var(--bg-panel));
  }
  color: var(--accent);
}
.memory-connector-connect-button:disabled {
  border-color: var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: default;
}
.memory-connector-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.memory-connector-check input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.memory-connector-check > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--accent);
}
.memory-connector-row.is-disabled .memory-connector-check > span {
  background: var(--bg-muted);
  color: var(--text-muted);
}
.memory-connector-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.memory-connector-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
}
.memory-connector-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}
.memory-connector-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.memory-connector-state.is-connected {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 12%, var(--bg-panel));
  }
  color: var(--accent);
}
.memory-connector-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.memory-connector-runbar {
  width: 100%;
  justify-content: space-between;
  padding-top: 2px;
}
.memory-connector-runbar .hint {
  flex: 1 1 auto;
  min-width: 0;
}
.memory-connector-runbar .memory-source-action {
  margin-left: auto;
}
.memory-connector-actions .primary:disabled {
  border-color: var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-muted);
  box-shadow: none;
}
.memory-connector-result {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
}
.memory-connector-result.is-success {
  border: 1px solid rgba(34, 139, 90, 0.24);
  background: rgba(34, 139, 90, 0.08);
  color: var(--text);
}
.memory-connector-result.is-error {
  border: 1px solid rgba(220, 53, 69, 0.24);
  background: rgba(220, 53, 69, 0.08);
  color: var(--text-danger, #b02a37);
}
.memory-connector-run-history {
  display: grid;
  gap: 7px;
}
.memory-connector-run-history .memory-extraction-card {
  padding: 11px 12px;
  border-color: var(--border-soft);
  background: var(--bg-panel);
}
.memory-connector-run-history .memory-extraction-card.is-success {
  border-color: rgba(34, 139, 90, 0.18);
}
.memory-connector-run-history .memory-extraction-card.is-failed {
  border-color: rgba(220, 53, 69, 0.18);
}
.memory-connector-diagnostics {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.memory-connector-diagnostics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
}
.memory-connector-diagnostics-head span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.memory-connector-diagnostics-list {
  display: grid;
  gap: 6px;
}
.memory-connector-diagnostic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  min-height: 32px;
  padding: 7px 9px;
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.memory-connector-diagnostic-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
}
.memory-connector-diagnostic-row.is-succeeded .memory-connector-diagnostic-dot {
  background: #228b5a;
}
.memory-connector-diagnostic-row.is-failed .memory-connector-diagnostic-dot {
  background: #dc3545;
}
.memory-connector-diagnostic-row.is-skipped .memory-connector-diagnostic-dot {
  background: #9aa3ad;
}
.memory-connector-diagnostic-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.memory-connector-diagnostic-copy strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.memory-connector-diagnostic-copy small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-suggestion-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 5%, var(--bg-panel));
  }
}
.memory-scan-history {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.memory-scan-history summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px 0 28px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.memory-scan-history summary::-webkit-details-marker {
  display: none;
}
.memory-scan-history summary::before {
  content: '›';
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  transform: rotate(0deg);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.memory-scan-history[open] summary::before {
  transform: rotate(90deg);
}
.memory-scan-history summary span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.memory-scan-history summary span:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
}
.memory-scan-history .memory-connector-run-history {
  padding: 0 12px 12px;
}
.memory-suggestion-list {
  display: grid;
  gap: 8px;
}
.memory-suggestion-card, .modal label.memory-suggestion-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}
.memory-suggestion-card.is-selected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--accent) 34%, var(--border-soft));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 7%, var(--bg-panel));
  }
}
.memory-suggestion-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.memory-suggestion-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.memory-suggestion-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
}
.memory-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.memory-suggestion-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
.memory-suggestion-body {
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .memory-source-tabs, .memory-manual-grid {
    grid-template-columns: 1fr;
  }
  .memory-source-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .memory-subsection-head, .memory-management-counts, .memory-management-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .memory-source-action {
    width: 100%;
  }
  .memory-suggestion-card, .modal label.memory-suggestion-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .memory-suggestion-card .memory-connector-state {
    grid-column: 2;
    width: fit-content;
  }
  .memory-connector-row, .modal label.memory-connector-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .memory-connector-picker, .memory-connector-connect-button, .memory-connector-state {
    grid-column: 2;
    width: fit-content;
  }
  .memory-records-section .library-card, .memory-tree-child-row {
    grid-template-columns: 1fr;
  }
  .memory-card-actions {
    width: 100%;
  }
}
.memory-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.memory-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.memory-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.memory-info-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.memory-path-copied-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--success-fg, #16a34a);
  background: var(--success-bg, #dcfce7);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  animation: memory-badge-in 160ms var(--ease-out);
  white-space: nowrap;
}
@keyframes memory-badge-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.memory-collapsible-card {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  margin-top: 0;
}
.memory-advanced-section {
  gap: 0;
}
.memory-advanced-section .memory-advanced {
  margin: 0;
}
.memory-advanced-hint {
  margin: 2px 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.memory-advanced-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memory-advanced-card {
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.memory-details-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.memory-details-summary::-webkit-details-marker {
  display: none;
}
.memory-details-summary::before {
  content: '▸';
  flex: 0 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  transition: transform 120ms var(--ease-out), color 120ms var(--ease-out);
}
.library-group[open] > .memory-details-summary::before {
  transform: rotate(90deg);
}
.memory-details-summary:hover::before, .memory-details-summary:focus-visible::before {
  color: var(--text);
}
.memory-details-summary:focus-visible {
  outline: 2px solid var(--accent, #00946f);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.memory-details-title {
  min-width: 0;
}
.memory-extraction-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: var(--surface-strong, rgba(0, 0, 0, 0.06));
  color: var(--text-muted, #888);
}
.memory-extraction-pill.is-running {
  background: rgba(64, 137, 255, 0.16);
  color: #2864d6;
}
.memory-extraction-pill.is-success {
  background: rgba(34, 139, 90, 0.16);
  color: #1f7a4d;
}
.memory-extraction-pill.is-skipped {
  background: rgba(150, 150, 150, 0.16);
  color: var(--text-muted, #888);
}
.memory-extraction-pill.is-failed {
  background: rgba(220, 53, 69, 0.14);
  color: #b02a37;
}
.memory-extraction-reason {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-style: italic;
}
.memory-extraction-failure {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(220, 53, 69, 0.06);
  color: var(--text-muted, #888);
  font-size: 12px;
  line-height: 1.35;
}
.memory-extraction-failure strong {
  color: var(--text);
  font-size: 12px;
}
.memory-extraction-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #888);
}
.memory-extraction-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.memory-flash-pill {
  align-self: flex-end;
  margin: 4px 0 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(34, 139, 90, 0.12);
  color: var(--text-success, #1f7a4d);
  border: 1px solid rgba(34, 139, 90, 0.32);
  font-size: 12px;
  font-weight: 500;
}
.library-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.library-install-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.library-install-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  border: none;
  background: transparent;
}
.library-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}
.library-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.library-section-count {
  margin-left: 6px;
  color: var(--text-muted);
  font-weight: 500;
}
.library-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.library-add-btn[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.library-add-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  color: currentColor;
  font-size: 13px;
  line-height: 1;
}
.library-hidden-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: -2px 0 10px;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
}
.library-hidden-banner-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.library-hidden-banner-link:hover {
  text-decoration: underline;
}
.library-add-panel .library-install-form {
  padding: 12px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
}
.library-import-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.library-install-form .library-import-source-control, .library-install-form .library-import-mode-control {
  width: fit-content;
  min-height: 30px;
  padding: 2px;
  border-radius: var(--radius);
}
.library-install-form .library-import-source-control {
  grid-template-columns: repeat(2, auto);
}
.library-install-form .library-import-mode-control {
  grid-template-columns: repeat(3, auto);
}
.library-install-form .library-import-source-control button, .library-install-form .library-import-mode-control button {
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.library-install-form .library-import-source-control button.active, .library-install-form .library-import-mode-control button.active {
  border-color: var(--border-subtle);
  background: var(--bg-panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.library-import-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.library-import-option-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.library-import-mode-control {
  --seg-cols: 3;
}
.library-import-checkboxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 30px;
}
.library-import-checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.library-import-checkbox input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
}
.library-install-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.library-import-input {
  flex: 1;
  min-width: 0;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.library-import-input:hover {
  border-color: var(--border-strong);
}
.library-import-input:focus {
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.library-install-submit {
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.library-install-submit:disabled {
  border-color: var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-muted);
  opacity: 1;
  cursor: not-allowed;
}
.library-install-error {
  color: #e55;
  font-size: 12px;
  margin: 0;
}
.library-install-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  margin: 0;
}
.library-install-status-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.library-install-status-link:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .library-import-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .library-import-row, .library-install-row {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }
  .library-install-form .library-import-source-control, .library-install-form .library-import-mode-control {
    width: 100%;
  }
  .library-install-form .library-import-source-control button, .library-install-form .library-import-mode-control button {
    flex: 1 1 0;
  }
  .library-install-submit {
    width: 100%;
  }
}
.library-source-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.library-source-badge.installed {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--accent);
}
.library-uninstall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.library-uninstall-btn:hover {
  background: color-mix(in srgb, #e55 12%, transparent);
  color: #e55;
}
.library-ds-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
}
.library-ds-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  border-radius: 20px;
  transition: background-color 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
.toggle-switch-sm {
  width: 30px;
  height: 17px;
}
.toggle-switch-sm .toggle-slider::before {
  height: 11px;
  width: 11px;
}
.toggle-switch-sm input:checked + .toggle-slider::before {
  transform: translateX(13px);
}
.manual-edit-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.manual-edit-workspace > .manual-edit-right {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 320px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  z-index: 30;
}
.manual-edit-workspace > .manual-edit-right.manual-edit-floating {
  right: auto;
  bottom: auto;
  overflow: visible;
  pointer-events: auto;
}
.manual-edit-workspace > .manual-edit-right.manual-edit-page-card {
  right: 12px;
  height: auto;
  max-height: calc(100% - 24px);
}
.manual-edit-page-card .manual-edit-modal.cc-panel {
  height: auto;
}
.manual-edit-workspace > .manual-edit-hover-action {
  position: absolute;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #2563eb 55%, transparent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: #2563eb;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: scale(0.9);
  animation: manual-edit-hover-action-in 160ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: auto;
}
.manual-edit-workspace > .manual-edit-hover-action:hover {
  background: #2563eb;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #2563eb 12%, var(--bg-panel));
  }
}
@keyframes manual-edit-hover-action-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.cc-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  overflow: hidden;
  background: var(--bg-panel);
}
.cc-inspector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 12px;
}
.cc-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-section-inactive {
  opacity: 0.58;
}
.cc-section-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 0 2px;
}
.cc-section-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-section-hint {
  margin: -1px 0 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.cc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cc-row {
  display: flex;
  align-items: center;
  background: var(--manual-edit-field-bg);
  border: 1px solid var(--manual-edit-field-border);
  border-radius: var(--radius-xs);
  height: 26px;
  padding: 0 4px;
  color: var(--manual-edit-field-text);
  font-size: 10px;
  min-width: 0;
}
.cc-row:focus-within {
  border-color: var(--accent, #2563eb);
}
.cc-label {
  color: var(--manual-edit-field-muted);
  flex: 0 0 auto;
  padding-right: 8px;
  white-space: nowrap;
}
.cc-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-width: 0;
}
.cc-step {
  flex: 0 0 14px;
  width: 14px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  padding: 0;
  background: transparent;
  color: var(--manual-edit-field-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.cc-step:hover:not(:disabled) {
  background: var(--manual-edit-field-bg-hover);
  color: var(--text);
}
.cc-step:disabled {
  opacity: 0.28;
  cursor: default;
}
.cc-value > input, .cc-value > select {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--manual-edit-field-text);
  padding: 0;
  text-align: right;
}
.cc-value > input::placeholder {
  color: var(--manual-edit-field-muted);
}
.cc-value > select {
  cursor: pointer;
  appearance: none;
  padding-right: 12px;
}
.cc-unit {
  flex: 0 0 auto;
  color: var(--manual-edit-field-muted);
  font-style: normal;
  font-size: 11px;
}
.cc-select {
  position: relative;
}
.cc-chevron {
  position: absolute;
  right: 0;
  pointer-events: none;
  color: var(--manual-edit-field-muted);
  font-style: normal;
  font-size: 9px;
}
.cc-color {
  padding-right: 4px;
  position: relative;
}
.cc-color-compact .cc-swatch {
  margin-left: auto;
}
.cc-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  }
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
  flex: 0 0 auto;
}
.cc-color > input {
  text-align: right;
}
.cc-color-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: var(--bg-panel);
  border: 1px solid var(--manual-edit-field-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(168px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}
.cc-color-compact .cc-color-popover {
  left: auto;
  right: 0;
}
.cc-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.cc-color-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  padding: 0;
  border: 1px solid var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  }
  cursor: pointer;
}
.cc-color-native {
  width: 100%;
  height: 22px;
  border: 1px solid var(--manual-edit-field-border);
  border-radius: var(--radius-xs);
  padding: 0;
  background: var(--manual-edit-field-bg);
}
.cc-quad {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.cc-quad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.cc-quad-head em {
  color: var(--text);
  font-style: normal;
}
.cc-chevron-small {
  color: var(--text-muted);
  font-size: 10px;
}
.cc-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cc-quad-cell {
  display: flex;
  align-items: center;
  background: var(--manual-edit-field-bg);
  border: 1px solid var(--manual-edit-field-border);
  border-radius: var(--radius-xs);
  color: var(--manual-edit-field-text);
  padding: 0 6px;
  height: 26px;
  font-size: 12px;
  gap: 2px;
}
.cc-quad-axis {
  color: var(--manual-edit-field-muted);
  font-style: normal;
  font-size: 10px;
  flex: 0 0 auto;
}
.cc-step-quad {
  flex-basis: 12px;
  width: 12px;
}
.cc-quad-cell input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  padding: 0;
  color: var(--manual-edit-field-text);
  text-align: right;
}
.cc-quad-unit {
  color: var(--manual-edit-field-muted);
  font-style: normal;
  font-size: 10px;
}
.cc-disclosure {
  font-size: 11px;
  color: var(--text-muted);
}
.cc-disclosure > summary {
  cursor: pointer;
  padding: 4px 0;
}
.manual-edit-workspace.preview-viewport:not(.preview-viewport-desktop) {
  justify-content: center;
}
.manual-edit-canvas {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-panel);
}
.manual-edit-canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.manual-edit-layers, .manual-edit-right {
  min-height: 0;
}
.manual-edit-layers, .manual-edit-modal, .manual-edit-changes {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.manual-edit-layers {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.manual-edit-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.manual-edit-panel-head h3 {
  margin: 0;
  font-size: 13px;
}
.manual-edit-panel-head span {
  color: var(--text-muted);
  font-size: 11px;
}
.manual-edit-layer-list, .manual-edit-history-list {
  display: grid;
  gap: 7px;
  overflow: auto;
  padding: 10px;
}
.manual-edit-layer-row {
  display: grid;
  gap: 3px;
  width: 100%;
  height: auto;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.manual-edit-layer-row.selected {
  border-color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  box-shadow: inset 3px 0 0 var(--accent);
}
.manual-edit-layer-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}
.manual-edit-layer-row span {
  color: var(--text-muted);
  font-size: 11px;
}
.manual-edit-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manual-edit-modal {
  --manual-edit-field-bg: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    --manual-edit-field-bg: color-mix(in srgb, var(--bg-panel) 88%, var(--text) 12%);
  }
  --manual-edit-field-bg-hover: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    --manual-edit-field-bg-hover: color-mix(in srgb, var(--bg-panel) 80%, var(--text) 20%);
  }
  --manual-edit-field-border: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    --manual-edit-field-border: color-mix(in srgb, var(--border) 74%, var(--text) 16%);
  }
  --manual-edit-field-text: var(--text);
  --manual-edit-field-muted: var(--text-muted);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.manual-edit-modal.cc-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.manual-edit-floating .manual-edit-modal.cc-panel {
  height: auto;
  max-height: 100%;
  padding-bottom: 10px;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}
.manual-edit-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.manual-edit-footer {
  flex: 0 0 auto;
  padding: 8px 12px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.manual-edit-footer .cc-section {
  margin: 0;
}
.manual-edit-footer .manual-edit-error {
  margin: 8px 0 0;
}
.manual-edit-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}
.manual-edit-footer-left, .manual-edit-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.manual-edit-footer-left {
  flex: 1 1 auto;
}
.manual-edit-footer-right {
  flex: 0 0 auto;
}
.manual-edit-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  color: var(--text);
}
.manual-edit-delete-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--red);
}
.manual-edit-delete-confirm-action {
  color: var(--red);
}
.manual-edit-delete-btn:disabled, .manual-edit-footer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.manual-edit-footer-btn {
  min-width: 62px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  color: var(--text);
  background: var(--bg-panel);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}
.manual-edit-footer-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.manual-edit-footer-btn.primary {
  border-color: transparent;
  background: var(--text);
  color: var(--bg-panel);
}
.manual-edit-footer-btn.primary:hover:not(:disabled) {
  background: var(--text-muted);
}
.manual-edit-footer-btn.danger {
  border-color: var(--red-border);
  color: var(--red);
  background: var(--red-bg);
}
.manual-edit-delete-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.manual-edit-delete-confirm span {
  max-width: 170px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manual-edit-floating .manual-edit-titlebar {
  min-height: 32px;
  padding: 8px 12px 2px;
}
.manual-edit-floating .manual-edit-titlebar-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}
.manual-edit-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px 8px;
}
.manual-edit-titlebar > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manual-edit-drag-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}
.manual-edit-drag-handle:active {
  cursor: grabbing;
}
.manual-edit-drag-handle:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.manual-edit-drag-handle span {
  width: 12px;
  height: 16px;
  background-image: radial-gradient(currentColor 1.3px, transparent 1.4px);
  background-position: 0 0;
  background-size: 6px 5px;
}
.manual-edit-titlebar-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.manual-edit-titlebar-close:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.manual-edit-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px;
  border-bottom: 1px solid var(--border);
}
.manual-edit-modal-head span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.manual-edit-modal-head h3 {
  max-width: 220px;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manual-edit-modal-head em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}
.manual-edit-empty {
  margin: 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.manual-edit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 12px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.manual-edit-meta strong, .manual-edit-meta span, .manual-edit-meta code {
  display: block;
}
.manual-edit-meta span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.manual-edit-meta code {
  max-width: 120px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manual-edit-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.manual-edit-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  color: var(--text-muted);
  background: var(--bg);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}
.manual-edit-tabs button.selected {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}
.manual-edit-tab-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 0 12px 12px;
  overflow: auto;
}
.manual-edit-field {
  display: grid;
  gap: 6px;
}
.manual-edit-field span {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.manual-edit-field input, .manual-edit-field textarea, .manual-edit-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  color: var(--text);
  background: var(--bg-panel);
  font: inherit;
}
.manual-edit-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
}
.manual-edit-field.compact {
  gap: 4px;
}
.manual-edit-field.compact input, .manual-edit-field.compact select {
  min-height: 32px;
  padding: 6px 8px;
}
.manual-edit-code {
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  white-space: pre;
}
.manual-edit-code.tall {
  min-height: 260px;
}
.manual-edit-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.manual-edit-style-grid .wide {
  grid-column: 1 / -1;
}
.manual-edit-error {
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  color: var(--red);
  background: var(--red-bg);
  font-size: 12px;
}
.manual-edit-changes {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.manual-edit-history-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}
.manual-edit-history-entry {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.manual-edit-history-entry strong {
  font-size: 12px;
}
.manual-edit-history-entry code {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 11px;
  white-space: pre-wrap;
}
.settings-privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-privacy-disclosure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.settings-privacy-disclosure > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-privacy-disclosure dt {
  font-size: 13px;
  font-weight: 600;
}
.settings-privacy-disclosure dd {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.privacy-consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.privacy-consent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.privacy-consent-action:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  }
}
.privacy-consent-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 110;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.privacy-consent-banner .privacy-consent-actions, .privacy-consent-banner .privacy-consent-policy-link {
  pointer-events: auto;
}
.privacy-consent-banner-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.privacy-consent-banner-head .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.privacy-consent-banner-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.privacy-consent-banner-lead {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.privacy-consent-banner-footer {
  margin: 2px 0 0;
}
.privacy-consent-policy-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.privacy-consent-policy-link:hover {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
  }
}
.privacy-consent-policy-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (max-width: 540px) {
  .privacy-consent-banner {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    padding: 16px;
  }
}
.mcp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mcp-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg-subtle);
}
.mcp-picker-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.mcp-picker-head strong {
  font-size: 12.5px;
}
.mcp-picker-grid {
  display: grid;
  gap: 6px;
}
.mcp-picker-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
}
.mcp-picker-item:hover {
  border-color: var(--border-strong);
  background: var(--bg);
}
.mcp-picker-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: inherit;
}
.mcp-picker-item-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  width: 100%;
}
.mcp-picker-transport {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  margin-left: auto;
}
.mcp-picker-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.mcp-picker-example {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 2px;
}
.mcp-picker-example-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  align-self: center;
}
.mcp-picker-example-text {
  font-style: italic;
  color: var(--text);
}
.mcp-picker-homepage {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.mcp-picker-homepage:hover {
  color: var(--accent, var(--text));
  text-decoration: underline;
}
.mcp-picker-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mcp-picker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.mcp-picker-search {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
}
.mcp-picker-search:focus {
  outline: none;
  border-color: var(--border-strong, var(--text-faint));
}
.mcp-picker-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}
.mcp-picker-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.mcp-picker-group[open] {
  background: var(--bg);
}
.mcp-picker-group-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
  user-select: none;
  list-style: none;
}
.mcp-picker-group-summary::-webkit-details-marker {
  display: none;
}
.mcp-picker-group-summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 10px;
  transition: transform 120ms var(--ease-out);
}
.mcp-picker-group[open] > .mcp-picker-group-summary::before {
  transform: rotate(90deg);
}
.mcp-picker-group-summary:hover {
  background: var(--bg-subtle);
}
.mcp-picker-group-summary-title {
  font-weight: 600;
}
.mcp-picker-group-summary-count {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.mcp-picker-group-summary-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
@media (max-width: 480px) {
  .mcp-picker-group-summary-hint {
    display: none;
  }
}
.mcp-picker-group .mcp-picker-grid {
  padding: 4px 8px 10px;
}
.mcp-picker-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 12px;
}
.mcp-picker-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.mcp-picker-custom {
  border-style: dashed !important;
}
.mcp-error {
  padding: 10px 12px;
  border: 1px solid var(--danger, #d54);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--danger, #d54) 50%, transparent);
  }
  background: var(--danger, #d54);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger, #d54) 10%, transparent);
  }
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--danger, #d54);
}
.mcp-agent-support {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle, var(--bg-panel));
  @supports (color: color-mix(in lab, red, red)) {
    background: var(--bg-subtle, color-mix(in srgb, var(--bg-panel) 90%, transparent));
  }
}
.mcp-agent-support-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}
.mcp-agent-support-line code {
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg) 70%, transparent);
  }
}
.mcp-agent-support-unsupported {
  color: var(--danger, #d54);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--danger, #d54) 85%, var(--text));
  }
}
.mcp-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mcp-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mcp-row-disabled {
  opacity: 0.55;
}
.mcp-row-info {
  border-left: 2px solid var(--border-strong, var(--border));
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mcp-row-info-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
}
.mcp-row-info-summary::-webkit-details-marker {
  display: none;
}
.mcp-row-info-summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  flex-shrink: 0;
  transition: transform 120ms var(--ease-out);
  color: var(--text-faint);
  font-size: 10px;
}
.mcp-row-info[open] > .mcp-row-info-summary::before {
  transform: rotate(90deg);
}
.mcp-row-info-summary:hover {
  color: var(--text);
}
.mcp-row-info-summary-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-row-info-body {
  padding: 0 8px 8px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcp-row-info-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.mcp-row-info-example {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.mcp-row-info-example-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mcp-row-info-example-text {
  font-style: italic;
  color: var(--text);
}
.mcp-row-info-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 11px;
}
.mcp-row-info-link:hover {
  color: var(--accent, var(--text));
  text-decoration: underline;
}
.mcp-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mcp-row-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mcp-row-toggle input {
  width: auto;
}
.mcp-row-label {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
}
.mcp-row-counter {
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
}
.mcp-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mcp-row-actions .icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.mcp-row-actions .icon-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.mcp-row-toggle-btn svg {
  transition: transform 120ms var(--ease-out);
}
.mcp-row-expanded .mcp-row-toggle-btn svg {
  transform: rotate(180deg);
}
.mcp-row-summary-title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.mcp-row-summary-title:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.mcp-row-summary-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}
.mcp-row-summary-transport {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.mcp-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  .mcp-row-grid {
    grid-template-columns: 1fr;
  }
}
.mcp-row-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mcp-row-field-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mcp-row-field input, .mcp-row-field select, .mcp-row-field textarea {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  font-family: var(--mono);
}
.mcp-row-field textarea {
  font-family: var(--mono);
  resize: vertical;
  min-height: 38px;
}
.mcp-row-field-stack {
  width: 100%;
}
.mcp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mcp-foot-spacer {
  flex: 1;
}
.mcp-saved-msg {
  color: var(--success, #6c6);
}
.mcp-oauth-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.mcp-oauth-control.connected {
  border-color: var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--success, #2da44e) 60%, var(--border));
  }
  background: var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--success, #2da44e) 8%, var(--bg-subtle));
  }
}
.mcp-oauth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.mcp-oauth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}
.mcp-oauth-dot-ok {
  background: var(--success, #2da44e);
  box-shadow: 0 0 0 2px var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #2da44e) 25%, transparent);
  }
}
.mcp-oauth-dot-pending {
  background: var(--accent);
  animation: mcp-oauth-pulse 1.2s ease-in-out infinite;
}
@keyframes mcp-oauth-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.mcp-oauth-actions {
  display: inline-flex;
  gap: 6px;
}
.mcp-oauth-actions button {
  padding: 5px 12px;
  font-size: 12px;
}
.mcp-oauth-error {
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  background: var(--danger, #d54);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger, #d54) 14%, transparent);
  }
  color: var(--danger, #d54);
  white-space: pre-wrap;
  word-break: break-all;
}
.mcp-oauth-hint {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 11.5px;
}
.mcp-oauth-fallback {
  font-size: 11.5px;
  line-height: 1.5;
}
.mcp-oauth-fallback .md-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mcp-oauth-fallback .md-link:hover {
  text-decoration-thickness: 2px;
}
.plugin-trust-badge {
  --trust-fg: var(--text-muted);
  --trust-bg: var(--bg-subtle);
  --trust-border: var(--border);
  --trust-dot: var(--trust-fg);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 20px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--trust-border);
  border-radius: var(--radius-pill);
  background: var(--trust-bg);
  color: var(--trust-fg);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.plugin-trust-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--trust-dot);
  box-shadow: 0 0 0 2px var(--trust-dot);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--trust-dot) 18%, transparent);
  }
}
.plugin-trust-badge--official {
  --trust-fg: var(--blue);
  --trust-bg: var(--blue-bg);
  --trust-border: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    --trust-border: color-mix(in srgb, var(--blue) 22%, var(--border));
  }
}
.plugin-trust-badge--trusted {
  --trust-fg: var(--green);
  --trust-bg: var(--green-bg);
  --trust-border: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    --trust-border: color-mix(in srgb, var(--green) 24%, var(--border));
  }
}
.plugin-trust-badge--restricted {
  --trust-fg: var(--amber);
  --trust-bg: var(--amber-bg);
  --trust-border: var(--amber);
  @supports (color: color-mix(in lab, red, red)) {
    --trust-border: color-mix(in srgb, var(--amber) 28%, var(--border));
  }
}
.plugin-trust-badge--overlay {
  --trust-fg: #fff;
  --trust-bg: rgba(255, 255, 255, 0.18);
  --trust-border: rgba(255, 255, 255, 0.24);
  --trust-dot: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.xai-oauth-paste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.xai-oauth-paste .hint {
  font-size: 11.5px;
}
.xai-oauth-paste-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.xai-oauth-paste-row input {
  flex: 1;
  min-width: 0;
}
.xai-oauth-warning {
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text);
  margin-top: 6px;
}
.xai-oauth-warning strong {
  color: var(--accent);
}
.xai-oauth-warning em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
}
.plugin-loop-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 18px;
  box-shadow: var(--shadow-xs);
}
.plugin-loop-home__hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugin-loop-home__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.plugin-loop-home__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.plugin-loop-home__subtitle kbd {
  font: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-subtle);
}
.plugin-loop-home__active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
}
.plugin-loop-home__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text);
}
.plugin-loop-home__active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.plugin-loop-home__active-clear {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.plugin-loop-home__active-clear:hover {
  color: var(--text);
}
.plugin-loop-home__context-summary {
  color: var(--text-muted);
}
.plugin-loop-home__input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugin-loop-home__input {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  color: var(--text);
}
.plugin-loop-home__input:focus {
  outline: 2px solid var(--accent-subtle, var(--accent));
  outline-offset: 1px;
  border-color: var(--accent);
}
.plugin-loop-home__submit {
  align-self: flex-end;
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.plugin-loop-home__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.plugin-loop-home__error {
  color: var(--danger, #c33);
  font-size: 12px;
}
.plugin-loop-home__rail-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.plugin-loop-home__rail-count {
  font-variant-numeric: tabular-nums;
}
.plugin-loop-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.plugin-loop-home__empty {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 8px 0;
}
.plugin-loop-home__empty code {
  font-size: 11.5px;
  background: var(--bg-subtle);
  padding: 1px 5px;
  border-radius: 3px;
}
.plugin-loop-home__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
  background: var(--bg);
  font-size: 12.5px;
}
.plugin-loop-home__card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plugin-loop-home__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.plugin-loop-home__card-title {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-loop-home__card-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plugin-loop-home__card-meta {
  display: flex;
  gap: 4px;
  color: var(--text-faint, var(--text-muted));
  font-size: 11px;
  flex-wrap: wrap;
}
.plugin-loop-home__card-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
}
.plugin-loop-home__card-byline-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.plugin-loop-home__card-byline-author > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plugin-loop-home__card-byline-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  max-width: 100%;
}
.plugin-loop-home__card-byline-source > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
}
.plugin-loop-home__card-byline-source:hover {
  color: var(--accent);
  border-color: var(--border);
  background: var(--bg-subtle);
}
.plugin-loop-home__card-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.plugin-loop-home__card-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.plugin-loop-home__card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  align-items: stretch;
}
.plugin-loop-home__card-action {
  appearance: none;
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  padding: 5px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.plugin-loop-home__card-action:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.plugin-loop-home__card-action:disabled {
  opacity: 0.6;
  cursor: progress;
}
.plugin-loop-home__card-details {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  cursor: pointer;
}
.plugin-loop-home__card-details:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.plugin-loop-home__card-details:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.plugin-details-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 920;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.plugin-details-modal {
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 64px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.plugin-details-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient( 180deg, var(--accent) 0%, var(--bg-panel) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 7%, var(--bg-panel)) 0%, var(--bg-panel) 100% );
  }
}
.plugin-details-modal__head-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plugin-details-modal__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.plugin-details-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}
.plugin-details-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.plugin-details-modal__meta-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 4px;
}
.plugin-details-modal__tag {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
}
.plugin-details-modal__close {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.plugin-details-modal__close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.plugin-details-modal__close:hover, .plugin-details-modal__close:focus-visible {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
.plugin-details-modal__byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 10px 6px 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  align-self: flex-start;
  max-width: 100%;
}
.plugin-details-modal__byline .plugin-details-modal__avatar {
  width: 28px;
  height: 28px;
}
.plugin-details-modal__byline-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plugin-details-modal__byline-name {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.plugin-details-modal__byline-prefix {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}
.plugin-details-modal__byline .plugin-details-modal__author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.plugin-details-modal__byline-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.plugin-details-modal__byline-links .plugin-details-modal__ext-link {
  padding: 2px 6px;
  font-size: 11.5px;
}
.plugin-details-modal__hero {
  margin: 16px 0 4px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-tint) 0%, transparent 55%), linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-panel) 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-tint) 70%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-panel) 100%);
  }
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plugin-details-modal__hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.plugin-details-modal__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}
.plugin-details-modal__hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}
.plugin-details-modal__hero-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-wrap: wrap;
}
.plugin-details-modal__hero-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugin-details-modal__hero-tab:hover {
  color: var(--text);
}
.plugin-details-modal__hero-tab.is-active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.plugin-details-modal__hero-frame {
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.plugin-details-modal__hero-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-subtle) 100%);
  border-bottom: 1px solid var(--border);
}
.plugin-details-modal__hero-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.plugin-details-modal__hero-light.is-red {
  background: #ff5f57;
}
.plugin-details-modal__hero-light.is-yellow {
  background: #febc2e;
  margin-left: -2px;
}
.plugin-details-modal__hero-light.is-green {
  background: #28c840;
  margin-left: -2px;
}
.plugin-details-modal__hero-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  margin: 0 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-width: 0;
}
.plugin-details-modal__hero-url > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.plugin-details-modal__hero-popout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.plugin-details-modal__hero-popout:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}
.plugin-details-modal__hero-iframe {
  border: none;
  width: 100%;
  height: 380px;
  background: #ffffff;
  display: block;
}
@media (max-width: 640px) {
  .plugin-details-modal__hero-iframe {
    height: 280px;
  }
}
.plugin-details-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 20px 20px;
}
.plugin-details-modal__section {
  padding: 16px 0;
  border-bottom: 1px dashed var(--border);
}
.plugin-details-modal__section:last-child {
  border-bottom: none;
}
.plugin-details-modal__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.plugin-details-modal__section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plugin-details-modal__section-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}
.plugin-details-modal__section-action {
  display: inline-flex;
  align-items: center;
}
.plugin-details-modal__section-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.plugin-details-modal__section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugin-details-modal__description {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.plugin-details-modal__provenance-line {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-subtle);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.plugin-details-modal__chip-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  cursor: pointer;
}
.plugin-details-modal__chip-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.plugin-details-modal__query {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}
.plugin-details-modal__inputs, .plugin-details-modal__surfaces, .plugin-details-modal__connectors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugin-details-modal__input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plugin-details-modal__input-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plugin-details-modal__input-head code {
  font-size: 12.5px;
  color: var(--text);
}
.plugin-details-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 500;
}
.plugin-details-modal__badge.is-required {
  background: rgba(200, 60, 60, 0.1);
  color: rgb(160, 40, 40);
}
.plugin-details-modal__badge.is-type {
  background: rgba(0, 120, 200, 0.08);
  color: rgb(0, 100, 170);
}
.plugin-details-modal__badge.is-primary {
  background: rgba(0, 160, 80, 0.1);
  color: rgb(0, 110, 60);
  margin-left: 6px;
}
.plugin-details-modal__badge.is-repeat {
  background: rgba(120, 80, 200, 0.1);
  color: rgb(90, 60, 160);
}
.plugin-details-modal__badge.is-failure {
  background: rgba(200, 120, 0, 0.1);
  color: rgb(160, 90, 0);
}
.plugin-details-modal__badge.is-required {
  background: rgba(200, 60, 60, 0.1);
  color: rgb(160, 40, 40);
}
.plugin-details-modal__badge.is-optional {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.plugin-details-modal__muted {
  color: var(--text-muted);
  font-size: 12px;
}
.plugin-details-modal__small {
  font-size: 11.5px;
}
.plugin-details-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plugin-details-modal__chips--inline {
  margin-top: 2px;
}
.plugin-details-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid var(--border);
}
.plugin-details-modal__chip--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.plugin-details-modal__context {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plugin-details-modal__ctx-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plugin-details-modal__ctx-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plugin-details-modal__ctx-count {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.plugin-details-modal__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: stage;
}
.plugin-details-modal__stage {
  position: relative;
  padding: 10px 12px 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plugin-details-modal__stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plugin-details-modal__stage-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.settings-skills .skills-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.settings-skills .skills-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.settings-skills .skills-row {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.settings-skills .skills-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background-color 140ms var(--ease-out);
  pointer-events: none;
}
.settings-skills .skills-row:hover {
  border-color: var(--border-strong, var(--border));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.settings-skills .skills-row-expanded {
  background: var(--bg-subtle);
  border-color: var(--border-strong, var(--border));
}
.settings-skills .skills-row-expanded::before {
  background: var(--accent);
}
.settings-skills .skills-row-editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.settings-skills .skills-row-disabled {
  opacity: 0.55;
}
.settings-skills .skills-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  min-width: 0;
}
.settings-skills .skills-row-summary-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.settings-skills .skills-row-summary-btn:hover .skills-row-summary-name {
  color: var(--accent);
}
.settings-skills .skills-row-summary-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.settings-skills .skills-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  flex-shrink: 0;
}
.settings-skills .skills-row-expanded .skills-row-icon {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  color: var(--accent);
}
.settings-skills .skills-row-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-skills .skills-row-summary-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.settings-skills .skills-row-summary-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color 120ms var(--ease-out);
}
.settings-skills .skills-row-summary-mode, .settings-skills .skills-row-summary-source, .settings-skills .skills-row-summary-category {
  flex-shrink: 0;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-weight: 500;
}
.settings-skills .skills-row-summary-source {
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
.settings-skills .skills-row-summary-category {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 80%, var(--text-muted));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }
}
.settings-skills .skills-row-summary-desc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.settings-skills .skills-row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.plugin-details-modal__stage-id {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.plugin-details-modal__stage-atoms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.plugin-details-modal__atom {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 2px 7px;
  background: var(--bg-subtle);
  color: var(--text);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.plugin-details-modal__atom.is-cap {
  background: rgba(120, 80, 200, 0.06);
  color: rgb(90, 60, 160);
  border-color: rgba(120, 80, 200, 0.18);
}
.plugin-details-modal__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plugin-details-modal__surface {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plugin-details-modal__surface-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plugin-details-modal__surface-prompt {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}
.plugin-details-modal__connector-group + .plugin-details-modal__connector-group {
  margin-top: 12px;
}
.plugin-details-modal__sub-title {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plugin-details-modal__connector {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plugin-details-modal__source {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 4px;
  column-gap: 12px;
  font-size: 12px;
}
.plugin-details-modal__source > div {
  display: contents;
}
.plugin-details-modal__source dt {
  color: var(--text-muted);
  font-weight: 500;
}
.plugin-details-modal__source dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.plugin-details-modal__source-kind {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.plugins-view__version-install {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugins-view__version-select {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.plugins-view__version-select select {
  width: min(240px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
}
.plugins-view__install-command {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plugins-view__install-command code {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 12px;
}
.plugin-details-modal__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.plugin-details-modal__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.plugin-details-modal__ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  max-width: 100%;
}
.plugin-details-modal__ext-link > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}
.plugin-details-modal__ext-link:hover {
  color: var(--accent);
  border-color: var(--border);
  background: var(--bg-subtle);
}
.plugin-details-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.plugin-details-modal__secondary {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.plugin-details-modal__secondary:hover {
  border-color: var(--text-muted);
}
.plugin-details-modal__primary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  padding: 7px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.plugin-details-modal__primary:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
.plugin-details-modal__primary:disabled {
  opacity: 0.6;
  cursor: progress;
}
.plugin-details-modal__use-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.plugin-details-modal__use-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.plugin-details-modal__use-caret {
  padding-left: 8px;
  padding-right: 8px;
  gap: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: rgba(255, 255, 255, 0.32);
  margin-left: -1px;
}
.plugin-details-modal__use-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 10;
  min-width: 248px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.plugin-details-modal__use-menu-item {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 6px);
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.plugin-details-modal__use-menu-item:hover {
  background: var(--bg-subtle);
}
.plugin-details-modal__use-menu-label {
  font-size: 12.5px;
  font-weight: 600;
}
.plugin-details-modal__use-menu-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.plugin-share-confirm__panel {
  max-width: 720px;
}
.plugin-share-confirm .plugin-details-modal__foot {
  padding: 16px 24px 22px;
}
.plugin-share-confirm__steps {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.plugin-share-confirm__steps li + li {
  margin-top: 5px;
}
.plugin-share-confirm__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.plugin-share-confirm__facts > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
}
.plugin-share-confirm__facts dt {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plugin-share-confirm__facts dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.plugin-share-confirm__facts code {
  font-size: 12px;
}
@media (max-width: 640px) {
  .plugin-share-confirm__facts {
    grid-template-columns: 1fr;
  }
}
.plugin-info-pane {
  padding: 22px 28px 28px 32px;
  background: var(--bg-panel);
}
.plugin-info-pane .plugin-meta-sections {
  display: block;
}
.plugin-meta-sections__advanced {
  margin-top: 6px;
  border-top: 1px solid var(--border-soft, var(--border));
}
.plugin-meta-sections__advanced-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}
.plugin-meta-sections__advanced-summary::-webkit-details-marker {
  display: none;
}
.plugin-meta-sections__advanced-summary::before {
  content: '▸';
  font-size: 9px;
  color: var(--text-faint);
  transition: transform 120ms ease;
}
.plugin-meta-sections__advanced[open] .plugin-meta-sections__advanced-summary::before {
  transform: rotate(90deg);
}
.plugin-meta-sections__advanced-summary:hover {
  color: var(--text);
}
.plugin-info-pane .plugin-meta-sections.is-compact {
  font-size: 12px;
}
.plugin-info-pane .plugin-details-modal__section {
  padding: 12px 0;
}
.plugin-info-pane .plugin-details-modal__section-title {
  font-size: 11.5px;
}
.plugin-info-pane .plugin-details-modal__section-hint {
  font-size: 11.5px;
}
.plugin-info-pane .plugin-details-modal__source {
  grid-template-columns: 84px 1fr;
  font-size: 11.5px;
  gap: 6px 10px;
}
.plugin-info-pane .plugin-details-modal__source dd code {
  word-break: break-all;
}
.plugin-info-pane .plugin-details-modal__chip, .plugin-info-pane .plugin-details-modal__atom {
  font-size: 11px;
}
.plugin-info-pane .plugin-details-modal__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.plugin-info-pane .plugin-details-modal__byline-meta {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.plugin-info-pane .plugin-details-modal__byline-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.plugin-info-pane .plugin-details-modal__byline .plugin-details-modal__author-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-info-pane .plugin-details-modal__byline-links {
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding-left: 0;
  border-left: 0;
}
.plugin-info-pane .plugin-details-modal__byline-links .plugin-details-modal__ext-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-info-pane .plugin-details-modal__section {
  border-bottom: none;
  padding: 15px 0;
}
.plugin-info-pane .plugin-details-modal__section + .plugin-details-modal__section {
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
}
.plugin-info-pane .plugin-details-modal__section-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.plugin-info-pane .plugin-details-modal__section-count {
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 7%, transparent);
  }
  color: var(--text-muted);
}
.plugin-info-pane .plugin-details-modal__byline {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
  align-items: center;
}
.plugin-info-pane .plugin-details-modal__byline-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.plugin-info-pane .plugin-details-modal__byline .plugin-details-modal__avatar {
  width: 32px;
  height: 32px;
}
.plugin-info-pane .plugin-details-modal__query {
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 4%, transparent);
  }
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
}
.plugin-design-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.plugin-design-sidebar__spec {
  border-top: 1px dashed var(--border);
  padding: 18px 28px 28px 32px;
  background: var(--bg-panel);
}
.plugin-design-sidebar__spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.plugin-design-sidebar__spec-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.plugin-design-sidebar__spec-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.plugin-design-sidebar__spec > .design-spec-pre, .plugin-design-sidebar__spec > .design-spec-empty {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.plugin-meta-sections__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.plugin-meta-sections__heading h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-strong, var(--text));
  letter-spacing: -0.005em;
}
.plugin-meta-sections__heading-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.plugin-meta-sections.is-compact .plugin-meta-sections__heading {
  padding: 2px 0 10px;
}
.plugin-meta-sections.is-compact .plugin-meta-sections__heading h3 {
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .plugin-details-modal-backdrop {
    padding: 0;
  }
  .plugin-details-modal {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .plugin-info-pane, .plugin-design-sidebar__spec {
    padding: 18px 20px 24px;
  }
}
@keyframes plugin-detail-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes plugin-detail-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.plugin-details-modal-backdrop, .ds-modal-backdrop, .prompt-template-modal-backdrop {
  animation: plugin-detail-fade 160ms ease-out;
}
.plugin-details-modal, .ds-modal, .prompt-template-modal {
  animation: plugin-detail-rise 220ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.plugin-details-modal__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plugin-share-menu {
  position: relative;
  display: inline-flex;
}
.plugin-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.plugin-share-trigger.ghost {
  border-radius: var(--radius);
  padding: 6px 10px;
}
.plugin-share-trigger--solo {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}
.plugin-share-trigger--solo:hover, .plugin-share-trigger--solo[aria-expanded='true'] {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}
.plugin-share-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: plugin-detail-rise 140ms ease-out;
}
.plugin-share-popover__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plugin-share-popover__divider {
  height: 1px;
  margin: 4px 4px;
  background: var(--border);
  opacity: 0.6;
}
.plugin-share-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.plugin-share-item:hover, .plugin-share-item:focus-visible {
  background: var(--bg-subtle);
  outline: none;
}
.plugin-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.plugin-byline--compact {
  padding: 8px 16px;
  border-bottom: none;
  background: transparent;
}
.plugin-byline__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.plugin-byline__avatar--fallback {
  background: linear-gradient( 135deg, var(--accent-tint) 0%, var(--bg-subtle) 100% );
  color: var(--accent);
}
.plugin-byline__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.plugin-byline__primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plugin-byline__by {
  font-size: 11.5px;
  color: var(--text-faint);
  text-transform: lowercase;
}
.plugin-byline__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.plugin-byline__version {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.plugin-byline__secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.plugin-byline__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 120ms var(--ease-out);
}
.plugin-byline__link:hover {
  color: var(--accent);
}
.plugins-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugins-section__active {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.inline-plugins-rail--strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 2px 0 6px;
  max-height: 44px;
}
.inline-plugins-rail--strip::-webkit-scrollbar {
  height: 6px;
}
.inline-plugins-rail--strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.inline-plugins-rail--strip .inline-plugins-rail__card {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.inline-plugins-rail--strip .inline-plugins-rail__card:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.inline-plugins-rail--strip .inline-plugins-rail__card:disabled {
  opacity: 0.55;
  cursor: progress;
}
.inline-plugins-rail--strip .inline-plugins-rail__title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.inline-plugins-rail--strip .inline-plugins-rail__desc, .inline-plugins-rail--strip .inline-plugins-rail__trust {
  display: none;
}
.inline-plugins-rail__error {
  flex: 0 0 100%;
  font-size: 11.5px;
  color: var(--danger, #c33);
}
.context-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  align-items: center;
}
.context-chip-strip__empty {
  font-size: 11.5px;
  color: var(--text-muted);
}
.context-chip-strip__chip {
  --c-hue: var(--accent);
  --c-tint: var(--accent-tint);
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 3px 0 0;
  border-radius: var(--radius-pill);
  background: var(--c-tint);
  border: 1px solid var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--c-hue) 22%, var(--border));
  }
  font-size: 11px;
  color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--c-hue) 70%, var(--text-strong));
  }
  max-width: 240px;
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.context-chip-strip__chip:hover {
  border-color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--c-hue) 38%, var(--border));
  }
}
.context-chip-strip__chip[data-kind='skill'], .context-chip-strip__chip[data-kind='plugin'] {
  --c-hue: var(--accent);
  --c-tint: var(--accent-tint);
}
.context-chip-strip__chip[data-kind='design-system'] {
  --c-hue: var(--amber);
  --c-tint: var(--amber-bg);
}
.context-chip-strip__chip[data-kind='craft'] {
  --c-hue: var(--green);
  --c-tint: var(--green-bg);
}
.context-chip-strip__chip[data-kind='asset'] {
  --c-hue: var(--text-soft);
  --c-tint: var(--bg-subtle);
}
.context-chip-strip__chip[data-kind='mcp'] {
  --c-hue: var(--purple);
  --c-tint: var(--purple-bg);
}
.context-chip-strip__chip[data-kind='claude-plugin'] {
  --c-hue: var(--accent-strong);
  --c-tint: var(--accent-tint);
}
.context-chip-strip__chip[data-kind='atom'] {
  --c-hue: var(--blue);
  --c-tint: var(--blue-bg);
}
.context-chip-strip__body {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 9px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: default;
  text-align: left;
  border-radius: var(--radius-pill);
  min-width: 0;
}
.context-chip-strip__chip.is-interactive .context-chip-strip__body {
  cursor: pointer;
}
.context-chip-strip__chip.is-interactive .context-chip-strip__body:hover {
  background: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--c-hue) 12%, transparent);
  }
}
.context-chip-strip__icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-hue);
}
.context-chip-strip__icon::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--c-hue);
  box-shadow: 0 0 0 2px var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-hue) 20%, transparent);
  }
  flex: 0 0 auto;
}
.context-chip-strip__kind {
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--c-hue) 60%, var(--text-muted));
  }
}
.context-chip-strip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 550;
}
.context-chip-strip__remove {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--c-hue) 50%, var(--text-muted));
  }
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.context-chip-strip__chip:hover .context-chip-strip__remove, .context-chip-strip__remove:focus-visible {
  opacity: 1;
}
.context-chip-strip__remove:hover {
  background: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--c-hue) 16%, transparent);
  }
  color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--c-hue) 85%, var(--text-strong));
  }
}
.plugin-inputs-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.plugin-inputs-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plugin-inputs-form__label {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.plugin-inputs-form__required {
  color: var(--red);
  margin-left: 3px;
  font-weight: 700;
}
.plugin-inputs-form__input {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.plugin-inputs-form__input::placeholder {
  color: var(--text-faint);
}
.plugin-inputs-form__input:hover:not(:focus) {
  border-color: var(--border-strong);
}
.plugin-inputs-form__input:focus {
  outline: none;
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
  background: var(--bg-panel);
}
.plugin-inputs-form__input--textarea {
  min-height: 64px;
  resize: vertical;
}
select.plugin-inputs-form__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374716b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.plugin-inputs-form__field[data-field-type='boolean'] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.plugin-inputs-form__field[data-field-type='boolean'] .plugin-inputs-form__input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.plugin-inputs-form__field[data-field-type='boolean'] .plugin-inputs-form__label {
  order: 1;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text);
}
.plugin-inputs-form__file-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.plugin-inputs-form__file-shell:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text);
}
.plugin-inputs-form__file-shell:focus-within {
  border-color: var(--selected);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.plugin-inputs-form__input--file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}
.plugin-inputs-form__file-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugin-inputs-form__field[data-filled='true'] .plugin-inputs-form__label {
  color: var(--text);
}
.composer-shell .plugins-section {
  gap: 0;
  margin-top: -1px;
}
.composer-shell .plugins-section__active {
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-soft));
  }
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 64%, var(--bg-panel));
  }
  box-shadow: inset 0 1px 0 var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-panel) 82%, transparent);
  }
}
.composer-shell .context-chip-strip {
  gap: 6px;
}
.composer-shell .context-chip-strip__chip {
  min-height: 24px;
  max-width: 100%;
  gap: 0;
  padding: 0 3px 0 0;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--c-tint));
  }
  border-color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--c-hue) 16%, var(--border-soft));
  }
}
.composer-shell .context-chip-strip__body {
  gap: 6px;
  min-width: 0;
  padding: 2px 6px 2px 8px;
}
.composer-shell .context-chip-strip__icon {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--c-hue);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--c-hue) 80%, var(--text));
  }
}
.composer-shell .context-chip-strip__icon::before {
  display: none;
}
.composer-shell .context-chip-strip__kind {
  display: none;
}
.composer-shell .context-chip-strip__label {
  max-width: 168px;
  font-size: 11.5px;
  font-weight: 550;
}
.composer-shell .context-chip-strip__remove {
  width: 18px;
  height: 18px;
}
.composer-shell .plugin-inputs-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 8px;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.composer-shell .plugin-inputs-form__field {
  min-width: 0;
  gap: 5px;
}
.composer-shell .plugin-inputs-form__field[data-field-type='text'], .composer-shell .plugin-inputs-form__field[data-field-type='file'] {
  grid-column: 1 / -1;
}
.composer-shell .plugin-inputs-form__label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.07em;
  color: var(--text-soft);
}
.composer-shell .plugin-inputs-form__input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 82%, var(--border-strong));
  }
  border-radius: var(--radius);
  background-color: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-subtle));
  }
  box-shadow: inset 0 1px 0 var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-panel) 88%, transparent);
  }
}
.composer-shell .plugin-inputs-form__input:hover:not(:focus) {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-strong));
  }
}
.composer-shell .plugin-inputs-form__input:focus {
  border-color: var(--selected);
  background-color: var(--bg-panel);
  box-shadow: 0 0 0 3px var(--selected-soft);
}
.composer-shell .plugin-inputs-form__input--textarea {
  min-height: 70px;
}
.composer-shell .plugin-inputs-form__field[data-field-type='boolean'] .plugin-inputs-form__input {
  width: 16px;
  min-height: 16px;
  height: 16px;
}
.settings-skills .skills-row-summary-btn:hover .skills-row-chevron {
  color: var(--text-muted);
}
.settings-skills .skills-row-expanded .skills-row-chevron {
  transform: rotate(180deg);
  color: var(--text-muted);
}
.settings-skills .skills-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.settings-skills .skills-row-actions .icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.settings-skills .skills-row-actions .icon-btn:hover {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text);
}
.settings-skills .skills-row-enable {
  margin-left: 4px;
}
.settings-skills .skills-delete-confirm {
  display: inline-flex;
  gap: 6px;
}
.settings-skills .skills-delete-confirm .btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}
.settings-skills .skills-row-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 14px 14px;
  border-top: 1px dashed var(--border);
  margin: 0 4px;
}
.settings-skills .skills-row-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.settings-skills .skills-row-section h5 {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.settings-skills .skills-row-section .library-preview-body {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
}
.settings-skills .skills-file-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow-y: auto;
  max-height: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.settings-skills .skills-file-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.settings-skills .skills-file-entry-directory {
  color: var(--text);
  font-weight: 500;
}
.settings-skills .skills-file-size {
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.settings-skills > .skills-draft {
  margin: 0;
}
.settings-skills .skills-row > .skills-draft {
  border: none;
  border-top: 1px dashed var(--border);
  border-radius: 0 0 10px 10px;
  margin: 0;
  background: transparent;
}
.settings-skills .skills-draft .skills-draft-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.settings-skills .skills-draft .skills-draft-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.settings-skills .skills-draft .skills-draft-sub {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--mono);
}
.mcp-json-helper {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  overflow: hidden;
}
.mcp-json-helper-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.mcp-json-helper-toggle:hover {
  color: var(--text);
  background: transparent;
  box-shadow: 0 0 0 3px var(--accent-soft);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 30%, transparent);
  }
}
.mcp-json-helper.is-open .mcp-json-helper-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border);
}
.mcp-json-helper.is-open .mcp-json-helper-toggle:hover {
  box-shadow: inset 0 -1px 0 var(--border);
}
.mcp-json-helper-toggle span:first-child {
  text-align: left;
}
.mcp-json-helper-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-soft);
}
.mcp-json-helper-example {
  display: flex;
  flex-direction: column;
}
.mcp-json-helper-example-head {
  padding: 10px 12px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mcp-json-helper-code {
  margin: 0 12px 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(	180deg,	var(--bg) 0%,	var(--bg) 100%	);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(	180deg,	color-mix(in srgb, var(--bg) 92%, black) 0%,	color-mix(in srgb, var(--bg) 86%, black) 100%	);
  }
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  overflow-x: auto;
}
.mcp-json-helper-code code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.json-key {
  color: var(--accent);
}
.json-string {
  color: var(--green);
}
.json-punctuation {
  color: var(--text-soft);
}
.mcp-json-helper-conversion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.mcp-json-helper-conversion div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mcp-json-helper-conversion strong {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mcp-json-helper-conversion code {
  width: fit-content;
}
.mcp-json-helper-toggle-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.mcp-json-helper-eye {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  flex-shrink: 0;
}
.mcp-json-helper-toggle-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
  text-align: left;
}
.project-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle, var(--bg));
  min-height: 40px;
  flex-wrap: wrap;
}
.project-actions-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
  line-height: 1.3;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-strong, var(--text));
  cursor: pointer;
}
.project-actions-button:hover:not(:disabled) {
  background: var(--bg-subtle, var(--bg));
}
.project-actions-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.project-actions-button-primary {
  background: var(--accent);
  color: var(--accent-text, white);
  border-color: var(--accent);
}
.project-actions-button-primary:hover:not(:disabled) {
  filter: brightness(0.95);
  background: var(--accent);
}
.project-actions-button-warning {
  border-color: var(--warning, #d97706);
  color: var(--warning, #d97706);
}
.project-actions-button-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--bg);
}
.project-actions-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  }
  border-top-color: var(--accent);
  animation: project-actions-spin 0.8s linear infinite;
}
@keyframes project-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.project-actions-label {
  font-size: 12.5px;
  color: var(--text-strong, var(--text));
}
.project-actions-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.project-actions-button-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-actions-chip {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--warning, #d97706);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
  }
  color: var(--warning, #d97706);
}
.project-actions-disabled-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}
.od-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 4px);
  background: var(--text-strong, #1f2328);
  color: var(--bg, white);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  pointer-events: auto;
}
.od-toast.placement-top {
  top: 64px;
  bottom: auto;
  z-index: 1200;
}
.od-toast.tone-success {
  border: 1px solid var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--success, #2da44e) 42%, var(--border));
  }
  background: var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--success, #2da44e) 14%, var(--bg));
  }
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--success, #2da44e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px color-mix(in srgb, var(--success, #2da44e) 12%, transparent);
  }
}
.od-toast.tone-error {
  border: 1px solid var(--danger, #cf222e);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--danger, #cf222e) 42%, var(--border));
  }
  background: var(--danger, #cf222e);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger, #cf222e) 13%, var(--bg));
  }
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--danger, #cf222e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px color-mix(in srgb, var(--danger, #cf222e) 12%, transparent);
  }
}
.od-toast-body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.od-toast-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.od-toast.tone-success .od-toast-icon {
  color: var(--success, #2da44e);
}
.od-toast.tone-error .od-toast-icon {
  color: var(--danger, #cf222e);
}
.od-toast.tone-loading .od-toast-icon {
  color: var(--text-muted, #6e7781);
}
.od-toast {
  animation: od-toast-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.od-toast.leaving {
  animation: od-toast-out 140ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes od-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes od-toast-out {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .od-toast, .od-toast.leaving {
    animation: none;
  }
}
.od-toast-message {
  font-weight: 500;
}
.od-toast-details {
  margin-top: 4px;
  font-size: 11.5px;
  opacity: 0.85;
  font-weight: 400;
}
.od-toast-code {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
  user-select: text;
}
.od-toast-dismiss {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bg, white);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.od-toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
}
.routines-section .section-head {
  align-items: flex-start;
}
.routines-section .section-head > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.routines-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.routines-form {
  margin-top: 4px;
}
.routines-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.routines-empty strong {
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}
.routines-empty p {
  margin: 0;
  font-size: 13px;
}
.routines-empty em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}
.routines-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.routines-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.routines-field input[type="text"], .routines-field input[type="time"], .routines-field input[type="number"], .routines-field input:not([type]), .routines-field textarea, .routines-field select, .routines-project-select {
  appearance: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.routines-field select, .routines-project-select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2374716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
[data-theme='dark'] .routines-field select, [data-theme='dark'] .routines-project-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .routines-field select, html:not([data-theme]) .routines-project-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
  }
}
.routines-field input:focus, .routines-field textarea:focus, .routines-field select:focus, .routines-project-select:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(26, 25, 22, 0.08);
}
.routines-field textarea {
  resize: vertical;
  min-height: 80px;
}
.routines-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.routines-fieldrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.routines-fieldrow > .routines-field {
  flex: 1 1 180px;
  min-width: 0;
}
.routines-fieldrow-2col > .routines-field {
  flex: 1 1 240px;
}
.routines-schedule-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}
.routines-kind-pills {
  align-self: flex-start;
}
.routines-weekday-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.routines-weekday {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms var(--ease-out);
}
.routines-weekday:hover {
  color: var(--text);
  border-color: var(--text-soft);
}
.routines-weekday.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.routines-schedule-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.routines-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.routines-fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 6px;
}
.routines-radio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.routines-radio:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.routines-radio:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.routines-radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.routines-radio:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.routines-radio:has(input[type="radio"]:checked) strong {
  color: var(--accent-strong);
}
.routines-radio span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.routines-radio strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.routines-radio small {
  font-size: 12px;
  color: var(--text-muted);
}
.routines-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.routines-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.routines-item.is-disabled {
  opacity: 0.7;
}
.routines-item-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.routines-item-main {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routines-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.routines-item-title strong {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}
.routines-item-line {
  font-size: 13px;
  color: var(--text);
}
.routines-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.routines-item-error {
  color: #b3382b;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.routines-tag {
  font-size: 11px;
  background: var(--bg-muted);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.routines-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.routines-item-history {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.routines-history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routines-history-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}
.routines-history-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.routines-history-row:hover {
  background: var(--bg-subtle);
}
.routines-history-time {
  color: var(--text);
}
.routines-history-trigger {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.routines-history-error {
  grid-column: 1 / -1;
  color: #b3382b;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.routines-history-link {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.routines-history-link:hover {
  background: var(--text);
  color: var(--bg-panel);
  border-color: var(--text);
}
.routines-history-link:focus-visible {
  outline: 2px solid var(--selected);
  outline-offset: 1px;
}
.routines-history-link:active {
  opacity: 0.85;
}
.routines-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-muted);
  color: var(--text-muted);
}
.routines-status-running {
  background: #f3eddc;
  color: #8a6a1a;
}
.routines-status-queued {
  background: #ece9e2;
  color: var(--text-muted);
}
.routines-status-succeeded {
  background: #e3efe6;
  color: #2e7d5b;
}
.routines-status-failed {
  background: #f6dfdc;
  color: #b3382b;
}
.routines-status-canceled {
  background: #ece9e2;
  color: var(--text-muted);
}
.newproj-media-segmented {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.newproj-media-surface {
  border: none;
  background: transparent;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.newproj-media-surface:hover:not(.active) {
  color: var(--text);
}
.newproj-media-surface.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.newproj-aspect-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.newproj-aspect-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.newproj-aspect-pill:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.newproj-aspect-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}
.newproj-aspect-icon {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  flex: none;
  opacity: 0.85;
}
.newproj-aspect-icon-1-1 {
  width: 12px;
  height: 12px;
}
.newproj-aspect-icon-16-9 {
  width: 16px;
  height: 9px;
}
.newproj-aspect-icon-9-16 {
  width: 9px;
  height: 16px;
}
.newproj-aspect-icon-4-3 {
  width: 14px;
  height: 10.5px;
}
.newproj-aspect-icon-3-4 {
  width: 10.5px;
  height: 14px;
}
.newproj-aspect-ratio {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.ds-picker-group + .ds-picker-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ds-picker-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.model-picker .ds-picker-trigger {
  min-height: 44px;
}
.model-picker .ds-picker-popover {
  min-width: 320px;
}
.model-picker .ds-picker-list {
  padding: 6px;
}
.model-picker .ds-picker-item {
  padding: 8px 10px;
}
.model-picker .ds-picker-item-title {
  font-size: 13px;
  font-weight: 500;
}
.model-picker .ds-picker-item-sub {
  font-size: 11.5px;
}
.model-picker .ds-picker-item .ds-picker-item-badge {
  font-size: 9px;
  padding: 1px 5px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-xs);
  margin-left: 6px;
}
.model-picker .ds-picker-group-head {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  padding: 8px 10px 4px;
  min-height: 32px;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.palette-tweaks-anchor {
  position: relative;
  display: inline-flex;
}
.palette-tweaks-badge {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  margin-left: 4px;
  box-shadow: 0 0 0 1px var(--bg-panel);
}
.palette-tweaks {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.palette-tweaks-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.palette-tweaks-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.palette-tweaks-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.palette-tweaks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.palette-tweaks-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  transition: background 100ms var(--ease-out);
}
.palette-tweaks-item:hover, .palette-tweaks-item.hovered {
  background: var(--bg-subtle);
}
.palette-tweaks-item.selected {
  background: var(--bg-muted);
}
.palette-tweaks-stripe {
  display: inline-flex;
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.palette-tweaks-chip {
  width: 14px;
  height: 18px;
  display: inline-block;
}
.palette-tweaks-stripe-original {
  box-shadow: none;
  background: transparent;
}
.palette-tweaks-chip-original {
  width: 56px;
  height: 18px;
  background: linear-gradient( to top right, transparent calc(50% - 1px), var(--text-muted) calc(50% - 1px), var(--text-muted) calc(50% + 1px), transparent calc(50% + 1px) );
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius-xs);
}
.palette-tweaks-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-tweaks-check {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.workspace-shell {
  grid-template-rows: 34px minmax(0, 1fr);
}
.workspace-shell .workspace-tabs-chrome.app-chrome-header {
  --workspace-tabs-chrome-height: 34px;
  --workspace-tab-bar-bg: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    --workspace-tab-bar-bg: color-mix(in srgb, var(--bg-panel) 82%, var(--bg-subtle));
  }
  --workspace-active-tab-border: var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    --workspace-active-tab-border: color-mix(in srgb, var(--border-strong) 38%, transparent);
  }
  height: 34px;
  min-height: 34px;
  padding: 0 8px 0 0;
  background: var(--workspace-tab-bar-bg);
  border-bottom: 0;
  box-shadow: none;
}
.workspace-shell .workspace-tabs-traffic {
  align-self: stretch;
}
.workspace-shell .workspace-tabs-strip {
  gap: 3px;
  align-items: center;
  padding-top: 0;
}
.workspace-shell .workspace-tab {
  width: 156px;
  height: 26px;
  min-height: 26px;
  min-width: var(--workspace-tab-min-width, 56px);
  max-width: 168px;
  flex: 0 1 156px;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-self: center;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
.workspace-shell .workspace-tab + .workspace-tab::before {
  display: none;
}
.workspace-shell .workspace-tab.is-pinned {
  flex: 0 0 104px;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  grid-template-columns: minmax(0, 1fr);
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--workspace-tab-bar-bg);
}
.workspace-shell .workspace-tab.is-active {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--bg-subtle));
  }
  border-color: var(--workspace-active-tab-border);
  box-shadow: 0 1px 2px var(--text), 0 0 0 0.5px var(--bg-panel) inset;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--bg-panel) 82%, transparent) inset;
  }
  z-index: 2;
}
.workspace-shell .workspace-tab:not(.is-active):hover, .workspace-shell .workspace-tab:not(.is-active):focus-within {
  border-radius: 7px;
  background: linear-gradient( var(--bg-panel), var(--bg-panel) ) 0 0 / 100% calc(100% - 2px) no-repeat;
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( color-mix(in srgb, var(--bg-panel) 78%, transparent), color-mix(in srgb, var(--bg-panel) 78%, transparent) ) 0 0 / 100% calc(100% - 2px) no-repeat;
  }
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 58%, transparent), 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
  }
}
.workspace-shell .workspace-tab.is-dragging {
  background: var(--bg-panel);
  box-shadow: 0 14px 30px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--text) 16%, transparent);
  }
  z-index: 4;
}
.workspace-shell .workspace-tab__main {
  position: relative;
  z-index: 2;
  gap: 5px;
  padding-inline: 9px 3px;
}
.workspace-shell .workspace-tab__close {
  position: relative;
  z-index: 2;
}
.workspace-shell .workspace-tab__label {
  font-size: 11.5px;
  font-weight: 540;
}
.workspace-shell .workspace-tab__close {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
}
.workspace-shell .workspace-tabs-new-btn, .workspace-shell .workspace-tabs-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}
.app {
  background: var(--bg-panel);
}
.app > .app-chrome-header {
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  gap: 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.app .app-chrome-back, .app .settings-icon-btn, .app .avatar-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
}
.app .app-chrome-content {
  gap: 8px;
}
.app .app-project-title {
  gap: 0;
}
.app .app-project-title-line {
  gap: 8px;
}
.app .app-project-title .title {
  font-size: 15px;
  font-weight: 650;
  line-height: 18px;
  letter-spacing: 0;
}
.app .app-project-title .meta {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-soft);
}
.app .split {
  background: var(--bg-panel);
}
.app .split:not(.split-focus) {
  grid-template-columns: minmax(320px, var(--chat-panel-width, 460px)) 8px minmax(400px, 1fr);
}
.app .split.split-focus {
  grid-template-columns: minmax(0, 1fr);
}
.app .split-chat-slot {
  padding: 0;
}
.app .split-chat-slot > .pane {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-panel);
}
.app .split-resize-handle {
  width: 8px;
  min-width: 8px;
  background: transparent;
}
.app .split-resize-handle:hover, .app .split-resize-handle:focus-visible, .app .split.is-resizing-chat .split-resize-handle {
  background: transparent;
}
.app .chat-header, .app .ws-tabs-shell {
  height: 44px;
  min-height: 44px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: none;
}
.app .chat-header {
  padding: 0 12px 0 14px;
}
.app .chat-header-tabs {
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}
.app .chat-header-tab {
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 12.5px;
}
.app .chat-header-tab.active {
  background: var(--bg-subtle);
  border-color: transparent;
  box-shadow: none;
}
.app .chat-header-actions .icon-only {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}
.app .chat-log {
  gap: 14px;
  padding: 18px 18px 20px;
  background: var(--bg-panel);
}
.app .chat-log-tail-spacer {
  margin-top: -14px;
}
.app .msg {
  max-width: 100%;
}
.app .msg.user {
  width: fit-content;
  max-width: min(88%, 520px);
}
.app .msg.user .user-text-wrap {
  max-width: 100%;
}
.app .msg.user .user-text {
  width: max-content;
  max-width: 100%;
}
.app .msg.assistant {
  max-width: min(100%, 620px);
}
.app .msg .role {
  margin-bottom: 5px;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text-muted);
  font-weight: 560;
}
.app .msg .role > span:first-child, .app .msg .role .role-name {
  color: var(--text);
  font-weight: 650;
}
.app .msg.user .role {
  padding-right: 4px;
  color: var(--text-soft);
}
.app .msg.assistant .role {
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-soft);
}
.app .msg.assistant .role .role-name {
  font-weight: 600;
}
.app .msg.assistant .role .role-agent-icon {
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}
.app .msg-time {
  font-size: 10.5px;
  color: var(--text-soft);
  font-weight: 500;
}
.app .msg.user .user-text {
  padding: 8px 12px;
  border: 1px solid var(--selected);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--selected) 88%, #000);
  }
  border-radius: 14px 14px 4px 14px;
  background: var(--selected);
  color: #fff;
  line-height: 1.45;
  font-size: 13.5px;
  box-shadow: var(--shadow-xs);
}
.app .msg.user .user-copy-btn {
  color: var(--text-soft);
}
.app .msg.user .user-copy-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.app .msg.assistant .assistant-flow {
  gap: 14px;
}
.app .msg.assistant .prose-block {
  max-width: 68ch;
  color: var(--text);
  font-size: var(--prose-font-size, 15px);
  line-height: var(--prose-line-height, 1.75);
}
.app .msg.assistant .prose-block .md-p + .md-p {
  margin-top: 14px;
}
.app .status-pill, .app .op-waiting, .app .assistant-footer {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.app .status-pill {
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
}
.app .assistant-footer {
  padding: 4px 0;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.app .msg.assistant:hover .assistant-footer, .app .assistant-footer[data-streaming="true"], .app .assistant-footer[data-last="true"] {
  opacity: 1;
}
.app .assistant-footer .dot {
  width: 5px;
  height: 5px;
  background: var(--text-faint);
}
.app .assistant-footer .dot[data-active="true"] {
  background: var(--green);
  box-shadow: none;
}
.app .assistant-footer .assistant-label {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}
.app .assistant-footer .assistant-stats {
  font-size: 11.5px;
  color: var(--text-muted);
}
.app .op-waiting {
  width: fit-content;
  padding: 7px 14px;
  font-size: 12px;
}
.app .op-waiting-dot {
  width: 7px;
  height: 7px;
  margin-top: 1px;
}
.app .action-card {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.app .action-card:hover {
  background: none;
}
.app .action-card-toggle {
  min-height: 36px;
  padding: 4px;
  gap: 6px;
  border-radius: var(--radius);
  font-size: 13px;
}
.app .action-card-toggle:hover {
  background: var(--bg-fill-tertiary);
}
.app .action-card-status {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.app .action-card-toggle .summary {
  font-size: 13px;
}
.app .action-card-body {
  padding: 8px 0 8px 32px;
  border-top: none;
}
.app .op-card {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: background 160ms var(--ease-out);
}
.app .op-card:hover {
  background: none;
}
.app .op-card-head {
  padding: 4px;
  gap: 6px;
  border-radius: var(--radius);
}
.app .op-card-head:hover {
  background: var(--bg-fill-tertiary);
}
.app .live-code-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-fill-secondary);
}
.app .live-code-box .live-code-head {
  cursor: default;
  border-radius: 0;
}
.app .live-code-box .live-code-head:hover {
  background: transparent;
}
.app .op-status {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.app .thinking-block {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.app .thinking-toggle {
  min-height: 36px;
  padding: 4px;
  gap: 6px;
  border-radius: var(--radius);
  font-size: 13px;
}
.app .thinking-toggle:hover {
  background: var(--bg-fill-tertiary);
}
.app .thinking-status {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.app .thinking-label {
  font-size: 13px;
}
.app .thinking-body {
  padding: 4px 8px 8px 32px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  border-top: none;
  max-height: min(40vh, 320px);
  overflow-y: auto;
}
.app .produced-files {
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.app .produced-files-label {
  font-size: 11.5px;
  margin-bottom: 10px;
  color: var(--text-muted);
}
.app .produced-file {
  padding: 6px 10px;
  border-radius: var(--radius);
  gap: 10px;
  background: none;
  border: none;
  box-shadow: none;
  transition: background 160ms var(--ease-out);
}
.app .produced-file:hover {
  background: var(--bg-fill-tertiary);
}
.app .produced-file-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: none;
  font-size: 13px;
  color: var(--text-muted);
}
.app .produced-file-name {
  font-size: 13px;
}
.app .produced-file-size {
  font-size: 11px;
}
.app .produced-file-actions .ghost, .app .produced-file-actions .ghost-link {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-muted);
}
.app .produced-file-actions .ghost:hover, .app .produced-file-actions .ghost-link:hover {
  background: var(--bg-fill-tertiary);
  color: var(--text);
}
.app .status-detail {
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  font-size: 11.5px;
  font-family: var(--mono);
}
.app .chat-empty-wrap {
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 16px 12px 6px;
}
.app .chat-empty {
  align-items: flex-start;
  max-width: none;
  gap: 5px;
  text-align: left;
}
.app .chat-empty-title {
  font-size: 13.5px;
}
.app .chat-empty-hint {
  font-size: 12.5px;
  line-height: 1.45;
}
.app .chat-examples {
  max-width: none;
  gap: 8px;
}
.app .chat-example {
  min-height: 0;
  padding: 10px 12px;
  gap: 10px;
  border-radius: var(--radius-md);
  box-shadow: none;
  animation: none;
  opacity: 1;
}
.app .chat-example:hover {
  transform: none;
  box-shadow: none;
}
.app .chat-example::before {
  display: none;
}
.app .chat-example-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--bg-fill-secondary);
  box-shadow: none;
}
.app .chat-example-title {
  font-size: 12.8px;
}
.app .chat-example-prompt {
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}
.app .chat-example-cta {
  width: 22px;
  height: 22px;
}
.app .chat-design-artifacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  width: 100%;
}
.app .chat-design-artifact {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text);
  overflow: hidden;
  cursor: default;
  box-shadow: none;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.app .chat-design-artifact[role='button'] {
  cursor: pointer;
}
.app .chat-design-artifact:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.app .chat-design-artifact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.app .chat-design-artifact-more {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-style: dashed;
  color: var(--text-muted);
}
.app .chat-design-artifact-more:hover {
  color: var(--text);
}
.app .chat-design-artifact-more-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}
.app .chat-design-artifact-more-count {
  font-size: 12px;
  font-weight: 650;
}
.app .chat-design-artifact-preview {
  aspect-ratio: 16 / 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.app .chat-design-artifact-preview iframe, .app .chat-design-artifact-preview img, .app .chat-design-artifact-preview video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
  background: #fff;
  pointer-events: none;
}
.app .chat-design-artifact-preview .sketch-preview, .app .chat-design-artifact-preview .sketch-preview svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.app .chat-design-artifact-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 5px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.app .chat-design-artifact-meta {
  display: grid;
  gap: 3px;
  padding: 8px 9px 9px;
}
.app .chat-design-artifact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
}
.app .chat-design-artifact-kind {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-muted);
}
.app .chat-design-artifacts-empty {
  width: 100%;
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
}
.app .chat-connect-repo {
  max-width: none;
  padding: 10px 12px;
  gap: 10px;
  border-radius: var(--radius-md);
  box-shadow: none;
  animation: none;
  opacity: 1;
  width: auto;
}
.app .chat-connect-repo-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
}
.app .chat-connect-repo-title {
  font-size: 12.8px;
}
.app .chat-connect-repo-text {
  font-size: 12px;
  line-height: 1.35;
}
.app .split-chat-slot > .pane {
  --chat-composer-inline-inset: 10px;
}
.app .composer {
  padding: 9px 10px 11px;
  background: transparent;
}
.chat-composer-fixed-layer .composer {
  gap: 5px;
  padding: 8px 10px 10px;
  background: transparent;
}
.app .composer-shell {
  padding: 7px;
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 84%, var(--border-strong));
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-subtle));
  }
  box-shadow: var(--shadow-sm);
}
.chat-composer-fixed-layer .composer-shell {
  padding: 6px 0;
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.chat-composer-fixed-layer .composer-shell > * {
  margin-left: 8px;
  margin-right: 8px;
}
.app .composer-shell:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  }
  box-shadow: 0 1px 2px var(--text), 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  }
}
.chat-composer-fixed-layer .composer-shell:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 4%, transparent);
  }
}
.app .composer.drag-active .composer-shell {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  box-shadow: 0 0 0 2px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent);
  }
}
.chat-composer-fixed-layer .composer.drag-active .composer-shell {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  box-shadow: 0 0 0 2px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent);
  }
}
.chat-composer-fixed-layer .composer-input-wrap {
  background: var(--bg-panel);
  border-color: var(--border-soft);
}
.app .composer textarea {
  min-height: 56px;
  max-height: min(184px, 34vh);
}
.chat-composer-fixed-layer .composer textarea {
  min-height: 56px;
  max-height: min(184px, 34vh);
}
.app .composer.composer-active-file-mode textarea, .chat-composer-fixed-layer .composer.composer-active-file-mode textarea {
  min-height: clamp(150px, 20vh, 210px);
  max-height: min(300px, 32vh);
}
.app .composer-row {
  min-height: 30px;
  padding-top: 6px;
  margin-top: 1px;
  gap: 6px;
}
.chat-composer-fixed-layer .composer-row {
  min-height: 28px;
  padding-top: 0;
  border-top: none;
}
.app .composer-row .icon-btn, .app .composer-import, .app .composer-research, .app .composer-send {
  border-radius: var(--radius-sm);
}
.chat-composer-fixed-layer .composer-row .icon-btn, .chat-composer-fixed-layer .composer-import, .chat-composer-fixed-layer .composer-research, .chat-composer-fixed-layer .composer-send {
  border-radius: var(--radius-sm);
}
.app .composer-row .icon-btn, .chat-composer-fixed-layer .composer-row .icon-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.app .composer-send {
  height: 28px;
  min-height: 28px;
  min-width: 58px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
.chat-composer-fixed-layer .composer-send {
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
.app .composer-row .session-mode-toggle, .app .composer-row .session-mode-toggle__trigger, .app .composer-row .avatar-agent-trigger, .chat-composer-fixed-layer .composer-row .session-mode-toggle, .chat-composer-fixed-layer .composer-row .session-mode-toggle__trigger, .chat-composer-fixed-layer .composer-row .avatar-agent-trigger {
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.app .composer-send:disabled {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}
.chat-composer-fixed-layer .composer-send:disabled {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}
.app .working-dir-pill, .chat-composer-fixed-layer .working-dir-pill {
  position: relative;
  display: inline-flex;
  margin-top: 0;
  font-size: 11.5px;
}
.app .working-dir-pill-trigger, .chat-composer-fixed-layer .working-dir-pill-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 28px;
  padding: 3px 9px 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
}
.app .working-dir-pill-trigger:hover, .chat-composer-fixed-layer .working-dir-pill-trigger:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 6%, var(--bg-panel));
  }
  border-color: var(--border-strong, var(--border));
}
.app .working-dir-pill-trigger:disabled, .chat-composer-fixed-layer .working-dir-pill-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.app .working-dir-pill-label, .chat-composer-fixed-layer .working-dir-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .working-dir-pill-menu, .chat-composer-fixed-layer .working-dir-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 220;
  min-width: 260px;
  max-width: 340px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.12));
}
.app .working-dir-pill-menu-path, .chat-composer-fixed-layer .working-dir-pill-menu-path {
  padding: 4px 10px;
  color: var(--text-muted);
  font-size: 10.5px;
  word-break: break-all;
}
.app .working-dir-pill-menu-item, .chat-composer-fixed-layer .working-dir-pill-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
.app .working-dir-pill-menu-item.small, .chat-composer-fixed-layer .working-dir-pill-menu-item.small {
  font-size: 11.5px;
}
.app .working-dir-pill-menu-item:hover, .chat-composer-fixed-layer .working-dir-pill-menu-item:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  }
}
.app .working-dir-pill-menu-item:disabled, .chat-composer-fixed-layer .working-dir-pill-menu-item:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}
.app .working-dir-pill-menu-item:disabled:hover, .chat-composer-fixed-layer .working-dir-pill-menu-item:disabled:hover {
  background: transparent;
}
.app .working-dir-pill-menu-divider, .chat-composer-fixed-layer .working-dir-pill-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}
.app .working-dir-pill-menu-section, .chat-composer-fixed-layer .working-dir-pill-menu-section {
  padding: 4px 10px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.app .working-dir-pill-menu-recent, .chat-composer-fixed-layer .working-dir-pill-menu-recent {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .working-dir-pill-menu-error, .chat-composer-fixed-layer .working-dir-pill-menu-error {
  padding: 4px 10px 6px;
  color: var(--red, #c0392b);
  font-size: 11.5px;
}
.app .composer-row .working-dir-pill-menu, .chat-composer-fixed-layer .composer-row .working-dir-pill-menu {
  top: auto;
  right: auto;
  bottom: calc(100% + 6px);
  left: 0;
}
.app .composer-row .working-dir-pill, .chat-composer-fixed-layer .composer-row .working-dir-pill {
  flex: 0 0 auto;
}
.app .composer-row .working-dir-pill-trigger, .chat-composer-fixed-layer .composer-row .working-dir-pill-trigger {
  flex-wrap: nowrap;
}
.app .composer-hint {
  margin: 4px 8px 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 58%, transparent);
  }
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .split-chat-slot .composer {
  gap: 5px;
}
.app .split-chat-slot .composer-hint {
  order: -1;
  margin: 0 8px 1px;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 64%, transparent);
  }
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.chat-composer-fixed-layer .composer-hint {
  order: -1;
  margin: 0 8px 1px;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 64%, transparent);
  }
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.app .workspace {
  padding: 0;
  background: var(--bg-panel);
}
.app .ws-tabs-shell {
  padding: 6px 14px;
}
.app .ws-focus-expand {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
}
.app .ws-tabs-bar {
  gap: 6px;
  scrollbar-width: none;
}
.app .ws-tabs-bar::-webkit-scrollbar {
  display: none;
}
.app .ws-tab {
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  box-shadow: none;
}
.app .ws-tab.active {
  background: var(--bg-subtle);
  border-color: var(--border);
  box-shadow: none;
}
.app .ws-tab .tab-icon, .app .ws-tab.active .tab-icon {
  color: var(--accent);
}
.app .ws-body {
  border: 0;
  border-radius: 0;
  background: var(--bg-panel);
  box-shadow: none;
}
.app .df-panel, .app .df-main {
  background: var(--bg-panel);
}
.app .df-panel:not(.no-preview) {
  grid-template-columns: minmax(280px, 1fr) minmax(0, 360px);
}
.app .df-main {
  border-right-color: var(--border);
}
.app .df-body {
  padding: 4px 20px 20px;
  background: var(--bg-panel);
}
.app .df-controls-row {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}
.app .df-controls-primary {
  grid-template-columns: 31px minmax(220px, 340px) minmax(0, auto);
  gap: 10px;
}
.app .df-controls-toggles {
  gap: 8px;
}
.app .df-refresh-control {
  width: 31px;
  height: 31px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  box-shadow: none;
  flex: 0 0 auto;
}
.app .df-refresh-control:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.app .df-controls-row .df-actions {
  margin-left: 0;
  gap: 8px;
}
.app .df-controls-row .df-actions button {
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  box-shadow: none;
}
.app .df-controls-row .df-actions button:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.app .df-group-toggle {
  align-self: flex-start;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  box-shadow: none;
}
.app .df-group-toggle > span {
  padding: 0 8px;
}
.app .df-group-toggle button {
  min-height: 26px;
  padding: 2px 11px;
  border-radius: var(--radius);
}
.app .df-group-toggle button.active {
  background: var(--bg-panel);
  box-shadow: none;
}
@media (max-width: 1180px) {
  .app .df-controls-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .df-controls-primary {
    grid-template-columns: 31px minmax(180px, 1fr);
  }
}
@media (max-width: 720px) {
  .app .df-controls-primary {
    grid-template-columns: 31px minmax(0, 1fr);
  }
}
.app .df-pagination {
  gap: 8px;
  padding: 0 0 12px;
  color: var(--text-muted);
}
.app .df-pagination-start {
  border-bottom: 1px solid var(--border-soft);
}
.app .df-pagination-center {
  justify-content: center;
  padding: 14px 0 10px;
}
.app .df-pagination select, .app .df-page-btn {
  min-height: 28px;
  border-radius: var(--radius);
  background-color: var(--bg-panel);
  box-shadow: none;
}
.app .df-select-all {
  border-radius: var(--radius);
}
.app .df-table {
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.app .df-table thead {
  border-bottom: 1px solid var(--border-soft);
}
.app .df-th-check, .app .df-cell-check {
  width: 28px;
  padding-left: 8px;
}
.app .df-th-icon, .app .df-cell-icon {
  width: 40px;
}
.app .df-th-kind {
  width: 128px;
}
.app .df-th-time {
  width: 126px;
}
.app .df-th-menu, .app .df-cell-menu {
  width: 34px;
  padding-right: 6px;
}
.app .df-panel:not(.no-preview) .df-th-kind, .app .df-panel:not(.no-preview) .df-cell-kind, .app .df-panel:not(.no-preview) .df-th-time, .app .df-panel:not(.no-preview) .df-cell-time {
  display: none;
}
.app .df-panel:not(.no-preview) .df-table {
  table-layout: auto;
}
.app .df-panel:not(.no-preview) .df-th-name, .app .df-panel:not(.no-preview) .df-cell-name {
  width: auto;
}
.app .df-panel:not(.no-preview) .df-cell-name {
  min-width: 0;
  max-width: none;
}
.app .df-panel:not(.no-preview) .df-row-name-btn, .app .df-panel:not(.no-preview) .df-row-name-wrap, .app .df-panel:not(.no-preview) .df-row-name {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.app .df-panel:not(.no-preview) .df-row-sub-kind, .app .df-panel:not(.no-preview) .df-row-sub-time {
  display: inline;
}
.app .df-panel:not(.no-preview) .df-row-name {
  display: block;
}
.app .df-th-sortable {
  padding: 10px 8px 8px;
  font-size: 10px;
}
.app .df-section-row td {
  padding: 14px 8px 7px;
  border-top: 0;
}
.app .df-section-label {
  padding: 0;
  font-size: 10px;
}
.app .df-cell-name, .app .df-cell-kind, .app .df-cell-time {
  padding-top: 8px;
  padding-bottom: 8px;
}
.app .df-cell-name {
  padding-right: 14px;
}
.app .df-file-row + .df-file-row .df-cell-check, .app .df-file-row + .df-file-row .df-cell-icon, .app .df-file-row + .df-file-row .df-cell-name, .app .df-file-row + .df-file-row .df-cell-kind, .app .df-file-row + .df-file-row .df-cell-time, .app .df-file-row + .df-file-row .df-cell-menu {
  border-top: 1px solid var(--border-soft);
}
.app .df-file-row:hover {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 62%, transparent);
  }
}
.app .df-file-row.selected:hover {
  background: var(--blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--blue) 90%, #000);
  }
}
.app .df-row-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
}
.app .df-row-name {
  font-size: 13px;
  font-weight: 560;
  color: var(--text-strong);
}
.app .df-row-name-wrap {
  gap: 0;
}
.app .df-row-size, .app .df-row-sub, .app .df-row-meta, .app .df-cell-kind, .app .df-cell-time, .app .df-kind-label {
  font-size: 12px;
}
.app .df-cell-time, .app .df-page-info {
  color: var(--text-soft);
}
.app .handoff-wrap {
  position: relative;
  display: inline-flex;
}
.app .handoff-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  overflow: hidden;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-split:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 6%, transparent);
  }
}
.app .handoff-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 30px;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-trigger:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  }
}
.app .handoff-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.app .handoff-trigger--solo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 4px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.app .handoff-trigger--solo:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 6%, transparent);
  }
}
.app .handoff-trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.app .handoff-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-caret:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  }
  color: var(--text);
}
.app .handoff-caret:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.app .editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--text) inset;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent) inset;
  }
}
.app .handoff-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(76vh, 560px);
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.12));
  padding: 7px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.app .handoff-menu-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 5%, transparent);
  }
}
.app .handoff-menu-tab {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-menu-tab:hover {
  color: var(--text);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 7%, transparent);
  }
}
.app .handoff-menu-tab.active {
  color: var(--text);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.app .handoff-path-row {
  display: flex;
  min-width: 0;
}
.app .handoff-path-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--text) 3%);
  }
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-path-button:hover:not(:disabled) {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
}
.app .handoff-path-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.app .handoff-path-button.copied {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
}
.app .handoff-path-button-main, .app .handoff-path-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app .handoff-path-button-main {
  gap: 8px;
  min-width: 0;
}
.app .handoff-path-button-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  color: var(--text);
}
.app .handoff-path-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .handoff-menu-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.app .handoff-menu-title {
  padding: 0 2px;
  margin: 0;
  color: var(--text);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 650;
}
.app .handoff-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.app .handoff-menu-item:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  }
}
.app .handoff-menu-item.active {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.app .handoff-menu-item.dim {
  opacity: 0.62;
}
.app .handoff-target-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  padding: 1px;
}
.app .handoff-editor-rail {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
}
.app .handoff-cli-rail {
  grid-template-rows: none;
}
.app .handoff-target-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.app .handoff-target-group + .handoff-target-group {
  padding-top: 2px;
}
.app .handoff-target-group-title {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 18px;
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 18px;
  font-weight: 650;
}
.app .handoff-target-rail--unavailable .handoff-target-card {
  border-style: dashed;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--text-muted) 5%);
  }
}
.app .handoff-target-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--text) 4%);
  }
}
.app .handoff-target-card:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
}
.app .handoff-target-card.active, .app .handoff-target-card.copied {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
}
.app .handoff-target-card .agent-icon {
  color: var(--text);
}
.app .handoff-target-arrow {
  justify-self: end;
  color: var(--text-muted);
}
.app .handoff-target-card:hover .handoff-target-arrow {
  color: var(--text);
}
.app .handoff-target-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app .handoff-target-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 14px;
  font-weight: 600;
}
.app .handoff-target-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 12px;
}
.app .handoff-framework-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 0 1px;
}
.app .handoff-amr-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
  }
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-amr-link:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  }
}
.app .handoff-amr-link .agent-icon {
  flex: 0 0 auto;
}
.app .handoff-framework-label {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 18px;
  margin-right: 2px;
}
.app .handoff-framework-chip {
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.app .handoff-framework-chip:hover {
  color: var(--text);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }
}
.app .handoff-framework-chip.active {
  color: var(--accent-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 78%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-panel));
  }
  box-shadow: 0 0 0 1px var(--accent), 0 1px 2px rgba(180, 90, 59, 0.14);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 1px 2px rgba(180, 90, 59, 0.14);
  }
  font-weight: 700;
}
.app .handoff-framework-chip.active:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 88%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel));
  }
}
.app .handoff-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}
.app .handoff-menu-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 10px;
}
.app .handoff-menu-error {
  font-size: 11.5px;
  color: var(--text-danger, #c0392b);
  padding: 4px 10px 6px;
}
.project-ds-picker {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
}
.project-ds-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1);
  max-width: 220px;
}
.project-ds-picker-trigger:hover {
  background: var(--bg-panel-strong, var(--bg-panel));
  border-color: var(--border-strong, var(--border));
}
.project-ds-picker-trigger.picked {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  color: var(--text-strong, var(--text));
}
.project-ds-picker-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.project-ds-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.project-ds-picker-swatches {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.project-ds-picker-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  }
}
.project-ds-picker-popover {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 18px 48px rgba(0, 0, 0, 0.16));
  display: flex;
  flex-direction: column;
  z-index: 140;
  overflow: hidden;
}
.project-ds-picker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 34px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.project-ds-picker-search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--text);
}
.project-ds-picker-body {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.project-ds-picker-list {
  overflow-y: auto;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-right: 1px solid var(--border);
}
.project-ds-picker-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}
.project-ds-picker-option:hover {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  }
}
.project-ds-picker-option.active {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.project-ds-picker-option-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.project-ds-picker-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong, var(--text));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-ds-picker-option-cat {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  }
  color: var(--text-muted);
}
.project-ds-picker-option-summary {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-ds-picker-option-swatches {
  display: flex;
  gap: 3px;
}
.project-ds-picker-option-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.project-ds-picker-option-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.project-ds-picker-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px;
  text-align: center;
}
.project-ds-picker-preview {
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-ds-picker-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong, var(--text));
}
.project-ds-picker-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-panel);
}
.project-ds-picker-preview-expand {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 6px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  }
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  color: var(--text-strong, var(--text));
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.4);
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.project-ds-picker-preview-stage:hover .project-ds-picker-preview-expand, .project-ds-picker-preview-expand:focus-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.project-ds-picker-preview-expand:hover {
  background: var(--bg-panel);
}
.project-ds-picker-preview-expand svg {
  display: block;
  width: 13px !important;
  height: 13px !important;
}
.project-ds-picker-preview-expand:hover {
  color: var(--accent);
  border-color: var(--border-strong, var(--border));
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-panel));
  }
}
.project-ds-picker-preview-cat {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  }
  color: var(--text-muted);
}
.project-ds-picker-preview-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.project-ds-picker-preview-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.project-ds-picker-preview-swatch {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.project-ds-picker-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  border: 0;
  background: #fff;
  transform: scale(0.181);
  transform-origin: top left;
  pointer-events: none;
}
.project-ds-picker-preview-empty, .project-ds-picker-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px;
  text-align: center;
}
.project-ds-picker-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: var(--text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text) 38%, transparent);
  }
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: project-ds-picker-fullscreen-in 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.project-ds-picker-fullscreen-frame {
  width: min(1280px, calc(100vw - 56px));
  height: min(820px, calc(100vh - 56px));
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 32px 80px rgba(0, 0, 0, 0.24));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.project-ds-picker-fullscreen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.project-ds-picker-fullscreen-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong, var(--text));
  font-size: 14px;
}
.project-ds-picker-fullscreen-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.project-ds-picker-fullscreen-close svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
}
.project-ds-picker-fullscreen-close:hover {
  border-color: var(--border);
  color: var(--text-strong, var(--text));
  background: var(--bg-subtle);
}
.project-ds-picker-fullscreen-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--bg);
}
@keyframes project-ds-picker-fullscreen-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 720px) {
  .project-ds-picker-body {
    grid-template-columns: 1fr;
    max-height: calc(70vh - 42px);
  }
  .project-ds-picker-list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 34vh;
  }
  .project-ds-picker-preview {
    min-height: 220px;
  }
  .project-ds-picker-fullscreen {
    padding: 12px;
  }
  .project-ds-picker-fullscreen-frame {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    border-radius: var(--radius-md);
  }
}
:where( .modal-backdrop, .new-project-modal-backdrop, .automation-modal-backdrop, .use-everywhere-modal-backdrop, .plugin-details-modal-backdrop, .plugins-import-modal__backdrop, .ds-modal-backdrop, .prompt-template-modal-backdrop, .prompt-template-lightbox-backdrop, .home-hero-confirm__backdrop, .project-ds-picker-fullscreen, .staged-preview-modal, .qs-overlay ) {
  --modal-window-drag-strip-height: 56px;
}
:where( .modal-backdrop, .new-project-modal-backdrop, .automation-modal-backdrop, .use-everywhere-modal-backdrop, .plugin-details-modal-backdrop, .plugins-import-modal__backdrop, .ds-modal-backdrop, .prompt-template-modal-backdrop, .prompt-template-lightbox-backdrop, .home-hero-confirm__backdrop, .project-ds-picker-fullscreen, .staged-preview-modal, .qs-overlay )::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--modal-window-drag-strip-height);
  pointer-events: auto;
  -webkit-app-region: drag !important;
}
@keyframes od-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes od-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes od-fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes od-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes od-popover-in {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(-3px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes od-slide-left {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.app, .entry-shell {
  animation: od-fade-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__brand {
  animation: od-fade-slide-up 350ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__title {
  animation: od-fade-slide-up 400ms cubic-bezier(0.23, 1, 0.32, 1) 40ms both;
}
.home-hero__subtitle {
  animation: od-fade-slide-up 400ms cubic-bezier(0.23, 1, 0.32, 1) 80ms both;
}
.home-hero__input-card {
  animation: od-fade-slide-up 350ms cubic-bezier(0.23, 1, 0.32, 1) 100ms both;
}
.home-hero__rail-group {
  animation: od-fade-in 300ms cubic-bezier(0.23, 1, 0.32, 1) 160ms both;
}
.home-hero__prompt-examples-grid > * {
  animation: od-fade-slide-up 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__prompt-examples-grid > *:nth-child(1) {
  animation-delay: 80ms;
}
.home-hero__prompt-examples-grid > *:nth-child(2) {
  animation-delay: 120ms;
}
.home-hero__prompt-examples-grid > *:nth-child(3) {
  animation-delay: 160ms;
}
.home-hero__prompt-examples-grid > *:nth-child(4) {
  animation-delay: 200ms;
}
.home-hero__prompt-examples-grid > *:nth-child(5) {
  animation-delay: 240ms;
}
.home-hero__prompt-examples-grid > *:nth-child(6) {
  animation-delay: 280ms;
}
.home-hero__plugin-presets > * {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__plugin-presets > *:nth-child(1) {
  animation-delay: 60ms;
}
.home-hero__plugin-presets > *:nth-child(2) {
  animation-delay: 100ms;
}
.home-hero__plugin-presets > *:nth-child(3) {
  animation-delay: 140ms;
}
.home-hero__plugin-presets > *:nth-child(4) {
  animation-delay: 180ms;
}
.home-hero__plugin-presets > *:nth-child(5) {
  animation-delay: 220ms;
}
.home-hero__plugin-presets > *:nth-child(6) {
  animation-delay: 260ms;
}
.integrations-view__hero {
  animation: od-fade-slide-up 350ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.integrations-view__tabs {
  animation: od-fade-in 300ms cubic-bezier(0.23, 1, 0.32, 1) 60ms both;
}
.integrations-view__panel {
  animation: od-fade-slide-up 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms both;
}
.integrations-view__coming-soon {
  animation: od-fade-slide-up 350ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.entry-nav-rail__btn {
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.entry-nav-rail__btn:active:not(:disabled) {
  transform: scale(0.97);
}
.project-actions-toolbar {
  animation: od-fade-slide-down 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.conv-menu {
  animation: od-popover-in 160ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.od-select-menu {
  animation: od-popover-in 140ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.entry-help-popover {
  animation: od-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.chat-history-menu {
  animation: od-popover-in 160ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.chat-empty-wrap {
  animation: od-fade-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.viewer-empty {
  animation: od-fade-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.inspect-panel {
  animation: od-slide-left 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.comment-side-panel {
  animation: od-slide-left 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.settings-section {
  animation: od-fade-slide-up 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.memory-suggestion-panel {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.memory-management-panel {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mcp-picker {
  animation: od-fade-slide-up 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.marketplace-view__header {
  animation: od-fade-slide-up 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.marketplace-view__empty {
  animation: od-fade-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.library-section-header {
  animation: od-fade-slide-up 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.workspace-tab {
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.workspace-tab:active {
  transform: scale(0.98);
}
.updater-popup {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.marketplace-view__card {
  transition: border-color 120ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.marketplace-view__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.marketplace-view__card:active {
  transform: translateY(0) scale(0.99);
}
.design-card:active, .plugins-home__card:active, .recent-projects__card:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
.plugin-action-panel {
  animation: od-slide-left 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.chat-history-empty, .comments-empty {
  animation: od-fade-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__error, .connector-panel-alert, .deploy-error, .library-import-error, .library-install-error, .memory-disabled-banner, .memory-noprovider-banner, .df-upload-banner, .mcp-error {
  animation: od-fade-slide-down 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.field-error {
  animation: od-fade-in 160ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.onboarding-view__panel {
  animation: od-fade-slide-up 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.newproj-section {
  animation: od-fade-slide-up 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ds-evidence-panel {
  animation: od-slide-left 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.home-hero__plugin-hover-card {
  animation: od-popover-in 160ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.live-artifact-refresh-panel {
  animation: od-slide-left 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.live-artifact-refresh-section {
  animation: od-fade-slide-up 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.use-everywhere-section {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.orbit-automation-lock-banner {
  animation: od-fade-slide-down 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ds-modal-backdrop {
  animation: od-fade-in 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ds-modal {
  animation: od-scale-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.plugin-details-modal {
  animation: od-fade-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
button.primary:active:not(:disabled), button.primary-ghost:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.2.6_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.2.6_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/home/index.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
.entry-shell--no-header {
  grid-template-rows: 1fr;
  --entry-rail-width: 56px;
}
.entry-shell--onboarding {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 100vh;
  padding: 0;
  background: var(--bg);
}
.entry-onboarding-modal {
  width: 100%;
  height: 100vh;
  overflow: auto;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}
.entry-shell--no-header .entry {
  grid-template-columns: 0 minmax(0, 1fr);
  transition: grid-template-columns 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-shell--no-header .entry.entry--rail-open {
  grid-template-columns: var(--entry-rail-width, 56px) minmax(0, 1fr);
}
.entry-nav-rail {
  width: 100%;
  min-width: 0;
  border-right: 0;
  background: var(--bg-panel);
  padding: 8px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 30;
  pointer-events: none;
}
.entry-nav-rail.is-open {
  pointer-events: auto;
}
.entry:not(.entry--rail-open) .entry-nav-rail {
  overflow: hidden;
  border-right: 0;
}
.entry--rail-open .entry-nav-rail {
  overflow: visible;
}
.entry-nav-rail__brand {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.entry-nav-rail .entry-nav-rail__collapse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry--rail-open .entry-nav-rail__brand:hover .entry-nav-rail__collapse, .entry--rail-open .entry-nav-rail__collapse:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .entry--rail-open .entry-nav-rail__collapse {
    opacity: 1;
    pointer-events: auto;
  }
}
.entry:not(.entry--rail-open) .entry-nav-rail__collapse {
  opacity: 0;
  pointer-events: none;
}
.entry-nav-rail__collapse:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--text-strong, #111);
}
.entry-nav-rail__collapse:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.entry-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-rail-toggle svg, .entry-nav-rail__collapse svg {
  flex-shrink: 0;
}
.entry-rail-toggle:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--text-strong, #111);
}
.entry-rail-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.entry--rail-open .entry-rail-toggle {
  display: none;
}
.entry-nav-rail::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 64%, transparent);
  }
  transform: scaleX(0.5);
  transform-origin: right center;
  pointer-events: none;
}
.entry-nav-rail__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.entry-nav-rail__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-bottom: 4px;
}
.entry-nav-rail__divider {
  display: none;
}
.entry-nav-rail__logo-divider {
  display: none;
}
.entry-nav-rail [data-tooltip] {
  position: relative;
}
.entry-nav-rail [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--bg-panel);
  background: var(--text-strong, #111);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  z-index: 60;
}
.entry-nav-rail [data-tooltip]:hover::after, .entry-nav-rail [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.entry-nav-rail [data-tooltip][aria-expanded='true']::after {
  display: none;
}
[dir='rtl'] .entry-nav-rail [data-tooltip]::after {
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(4px);
}
[dir='rtl'] .entry-nav-rail [data-tooltip]:hover::after, [dir='rtl'] .entry-nav-rail [data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}
.entry-help-menu {
  position: relative;
  display: inline-flex;
}
.entry-help-popover {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  z-index: 70;
  min-width: 220px;
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(0, 0, 0, 0.14));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.entry-help-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.entry-help-popover__item:hover {
  background: var(--bg-subtle);
  color: var(--text-strong);
}
.entry-help-popover__icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.entry-help-popover__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 6px;
}
[dir='rtl'] .entry-help-popover {
  left: auto;
  right: calc(100% + 12px);
}
[dir='rtl'] .entry-help-popover__item {
  flex-direction: row-reverse;
  text-align: right;
}
.entry-updater-menu {
  --updater-accent: var(--accent);
  --updater-accent-strong: var(--accent-strong, var(--accent));
  --updater-accent-ui: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --updater-accent-ui: color-mix(in srgb, var(--updater-accent) 62%, var(--text-muted));
  }
  --updater-accent-line: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    --updater-accent-line: color-mix(in srgb, var(--updater-accent-strong) 24%, var(--border));
  }
  --updater-accent-dot: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --updater-accent-dot: color-mix(in srgb, var(--updater-accent) 76%, #ffffff);
  }
  --updater-accent-glow: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    --updater-accent-glow: color-mix(in srgb, var(--updater-accent) 9%, transparent);
  }
  position: relative;
  display: inline-flex;
}
.entry-updater-menu .entry-updater-menu__button {
  position: relative;
  overflow: visible;
  isolation: isolate;
  color: var(--updater-accent-ui);
  border-color: var(--updater-accent-line);
  background: linear-gradient( 180deg, var(--updater-accent), var(--updater-accent) ), var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--updater-accent) 6%, transparent), color-mix(in srgb, var(--updater-accent) 2%, transparent) ), color-mix(in srgb, var(--bg-panel) 97%, var(--updater-accent));
  }
  box-shadow: 0 0 0 1px var(--updater-accent-strong), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 14px var(--updater-accent-glow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 9%, transparent), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 14px var(--updater-accent-glow);
  }
  transform: translateZ(0);
}
.entry-updater-menu .entry-updater-menu__button::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: calc(var(--radius) - 1px);
  background: radial-gradient( circle at 50% 24%, var(--updater-accent), transparent 48% ), linear-gradient( 180deg, var(--updater-accent), var(--updater-accent) );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 50% 24%, color-mix(in srgb, var(--updater-accent) 9%, transparent), transparent 48% ), linear-gradient( 180deg, color-mix(in srgb, var(--updater-accent) 5%, transparent), color-mix(in srgb, var(--updater-accent) 2%, transparent) );
  }
  opacity: 0.72;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-updater-menu .entry-updater-menu__button.is-ready::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  z-index: 3;
  border-radius: var(--radius-pill);
  background: var(--updater-accent-dot);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--updater-accent-strong), 0 0 8px var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 30%, transparent), 0 0 8px color-mix(in srgb, var(--updater-accent) 28%, transparent);
  }
}
.entry-updater-menu .entry-updater-menu__button:hover, .entry-updater-menu .entry-updater-menu__button.is-active {
  color: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--updater-accent) 72%, var(--text-strong));
  }
  border-color: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--updater-accent-strong) 42%, var(--border-strong));
  }
  background: linear-gradient( 180deg, var(--updater-accent), var(--updater-accent) ), var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--updater-accent) 10%, transparent), color-mix(in srgb, var(--updater-accent) 4%, transparent) ), color-mix(in srgb, var(--bg-panel) 94%, var(--updater-accent));
  }
  box-shadow: 0 0 0 1px var(--updater-accent-strong), 0 4px 12px rgba(0, 0, 0, 0.16), 0 0 18px var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 18%, transparent), 0 4px 12px rgba(0, 0, 0, 0.16), 0 0 18px color-mix(in srgb, var(--updater-accent) 14%, transparent);
  }
}
.entry-updater-menu .entry-updater-menu__button:hover::before, .entry-updater-menu .entry-updater-menu__button.is-active::before {
  opacity: 1;
  transform: scale(1.04);
}
.entry-updater-menu .entry-updater-menu__button.is-ready {
  animation: updater-ready-arrive 520ms cubic-bezier(0.23, 1, 0.32, 1) 1;
}
.entry-updater-menu .entry-updater-menu__button.is-current {
  color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--green) 72%, var(--text-muted));
  }
  border-color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  }
  background: var(--green-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--green-bg) 45%, var(--bg-panel));
  }
  box-shadow: 0 0 0 1px var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 8%, transparent);
  }
}
.entry-updater-menu .entry-updater-menu__button.is-error {
  color: var(--red);
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  }
  background: var(--red-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red-bg) 62%, var(--bg-panel));
  }
  box-shadow: 0 0 0 1px var(--red), 0 4px 12px var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent), 0 4px 12px color-mix(in srgb, var(--red) 10%, transparent);
  }
}
.entry-updater-menu .entry-updater-menu__button.is-disabled {
  cursor: default;
  color: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--updater-accent) 42%, var(--text-faint));
  }
  border-color: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--updater-accent-strong) 22%, transparent);
  }
}
.entry-updater-menu .entry-updater-menu__button.is-disabled:hover {
  background: linear-gradient( 180deg, var(--updater-accent), var(--updater-accent) ), var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--updater-accent) 5%, transparent), color-mix(in srgb, var(--updater-accent) 2%, transparent) ), color-mix(in srgb, var(--bg-panel) 97%, var(--updater-accent));
  }
  color: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--updater-accent) 42%, var(--text-faint));
  }
}
.entry-updater-menu__glyph {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: currentColor;
  filter: drop-shadow(0 0 4px var(--updater-accent));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--updater-accent) 18%, transparent));
  }
  transform: translateY(-1px);
}
.entry-updater-menu__glyph::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient( circle, var(--updater-accent), transparent 68% );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle, color-mix(in srgb, var(--updater-accent) 8%, transparent), transparent 68% );
  }
}
.entry-updater-menu__progress {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--updater-accent-strong) 22%, transparent);
  }
  pointer-events: none;
}
.entry-updater-menu__progress::after {
  content: '';
  display: block;
  width: var(--updater-progress, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--updater-accent-strong);
  transition: width 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes updater-ready-arrive {
  0% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 color-mix(in srgb, var(--updater-accent) 0%, transparent);
    transform: translateZ(0) scale(0.96);
  }
  100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 9%, transparent), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 14px var(--updater-accent-glow);
    transform: translateZ(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-updater-menu .entry-updater-menu__button.is-ready {
    animation: none;
  }
}
.entry-main__topbar .entry-updater-menu {
  margin-left: 0;
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--updater-accent) 66%, var(--text-muted));
  }
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button::before {
  inset: 5px;
  border-radius: inherit;
  opacity: 0;
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button.is-ready {
  border-color: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--updater-accent-strong) 18%, var(--border));
  }
  background: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--updater-accent) 5%, transparent);
  }
  box-shadow: 0 0 0 1px var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 5%, transparent);
  }
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button.is-current {
  color: var(--green);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--green) 76%, var(--text-muted));
  }
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button:hover, .entry-main__topbar .entry-updater-menu .entry-updater-menu__button.is-active {
  color: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--updater-accent) 72%, var(--text-strong));
  }
  border-color: var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--updater-accent-strong) 24%, var(--border));
  }
  background: var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--updater-accent) 7%, transparent);
  }
  box-shadow: 0 0 0 1px var(--updater-accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 8%, transparent);
  }
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button:hover::before, .entry-main__topbar .entry-updater-menu .entry-updater-menu__button.is-active::before {
  opacity: 0.72;
  transform: none;
}
.entry-main__topbar .entry-updater-menu .entry-updater-menu__button.is-ready::after {
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-width: 1.5px;
  box-shadow: 0 0 0 1px var(--updater-accent-strong), 0 0 6px var(--updater-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--updater-accent-strong) 24%, transparent), 0 0 6px color-mix(in srgb, var(--updater-accent) 20%, transparent);
  }
}
.entry-main__topbar .entry-updater-menu__glyph {
  width: 20px;
  height: 20px;
  filter: none;
  transform: none;
}
.entry-main__topbar .entry-updater-menu__glyph::before {
  opacity: 0;
}
.entry-main__topbar .entry-updater-menu__progress {
  left: 7px;
  right: 7px;
  bottom: 4px;
  height: 2px;
}
.entry-nav-rail__logo {
  appearance: none;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-nav-rail__logo:hover {
  background: transparent;
  border-color: transparent;
}
.entry-nav-rail__logo:active {
  transform: scale(0.96);
}
.entry-nav-rail__logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.entry-nav-rail__logo.is-active {
  background: transparent;
  border-color: transparent;
}
.entry-nav-rail__logo-img {
  position: absolute;
  inset: auto;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.entry-nav-rail__btn {
  appearance: none;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.entry-nav-rail__btn > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.entry-nav-rail__btn:not(.is-active):hover {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  }
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
}
.entry-nav-rail__btn.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  }
}
.entry-nav-rail__btn.is-active:hover {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  }
}
.entry-nav-rail__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.avatar-item-chevron {
  margin-left: 4px;
  color: var(--text-faint);
}
.avatar-language-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  margin: 2px 4px;
  padding: 3px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  scrollbar-width: thin;
}
.avatar-item--lang {
  padding-left: 14px;
}
.avatar-item--lang.is-active {
  color: var(--accent);
}
.avatar-item--lang.is-active .avatar-item-meta {
  color: var(--accent);
  opacity: 0.8;
}
.entry-main--scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: 0;
  --entry-topbar-h: 44px;
}
.entry-main__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.entry-main__inner--wide {
  max-width: 1440px;
}
.entry-main__topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 0;
  background: var(--bg);
  isolation: isolate;
}
.entry-main__topbar::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
}
.entry-main__topbar-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.entry-main__topbar-chips--icon-only .entry-discord-badge, .entry-main__topbar-chips--icon-only .use-everywhere-chip, .entry-main__topbar-chips--icon-only .inline-switcher__chip {
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: var(--radius);
  position: relative;
  overflow: visible;
}
.entry-main__topbar-chips--icon-only .entry-discord-badge__label, .entry-main__topbar-chips--icon-only .entry-discord-badge__sep, .entry-main__topbar-chips--icon-only .entry-discord-badge__online, .entry-main__topbar-chips--icon-only .use-everywhere-chip__label, .entry-main__topbar-chips--icon-only .inline-switcher__chip-text, .entry-main__topbar-chips--icon-only .inline-switcher__chip-chevron {
  display: none;
}
.entry-main__topbar-chips--icon-only .use-everywhere-chip__icon, .entry-main__topbar-chips--icon-only .inline-switcher__chip-icon {
  margin: 0;
}
.entry-main__topbar-chips--icon-only [data-tooltip] {
  position: relative;
}
.entry-main__topbar-chips--icon-only [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--bg-panel);
  background: var(--text-strong, #111);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  z-index: 60;
}
.entry-main__topbar-chips--icon-only [data-tooltip]:hover::after, .entry-main__topbar-chips--icon-only [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.entry-main__topbar-chips--icon-only [data-tooltip][aria-expanded='true']::after {
  display: none;
}
.entry-settings-menu {
  position: relative;
  display: inline-flex;
}
.entry-settings-menu__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: min(760px, calc(100vh - 92px));
  max-height: min(760px, calc(100dvh - 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(0, 0, 0, 0.14));
}
.entry-settings-social-share {
  padding: 0 3px;
}
.entry-settings-menu__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.entry-settings-menu__section-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  min-height: 20px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.entry-settings-menu__select {
  position: relative;
  display: flex;
  flex-direction: column;
}
.entry-settings-menu__select-trigger {
  appearance: none;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.entry-settings-menu__select-trigger:hover {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-strong);
}
.entry-settings-menu__select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-settings-menu__select-caret {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-settings-menu__select-trigger[aria-expanded='true'] .entry-settings-menu__select-caret {
  transform: rotate(180deg);
}
.entry-settings-menu__select-list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entry-settings-menu__select-list.is-open {
  grid-template-rows: 1fr;
}
.entry-settings-menu__select-list-inner {
  min-height: 0;
  overflow: hidden;
}
.entry-settings-menu__select-panel {
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  scrollbar-width: thin;
}
.entry-settings-menu__option {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  min-height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.entry-settings-menu__option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-settings-menu__option-check {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--accent-strong);
}
.entry-settings-menu__option:hover {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-strong);
}
.entry-settings-menu__option.is-active {
  color: var(--accent-strong);
  font-weight: 600;
}
.entry-settings-menu__theme {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  min-width: 0;
  min-height: 30px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.entry-settings-menu__theme span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-settings-menu__theme:hover {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-strong);
}
.entry-settings-menu__theme.is-active {
  background: var(--bg-panel);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  }
  color: var(--accent-strong);
  box-shadow: var(--shadow-xs);
}
.entry-settings-menu__theme-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.entry-settings-menu__divider {
  height: 1px;
  margin: 0 4px;
  background: var(--border-soft);
}
.entry-settings-menu__item {
  appearance: none;
  min-height: 34px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.entry-settings-menu__item:hover {
  background: var(--bg-subtle);
  border-color: var(--border-soft);
  color: var(--text-strong);
}
.entry-settings-menu__item-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.entry-settings-menu__x-mark {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.entry-settings-menu__item-end {
  margin-left: auto;
  color: var(--text-faint);
  flex: 0 0 auto;
}
.entry-settings-menu__item-meta + .entry-settings-menu__item-end {
  margin-left: 0;
}
.entry-settings-menu__item-meta {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11.5px;
}
.entry-settings-menu__item--primary {
  background: var(--bg-subtle);
  border-color: var(--border-soft);
}
[dir='rtl'] .entry-settings-menu__popover {
  right: auto;
  left: 0;
}
[dir='rtl'] .entry-settings-menu__item {
  text-align: right;
}
.avatar-item .avatar-item-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.avatar-item-stack__top {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 12.5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-item-stack__sub {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-item--compact-only, .avatar-popover__divider--compact-only {
  display: none;
}
.avatar-popover__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 6px;
}
.inline-switcher {
  position: relative;
  display: inline-flex;
}
.inline-switcher__chip {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
  max-width: 360px;
  overflow: hidden;
}
.inline-switcher__chip:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.inline-switcher__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.inline-switcher__chip[aria-expanded='true'] {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  background: var(--bg-panel);
}
.inline-switcher__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.inline-switcher__byok-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--accent-tint);
}
.inline-switcher__chip-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inline-switcher__chip-mode {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-strong);
}
.inline-switcher__chip-sep {
  color: var(--text-faint);
}
.inline-switcher__chip-primary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.inline-switcher__chip-model {
  min-width: 0;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inline-switcher__chip-chevron {
  color: var(--text-faint);
  flex: 0 0 auto;
}
.inline-switcher--compact .inline-switcher__chip-text {
  display: none;
}
.inline-switcher__amr-reminder-dot {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--danger, #dc2626);
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--danger, #dc2626);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
  }
  pointer-events: none;
}
.inline-switcher__amr-reminder-dot--chip {
  top: -2px;
  right: -2px;
}
.inline-switcher__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}
.inline-switcher__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inline-switcher__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.inline-switcher__hint {
  font-size: 12px;
  color: var(--text-muted);
}
.inline-switcher__seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}
.inline-switcher__seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.inline-switcher__seg-btn:hover:not(:disabled) {
  color: var(--text);
}
.inline-switcher__seg-btn.is-active {
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}
.inline-switcher__seg-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.inline-switcher__agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.inline-switcher__agent-row {
  display: flex;
  min-width: 0;
}
.inline-switcher__agent {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
  width: 100%;
  min-width: 0;
}
.inline-switcher__agent:hover {
  background: var(--bg-subtle);
}
.inline-switcher__agent.is-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
  background: var(--accent-tint);
  color: var(--text-strong);
}
.inline-switcher__amr-reminder-dot--agent {
  top: 6px;
  left: 26px;
}
.inline-switcher__agent-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.inline-switcher__agent-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 76px;
  height: 18px;
  margin-left: auto;
}
.inline-switcher__agent-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.inline-switcher__agent-status-icon.is-error {
  color: var(--danger);
  background: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
  }
}
.inline-switcher__agent-status-icon.is-signed-out {
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.inline-switcher__agent-status-icon.is-pending svg {
  animation: spin 0.8s linear infinite;
}
.inline-switcher__agent-action-label {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-strong);
  text-align: right;
}
.inline-switcher__agent-action-default, .inline-switcher__agent-action-hover {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.inline-switcher__agent-action-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--danger);
  transform: translateY(3px);
}
.inline-switcher__agent-action-label.is-cancelable {
  cursor: pointer;
}
.inline-switcher__agent:hover .inline-switcher__agent-action-label.is-cancelable .inline-switcher__agent-action-default, .inline-switcher__agent:focus-visible .inline-switcher__agent-action-label.is-cancelable .inline-switcher__agent-action-default {
  opacity: 0;
  transform: translateY(-3px);
}
.inline-switcher__agent:hover .inline-switcher__agent-action-label.is-cancelable .inline-switcher__agent-action-hover, .inline-switcher__agent:focus-visible .inline-switcher__agent-action-label.is-cancelable .inline-switcher__agent-action-hover {
  opacity: 1;
  transform: translateY(0);
}
.inline-switcher__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inline-switcher__chip-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.inline-switcher__chip-tab:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.inline-switcher__chip-tab.is-active {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
}
.model-select-searchable {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.model-select-searchable.is-open {
  z-index: 1400;
}
.model-select-searchable__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1401;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.model-select-searchable__search-row {
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.model-select-searchable__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.model-select-searchable__list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.model-select-searchable__option {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 30px 8px 10px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.model-select-searchable__option:hover {
  background: var(--bg-subtle);
}
.model-select-searchable__option.is-active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.model-select-searchable__option[data-selected='true']::after {
  content: '✓';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: currentColor;
}
.model-select-searchable__option-label {
  font-size: 12.5px;
  line-height: 1.35;
}
.model-select-searchable__option-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.model-select-searchable__empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.inline-switcher__select {
  appearance: none;
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374716b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.inline-switcher__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.inline-switcher__warn {
  font-size: 12px;
  color: var(--amber, #b26200);
  background: var(--amber-bg, #fff3e0);
  border: 1px solid var(--amber, #b26200);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--amber, #b26200) 22%, transparent);
  }
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.inline-switcher__more {
  appearance: none;
  border: 0;
  background: transparent;
  border-top: 1px solid var(--border-soft);
  margin-top: 2px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.inline-switcher__more:hover {
  color: var(--text-strong);
}
@media (max-width: 700px) {
  .inline-switcher__chip-mode, .inline-switcher__chip-sep:first-of-type {
    display: none;
  }
  .inline-switcher__chip-model {
    max-width: 96px;
  }
}
.entry-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.entry-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.entry-section__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.onboarding-view {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  gap: 20px;
  width: min(980px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 40px 42px 42px;
}
.onboarding-view__hero {
  display: grid;
  gap: 8px;
  max-width: none;
  padding-top: 0;
  text-align: center;
  justify-items: center;
}
.onboarding-view__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}
.onboarding-view__hero h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: 0;
}
.onboarding-view__hero p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.onboarding-view__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(860px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  justify-self: center;
}
.onboarding-view__steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-subtle) 4%);
  }
  box-shadow: var(--shadow-xs);
}
.onboarding-view__steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.onboarding-view__steps li button {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.onboarding-view__steps li button:hover:not(:disabled), .onboarding-view__steps li button:active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.onboarding-view__steps li:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--accent) 4%);
  }
}
.onboarding-view__steps li.is-active {
  color: var(--text-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--accent) 6%);
  }
  box-shadow: inset 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.onboarding-view__steps li.is-active:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 93%, var(--accent) 7%);
  }
}
.onboarding-view__steps li.is-active span, .onboarding-view__steps li.is-done span {
  color: var(--accent-contrast, #fff);
  background: var(--accent);
}
.onboarding-view__body {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-top: 2px;
}
.onboarding-view__content {
  display: grid;
  gap: 18px;
  width: min(860px, 100%);
  min-width: 0;
  overflow: visible;
}
.onboarding-view__panel {
  display: grid;
  gap: 18px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.onboarding-view__design-system-create {
  width: min(760px, 100%);
  min-width: 0;
  display: grid;
  gap: 18px;
}
.onboarding-view__ds-intro {
  display: grid;
  gap: 14px;
}
.onboarding-view__ds-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.onboarding-view__ds-points > div {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--accent) 4%);
  }
  box-shadow: var(--shadow-xs);
}
.onboarding-view__ds-points strong {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.25;
}
.onboarding-view__ds-points span {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.onboarding-view__ds-skip {
  justify-self: start;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--text);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__ds-skip:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--accent) 4%);
  }
  transform: translateY(-1px);
}
.onboarding-view__panel-head {
  display: grid;
  gap: 7px;
  max-width: 620px;
  padding: 0 2px;
}
.onboarding-view__panel-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
}
.onboarding-view__panel-head p {
  margin: 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.onboarding-view__handoff-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  }
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
  }
}
.onboarding-view__handoff-status > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}
.onboarding-view__handoff-status span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.onboarding-view__handoff-status strong {
  font-size: 13px;
  line-height: 1.25;
}
.onboarding-view__handoff-status small {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.onboarding-view__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}
.onboarding-view__action-status {
  margin-right: auto;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}
.onboarding-view__action-status.is-error {
  color: var(--danger-text, #991b1b);
}
.onboarding-view__primary, .onboarding-view__secondary, .onboarding-view__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__primary {
  color: var(--accent-contrast, #fff);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.onboarding-view__secondary {
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.onboarding-view__ghost {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.onboarding-view__primary:hover, .onboarding-view__secondary:hover, .onboarding-view__ghost:hover {
  transform: translateY(-1px);
}
.onboarding-view__primary:hover:not(:disabled) {
  color: var(--accent-contrast, #fff);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 10px 24px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
.onboarding-view__primary:focus-visible, .onboarding-view__secondary:focus-visible, .onboarding-view__ghost:focus-visible, .onboarding-view__steps li button:focus-visible, .onboarding-view__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.onboarding-view__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.onboarding-view__runtime-stack {
  display: grid;
  gap: 18px;
}
.onboarding-view__alternatives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.onboarding-view__alternatives .onboarding-view__card {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 96px;
  padding: 13px 14px;
  gap: 11px;
}
.onboarding-view__alternatives .onboarding-view__icon {
  width: 34px;
  height: 34px;
}
.onboarding-view__alternatives .onboarding-view__card-top {
  display: flex;
  min-height: 0;
}
.onboarding-view__alternatives .onboarding-view__card strong {
  font-size: 14px;
  line-height: 1.2;
}
.onboarding-view__alternatives .onboarding-view__card small {
  font-size: 11.5px;
  line-height: 1.4;
}
.onboarding-view__alternatives .onboarding-view__card-action {
  margin-top: 2px;
  font-size: 11.5px;
}
.onboarding-view__setup-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 97%, var(--accent) 3%);
  }
  box-shadow: var(--shadow-xs);
}
.onboarding-view__setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.onboarding-view__setup-head strong {
  display: block;
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.3;
}
.onboarding-view__setup-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.onboarding-view__setup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}
.onboarding-view__setup-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.onboarding-view__mini-button, .onboarding-view__field-row button, .onboarding-view__protocol-strip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 11px;
  color: var(--text);
  background: var(--bg-panel);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.onboarding-view__mini-button:hover, .onboarding-view__field-row button:hover, .onboarding-view__protocol-strip button:hover {
  color: var(--text-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
}
.onboarding-view__mini-button:disabled {
  cursor: default;
  opacity: 0.58;
}
.onboarding-view__mini-button.is-loading {
  color: var(--text-muted);
}
.onboarding-view__agent-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.onboarding-view__agent-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--bg-panel);
  text-align: left;
  cursor: pointer;
  animation: onboarding-agent-pop 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.onboarding-view__agent-chip.is-selected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--accent) 8%);
  }
}
.onboarding-view__agent-chip .agent-icon {
  flex: 0 0 auto;
}
.onboarding-view__agent-chip span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.onboarding-view__agent-chip strong, .onboarding-view__agent-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding-view__agent-chip strong {
  color: var(--text-strong);
  font-size: 12.5px;
  line-height: 1.2;
}
.onboarding-view__agent-chip small {
  color: var(--text-muted);
  font-size: 11px;
}
.onboarding-view__empty-slice {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 13px;
  color: var(--text-muted);
  background: var(--bg-panel);
  font-size: 12px;
}
.onboarding-view__scan-copy {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.onboarding-view__scan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text-muted);
  background: var(--bg-panel);
  font-size: 12px;
  line-height: 1.3;
}
.onboarding-view__scan-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.onboarding-view__protocol-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.onboarding-view__protocol-strip button.is-selected {
  color: var(--text-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, var(--accent) 10%);
  }
}
.onboarding-view__inline-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.onboarding-view__inline-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--text-strong);
  background: var(--bg-panel);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.onboarding-view__inline-field input:focus, .onboarding-view__inline-field input:focus-visible, .onboarding-view__agent-chip:focus-visible, .onboarding-view__mini-button:focus-visible, .onboarding-view__field-row button:focus-visible, .onboarding-view__protocol-strip button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.onboarding-view__field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.onboarding-view__field-row button {
  min-height: 42px;
}
.onboarding-view__compact-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.onboarding-view__test-status {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
}
.onboarding-view__test-status.is-running {
  color: var(--text-muted);
  background: var(--bg-panel);
}
.onboarding-view__test-status.is-success {
  color: var(--success-text, #166534);
  border-color: var(--success, #22c55e);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--success, #22c55e) 34%, var(--border));
  }
  background: var(--success, #22c55e);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--success, #22c55e) 9%, var(--bg-panel));
  }
}
.onboarding-view__test-status.is-warn {
  color: var(--warning-text, #92400e);
  border-color: var(--warning, #f59e0b);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 34%, var(--border));
  }
  background: var(--warning, #f59e0b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--bg-panel));
  }
}
.onboarding-view__test-status.is-error {
  color: var(--danger-text, #991b1b);
  border-color: var(--danger, #ef4444);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--border));
  }
  background: var(--danger, #ef4444);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger, #ef4444) 9%, var(--bg-panel));
  }
}
@keyframes onboarding-agent-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.onboarding-view__card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 112px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__card--featured {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  min-height: 168px;
  padding: 22px 24px;
  background: linear-gradient( 135deg, var(--accent) 0%, var(--bg-panel) 54% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 13%, var(--bg-panel)) 0%, var(--bg-panel) 54% );
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  }
  box-shadow: 0 18px 40px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
.onboarding-view__card--featured.onboarding-view__card--amr {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 18px;
  align-items: center;
  min-height: 246px;
  padding: 40px 34px 36px;
  overflow: visible;
  position: relative;
  z-index: 3;
}
.onboarding-view__card.is-selected {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 94%, var(--accent) 6%);
  }
}
.onboarding-view__card--featured.is-selected {
  background: linear-gradient( 135deg, var(--accent) 0%, var(--bg-panel) 54% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-panel)) 0%, color-mix(in srgb, var(--bg-panel) 96%, var(--accent) 4%) 54% );
  }
}
.onboarding-view__card--featured:not(.is-selected) {
  border-color: var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.onboarding-view__card:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 97%, var(--accent) 3%);
  }
  transform: translateY(-1px);
}
.onboarding-view__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 26px;
  margin-bottom: 0;
}
.onboarding-view__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--accent-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  }
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  }
}
.onboarding-view__card--featured .onboarding-view__icon {
  width: 52px;
  height: 52px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  }
}
.onboarding-view__icon.onboarding-view__icon--asset, .onboarding-view__card--featured .onboarding-view__icon.onboarding-view__icon--asset {
  overflow: hidden;
  border-color: transparent;
  background: transparent;
}
.onboarding-view__icon--asset .onboarding-view__agent-logo {
  display: block;
  flex: 0 0 auto;
  border-radius: inherit;
}
.onboarding-view__card--amr > .onboarding-view__icon {
  grid-column: 1;
  grid-row: 1;
}
.onboarding-view__badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
}
.onboarding-view__badge {
  color: var(--accent-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
}
.onboarding-view__card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.onboarding-view__identity {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  width: fit-content;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text-muted) 12%);
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, var(--text-muted) 2%);
  }
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
.onboarding-view__card--amr.is-selected .onboarding-view__identity {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 96%, var(--accent) 4%);
  }
}
.onboarding-view__identity .onboarding-view__card-copy {
  align-self: center;
  gap: 4px;
  padding-right: 0;
}
.onboarding-view__card-model {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  align-self: start;
}
.onboarding-view__card strong {
  display: block;
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.25;
}
.onboarding-view__card--featured strong {
  font-size: 22px;
}
.onboarding-view__card-meta {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
}
.onboarding-view__card small {
  display: block;
  margin-top: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-line;
}
.onboarding-view__card--featured small {
  max-width: none;
  font-size: 13px;
}
.onboarding-view__benefit-stack {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.onboarding-view__benefit-aside {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}
.onboarding-view__benefit-aside .onboarding-view__benefit-stack {
  gap: 10px;
}
.onboarding-view__model-picker {
  display: grid;
  gap: 8px;
  width: min(260px, 100%);
  cursor: default;
}
.onboarding-view__card-model .onboarding-view__model-picker {
  width: min(260px, 100%);
}
.onboarding-view__card--amr .onboarding-view__model-picker {
  width: 100%;
}
.onboarding-view__alternatives .onboarding-view__model-picker {
  width: 100%;
}
.onboarding-view__setup-panel .onboarding-view__model-picker, .onboarding-view__setup-panel .onboarding-view__setup-model-picker {
  width: 100%;
}
.onboarding-view__model-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.onboarding-view__model-source {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.onboarding-view__model-source::before {
  content: "·";
  margin: 0 5px;
  color: var(--text-muted);
}
.onboarding-view__model-source.live, .onboarding-view__model-source.fallback {
  color: inherit;
}
.onboarding-view__model-select-wrap {
  position: relative;
  display: block;
}
.onboarding-view__model-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text-muted) 12%);
  }
  border-radius: var(--radius);
  background-color: var(--bg-panel);
  color: var(--text-strong);
  padding: 0 44px 0 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__model-select-wrap select:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
  background-color: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--bg-panel) 97%, var(--accent) 3%);
  }
}
.onboarding-view__model-select-wrap select:focus-visible {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  }
  outline-offset: 2px;
}
.onboarding-view__model-select-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.onboarding-view__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
}
.onboarding-view__benefit-aside .onboarding-view__benefits {
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  max-width: 100%;
}
.onboarding-view__benefit-aside .onboarding-view__benefits > .onboarding-view__benefit {
  min-height: 28px;
  padding: 0 12px;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  }
  color: var(--accent-strong);
  background: linear-gradient( 180deg, var(--accent) 0%, var(--accent) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 13%, var(--bg-panel)) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg-panel)) 100% );
  }
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 6px 16px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 7%, transparent);
  }
  font-size: 13px;
  font-weight: 760;
}
.onboarding-view__benefit {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  }
  color: var(--accent-strong);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent-strong) 92%, var(--text));
  }
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }
  font-size: 11px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}
.onboarding-view__benefit--hero {
  min-height: 24px;
  padding: 0 9px;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  }
  color: var(--accent-strong);
  background: linear-gradient( 180deg, var(--accent) 0%, var(--accent) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 15%, var(--bg-panel)) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg-panel)) 100% );
  }
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 7px 18px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 7px 18px color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
.onboarding-view__upcoming-benefits {
  display: flex;
  align-items: center;
  justify-self: start;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.onboarding-view__upcoming-label {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
  }
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.onboarding-view__upcoming-label::after {
  content: "";
  width: 2px;
  height: 2px;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  }
}
.onboarding-view__benefit--upcoming {
  min-height: 22px;
  padding: 0 8px;
  border-color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--text-muted) 8%, transparent);
  }
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 68%, var(--text));
  }
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 4%, transparent);
  }
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}
.onboarding-view__card-status {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  max-width: min(260px, calc(100% - 72px));
  color: var(--text-muted);
  pointer-events: none;
}
.onboarding-view__card-status .amr-account-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 20px;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  }
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, var(--accent) 10%);
  }
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  color: currentColor;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}
.onboarding-view__card-status .amr-account-control__status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding-view__card-status .amr-account-control__status::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.7;
}
.onboarding-view__card-status .amr-account-control--signed-in {
  color: var(--success-text, #15803d);
  border-color: var(--success-text, #15803d);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--success-text, #15803d) 18%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--success-text, #15803d) 12%);
  }
}
.onboarding-view__card-status .amr-account-control--signing-in {
  color: var(--accent-strong);
}
.onboarding-view__card-status .amr-account-control--error {
  color: var(--danger-text, #991b1b);
  border-color: var(--danger-text, #991b1b);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--danger-text, #991b1b) 18%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--danger-text, #991b1b) 12%);
  }
}
.onboarding-view__card-status .amr-account-control__error {
  display: none;
}
.onboarding-view__card-action {
  grid-column: 2;
  justify-self: start;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.92;
}
.onboarding-view__card--featured .onboarding-view__card-action {
  grid-column: auto;
  justify-self: end;
}
.onboarding-view__check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  color: var(--accent-contrast, #fff);
  background: var(--accent);
  box-shadow: 0 8px 18px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
.onboarding-view__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.onboarding-view__email-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 16px;
}
.onboarding-view__email-label {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
}
.onboarding-view__email-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 13px;
  color: var(--text-strong);
  background: var(--bg-panel);
  font: inherit;
  font-size: 13px;
  box-shadow: var(--shadow-xs);
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__email-input::placeholder {
  color: var(--text-muted);
}
.onboarding-view__email-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  }
}
.onboarding-view__select-field {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.onboarding-view__select-field[data-open='true'] {
  z-index: 60;
}
.onboarding-view__select-label {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
}
.onboarding-view__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px 0 13px;
  color: var(--text-muted);
  background: var(--bg-panel);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__select-trigger svg {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.onboarding-view__select-trigger.has-value {
  color: var(--text-strong);
}
.onboarding-view__select-trigger:hover, .onboarding-view__select-trigger.is-open {
  color: var(--text-strong);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  }
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 97%, var(--accent) 3%);
  }
}
.onboarding-view__select-trigger.is-open {
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
.onboarding-view__select-trigger.is-open svg {
  color: var(--accent-strong);
  transform: rotate(180deg);
}
.onboarding-view__select-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.onboarding-view__select-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  --onboarding-select-menu-height: min(var(--onboarding-select-menu-max-height, 224px), 36vh);
  --onboarding-select-search-height: 0px;
  max-height: var(--onboarding-select-menu-height);
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
  }
  box-shadow: 0 12px 28px var(--shadow-color, #000);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-color, #000) 10%, transparent);
  }
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
  @supports (color: color-mix(in lab, red, red)) {
    scrollbar-color: color-mix(in srgb, var(--text-muted) 34%, transparent) transparent;
  }
}
.onboarding-view__select-menu[data-searchable='true'] {
  --onboarding-select-search-height: 42px;
}
.onboarding-view__select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg-panel) 6%);
  }
  color: var(--text-muted);
}
.onboarding-view__select-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
}
.onboarding-view__select-search input::placeholder {
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
  }
}
.onboarding-view__select-options {
  display: grid;
  gap: 1px;
  max-height: calc(var(--onboarding-select-menu-height) - var(--onboarding-select-search-height));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
  @supports (color: color-mix(in lab, red, red)) {
    scrollbar-color: color-mix(in srgb, var(--text-muted) 34%, transparent) transparent;
  }
}
.onboarding-view__select-empty {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--text-muted);
  font-size: 13px;
}
.onboarding-view__select-options::-webkit-scrollbar {
  width: 8px;
}
.onboarding-view__select-options::-webkit-scrollbar-track {
  background: transparent;
}
.onboarding-view__select-options::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  }
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: padding-box;
}
.onboarding-view__select-field[data-placement='top'] .onboarding-view__select-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.onboarding-view__select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 8px 6px 10px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.onboarding-view__select-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding-view__select-option:hover {
  color: var(--text-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  }
}
.onboarding-view__select-option.is-selected {
  color: var(--accent-strong);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  }
  font-weight: 650;
}
.onboarding-view__select-option svg {
  flex: 0 0 auto;
}
.onboarding-view__select-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.entry-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
  white-space: nowrap;
}
.entry-star-badge:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.entry-star-badge:active {
  transform: scale(0.98);
}
.entry-star-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.entry-star-badge__icon {
  color: var(--text-strong);
  flex: 0 0 auto;
}
.entry-star-badge:hover .entry-star-badge__icon {
  color: var(--text-strong);
}
.entry-star-badge__label {
  color: var(--text-strong);
  font-weight: 600;
}
.entry-star-badge__sep {
  color: var(--text-faint);
}
.entry-star-badge__count {
  display: inline-block;
  min-width: 5ch;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: opacity 160ms var(--ease-out);
}
.entry-star-badge__count[data-loading='true'] {
  opacity: 0.55;
}
.entry-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
  white-space: nowrap;
}
.entry-discord-badge:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.entry-discord-badge:active {
  transform: scale(0.98);
}
.entry-discord-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.entry-discord-badge__icon {
  color: #5865f2;
  flex: 0 0 auto;
}
.entry-discord-badge:hover .entry-discord-badge__icon {
  color: #5865f2;
}
.entry-discord-badge__label {
  white-space: nowrap;
}
.entry-discord-badge__sep {
  color: var(--text-faint);
}
.entry-discord-badge__online {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .entry-star-badge__label {
    display: none;
  }
  .entry-star-badge__sep {
    display: none;
  }
  .entry-discord-badge {
    padding: 0 9px;
  }
  .entry-discord-badge__label {
    display: none;
  }
  .entry-discord-badge__sep {
    display: none;
  }
}
@media (max-width: 900px) {
  .entry-nav-rail {
    width: 56px;
  }
  .entry-main__inner {
    padding: 24px 16px 56px;
  }
  .entry-main__inner--wide {
    max-width: 100%;
  }
  .entry-main__topbar-chips {
    display: none;
  }
  .avatar-item--compact-only {
    display: flex;
  }
  .avatar-popover__divider--compact-only {
    display: block;
  }
}
@media (max-width: 900px) {
  .onboarding-view {
    width: min(820px, 100%);
    padding: 34px 28px 36px;
  }
  .onboarding-view__hero h1 {
    font-size: 42px;
  }
  .onboarding-view__alternatives, .onboarding-view__ds-points {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .entry-shell--onboarding {
    padding: 0;
  }
  .entry-onboarding-modal {
    height: 100vh;
    border-radius: 0;
  }
  .onboarding-view {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px 32px;
  }
  .onboarding-view__hero h1 {
    font-size: 32px;
  }
  .onboarding-view__panel {
    min-height: 0;
    padding: 18px;
  }
  .onboarding-view__steps {
    grid-template-columns: 1fr;
  }
  .onboarding-view__card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 0;
  }
  .onboarding-view__card--featured, .onboarding-view__alternatives, .onboarding-view__agent-strip, .onboarding-view__compact-fields {
    grid-template-columns: 1fr;
  }
  .onboarding-view__card-action {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 760px) {
  .entry-shell--onboarding {
    padding: 0;
  }
  .entry-onboarding-modal {
    height: 100vh;
    border-radius: 0;
  }
  .onboarding-view {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px 32px;
  }
  .onboarding-view__hero h1 {
    font-size: 32px;
  }
  .onboarding-view__panel {
    min-height: 0;
    padding: 18px;
  }
  .onboarding-view__steps {
    grid-template-columns: 1fr;
  }
  .onboarding-view__ds-points {
    grid-template-columns: 1fr;
  }
  .onboarding-view__card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 0;
  }
  .onboarding-view__card--featured, .onboarding-view__alternatives, .onboarding-view__agent-strip, .onboarding-view__compact-fields {
    grid-template-columns: 1fr;
  }
  .onboarding-view__card-action {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 760px) {
  .onboarding-view__card--featured.onboarding-view__card--amr {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
    min-height: 190px;
    padding: 28px 18px 32px;
  }
  .onboarding-view__identity {
    grid-column: 1 / -1;
    width: 100%;
  }
  .onboarding-view__card--amr .onboarding-view__card-model {
    grid-column: 1 / -1;
  }
  .onboarding-view__card--benefit-aside .onboarding-view__benefit-aside {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    padding-right: 0;
    justify-self: stretch;
  }
  .onboarding-view__model-picker {
    width: 100%;
  }
  .onboarding-view__card-status {
    left: 18px;
    bottom: 16px;
    max-width: min(240px, calc(100% - 72px));
  }
}
.onboarding-view__card--skeleton {
  cursor: default;
  border-color: var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.onboarding-view__card--skeleton:hover {
  border-color: var(--border);
  background: var(--bg-panel);
  transform: none;
}
.onboarding-view__skeleton-line, .onboarding-view__skeleton-model-label, .onboarding-view__skeleton-model-bar {
  display: block;
  border-radius: var(--radius-pill);
  background: linear-gradient( 110deg, transparent 28%, color-mix(in srgb, #fff 30%, transparent) 50%, transparent 72% ) 0 0 / 200% 100%, var(--bg-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 110deg, transparent 28%, color-mix(in srgb, #fff 30%, transparent) 50%, transparent 72% ) 0 0 / 200% 100%, color-mix(in srgb, var(--bg-muted) 82%, var(--bg-panel));
  }
  animation: onboarding-skeleton-sheen 1.55s ease-in-out infinite;
}
[data-theme="dark"] .onboarding-view__skeleton-line, [data-theme="dark"] .onboarding-view__skeleton-model-label, [data-theme="dark"] .onboarding-view__skeleton-model-bar {
  background: linear-gradient( 110deg, transparent 28%, color-mix(in srgb, #fff 12%, transparent) 50%, transparent 72% ) 0 0 / 200% 100%, var(--bg-elevated);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 110deg, transparent 28%, color-mix(in srgb, #fff 12%, transparent) 50%, transparent 72% ) 0 0 / 200% 100%, color-mix(in srgb, var(--bg-elevated) 70%, var(--bg-muted));
  }
}
.onboarding-view__skeleton-line--meta {
  width: 116px;
  height: 11px;
  margin-top: 2px;
}
.onboarding-view__benefit-stack--skeleton {
  gap: 11px;
}
.onboarding-view__skeleton-line--benefit {
  height: 13px;
  border-radius: var(--radius-sm);
}
.onboarding-view__benefit-stack--skeleton .onboarding-view__skeleton-line--benefit:nth-child(1) {
  width: 90%;
}
.onboarding-view__benefit-stack--skeleton .onboarding-view__skeleton-line--benefit:nth-child(2) {
  width: 74%;
}
.onboarding-view__benefit-stack--skeleton .onboarding-view__skeleton-line--benefit:nth-child(3) {
  width: 83%;
}
.onboarding-view__benefit-stack--skeleton .onboarding-view__skeleton-line--benefit:nth-child(4) {
  width: 58%;
}
.onboarding-view__skeleton-model {
  display: grid;
  gap: 8px;
  width: min(260px, 100%);
}
.onboarding-view__card--amr .onboarding-view__skeleton-model {
  width: 100%;
}
.onboarding-view__skeleton-model-label {
  width: 96px;
  height: 11px;
}
.onboarding-view__skeleton-model-bar {
  width: 100%;
  height: 40px;
  border-radius: var(--radius);
  animation-delay: 160ms;
}
@keyframes onboarding-skeleton-sheen {
  to {
    background-position: -200% 0, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-view__skeleton-line, .onboarding-view__skeleton-model-label, .onboarding-view__skeleton-model-bar {
    animation: none;
    background: var(--bg-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-muted) 82%, var(--bg-panel));
    }
  }
}
.home-view {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.home-view > .home-hero {
  align-self: center;
  width: 100%;
  max-width: 960px;
}
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 8px;
}
.home-hero__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
.home-hero__brand-mark {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
}
.home-hero__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.home-hero__brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-strong);
}
.home-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-align: center;
}
.home-hero__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
  max-width: 540px;
  line-height: 1.55;
}
.home-hero__subtitle kbd {
  font: inherit;
  font-size: 11.5px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-subtle);
}
.home-hero__type-tabs {
  width: 100%;
  max-width: 720px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: -2px 0 0;
  padding: 0 12px;
}
.home-hero__type-tab {
  appearance: none;
  position: relative;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle));
  }
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 580;
  line-height: 1.3;
  letter-spacing: 0;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: color 120ms var(--ease-out), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.home-hero__type-tab:hover:not(:disabled) {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--bg-panel);
  transform: translateY(-0.5px);
}
.home-hero__type-tab.is-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  color: var(--accent);
  box-shadow: 0 1px 0 var(--accent), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-xs);
  }
}
.home-hero:focus-within .home-hero__type-tab.is-active {
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-xs);
  }
}
.home-hero__type-tab.is-active:hover:not(:disabled) {
  background: var(--accent-tint);
  color: var(--accent);
}
.home-hero__type-tab.is-pending {
  opacity: 0.65;
}
.home-hero__type-tab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.home-hero__type-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.home-hero__type-tab-icon {
  flex: 0 0 auto;
  opacity: 0.82;
}
.home-hero__type-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__type-tab--more {
  width: 34px;
  flex: 0 0 34px;
  padding: 7px;
}
.home-hero__subtype-row {
  width: 100%;
  max-width: 720px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  margin: 6px 0 0;
  padding: 0 12px;
}
.home-hero__subtype-chip {
  appearance: none;
  position: relative;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 540;
  line-height: 1.3;
  cursor: pointer;
  transition: color 120ms var(--ease-out), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.home-hero__subtype-chip:hover:not(:disabled) {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-subtle));
  }
  transform: translateY(-0.5px);
}
.home-hero__subtype-chip.is-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  color: var(--accent);
}
.home-hero__subtype-chip.is-active:hover:not(:disabled) {
  background: var(--accent-tint);
  color: var(--accent);
}
.home-hero__subtype-chip.is-pending {
  opacity: 0.65;
}
.home-hero__subtype-chip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.home-hero__subtype-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.home-hero__subtype-chip-icon {
  flex: 0 0 auto;
  opacity: 0.8;
}
.home-hero__subtype-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__shortcut-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.home-hero__shortcut-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  width: 210px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, white);
  }
  box-shadow: var(--shadow-lg);
}
.home-hero__shortcut-menu-item {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.home-hero__shortcut-menu-item:hover:not(:disabled), .home-hero__shortcut-menu-item:focus-visible {
  outline: none;
  border-color: var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-strong);
}
.home-hero__shortcut-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.home-hero__shortcut-menu-item.is-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  }
  background: var(--accent-tint);
  color: var(--accent);
}
.home-hero__shortcut-menu-item.is-pending {
  opacity: 0.72;
}
.home-hero__shortcut-menu-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.78;
}
.home-hero__shortcut-menu-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__input-card {
  position: relative;
  --home-hero-prompt-max-height: 180px;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.home-hero__input-card:has(.inline-switcher__popover), .home-hero__input-card:has(.session-mode-toggle__popover), .home-hero__input-card:has(.home-hero__plugin-picker) {
  z-index: 1700;
  overflow: visible;
}
.home-hero__input-card .session-mode-toggle__popover-card {
  max-height: min(300px, calc(100vh - 120px));
}
.home-hero__input-card .session-mode-toggle__popover {
  right: 0;
  left: auto;
  flex-direction: row-reverse;
}
.home-hero__input-card--compact-authoring {
  max-width: 640px;
  padding-block: 12px 10px;
}
.home-hero__input-card:focus-within {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  box-shadow: none;
}
.home-hero__input-card.is-drag-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
.home-hero__active {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  max-height: min(82px, 18vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  font-size: 11.5px;
}
.home-hero__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: min(240px, 100%);
  min-height: 24px;
  padding: 2px 5px 2px 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 86%, var(--accent-tint));
  }
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  }
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
  }
  line-height: 1;
  box-shadow: none;
}
.home-hero__active-chip--skill {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 88%, var(--accent-tint));
  }
  color: var(--text-strong);
}
.home-hero__active-chip--context {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, var(--bg-subtle));
  }
  color: var(--text);
  border-color: var(--border-soft);
}
.home-hero__active-chip--file {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 92%, var(--accent-tint));
  }
}
.home-hero__active-file-group {
  display: contents;
}
.home-hero__active-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 18px;
}
.home-hero__active-meta {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 18px;
}
.home-hero__active-chip-body {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.home-hero__active-chip-body:disabled {
  cursor: default;
}
.home-hero__active-chip-body:hover {
  color: var(--accent);
}
.home-hero__active-chip-body:disabled:hover {
  color: inherit;
}
.home-hero__active-file-body {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
}
.home-hero__active-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 8%, var(--bg-subtle));
  }
  color: inherit;
}
.home-hero__active-thumb {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-subtle);
}
.home-hero__active-clear {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.62;
}
.home-hero__active-clear svg {
  display: block;
}
.home-hero__active-clear:hover {
  opacity: 1;
  background: var(--red-bg);
  color: var(--red);
}
.home-hero__prompt-surface {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border-radius: calc(var(--radius-lg) - 6px);
}
.home-hero__prompt-surface--with-inputs {
  padding: 0;
}
.home-hero__prompt-editor {
  position: relative;
  min-width: 0;
}
.home-hero__lexical {
  width: 100%;
  min-width: 0;
}
.home-hero__lexical .composer-input-editor {
  min-height: 64px;
  max-height: var(--home-hero-prompt-max-height, 180px);
}
.home-hero__lexical .composer-editable {
  min-height: 64px;
  padding: 8px 4px;
}
.home-hero__lexical .composer-input-placeholder {
  top: 8px;
  left: 4px;
  color: var(--text-soft);
}
.home-hero__input-card .plugin-inputs-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.home-hero__input-card .plugin-inputs-form__field {
  min-width: 0;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
}
.home-hero__input-card .plugin-inputs-form__field[data-filled='true'] {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 30%, var(--bg-panel));
  }
}
.home-hero__input-card .plugin-inputs-form__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  }
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 650;
}
.home-hero__input-card .plugin-inputs-form__required {
  color: var(--accent);
}
.home-hero__input-card .plugin-inputs-form__input {
  width: 100%;
  min-width: 0;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  }
  background: var(--bg-panel);
  font-size: 13px;
}
.home-hero__input-card .plugin-inputs-form__input:focus {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  border-color: var(--accent);
}
.home-hero__input-card .plugin-inputs-form__input--textarea {
  min-height: 64px;
}
.home-hero__input-card .plugin-inputs-form__field[data-field-type='boolean'] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.home-hero__input-card .plugin-inputs-form__field[data-field-type='boolean'] .plugin-inputs-form__input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.home-hero__input-card .plugin-inputs-form__file-shell {
  position: relative;
  display: block;
  min-width: 0;
}
.home-hero__input-card .plugin-inputs-form__input--file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.home-hero__input-card .plugin-inputs-form__file-label {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  }
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__input-card .plugin-inputs-form__file-shell:focus-within .plugin-inputs-form__file-label {
  outline: 2px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  border-color: var(--accent);
}
.home-hero__plugin-picker {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% - 10px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 280px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg, 0 14px 36px rgba(0, 0, 0, 0.14));
}
.caret-floating-layer .home-hero__plugin-picker--floating {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  height: var(--cfl-max-h, 60vh);
  max-height: var(--cfl-max-h, 60vh);
}
.home-hero__plugin-picker-results {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.home-hero__plugin-hover-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 72%, var(--bg-panel));
  }
}
.home-hero__plugin-hover-card strong {
  display: block;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__plugin-hover-card p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.home-hero__plugin-hover-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.home-hero__plugin-hover-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--text-faint);
  font-size: 11px;
}
.home-hero__plugin-hover-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__plugin-hover-card button {
  appearance: none;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.home-hero__plugin-hover-card button:hover {
  border-color: var(--border-strong);
  color: var(--accent);
}
.home-hero__mention-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-hero__mention-tabs::-webkit-scrollbar {
  display: none;
}
.home-hero__mention-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-inline-size: max-content;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
}
.home-hero__mention-tab.is-active {
  border-color: var(--border);
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.home-hero__mention-tab span:last-child {
  color: var(--text-faint);
  font-size: 10.5px;
}
.home-hero__plugin-picker-empty {
  padding: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.home-hero__mention-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-hero__mention-section-label {
  padding: 5px 4px 2px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.home-hero__plugin-option {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.home-hero__plugin-option:hover, .home-hero__plugin-option.is-active {
  border-color: var(--border-soft);
  background: var(--bg-subtle);
}
.home-hero__plugin-option:disabled {
  cursor: default;
  opacity: 0.62;
}
.home-hero__plugin-option-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-hero__plugin-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.home-hero__plugin-option-main span:first-child {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__plugin-option-main span:last-child {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__plugin-option-meta {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 11px;
}
.home-hero__input-foot {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 0;
  padding-top: 8px;
}
.home-hero__foot-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: visible;
}
.home-hero__foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.home-hero__execution-switcher {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
}
.home-hero__execution-switcher .inline-switcher {
  min-width: 0;
  max-width: 48px;
}
.home-hero__execution-switcher .inline-switcher__chip {
  height: 30px;
  max-width: 48px;
  padding: 0 7px;
  gap: 4px;
  border-radius: var(--radius-sm);
}
.home-hero__foot-right .session-mode-toggle {
  height: 32px;
}
.home-hero__foot-right .session-mode-toggle__trigger {
  height: 32px;
  max-width: 120px;
  padding: 0 12px;
  gap: 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
}
.home-hero__foot-right .session-mode-toggle__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__execution-switcher .inline-switcher__popover {
  right: auto;
  left: 0;
  z-index: 1503;
}
.home-hero__execution-switcher .inline-switcher__agent-grid {
  grid-template-columns: 1fr;
}
.home-hero__tool {
  appearance: none;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-hero__tool:hover, .home-hero__tool.is-active {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text);
}
.home-hero__tool-at {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}
.home-hero__plus-menu {
  position: relative;
  display: inline-flex;
}
.home-hero__plus-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 90;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.18);
}
.home-hero__plus-item {
  appearance: none;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-hero__plus-item:hover, .home-hero__plus-item:focus-visible {
  outline: none;
  background: var(--bg-subtle);
}
.home-hero__plus-item-icon {
  flex: 0 0 auto;
  opacity: 0.8;
}
.home-hero__plus-item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__plus-chevron {
  margin-left: auto;
  opacity: 0.55;
}
.home-hero__plus-submenu-row {
  position: relative;
}
.home-hero__plus-flyout {
  position: absolute;
  left: 100%;
  top: -5px;
  margin-left: 4px;
  z-index: 91;
  min-width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.18);
}
.home-hero__plus-flyout::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 8px;
}
.home-hero__plus-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0 8px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.home-hero__plus-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.home-hero__plus-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.home-hero__plus-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.home-hero__plus-empty {
  padding: 8px 9px;
  color: var(--text-muted);
  font-size: 12px;
}
.home-hero__workdir-row {
  width: 100%;
  max-width: 720px;
  margin: -13px auto 0;
  display: flex;
  justify-content: flex-start;
}
.home-hero__active-type-chip {
  appearance: none;
  height: 32px;
  max-width: 220px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.home-hero__active-type-chip-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-hero__active-type-chip-close {
  flex: 0 0 auto;
  width: 0;
  opacity: 0;
  transform: translateX(-2px) scale(0.9);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), width 120ms var(--ease-out);
}
.home-hero__active-type-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__active-type-chip:hover, .home-hero__active-type-chip:focus-visible {
  outline: none;
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--accent);
}
.home-hero__active-type-chip:hover .home-hero__active-type-chip-close, .home-hero__active-type-chip:focus-visible .home-hero__active-type-chip-close {
  width: 12px;
  opacity: 1;
  transform: translateX(0) scale(1);
}
.home-hero__footer-options {
  display: contents;
}
.home-hero__footer-option {
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  min-width: 0;
  flex-shrink: 1;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.home-hero__footer-option.is-open, .home-hero__footer-option:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--accent);
}
.home-hero__footer-option.is-open {
  z-index: 120;
}
.home-hero__footer-option > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.home-hero__footer-option input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  outline: none;
}
.home-hero__footer-option input {
  width: 100px;
}
.home-hero__footer-option--select {
  padding-right: 11px;
}
.home-hero__footer-option--select[data-field-name='designSystem'] {
  max-width: min(280px, 100%);
}
.home-hero__footer-option--select[data-field-name='fidelity'] {
  max-width: 210px;
}
.home-hero__footer-option--select[data-field-name='speakerNotes'] {
  max-width: 250px;
}
.home-hero__footer-select-trigger {
  appearance: none;
  height: 100%;
  border: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 190px;
  padding: 0;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-trigger {
  max-width: 176px;
}
.home-hero__footer-option--select[data-field-name='fidelity'] .home-hero__footer-select-trigger {
  max-width: 158px;
}
.home-hero__footer-option--select[data-field-name='speakerNotes'] .home-hero__footer-select-trigger {
  max-width: 122px;
}
.home-hero__footer-select-trigger .home-hero__ds-option-preview {
  margin-right: 0;
}
.home-hero__footer-select-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__footer-select-trigger svg {
  flex: 0 0 auto;
  color: currentColor;
}
.home-hero__footer-switch {
  appearance: none;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.home-hero__footer-switch:hover, .home-hero__footer-switch:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--accent);
  outline: none;
}
.home-hero__footer-switch.is-on {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  color: var(--text);
}
.home-hero__footer-switch i {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  border-radius: var(--radius-pill);
  background: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--border) 78%, var(--bg-subtle));
  }
  box-shadow: inset 0 0 0 1px var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-strong) 18%, transparent);
  }
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-hero__footer-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-hero__footer-switch.is-on i {
  background: var(--accent);
}
.home-hero__footer-switch.is-on i::after {
  transform: translateX(14px);
}
.home-hero__footer-select-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 140;
  min-width: max(180px, 100%);
  max-width: 460px;
  max-height: min(280px, calc(100vh - 220px));
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
  }
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.08);
  isolation: isolate;
}
.home-hero__footer-select-menu--searchable {
  width: 440px;
  padding: 10px;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-menu {
  left: 0;
  bottom: calc(100% + 9px);
  width: min(340px, calc(100vw - 32px));
  max-width: min(340px, calc(100vw - 32px));
  max-height: min(280px, calc(100vh - 240px));
  padding: 7px;
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, white);
  }
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.home-hero__footer-select-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 8px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, var(--bg-subtle) 2%);
  }
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search {
  margin: 0;
  padding: 0 0 6px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 98%, white);
  }
}
.home-hero__footer-select-search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  outline: none;
  padding: 0 12px;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search input {
  height: 34px;
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 74%, transparent);
  }
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.home-hero__footer-select-search input:focus {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  background: var(--bg-panel);
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search input:focus {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  }
  box-shadow: 0 0 0 5px var(--accent), inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
  }
}
.home-hero__footer-select-count {
  padding: 12px 4px 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 650;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-count {
  padding: 7px 3px 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}
.home-hero__footer-select-group + .home-hero__footer-select-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  }
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group + .home-hero__footer-select-group {
  margin-top: 6px;
  padding-top: 7px;
}
.home-hero__footer-select-group-label {
  padding: 7px 4px 6px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group-label {
  padding: 3px 3px 5px;
  color: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
  }
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.home-hero__footer-select-item {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.home-hero__footer-select-item > svg {
  flex: 0 0 auto;
  color: var(--text);
}
.home-hero__footer-select-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.home-hero__footer-select-description {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-copy {
  gap: 2px;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-copy > .home-hero__footer-select-label {
  font-size: 12.5px;
  font-weight: 760;
  color: currentColor;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-description {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}
.home-hero__footer-select-menu--searchable .home-hero__footer-select-item {
  min-height: 58px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 600;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item {
  grid-template-columns: 32px minmax(0, 1fr) minmax(54px, auto) 16px;
  gap: 8px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 720;
}
.home-hero__footer-select-meta {
  max-width: 92px;
  overflow: hidden;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  text-transform: lowercase;
  white-space: nowrap;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-meta {
  max-width: 66px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.02em;
}
.home-hero__ds-option-preview {
  width: 28px;
  height: 22px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 44%, transparent);
}
.home-hero__footer-select-item .home-hero__ds-option-preview {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: var(--radius);
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item .home-hero__ds-option-preview, .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item .home-hero__footer-option-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}
.home-hero__ds-option-preview--compact {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  box-shadow: none;
}
.home-hero__ds-option-preview i {
  flex: 1 1 0;
  min-width: 0;
}
.home-hero__ds-option-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 2px;
  background: var(--bg-panel);
}
.home-hero__ds-option-preview b {
  align-self: center;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}
.home-hero__ds-option-preview--compact b {
  font-size: 7px;
}
.home-hero__footer-option-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 44%, transparent);
}
.home-hero__footer-option-icon--compact {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: currentColor;
}
.home-hero__model-option-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  border-radius: var(--radius);
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 10%, var(--bg-panel));
  }
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 44%, transparent);
}
.home-hero__model-option-icon img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.home-hero__model-option-icon--compact {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 8px;
}
.home-hero__model-option-icon--compact img {
  width: 12px;
  height: 12px;
}
.home-hero__model-option-icon--openai {
  color: #111827;
}
.home-hero__model-option-icon--dalle {
  color: #111827;
}
.home-hero__model-option-icon--seed {
  color: #3c8cff;
}
.home-hero__model-option-icon--sense {
  color: #2563eb;
}
.home-hero__model-option-icon--grok {
  color: #111827;
}
.home-hero__model-option-icon--google {
  color: #4285f4;
}
.home-hero__model-option-icon--router {
  color: #7c3aed;
}
.home-hero__model-option-icon--flux {
  color: #0f766e;
}
.home-hero__model-option-icon--elevenlabs {
  color: #111827;
}
.home-hero__model-option-icon--fishaudio {
  color: #7c6ee6;
}
.home-hero__model-option-icon--minimax {
  color: #e73562;
}
.home-hero__model-option-icon--suno {
  color: #111827;
}
.home-hero__model-option-icon--audio {
  color: #c05621;
}
.home-hero__model-option-icon--custom {
  color: var(--text-muted);
}
[data-theme="dark"] .home-hero__model-option-icon--openai img, [data-theme="dark"] .home-hero__model-option-icon--dalle img, [data-theme="dark"] .home-hero__model-option-icon--grok img, [data-theme="dark"] .home-hero__model-option-icon--elevenlabs img, [data-theme="dark"] .home-hero__model-option-icon--suno img {
  filter: invert(1) brightness(1.2);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .home-hero__model-option-icon--openai img, html:not([data-theme="light"]) .home-hero__model-option-icon--dalle img, html:not([data-theme="light"]) .home-hero__model-option-icon--grok img, html:not([data-theme="light"]) .home-hero__model-option-icon--elevenlabs img, html:not([data-theme="light"]) .home-hero__model-option-icon--suno img {
    filter: invert(1) brightness(1.2);
  }
}
.home-hero__ratio-option-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  border-radius: var(--radius);
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 9%, var(--bg-panel));
  }
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 44%, transparent);
}
.home-hero__ratio-option-icon--compact {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-hero__ratio-option-icon i {
  display: block;
  border: 1.6px solid currentColor;
  border-radius: 2.5px;
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
.home-hero__ratio-option-icon--square {
  color: #6b7280;
}
.home-hero__ratio-option-icon--wide {
  color: #d06943;
}
.home-hero__ratio-option-icon--tall {
  color: #2563eb;
}
.home-hero__ratio-option-icon--standard {
  color: #0f766e;
}
.home-hero__ratio-option-icon--portrait {
  color: #7c3aed;
}
.home-hero__ratio-option-icon--custom {
  color: var(--text-muted);
}
.home-hero__footer-select-item:hover, .home-hero__footer-select-item:focus-visible {
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 78%, var(--bg-panel));
  }
  outline: none;
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item:hover, .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item:focus-visible {
  background: #eaf0f5;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #eaf0f5 78%, var(--bg-panel));
  }
}
.home-hero__footer-select-item.is-selected {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-subtle));
  }
  color: var(--accent);
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item.is-selected {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 10%, #e7e1e3);
  }
  color: var(--accent);
}
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item.is-selected .home-hero__footer-select-description, .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-item.is-selected .home-hero__footer-select-meta {
  color: var(--text-muted);
}
.home-hero__footer-select-empty {
  padding: 14px 8px;
  color: var(--text-soft);
  font-size: 12px;
  text-align: center;
}
.home-hero__footer-option:focus-within {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  color: var(--accent);
}
@keyframes home-hero-attention-sheen {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(230%) skewX(-18deg);
    opacity: 0;
  }
}
.home-hero__attention-sheen {
  position: relative;
  overflow: hidden;
}
.home-hero__attention-sheen::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.5), transparent );
  animation: home-hero-attention-sheen 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.25s 2 both;
}
.home-hero__type-tab.home-hero__attention-sheen::after, .home-hero__rail-chip.home-hero__attention-sheen::after, .home-hero__plugin-preset.home-hero__attention-sheen::after {
  background: linear-gradient( 105deg, transparent, var(--accent), transparent );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 105deg, transparent, color-mix(in srgb, var(--accent) 28%, white), transparent );
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__attention-sheen::after {
    animation: none;
    content: none;
  }
}
.home-hero__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-hero__submit:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.home-hero__submit:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--shadow-xs);
}
.home-hero__submit:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}
.home-hero__error {
  color: var(--red);
  font-size: 12.5px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  max-width: 720px;
  width: 100%;
}
.home-hero-confirm__backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 12, 10, 0.34);
  backdrop-filter: blur(8px);
}
.home-hero-confirm {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.18));
}
.home-hero-confirm h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 16px;
  letter-spacing: 0;
}
.home-hero-confirm p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.home-hero-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.home-hero-confirm__secondary, .home-hero-confirm__primary {
  appearance: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.home-hero-confirm__secondary {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}
.home-hero-confirm__primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
}
.home-hero-confirm__secondary:hover {
  border-color: var(--border-strong);
}
.home-hero-confirm__primary:hover {
  background: var(--accent-strong);
  color: white;
}
.home-hero__prompt-examples {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.home-hero__prompt-examples-title {
  padding: 0 2px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.home-hero__prompt-examples-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.home-hero__prompt-example {
  appearance: none;
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.home-hero__prompt-example span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.home-hero__prompt-example:hover, .home-hero__prompt-example:focus-visible {
  outline: none;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 34%, var(--bg-panel));
  }
  color: var(--text-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.home-hero__plugin-presets-wrap {
  max-width: min(880px, 100%);
}
.home-hero__plugin-presets {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 1px 2px 8px;
  scrollbar-width: thin;
}
.home-hero__plugin-preset {
  appearance: none;
  position: relative;
  flex: 0 0 248px;
  min-width: 0;
  display: grid;
  grid-template-rows: 150px minmax(0, auto);
  gap: 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  scroll-snap-align: start;
  overflow: hidden;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.home-hero__plugin-preset:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}
.home-hero__plugin-preset:not(:disabled):hover, .home-hero__plugin-preset:not(:disabled):focus-visible, .home-hero__plugin-preset.is-active {
  outline: none;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  background: var(--accent-tint);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent-tint) 32%, var(--bg-panel));
  }
  color: var(--text-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.home-hero__plugin-preset.is-pending {
  opacity: 0.8;
}
.home-hero__plugin-preset-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
}
.home-hero__plugin-preset-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.home-hero__plugin-preset-preview .plugins-home__preview, .home-hero__plugin-preset-preview .plugins-home__media, .home-hero__plugin-preset-preview .plugins-home__html, .home-hero__plugin-preset-preview .plugins-home__text-surface {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.home-hero__plugin-preset-preview .plugins-home__html {
  padding: 0;
}
.home-hero__plugin-preset-preview .plugins-home__html-chrome {
  display: none;
}
.home-hero__plugin-preset-preview .plugins-home__html-iframe {
  transform: scale(0.172);
}
.home-hero__plugin-preset-preview .plugins-home__media-video, .home-hero__plugin-preset-preview .plugins-home__media-img {
  object-position: top center;
}
.home-hero__plugin-preset-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px 12px;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
}
.home-hero__rail {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 4px 2px 0;
}
.home-hero__rail--shortcuts {
  padding-top: 0;
}
.home-hero__rail-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.home-hero__rail-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-soft);
  border-radius: 1px;
  flex: 0 0 auto;
}
.home-hero__rail-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.home-hero__rail-chip--migrate {
  background: var(--bg-subtle);
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.home-hero__rail-chip-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.82;
  transition: opacity 140ms var(--ease-out);
}
.home-hero__rail-chip-label {
  white-space: nowrap;
}
.home-hero__rail-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-panel);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.home-hero__rail-chip:hover:not(:disabled) .home-hero__rail-chip-icon {
  opacity: 1;
}
.home-hero__rail-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.home-hero__rail-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
.home-hero__rail-chip.is-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  color: var(--accent);
  box-shadow: 0 1px 0 var(--accent), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-xs);
  }
  transform: translateY(-1px);
}
.home-hero__rail-chip.is-active .home-hero__rail-chip-icon {
  opacity: 1;
}
.home-hero__rail-chip.is-pending {
  opacity: 0.75;
  box-shadow: none;
}
@media (max-width: 900px) {
  .home-hero__title {
    font-size: 24px;
  }
  .home-hero__prompt-examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-hero__plugin-preset {
    flex-basis: 224px;
    grid-template-rows: 136px minmax(0, auto);
  }
  .home-hero__plugin-preset-preview .plugins-home__html-iframe {
    transform: scale(0.146);
  }
  .home-hero__rail-divider {
    display: none;
  }
  .home-hero__rail {
    gap: 6px 8px;
  }
  .home-hero__foot-left {
    flex-wrap: wrap;
  }
  .home-hero__footer-options {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }
  .home-hero__execution-switcher {
    flex-basis: auto;
  }
  .home-hero__execution-switcher .inline-switcher, .home-hero__execution-switcher .inline-switcher__chip {
    width: auto;
    max-width: 48px;
  }
}
@media (max-width: 560px) {
  .home-hero__type-tabs {
    justify-content: flex-start;
    padding: 0;
  }
  .home-hero__prompt-examples-grid {
    grid-template-columns: 1fr;
  }
  .home-hero__plugin-preset {
    flex-basis: 208px;
    grid-template-rows: 126px minmax(0, auto);
  }
  .home-hero__plugin-preset-preview .plugins-home__html-iframe {
    transform: scale(0.134);
  }
}
.plus-menu {
  position: relative;
  display: inline-flex;
}
.plus-menu__trigger {
  position: relative;
  background: transparent;
  border-color: transparent;
}
.plus-menu__trigger:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: transparent;
}
.plus-menu__trigger.is-active {
  background: var(--bg-subtle);
  color: var(--text);
}
.plus-menu__popup {
  position: fixed;
  bottom: auto;
  left: 0;
  z-index: 90;
  min-width: min(190px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.18);
  overflow: visible;
}
.plus-menu__popup--flyout-contained {
  overflow-y: auto;
  scrollbar-width: thin;
}
.plus-menu__item {
  appearance: none;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.plus-menu__item:hover:not(:disabled), .plus-menu__item:focus-visible {
  outline: none;
  background: var(--bg-subtle);
}
.plus-menu__item:disabled {
  opacity: 0.5;
  cursor: default;
}
.plus-menu__item-icon {
  flex: 0 0 auto;
  opacity: 0.8;
}
.plus-menu__item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plus-menu__chevron {
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0.55;
}
.plus-menu__submenu-row {
  position: relative;
}
.plus-menu__flyout {
  position: absolute;
  left: 100%;
  top: -5px;
  margin-left: 4px;
  z-index: 91;
  min-width: 220px;
  max-width: 280px;
  max-height: min(320px, var(--plus-menu-flyout-max-height, calc(100vh - 24px)));
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
}
.plus-menu__popup--flyout-left .plus-menu__flyout {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
}
.plus-menu__popup--flyout-y-up .plus-menu__flyout {
  top: auto;
  bottom: -5px;
}
.plus-menu__flyout::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 8px;
}
.plus-menu__popup--flyout-left .plus-menu__flyout::before {
  left: auto;
  right: -8px;
}
.plus-menu__popup--flyout-contained .plus-menu__flyout {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: min(320px, calc(100vh - 24px));
  margin: 4px 0 0;
}
.plus-menu__popup--flyout-contained .plus-menu__flyout::before {
  display: none;
}
.plus-menu__popup--flyout-contained .plus-menu__flyout .composer-design-toolbox-menu {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.plus-menu__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0 8px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.plus-menu__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.plus-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.plus-menu__divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.plus-menu__empty {
  padding: 8px 9px;
  color: var(--text-muted);
  font-size: 12px;
}
.plus-menu__flyout--plugins {
  min-width: 0;
  max-width: none;
  width: 466px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
}
.plus-menu__plugin-pane {
  display: flex;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}
.plus-menu__plugin-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 224px;
  max-width: 224px;
}
.plus-menu__plugin-main .plus-menu__list {
  max-height: 248px;
}
.plus-menu__preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.plus-menu__plugin-pane .plus-menu__preview {
  flex: 1 1 auto;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.plus-menu__preview-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-subtle);
  flex: 0 0 auto;
}
.plus-menu__preview-hero .plugins-home__preview {
  border-radius: 0;
}
.plus-menu__preview-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.plus-menu__preview-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plus-menu__preview-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.plus-menu__preview-kind {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
  }
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.plus-menu__preview-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.plus-menu__item.is-previewed:not(:disabled) {
  background: var(--bg-subtle);
}
.plus-menu__popup--flyout-contained .plus-menu__flyout--plugins {
  width: auto;
}
.plus-menu__popup--flyout-contained .plus-menu__plugin-pane {
  flex-direction: column;
}
.plus-menu__popup--flyout-contained .plus-menu__plugin-main {
  flex: 1 1 auto;
  max-width: none;
}
.plus-menu__popup--flyout-contained .plus-menu__preview {
  border-left: 0;
  border-top: 1px solid var(--border);
  padding-left: 0;
  padding-top: 8px;
}
.plus-menu__popup--flyout-contained .plus-menu__preview-hero .plugins-home__preview {
  max-height: 160px;
}
.plus-menu__detail {
  position: fixed;
  z-index: 92;
  width: 264px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.18);
  overflow: hidden auto;
  scrollbar-width: thin;
}
.plus-menu__detail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.plus-menu__detail-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.plus-menu__detail-skill {
  font-size: 11.5px;
  color: var(--accent, var(--text-muted));
}
.plus-menu__detail-badge {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}
.plus-menu__section-label {
  padding: 6px 9px 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.plus-menu__subitem {
  position: relative;
}
.plus-menu__flyout .composer-design-toolbox-menu {
  position: static;
  width: auto;
  min-width: 320px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.recent-projects {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recent-projects__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.recent-projects__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.recent-projects__view-all {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.recent-projects__view-all:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.recent-projects__empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.recent-projects__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.recent-projects__card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.recent-projects__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.recent-projects__card.is-design-system-project {
  border-color: var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red) 62%, var(--border));
  }
  box-shadow: 0 0 0 1px var(--red);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 42%, transparent);
  }
}
.recent-projects__card.is-design-system-project:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-sm);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 54%, transparent), var(--shadow-sm);
  }
}
.recent-projects__card-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--bg-subtle) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.recent-projects__card-thumb-html, .recent-projects__card-thumb-image, .recent-projects__card-thumb-video, .recent-projects__card-thumb-logo {
  background: var(--bg-subtle);
}
.recent-projects__thumb-media, .recent-projects__thumb-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.recent-projects__thumb-media {
  object-fit: cover;
}
.recent-projects__card-thumb-logo .recent-projects__thumb-media {
  inset: 22%;
  width: 56%;
  height: 56%;
  object-fit: contain;
}
.recent-projects__thumb-iframe {
  pointer-events: none;
  background: #fff;
  inset: auto;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  transform: scale(calc(100cqw / 1280px));
}
.recent-projects__deck-frame, .recent-projects__deck-iframe, .recent-projects__deck-cover-loading {
  position: absolute;
  inset: 0;
}
.recent-projects__deck-frame {
  overflow: hidden;
  background: #fff;
}
.recent-projects__deck-iframe {
  width: 1280px;
  height: 720px;
  border: 0;
  pointer-events: none;
  transform: scale(var(--recent-deck-scale, 1));
  transform-origin: 0 0;
}
.recent-projects__deck-cover-loading {
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.52) 50%, transparent 70%) 0 0 / 200% 100%, var(--bg-subtle);
  animation: recent-projects-shimmer 1.4s ease-in-out infinite;
}
.recent-projects__card-glyph {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.recent-projects__card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 12px;
  min-width: 0;
}
.recent-projects__card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-projects__card-time {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.recent-projects__card-sep {
  color: var(--text-muted);
}
.recent-projects__card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.recent-projects__card-status-running {
  color: var(--accent);
}
.recent-projects__card-status-awaiting_input {
  color: var(--amber);
}
.recent-projects__card-status-queued, .recent-projects__card-status-not_started, .recent-projects__card-status-canceled {
  color: var(--text-muted);
}
.recent-projects__card-status-succeeded {
  color: var(--green);
}
.recent-projects__card-status-failed {
  color: var(--red);
}
.recent-projects__card-status-published {
  color: var(--green);
}
.recent-projects__card-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.recent-projects__card-status-running .recent-projects__card-status-dot {
  animation: recent-projects-pulse 1.4s ease-in-out infinite;
}
@keyframes recent-projects-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes recent-projects-shimmer {
  to {
    background-position: -200% 0, 0 0;
  }
}
.plugins-home {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plugins-home__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.plugins-home__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plugins-home__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.plugins-home__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.plugins-home__count {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.plugins-home__head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.plugins-home__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 200px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.plugins-home__search:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.plugins-home__search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-faint);
  pointer-events: none;
}
.plugins-home__search-input, .plugins-home__search-input:focus {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px 28px;
  font-size: 12px;
  color: var(--text);
  outline: none;
  box-shadow: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
}
.plugins-home__search-input::placeholder {
  color: var(--text-faint);
}
.plugins-home__search-input::-webkit-search-cancel-button, .plugins-home__search-input::-webkit-search-decoration {
  appearance: none;
  display: none;
}
.plugins-home__search-clear {
  position: absolute;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-home__search-clear:hover {
  background: var(--border-soft, var(--border));
  border-color: transparent;
  color: var(--text);
}
.plugins-home__search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@media (max-width: 720px) {
  .plugins-home__head {
    flex-direction: column;
    align-items: stretch;
  }
  .plugins-home__head-tools {
    justify-content: flex-end;
  }
  .plugins-home__facet-tools {
    width: 100%;
    justify-content: flex-start;
  }
  .plugins-home__search {
    flex: 1;
    min-width: 0;
  }
}
.plugins-home__empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.plugins-home__empty code {
  font-size: 12px;
  background: var(--bg-subtle);
  padding: 1px 5px;
  border-radius: 3px;
}
.plugins-home__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-home__chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.plugins-home__chip-count {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.plugins-home__chip--saved {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  color: var(--accent);
  background: var(--accent-tint);
}
.plugins-home__chip--saved.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.plugins-home__chip--saved.is-active .plugins-home__chip-count {
  color: white;
  opacity: 0.85;
}
.plugins-home__linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plugins-home__linkbtn:hover {
  color: var(--text);
}
.plugins-home__facets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: var(--entry-topbar-h, 56px);
  z-index: 5;
  background: var(--bg);
}
.plugins-home__facet-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
  gap: 12px;
}
.plugins-home__facet-row--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 4px 0;
}
.plugins-home__facet-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 240px;
  margin-left: auto;
  min-width: min(100%, 200px);
}
.plugins-home__facet-row--sub {
  padding-top: 0;
  opacity: 0.92;
}
.plugins-home__facet-row--inline .plugins-home__facet-pills {
  flex: 1 1 360px;
  flex-wrap: wrap;
  overflow: visible;
}
.plugins-home__facet-row--inline .plugins-home__pill, .plugins-home__facet-row--inline .plugins-home__chip {
  flex: 0 0 auto;
}
.plugins-home__facet-label {
  padding-top: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.plugins-home__facet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plugins-home__pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-home__pill:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.plugins-home__pill.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-panel);
}
.plugins-home__pill.is-active .plugins-home__pill-count {
  color: var(--bg-panel);
  opacity: 0.8;
}
.plugins-home__pill-count {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.plugins-home__pill--all {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  }
  color: var(--accent);
}
.plugins-home__pill--all.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.plugins-home__pill--all.is-active .plugins-home__pill-count {
  color: white;
  opacity: 0.85;
}
.plugins-home__pill--sub-all {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.plugins-home__pill[data-empty='true']:not(.is-active) {
  opacity: 0.45;
  border-style: dashed;
}
.plugins-home__pill[data-empty='true']:not(.is-active):hover {
  opacity: 0.75;
}
.plugins-home__pill[data-empty='true']:not(.is-active) .plugins-home__pill-count {
  color: var(--text-faint);
}
.plugins-home__pill--all[data-empty='true'], .plugins-home__pill--sub-all[data-empty='true'] {
  opacity: 1;
  border-style: solid;
}
.plugins-home__empty--filtered {
  border-style: solid;
  background: var(--bg-subtle);
}
@media (max-width: 720px) {
  .plugins-home__facet-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .plugins-home__facet-row--inline {
    flex-direction: row;
    align-items: center;
  }
  .plugins-home__facet-label {
    padding-top: 0;
  }
}
.plugins-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.plugins-home__load-more-sentinel {
  height: 1px;
  min-width: 1px;
  pointer-events: none;
}
@media (min-width: 1100px) {
  .plugins-home__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1400px) {
  .plugins-home__grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
.plugins-home__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
  transition: border-color 120ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
  isolation: isolate;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 280px 260px;
}
.plugins-home__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.08));
  transform: translateY(-2px);
}
.plugins-home__card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plugins-home__card.is-featured {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
}
.plugins-home__grid--gallery {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
@media (min-width: 1400px) {
  .plugins-home__grid--gallery {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}
.plugins-home__card--gallery {
  cursor: pointer;
  contain-intrinsic-size: 400px 340px;
}
.plugins-home__card--gallery:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.plugins-home__gallery-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  min-width: 0;
}
.plugins-home__gallery-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #3ad29f;
}
.plugins-home__gallery-name {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plugins-home__gallery-name:hover {
  color: var(--accent);
}
.plugins-home__gallery-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.plugins-home__gallery-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
}
.plugins-home__gallery-open:hover {
  background: var(--bg-panel);
  color: var(--accent);
}
.plugins-home__gallery-frame {
  position: relative;
  height: 300px;
  background: #fff;
  overflow: hidden;
}
.plugins-home__card--gallery .plugins-home__preview {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
}
.plugins-home__card--gallery .plugins-home__html-iframe {
  width: 1440px;
  height: 2200px;
  transform: scale(0.32);
  transition: top 6s linear;
}
.plugins-home__card--gallery:hover .plugins-home__html-iframe {
  top: -404px;
}
.plugins-home__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  overflow: hidden;
}
.plugins-home__preview--design, .plugins-home__preview--text {
  background: transparent;
}
.plugins-home__media {
  position: absolute;
  inset: 0;
}
.plugins-home__media-img, .plugins-home__media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plugins-home__media-video {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.plugins-home__media-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%) 0 0 / 200% 100%, var(--bg-subtle);
}
.plugins-home__media-skeleton.is-active {
  animation: plugins-home-shimmer 1.6s ease-in-out infinite;
}
.plugins-home__media-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 22% 18%, var(--accent), transparent 34%), linear-gradient(135deg, var(--accent-tint), var(--bg-subtle));
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--accent-tint) 64%, white), var(--bg-subtle));
  }
}
.plugins-home__media-fallback-glyph {
  color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent) 74%, var(--text));
  }
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 650;
  line-height: 1;
  opacity: 0.86;
}
@keyframes plugins-home-shimmer {
  to {
    background-position: -200% 0, 0 0;
  }
}
.plugins-home__html {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
}
.plugins-home__html-frame {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.plugins-home__html-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1080px;
  border: 0;
  transform: scale(0.22);
  transform-origin: 0 0;
  pointer-events: none;
}
.plugins-home__html-skeleton {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugins-home__html-skeleton span {
  height: 8px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--bg-subtle), var(--border-soft), var(--bg-subtle));
  background-size: 200% 100%;
}
.plugins-home__html-skeleton.is-active span {
  animation: plugins-home-shimmer 1.6s ease-in-out infinite;
}
.plugins-home__html-skeleton span:nth-child(1) {
  width: 70%;
}
.plugins-home__html-skeleton span:nth-child(2) {
  width: 90%;
}
.plugins-home__html-skeleton span:nth-child(3) {
  width: 55%;
}
.plugins-home__html-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  font-size: 10.5px;
  color: var(--text-faint);
}
.plugins-home__html-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.plugins-home__html-dot:nth-child(1) {
  background: #ff5f57;
}
.plugins-home__html-dot:nth-child(2) {
  background: #febc2e;
}
.plugins-home__html-dot:nth-child(3) {
  background: #28c840;
}
.plugins-home__html-url {
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.plugins-home__html--fallback {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif);
}
.plugins-home__html-fallback-glyph {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  user-select: none;
  font-weight: 600;
}
.plugins-home__html--fallback .plugins-home__html-chrome {
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plugins-home__design {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 14px;
  font-family: var(--serif);
  overflow: hidden;
}
.plugins-home__design--showcase {
  display: block;
  padding: 0;
  background: var(--bg-panel);
  font-family: inherit;
}
.plugins-home__design::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.plugins-home__design--showcase::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.18) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}
.plugins-home__design-showcase {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-panel);
}
.plugins-home__design-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 960px;
  border: 0;
  transform: scale(0.24);
  transform-origin: 0 0;
  pointer-events: none;
}
.plugins-home__design-headline {
  position: relative;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.plugins-home__design-headline strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.plugins-home__design-specimen {
  position: relative;
  display: flex;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  z-index: 1;
}
.plugins-home__design-swatches {
  position: relative;
  display: flex;
  gap: 4px;
  z-index: 1;
}
.plugins-home__design-swatches span {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.plugins-home__text-surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--bg-subtle) 100%);
}
.plugins-home__text-glyph {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.plugins-home__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.78) 100%);
  color: white;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.plugins-home__card:hover .plugins-home__card-overlay, .plugins-home__card:focus-within .plugins-home__card-overlay, .plugins-home__card--shareable .plugins-home__card-overlay {
  opacity: 1;
  pointer-events: auto;
}
.plugins-home__card-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.plugins-home__overlay-featured {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plugins-home__card-overlay-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.plugins-home__overlay-title {
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugins-home__overlay-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
.plugins-home__overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.plugins-home__overlay-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: white;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plugins-home__overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.plugins-home__overlay-actions-main, .plugins-home__share-actions {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.plugins-home__share-actions {
  width: 100%;
}
.plugins-home__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.plugins-home__card-save {
  position: relative;
  z-index: 4;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-home__card-save:hover, .plugins-home__card-save:focus-visible {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  }
  color: var(--accent);
  outline: none;
}
.plugins-home__card-save.is-saved {
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 16%, white);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  }
  color: var(--accent);
}
.plugins-home__card-title {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.plugins-home__card-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugins-home__action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-home__action--compact {
  flex: 1;
  min-width: 0;
  padding-inline: 8px;
}
.plugins-home__action--compact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugins-home__use-menu {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}
.plugins-home__use-menu.has-options .plugins-home__use-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.plugins-home__use-toggle {
  flex: 0 0 34px;
  padding-inline: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: rgba(17, 17, 17, 0.16);
}
.plugins-home__use-menu-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 8;
  min-width: min(180px, 100%);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.plugins-home__use-menu-item {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 8px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
button.plugins-home__use-menu-item:hover:not(:disabled), button.plugins-home__use-menu-item:focus-visible {
  background: #f3f3f3;
  color: #111;
  outline: none;
}
.plugins-home__action--primary {
  flex: 1;
  background: white;
  color: #111;
  border: 1px solid white;
}
.plugins-home__action--primary:hover:not(:disabled) {
  background: #f3f3f3;
  border-color: #f3f3f3;
}
.plugins-home__use-menu .plugins-home__use-toggle {
  flex: 0 0 34px;
}
.plugins-home__action--primary:disabled {
  opacity: 0.55;
  cursor: progress;
}
.plugins-home__action--secondary {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plugins-home__action--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.48);
}
.plugins-home__action--secondary:disabled {
  opacity: 0.55;
  cursor: progress;
}
@media (hover: none) {
  .plugins-home__card-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}
.home-templates-reveal {
  display: flex;
  flex-direction: column;
}
.home-templates-reveal__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 420ms cubic-bezier(0.23, 1, 0.32, 1), opacity 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-templates-reveal__inner {
  min-height: 0;
  overflow: hidden;
}
.home-templates-reveal.is-revealed .home-templates-reveal__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.home-templates-reveal.is-revealed .home-templates-reveal__inner {
  padding-bottom: 64px;
}
.home-templates-reveal__hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-templates-reveal__hint:hover {
  opacity: 1;
  color: var(--text-muted);
}
.home-templates-reveal__hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  opacity: 1;
}
.home-templates-reveal__hint-arrow {
  animation: home-templates-bob 1.8s ease-in-out infinite;
}
@keyframes home-templates-bob {
  0% {
    transform: translateY(3px);
    opacity: 0.25;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: translateY(3px);
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-templates-reveal__hint-arrow, .home-templates-reveal__collapse {
    animation: none;
  }
  .home-templates-reveal__hint-arrow {
    opacity: 0.85;
  }
  .home-templates-reveal__body {
    transition: none;
  }
}
.home-templates-reveal__collapse {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.08));
  animation: home-templates-fade-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: background 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.home-templates-reveal__collapse:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--text-strong, #111);
}
.home-templates-reveal__collapse:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@keyframes home-templates-fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.plugins-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.plugins-view__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.plugins-view__kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plugins-view__lede {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.plugins-view__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-panel);
  font-size: 12px;
}
.plugins-view__hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.plugins-view__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.plugins-view__stat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.plugins-view__stat-value {
  display: block;
  color: var(--text-strong);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.plugins-view__stat-label {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.plugins-view__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.plugins-view__tab {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-view__tab:hover {
  background: var(--bg-panel);
  color: var(--text);
}
.plugins-view__tab.is-disabled, .plugins-view__tab:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.plugins-view__tab.is-disabled:hover, .plugins-view__tab:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}
.plugins-view__tab.is-active {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}
.plugins-view__tab-label {
  font-size: 13px;
  font-weight: 650;
}
.plugins-view__tab-hint {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugins-view__gallery, .plugins-view__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plugins-view__gallery > .plugins-home {
  width: 100%;
}
.plugins-view__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.plugins-view__section-head h2, .plugins-view__team h2, .plugins-view__marketplace h3, .plugins-view__future-card h3 {
  margin: 0;
  color: var(--text-strong);
}
.plugins-view__section-head h2 {
  font-size: 18px;
}
.plugins-view__section-head p, .plugins-view__team p, .plugins-view__future-card p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.plugins-view__section-count {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.plugins-view__list, .plugins-view__marketplaces, .plugins-view__available-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plugins-view__available-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.plugins-view__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 180px;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.plugins-view__search:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.plugins-view__search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-faint);
  pointer-events: none;
}
.plugins-view__search input, .plugins-view__search input:focus {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 30px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  outline: none;
  box-shadow: none;
}
.plugins-view__search input::placeholder {
  color: var(--text-faint);
}
.plugins-view__search input::-webkit-search-cancel-button, .plugins-view__search input::-webkit-search-decoration {
  appearance: none;
  display: none;
}
.plugins-view__search-clear {
  position: absolute;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
}
.plugins-view__search-clear:hover {
  background: var(--border-soft, var(--border));
  color: var(--text);
}
.plugins-view__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
}
.plugins-view__filter span {
  min-width: 32px;
  text-align: center;
}
.plugins-view__filter select {
  min-height: 32px;
  min-width: 180px;
  max-width: 260px;
  padding: 7px 34px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
}
.plugins-view__row, .plugins-view__marketplace, .plugins-view__available-card, .plugins-view__install-card, .plugins-view__source-manager, .plugins-view__team {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.plugins-view__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px;
}
.plugins-view__row-main {
  min-width: 0;
}
.plugins-view__row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 650;
}
.plugins-view__row-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plugins-view__row-title > .trust-badge {
  flex: 0 0 auto;
}
.plugins-view__row-main p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.plugins-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 11.5px;
}
.plugins-view__meta > span {
  padding: 2px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.plugins-view__row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.plugins-view__primary, .plugins-view__secondary, .plugins-view__danger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  min-width: 48px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-view__primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
}
.plugins-view__primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.plugins-view__secondary {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
}
.plugins-view__secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
}
.plugins-view__danger {
  border: 1px solid var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.plugins-view__primary:disabled, .plugins-view__secondary:disabled, .plugins-view__danger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.plugins-view__marketplace, .plugins-view__available-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px;
}
.plugins-view__available-main {
  min-width: 0;
}
.plugins-view__available-main p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.plugins-view__marketplace a {
  display: inline-block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  word-break: break-all;
}
.plugins-view__source-manager {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.plugins-view__source-manager label {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 650;
}
.plugins-view__source-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.plugins-view__source-actions select, .plugins-view__source-row select {
  min-height: 32px;
  padding: 7px 34px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
}
.plugins-view__source-actions select {
  min-width: 112px;
}
.plugins-view__install-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.plugins-view__import {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.plugins-view__install-card label {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 650;
}
.plugins-view__source-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.plugins-view__source-row input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.plugins-view__source-row select {
  flex: 0 0 auto;
  min-width: 140px;
  width: 180px;
}
.plugins-view__source-row .plugins-view__primary {
  flex: 0 0 auto;
  min-width: 104px;
  white-space: nowrap;
}
.plugins-view__source-help {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.plugins-view__source-help code, .plugins-view__empty code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 11px;
}
.plugins-view__future-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.plugins-view__future-card {
  padding: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.plugins-view__future-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.plugins-view__team {
  display: flex;
  gap: 12px;
  padding: 18px;
}
.plugins-view__empty {
  padding: 20px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.plugins-view__notice {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
}
.plugins-view__notice.is-success {
  border-color: var(--green, #168a4a);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--green, #168a4a) 25%, var(--border));
  }
}
.plugins-view__notice.is-error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.plugins-view__notice-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}
.plugins-view__notice-log {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.plugins-view__notice-log ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.plugins-import-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 18, 24, 0.28);
  backdrop-filter: blur(4px);
}
.plugins-import-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.22));
}
.plugins-import-modal__head, .plugins-import-modal__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.plugins-import-modal__head h2, .plugins-view__install-card h3 {
  margin: 0;
  color: var(--text-strong);
}
.plugins-import-modal__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
}
.plugins-import-modal__close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.plugins-import-modal__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.plugins-import-modal__choice {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.plugins-import-modal__choice:hover, .plugins-import-modal__choice.is-active {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  background: var(--accent-tint);
  color: var(--accent);
}
.plugins-import-modal__choice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  padding-top: 1px;
}
.plugins-import-modal__choice-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.plugins-import-modal__choice-copy span:first-child {
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 650;
}
.plugins-import-modal__choice-copy span:last-child {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.plugins-import-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plugins-import-modal__file {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.plugins-import-modal__file:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.plugins-import-modal__file input {
  display: none;
}
.plugins-view__install-card p, .plugins-import-modal__foot p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.plugins-import-modal__foot {
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 900px) {
  .plugins-view__hero, .plugins-view__hero-actions, .plugins-view__row, .plugins-view__marketplace, .plugins-view__available-card, .plugins-view__available-controls, .plugins-view__source-actions {
    flex-direction: column;
  }
  .plugins-view__stats, .plugins-view__tabs, .plugins-view__future-grid {
    grid-template-columns: 1fr;
  }
  .plugins-view__row-actions, .plugins-view__source-row, .plugins-view__available-controls, .plugins-view__search, .plugins-view__filter, .plugins-view__source-actions {
    width: 100%;
  }
  .plugins-view__available-controls {
    align-items: stretch;
  }
  .plugins-view__search, .plugins-view__filter {
    flex: 0 0 auto;
    max-width: none;
  }
  .plugins-view__source-row {
    flex-direction: column;
  }
  .plugins-view__source-row input, .plugins-view__source-row select, .plugins-view__filter select, .plugins-view__source-row .plugins-view__primary {
    flex: 0 0 auto;
    width: 100%;
  }
  .plugins-import-modal__tabs {
    grid-template-columns: 1fr;
  }
  .plugins-import-modal__foot {
    align-items: stretch;
    flex-direction: column;
  }
}
.new-project-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 920;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 32px 32px;
  overflow: hidden;
}
.new-project-modal {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 88px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.new-project-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.new-project-modal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
}
.new-project-modal__close {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.new-project-modal__close svg {
  display: block;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.9;
}
.new-project-modal__close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.new-project-modal__close:disabled {
  cursor: default;
  opacity: 0.45;
}
.new-project-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.new-project-modal__body .newproj {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
}
.new-project-modal__status {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
}
.new-project-modal__status.error {
  border-color: var(--danger, #d4543b);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--danger, #d4543b) 45%, var(--border));
  }
  background: var(--danger, #d4543b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--danger, #d4543b) 10%, var(--bg-panel));
  }
  color: var(--danger, #d4543b);
}
.integrations-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.integrations-view__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 2px;
}
.integrations-view__kicker, .integrations-view__coming-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong, var(--accent));
}
.integrations-view__lede {
  margin: 8px 0 0;
  max-width: 660px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.integrations-view__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.integrations-view__badge svg {
  color: var(--accent);
}
.integrations-view__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.integrations-view__tab {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.integrations-view__tab:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.integrations-view__tab.is-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  }
  color: var(--accent-strong, var(--accent));
}
.integrations-view__tab-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-strong);
}
.integrations-view__tab.is-active .integrations-view__tab-label {
  color: var(--accent-strong, var(--accent));
}
.integrations-view__tab-hint {
  overflow: hidden;
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.integrations-view__panel {
  min-width: 0;
}
.integrations-view__panel > .settings-section {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.integrations-view__panel .settings-section > .section-head:first-child {
  margin-bottom: 2px;
}
.integrations-view__use-everywhere {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-xs);
}
.integrations-view__use-everywhere .use-everywhere-modal__tabs {
  padding: 12px 18px 0;
}
.integrations-view__use-everywhere .use-everywhere-modal__body {
  max-height: none;
  padding: 18px;
}
.integrations-view__use-everywhere .use-everywhere-modal__foot {
  padding: 14px 18px;
}
.integrations-view__coming-soon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-tint), transparent 34%), var(--bg-panel);
}
.integrations-view__coming-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}
.integrations-view__coming-soon h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text-strong);
}
.integrations-view__coming-soon p:last-child {
  margin: 8px 0 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .integrations-view__hero {
    flex-direction: column;
  }
  .integrations-view__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .integrations-view__coming-soon {
    grid-template-columns: 1fr;
  }
}
.marketplace-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 16px 4px 96px;
}
.marketplace-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.marketplace-view__header h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.marketplace-view__filters {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
}
.marketplace-view__filters button {
  appearance: none;
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.marketplace-view__filters button:hover:not([data-active='true']) {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
.marketplace-view__filters button[data-active='true'] {
  background: var(--bg-elevated);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}
.marketplace-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.marketplace-view__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: left;
  padding: 14px 16px;
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: inherit;
  cursor: pointer;
}
.marketplace-view__card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marketplace-view__card-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.marketplace-view__card-meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.marketplace-view__card-meta > span + span::before {
  content: '·';
  margin: 0 6px;
  color: var(--text-faint);
}
.marketplace-view__loading, .marketplace-view__empty {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.marketplace-view__grid > .marketplace-view__empty {
  grid-column: 1 / -1;
}
.marketplace-view__catalogs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.marketplace-view__catalogs h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.marketplace-view__catalogs > div {
  font-size: 12.5px;
  color: var(--text-muted);
}
.marketplace-view__catalogs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marketplace-view__catalogs li {
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.marketplace-view__catalogs li strong {
  color: var(--text-strong);
  font-weight: 600;
}
.marketplace-view__catalogs a {
  color: var(--accent);
  text-decoration: none;
}
.marketplace-view__catalogs a:hover {
  text-decoration: underline;
}
.marketplace-view__catalog-trust {
  color: var(--text-faint);
}
.automations-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 16px 4px 96px;
}
.automations-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 4px 0 4px;
}
.automations-hero__copy {
  min-width: 0;
}
.automations-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-bottom: 12px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 12%, transparent);
  }
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 78%, var(--text));
  }
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.automations-hero__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text-strong);
}
.automations-hero__lede {
  margin: 10px 0 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.automations-hero__actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 34px;
}
.automations-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, auto));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  box-shadow: var(--shadow-xs);
  height: 100%;
}
.automations-metric {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  padding: 0 10px;
  background: var(--bg-panel);
  line-height: 1;
}
.automations-metric__value {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.automations-metric__label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.automations-view__new {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent, #79a8ff) 48%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 16%, var(--bg-panel));
  }
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, var(--shadow-xs);
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}
.automations-view__new:hover {
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 22%, var(--bg-panel));
  }
  border-color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent, #79a8ff) 60%, var(--border));
  }
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, 0 6px 16px var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, 0 6px 16px color-mix(in srgb, var(--accent, #79a8ff) 18%, transparent);
  }
}
.automations-view__new:active {
  transform: scale(0.98);
}
.automations-view__new:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.automations-view__error {
  padding: 10px 12px;
  border: 1px solid var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red, #d94c4c) 34%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, #d94c4c) 12%, var(--bg-panel));
  }
  color: var(--text);
  font-size: 12px;
}
.automations-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.automations-section__label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}
.automations-section__sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.automations-section__meta {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.automations-saved {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.automations-saved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.automation-empty {
  appearance: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 84px;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong, var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--border-strong, var(--border)) 72%, transparent);
  }
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  }
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-empty:hover {
  border-style: solid;
  border-color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent, #79a8ff) 38%, var(--border-strong, var(--border)));
  }
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.automation-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 16%, var(--bg-subtle));
  }
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 76%, var(--text-strong));
  }
}
.automation-empty__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.automation-empty__body strong {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 680;
}
.automation-empty__body span {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.automation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-row:hover {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--bg-subtle));
  }
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 3%, transparent), 0 6px 18px color-mix(in srgb, #000 4%, transparent);
}
.automation-row.is-paused {
  opacity: 0.74;
}
.automation-row.is-focused {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-xs);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-xs);
  }
}
.automation-row__main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text);
}
.automation-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 74%, var(--text-muted));
  }
}
.automation-row__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.automation-row__title {
  font-size: 13.5px;
  font-weight: 680;
  color: var(--text-strong);
}
.automation-row__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.automation-row__prompt {
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.automation-row__last-run {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.automation-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.automation-status.is-running, .automation-status.is-queued {
  border-color: #c49a3b;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #c49a3b 28%, var(--border));
  }
  background: #c49a3b;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #c49a3b 12%, var(--bg-subtle));
  }
  color: #c49a3b;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #c49a3b 70%, var(--text));
  }
}
.automation-status.is-succeeded {
  border-color: #43a66d;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #43a66d 28%, var(--border));
  }
  background: #43a66d;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #43a66d 12%, var(--bg-subtle));
  }
  color: #43a66d;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #43a66d 68%, var(--text));
  }
}
.automation-status.is-failed {
  border-color: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red, #d94c4c) 34%, var(--border));
  }
  background: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, #d94c4c) 12%, var(--bg-subtle));
  }
  color: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--red, #d94c4c) 76%, var(--text));
  }
}
.automation-inline-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 78%, var(--text));
  }
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.automation-inline-link:hover {
  color: var(--text-strong);
}
.automation-row__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.automation-row__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-row__btn:hover {
  background: var(--bg-elevated, var(--bg-panel));
  border-color: var(--border-strong);
}
.automation-row__btn:disabled {
  opacity: 0.55;
  cursor: progress;
}
.automation-row__btn--danger {
  width: 30px;
  padding: 0;
  justify-content: center;
  color: var(--text-muted);
}
.automation-row__btn--danger:hover {
  color: var(--red, #d94c4c);
  border-color: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--red, #d94c4c) 40%, var(--border));
  }
}
.automation-history {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 68%, transparent);
  }
}
.automation-history--empty {
  color: var(--text-muted);
  font-size: 12px;
}
.automation-history__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.automation-history__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.automation-history__row {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.automation-history__status, .automation-history__meta {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.automation-history__status {
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: capitalize;
}
.automation-history__meta {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
}
.automation-history__meta span {
  min-width: 0;
}
.automation-history__message {
  grid-column: 1 / 3;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-history__message.is-error {
  color: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--red, #d94c4c) 78%, var(--text));
  }
}
.automation-history__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.automation-history__open {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.automation-history__open:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated, var(--bg-panel));
}
.automation-history__open:disabled {
  opacity: 0.55;
  cursor: progress;
}
.automations-templates {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.automations-templates__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.automations-templates__head-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.automations-template-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.automations-template-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automations-template-tab:hover {
  color: var(--text);
}
.automations-template-tab.is-active {
  color: var(--text-strong);
  font-weight: 700;
}
.automations-template-tab__label {
  white-space: nowrap;
}
.automations-template-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-subtle) 90%, transparent);
  }
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.automations-template-tab.is-active .automations-template-tab__count {
  background: var(--accent, #d77757);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #d77757) 18%, var(--bg-subtle));
  }
  color: var(--accent, #d77757);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #d77757) 70%, var(--text-strong));
  }
}
.automations-templates__empty {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong, var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--border-strong, var(--border)) 70%, transparent);
  }
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 76%, transparent);
  }
}
.automations-templates__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 14%, var(--bg-subtle));
  }
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 70%, var(--text-strong));
  }
}
.automations-templates__empty strong {
  display: block;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 680;
}
.automations-templates__empty p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.automations-templates__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.automation-template-card {
  appearance: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 168px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-template-card:hover {
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 86%, var(--bg-subtle));
  }
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 3%, transparent), 0 10px 24px color-mix(in srgb, #000 5%, transparent);
}
.automation-template-card:active {
  transform: translateY(0) scale(0.995);
}
.automation-template-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.automation-template-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.automation-template-card.is-orbit .automation-template-card__icon {
  background: #d77757;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #d77757 20%, var(--bg-subtle));
  }
  color: #f2a282;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #f2a282 82%, var(--text-strong));
  }
}
.automation-template-card.is-live-artifact .automation-template-card__icon {
  background: #54ba78;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #54ba78 18%, var(--bg-subtle));
  }
  color: #79dfa0;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, #79dfa0 82%, var(--text-strong));
  }
}
.automation-template-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.automation-template-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.automation-template-card__title {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.35;
}
.automation-template-card__desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.automation-template-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--accent, #79a8ff) 78%, var(--text));
  }
  font-size: 12px;
  font-weight: 700;
}
.automation-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim, rgba(0, 0, 0, 0.45));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--scrim, rgba(0, 0, 0, 0.45)) 92%, transparent);
  }
  backdrop-filter: blur(3px);
  animation: automation-modal-fade-in 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes automation-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.automation-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(880px, calc(100vw - 64px));
  max-height: min(680px, calc(100vh - 48px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated, var(--bg-panel));
  box-shadow: 0 24px 60px color-mix(in srgb, #000 30%, transparent), 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
  overflow: hidden;
  animation: automation-modal-pop-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes automation-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.automation-modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.automation-modal__title-input {
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 680;
  color: var(--text-strong);
  padding: 6px 0;
}
.automation-modal__title-input::placeholder {
  color: var(--text-faint);
  font-weight: 560;
}
.automation-modal__title-input:focus {
  outline: none;
}
.automation-modal__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.automation-template-trigger, .automation-modal__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-template-trigger {
  gap: 7px;
  max-width: 260px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 700;
}
.automation-template-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-template-trigger:hover, .automation-template-trigger.is-active, .automation-modal__close:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.automation-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--text-muted);
}
.automation-modal__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px 12px;
  overflow: auto;
}
.automation-modal__prompt-wrap {
  position: relative;
  min-height: 0;
}
.automation-modal__prompt {
  display: block;
  width: 100%;
  min-height: 300px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  }
  resize: none;
  color: var(--text);
  font: 13.5px/1.55 var(--font, system-ui);
}
.automation-modal__prompt::placeholder {
  color: var(--text-faint);
}
.automation-modal__prompt:focus {
  outline: none;
  border-color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent, #79a8ff) 44%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #79a8ff) 14%, transparent);
  }
}
.automation-modal__prompt-wrap.is-mentioning .automation-modal__prompt {
  border-color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent, #79a8ff) 48%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent, #79a8ff), 0 16px 34px var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #79a8ff) 15%, transparent), 0 16px 34px color-mix(in srgb, var(--accent, #79a8ff) 7%, transparent);
  }
}
.automation-modal__error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--red, #d94c4c) 32%, var(--border));
  }
  border-radius: var(--radius);
  background: var(--red, #d94c4c);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--red, #d94c4c) 14%, var(--bg-panel));
  }
  font-size: 12px;
  color: var(--text);
}
.automation-mention-popover {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: clamp(160px, 30vh, 250px);
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated, var(--bg-panel));
  box-shadow: 0 18px 44px color-mix(in srgb, #000 32%, transparent);
  overflow: hidden;
  animation: automation-popover-in 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-mention-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  }
}
.automation-mention-tab {
  appearance: none;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.automation-mention-tab.is-active {
  background: var(--bg-subtle);
  color: var(--text-strong);
}
.automation-mention-results {
  min-height: 0;
  overflow: auto;
  padding: 8px;
}
.automation-mention-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.automation-mention-section + .automation-mention-section {
  margin-top: 10px;
}
.automation-mention-section__label, .automation-popover__section-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.automation-mention-section__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.automation-mention-empty {
  padding: 22px 10px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.automation-mention-item {
  appearance: none;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.automation-mention-item:hover {
  background: var(--bg-subtle);
}
.automation-mention-item.is-selected {
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 12%, var(--bg-panel));
  }
}
.automation-mention-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}
.automation-mention-item.is-selected .automation-mention-item__icon {
  border-color: var(--accent, #79a8ff);
  background: var(--accent, #79a8ff);
  color: #fff;
}
.automation-mention-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.automation-mention-item__title, .automation-template-option__title {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-mention-item__meta, .automation-template-option__meta {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-selected-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}
.automation-selected-context__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.automation-selected-context__chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.automation-selected-context__chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.automation-modal__pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.automation-pill__wrap {
  position: relative;
  display: inline-flex;
}
.automation-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated, var(--bg-panel));
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1);
  max-width: 320px;
}
.automation-pill > span:not(:first-child):not(:last-child) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.automation-pill__segments {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.automation-pill__freq {
  font-weight: 700;
  color: var(--text-strong);
  flex-shrink: 0;
}
.automation-pill__sep {
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}
.automation-pill__time {
  color: var(--text);
  flex-shrink: 0;
}
.automation-pill__tz {
  color: var(--text-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.automation-pill:hover {
  background: var(--bg-panel);
  border-color: var(--border-strong);
}
.automation-pill.is-active {
  border-color: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent, #79a8ff) 58%, var(--border));
  }
  box-shadow: 0 0 0 3px var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #79a8ff) 18%, transparent);
  }
}
.automation-modal__actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.automation-modal__cancel, .automation-modal__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-modal__cancel {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
}
.automation-modal__cancel:hover {
  color: var(--text-strong);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  }
}
.automation-modal__submit {
  border: 1px solid var(--text-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--text-strong) 28%, var(--border));
  }
  background: var(--text-strong);
  color: var(--bg-panel);
}
.automation-modal__submit:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
.automation-modal__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.automation-popover {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  z-index: 5;
  min-width: 250px;
  max-width: 340px;
  max-height: 360px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated, var(--bg-panel));
  box-shadow: 0 14px 34px color-mix(in srgb, #000 28%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: automation-popover-in 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.automation-modal__head-actions .automation-popover {
  left: auto;
  right: 0;
  top: calc(100% + 7px);
  bottom: auto;
}
@keyframes automation-popover-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.automation-popover--schedule {
  width: min(380px, calc(100vw - 48px));
  min-width: 320px;
  padding: 12px;
  gap: 10px;
}
.automation-popover--templates {
  min-width: 320px;
}
.automation-popover__item, .automation-template-option {
  appearance: none;
  display: grid;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.automation-popover__item {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
}
.automation-template-option {
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 9px;
}
.automation-popover__item:hover, .automation-template-option:hover {
  background: var(--bg-subtle);
}
.automation-popover__item.is-selected, .automation-template-option.is-selected {
  background: var(--accent, #79a8ff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent, #79a8ff) 14%, transparent);
  }
}
.automation-template-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.automation-template-option__icon.is-orbit {
  background: #d77757;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #d77757 18%, var(--bg-subtle));
  }
  color: #f2a282;
}
.automation-template-option__icon.is-live-artifact {
  background: #54ba78;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #54ba78 18%, var(--bg-subtle));
  }
  color: #79dfa0;
}
.automation-template-option__body, .automation-popover__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.automation-popover__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  color: var(--accent-strong, var(--accent));
}
.automation-popover__label {
  font-size: 12.5px;
  font-weight: 680;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.automation-popover__hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.automation-popover__section-label {
  padding: 7px 10px 4px;
}
.automation-popover__kinds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.automation-popover__kind {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}
.automation-popover__kind.is-active {
  background: var(--bg-elevated, var(--bg-panel));
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}
.automation-popover__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.automation-popover__weekday {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 680;
  border-radius: var(--radius);
  cursor: pointer;
}
.automation-popover__weekday.is-active {
  background: var(--accent, #79a8ff);
  border-color: var(--accent, #79a8ff);
  color: #fff;
}
.automation-popover__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.automation-popover__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.automation-popover__field > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
}
.automation-popover__field > input, .automation-popover__field > select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12.5px;
}
.automation-popover__field > input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}
.automation-popover__field > input[type="time"]::-webkit-inner-spin-button {
  display: none;
}
.automation-popover__field > select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}
.automation-popover__done {
  display: flex;
  justify-content: flex-end;
}
.automation-popover__done-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--text-strong);
  color: var(--bg-panel);
  font-size: 12px;
  font-weight: 700;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.automation-popover__done-btn:hover {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
@media (max-width: 960px) {
  .automations-templates__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .automation-modal__prompt {
    min-height: 240px;
  }
}
@media (max-width: 760px) {
  .automations-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .automations-hero__actions, .automations-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .automations-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .automations-templates__grid {
    grid-template-columns: 1fr;
  }
  .automation-row {
    grid-template-columns: 1fr;
  }
  .automation-row__actions {
    justify-self: flex-start;
  }
  .automation-history__row {
    grid-template-columns: 1fr;
  }
  .automation-history__message, .automation-history__actions {
    grid-column: auto;
  }
  .automation-history__actions {
    justify-self: flex-start;
  }
  .automation-modal-backdrop {
    padding: 12px;
  }
  .automation-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .automation-modal__foot {
    grid-template-columns: 1fr;
  }
  .automation-modal__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .automation-modal__head-actions, .automation-modal__actions {
    justify-content: flex-end;
  }
  .automation-template-trigger {
    max-width: min(220px, 42vw);
  }
  .automation-modal__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .automation-mention-popover {
    height: clamp(150px, 28vh, 220px);
  }
}
.use-everywhere-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 920;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.use-everywhere-modal {
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 64px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.use-everywhere-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.use-everywhere-modal__head-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.use-everywhere-modal__kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong, var(--accent));
  font-weight: 600;
}
.use-everywhere-modal__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.use-everywhere-modal__subtitle {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.use-everywhere-modal__close {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.use-everywhere-modal__close svg {
  display: block;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.9;
}
.use-everywhere-modal__close:hover, .use-everywhere-modal__close:focus-visible {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
.use-everywhere-modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 22px 0;
  border-bottom: 1px dashed var(--border);
  background: var(--bg-panel);
}
.use-everywhere-modal__tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px 8px;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: color 120ms var(--ease-out), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.use-everywhere-modal__tab:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.use-everywhere-modal__tab.is-active {
  color: var(--text-strong);
  background: var(--bg);
  border-color: var(--border);
  border-bottom-color: var(--bg);
}
.use-everywhere-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 6px;
  background: var(--bg);
}
.use-everywhere-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.use-everywhere-section__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.use-everywhere-section__heading {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.use-everywhere-section__intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.use-everywhere-section__bullets {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.use-everywhere-section__bullets li::marker {
  color: var(--text-faint);
}
.use-everywhere-section__snippets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.use-everywhere-section__footer {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
}
.use-everywhere-snippet {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-panel);
  overflow: hidden;
}
.use-everywhere-snippet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
}
.use-everywhere-snippet__label {
  font-weight: 500;
  color: var(--text);
}
.use-everywhere-snippet__copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  cursor: pointer;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.use-everywhere-snippet__copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.use-everywhere-snippet__pre {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  background: var(--bg-panel);
}
.use-everywhere-snippet__pre code {
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}
.use-everywhere-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.use-everywhere-modal__foot-info {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}
.use-everywhere-modal__foot-info strong {
  color: var(--text-strong);
}
.use-everywhere-modal__foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.use-everywhere-modal__primary, .use-everywhere-modal__secondary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.use-everywhere-modal__secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.use-everywhere-modal__secondary:hover {
  background: var(--bg-subtle);
}
.use-everywhere-modal__primary {
  background: var(--accent);
  color: var(--accent-on, #fff);
  border: 1px solid var(--accent);
}
.use-everywhere-modal__primary:hover {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
.use-everywhere-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.use-everywhere-chip:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.use-everywhere-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.use-everywhere-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-strong);
  flex: 0 0 auto;
}
.use-everywhere-chip__label {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .use-everywhere-chip__label {
    display: none;
  }
  .use-everywhere-chip {
    padding: 0 8px;
  }
  .use-everywhere-modal__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .use-everywhere-modal__foot-actions {
    justify-content: flex-end;
  }
}