.ko-fi-button.svelte-h25emv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #ff5e5b;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ko-fi-button.svelte-h25emv:hover {
  background-color: #ff4744;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.ko-fi-button.svelte-h25emv:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ko-fi-button.floating.svelte-h25emv {
  position: fixed;
  bottom: 50px;
  left: 320px;
  z-index: 99;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
}
.ko-fi-button.floating.panel-collapsed.svelte-h25emv {
  left: 50px;
}
@media (max-width: 768px) {
  .ko-fi-button.floating.svelte-h25emv {
    bottom: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .ko-fi-button.floating.panel-collapsed.svelte-h25emv {
    left: 10px;
  }
  .ko-fi-button.floating.svelte-h25emv .ko-fi-icon:where(.svelte-h25emv) {
    width: 18px;
    height: 18px;
  }
}
.ko-fi-button.full-width.svelte-h25emv {
  width: 100%;
  margin-top: 16px;
}
.ko-fi-button.svelte-h25emv .ko-fi-icon:where(.svelte-h25emv) {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ko-fi-button.svelte-h25emv .ko-fi-text:where(.svelte-h25emv) {
  white-space: nowrap;
}
.about-content {
  padding: 0 16px;
  max-width: 500px;
}
.about-content h2.svelte-1y3limf {
  color: #ff3e00;
  margin-top: 0;
}
.about-content p.svelte-1y3limf {
  line-height: 1.5;
}
.about-content .about-details.svelte-1y3limf {
  margin: 20px 0;
}
.about-content .about-details.svelte-1y3limf p:where(.svelte-1y3limf) {
  margin: 8px 0;
}
.about-content .about-links.svelte-1y3limf {
  margin-top: 20px;
}
.about-content .about-links.svelte-1y3limf a:where(.svelte-1y3limf) {
  color: #ff3e00;
  text-decoration: none;
}
.about-content .about-links.svelte-1y3limf a:where(.svelte-1y3limf):hover {
  text-decoration: underline;
}
.about-content .support-section.svelte-1y3limf {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.about-content .support-section.svelte-1y3limf h3:where(.svelte-1y3limf) {
  color: #ff3e00;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
}
.about-content .support-section.svelte-1y3limf p:where(.svelte-1y3limf) {
  margin-bottom: 12px;
  font-size: 14px;
}
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.config-card-container.svelte-vgfslv {
  position: relative;
  width: 100%;
}

.config-card.svelte-vgfslv {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  width: 100%;
  text-align: left;
  font-family: inherit;
  padding: 0;
  display: block;
}

.dark-theme .config-card.svelte-vgfslv {
  background-color: #2d2d2d;
  border: 1px solid #444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.config-card.svelte-vgfslv:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dark-theme .config-card.svelte-vgfslv:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.config-card-content.svelte-vgfslv {
  padding: 12px;
}

.config-name.svelte-vgfslv {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}

.config-dates.svelte-vgfslv {
  font-size: 12px;
  color: #666;
}

.config-date.svelte-vgfslv {
  margin-bottom: 2px;
  color: #666;
}

.dark-theme .config-name.svelte-vgfslv {
  color: #ffffff;
}

.dark-theme .config-dates.svelte-vgfslv,
.dark-theme .config-date.svelte-vgfslv {
  color: #b0b0b0;
}

.delete-button.svelte-vgfslv {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: rgba(255, 0, 0, 0.1);
  color: #d32f2f;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: 2;
}

.dark-theme .delete-button.svelte-vgfslv {
  background-color: rgba(255, 0, 0, 0.2);
  color: #f44336;
}

.delete-button.svelte-vgfslv:hover {
  background-color: rgba(255, 0, 0, 0.2);
}

.dark-theme .delete-button.svelte-vgfslv:hover {
  background-color: rgba(255, 0, 0, 0.3);
}

.config-card-container.svelte-vgfslv:hover .delete-button:where(.svelte-vgfslv) {
  opacity: 1;
}
.save-dialog-content.svelte-s7ihjj {
  width: 100%;
  min-width: 300px;
  max-width: 800px;
}

.code-container.svelte-s7ihjj {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: #f5f5f5;
  margin-bottom: 16px;
}

.dark-theme .code-container.svelte-s7ihjj {
  background-color: #2d2d2d;
  color: #f8f8f2;
}

pre.svelte-s7ihjj {
  margin: 0;
  padding: 16px;
  font-family: "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  tab-size: 2;
}

code.svelte-s7ihjj {
  white-space: pre-wrap;
  word-break: break-word;
}

.save-form.svelte-s7ihjj {
  margin: 16px 0;
}

/* (unused) .config-name-input {
  width: 100%;
}*/

.separator.svelte-s7ihjj {
  height: 1px;
  background-color: var(--border, #ddd);
  margin: 24px 0;
  width: 100%;
}

.dark-theme .separator.svelte-s7ihjj {
  background-color: #444;
}

.recent-configs.svelte-s7ihjj {
  margin-top: 8px;
}

.recent-configs.svelte-s7ihjj h3:where(.svelte-s7ihjj) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
}

.config-cards.svelte-s7ihjj {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-height: 25vh;
  overflow-y: auto;
  padding: 4px;
}
.load-dialog-content.svelte-w1vv03 {
  width: 100%;
  min-width: 300px;
  max-width: 800px;
}

.saved-configs.svelte-w1vv03 {
  margin-top: 8px;
}

.saved-configs.svelte-w1vv03 h3:where(.svelte-w1vv03) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
}

.config-cards.svelte-w1vv03 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.no-configs.svelte-w1vv03 {
  padding: 24px;
  text-align: center;
  color: var(--mdc-theme-text-secondary-on-background, #666);
}

.no-configs.svelte-w1vv03 p:where(.svelte-w1vv03) {
  margin: 8px 0;
}
.wrapper.svelte-1u5zf43 {
  /* Opened from a phone's Home Screen the page runs under the status bar;
     keep the toolbar below it. Zero everywhere else. */
  padding-top: env(safe-area-inset-top);
  width: 100%;
  background: var(--mdc-theme-background);
  display: flex;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
}

.left-section.svelte-1u5zf43 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
}

.config-info.svelte-1u5zf43 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4px;
}

.config-name-container.svelte-1u5zf43 {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 10;
}

.config-name-edit-container.svelte-1u5zf43 {
  position: absolute;
  top: -12px;
  left: -10px;
  z-index: 20;
  min-width: 200px;
}

.config-name-wrapper.svelte-1u5zf43 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.config-name-wrapper.svelte-1u5zf43:hover, .config-name-wrapper.svelte-1u5zf43:focus {
  background-color: rgba(255, 62, 0, 0.1);
}
.config-name-wrapper.svelte-1u5zf43:hover .edit-icon:where(.svelte-1u5zf43), .config-name-wrapper.svelte-1u5zf43:focus .edit-icon:where(.svelte-1u5zf43) {
  opacity: 1;
}

.config-name.svelte-1u5zf43 {
  font-weight: 500;
  font-size: 14px;
  color: var(--mdc-theme-primary, #ff3e00);
}

.edit-icon.svelte-1u5zf43 {
  font-size: 16px;
  color: var(--mdc-theme-primary, #ff3e00);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.config-name-input.svelte-1u5zf43 {
  font-weight: 500;
  font-size: 16px;
  color: var(--mdc-theme-primary, #ff3e00);
  background: var(--mdc-theme-surface, #fff);
  border: 1px solid var(--mdc-theme-primary, #ff3e00);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  min-width: 240px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}
.config-name-input.svelte-1u5zf43:focus {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.last-modified.svelte-1u5zf43 {
  font-size: 12px;
  color: var(--mdc-theme-text-secondary-on-background, #666);
  opacity: 0.8;
}

.center-section.svelte-1u5zf43 {
  display: flex;
  gap: 8px;
  flex-grow: 0;
}
@media (max-width: 768px) {
  .center-section.svelte-1u5zf43 {
    display: none;
  }
}

/* (unused) .right-section {
  display: flex;
  align-items: center;
}*/
@media (max-width: 768px) {
  /* (unused) .right-section {
    display: none;
  }*/
}

.mobile-controls.svelte-1u5zf43 {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}

.icon-button.svelte-1u5zf43 {
  border: none;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ff3e00;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.icon-button.svelte-1u5zf43:hover {
  opacity: 0.9;
}

.icon-button.svelte-1u5zf43 .material-icons:where(.svelte-1u5zf43) {
  color: white;
}

.mobile-menu.svelte-1u5zf43 {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  margin-top: 4px;
  min-width: 180px;
  overflow: hidden;
}
.mobile-menu.dark-theme.svelte-1u5zf43 {
  background-color: #222;
  border-color: #333;
  color: white;
}
.mobile-menu.dark-theme.svelte-1u5zf43 .menu-item:where(.svelte-1u5zf43) {
  color: #fff;
}
.mobile-menu.dark-theme.svelte-1u5zf43 .menu-item:where(.svelte-1u5zf43):hover {
  background-color: #333;
}

.menu-item.svelte-1u5zf43 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: #333;
}
.menu-item.svelte-1u5zf43:hover {
  background-color: #f5f5f5;
}

.logo-button.svelte-1u5zf43 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.logo.svelte-1u5zf43 {
  height: 36px;
  vertical-align: middle;
}
.wrapper.svelte-mzq7n5 {
  position: absolute;
  bottom: 10px;
  right: 320px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

  .v-scrollbar.svelte-1u3nuoj {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--svrollbar-track-width, 10px);
  }

  .v-scrollbar.fixed.svelte-1u3nuoj {
    position: fixed;
  }

  .v-track.svelte-1u3nuoj {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: var(--svrollbar-track-radius, initial);
    width: var(--svrollbar-track-width, 10px);
    opacity: var(--svrollbar-track-opacity, 1);
    background: var(--svrollbar-track-background, initial);
    box-shadow: var(--svrollbar-track-shadow, initial);
  }

  .v-thumb.svelte-1u3nuoj {
    position: relative;
    margin: 0 auto;
    border-radius: var(--svrollbar-thumb-radius, 0.25rem);
    width: var(--svrollbar-thumb-width, 6px);
    opacity: var(--svrollbar-thumb-opacity, 0.5);
    background: var(--svrollbar-thumb-background, gray);
    box-shadow: var(--svrollbar-thumb-shadow, initial);
  }


  .svlr-wrapper.svelte-qaimor {
    position: relative;
  }

  .svlr-viewport.svelte-qaimor {
    position: relative;
    overflow: scroll;
    box-sizing: border-box;

    /* hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .svlr-viewport.svelte-qaimor::-webkit-scrollbar {
    /* hide scrollbar */
    display: none;
  }

.wrapper.svelte-g8pe8c {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.section-title.svelte-du92h1 {
  padding: 8px 16px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.6;
}

.svelte-du92h1 .solo-paper {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 600px;
  padding: 0 12px;
  height: 48px;
  margin: 16px;
}

.svelte-du92h1 .solo-paper > * {
  display: inline-block;
  margin: 0 12px;
}

.svelte-du92h1 .solo-input {
  flex-grow: 1;
  color: var(--mdc-theme-on-surface, #000);
}

.svelte-du92h1 .solo-input::placeholder {
  color: var(--mdc-theme-on-surface, #000);
  opacity: 0.6;
}
.add-image.svelte-19uay7d {
  width: 100%;
  padding: 0 16px;
}

.svelte-19uay7d .mdc-button {
  width: 100%;
}
.wrapper.svelte-kq2bp9 {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wrapper.svelte-kq2bp9 .circle-preview:where(.svelte-kq2bp9) {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px dashed var(--mdc-theme-on-surface);
  border-radius: 50%;
}
.wrapper.svelte-kq2bp9 .transparent-background:where(.svelte-kq2bp9) {
  background-image: url(./assets/images/transparent.webp);
  background-repeat: repeat;
  background-size: 10%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wrapper.svelte-kq2bp9 .media-background:where(.svelte-kq2bp9) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wrapper.svelte-kq2bp9 .default-name:where(.svelte-kq2bp9) {
  text-overflow: ellipsis;
  overflow: hidden;
}

.svelte-kq2bp9 .mdc-typography--body2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions.svelte-kq2bp9 {
  display: flex;
  gap: 8px;
}
.head.svelte-16hsoxx {
  margin-bottom: 16px;
}

.svelte-16hsoxx .solo-paper {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 600px;
  padding: 0 12px;
  height: 48px;
  margin: 16px;
}

.svelte-16hsoxx .solo-paper > * {
  display: inline-block;
  margin: 0 12px;
}

.svelte-16hsoxx .solo-input {
  flex-grow: 1;
  color: var(--mdc-theme-on-surface, #000);
}

.svelte-16hsoxx .solo-input::placeholder {
  color: var(--mdc-theme-on-surface, #000);
  opacity: 0.6;
}
.add-video.svelte-2xxcdn {
  width: 100%;
  padding: 8px 16px 0;
}

.svelte-2xxcdn .mdc-button {
  width: 100%;
}
.wrapper.svelte-1rtvwtq {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wrapper.in-use.svelte-1rtvwtq {
  border-color: var(--mdc-theme-secondary, #ff5722);
}
.wrapper.svelte-1rtvwtq .transparent-background:where(.svelte-1rtvwtq) {
  background-image: url(./assets/images/transparent.webp);
  background-repeat: repeat;
  background-size: 10%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wrapper.svelte-1rtvwtq .media-background:where(.svelte-1rtvwtq) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.wrapper.svelte-1rtvwtq .kind-badge:where(.svelte-1rtvwtq) {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: #7e57c2;
}
.wrapper.svelte-1rtvwtq .caption:where(.svelte-1rtvwtq) {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.7;
}
.wrapper.svelte-1rtvwtq .in-use-badge:where(.svelte-1rtvwtq) {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--mdc-theme-secondary, #ff5722);
}
.wrapper.svelte-1rtvwtq .actions:where(.svelte-1rtvwtq) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.wrapper.svelte-1rtvwtq .actions:where(.svelte-1rtvwtq) .mdc-card__primary-action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.head.svelte-sqlxvz {
  margin-bottom: 8px;
}

.current.svelte-sqlxvz {
  padding: 8px 16px 0;
  font-size: 12px;
  opacity: 0.8;
}

.busy.svelte-sqlxvz {
  opacity: 0.7;
}

.empty.svelte-sqlxvz {
  padding: 24px 16px;
  font-size: 13px;
  opacity: 0.6;
}

.svelte-sqlxvz .solo-paper {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 600px;
  padding: 0 12px;
  height: 48px;
  margin: 16px;
}

.svelte-sqlxvz .solo-paper > * {
  display: inline-block;
  margin: 0 12px;
}

.svelte-sqlxvz .solo-input {
  flex-grow: 1;
  color: var(--mdc-theme-on-surface, #000);
}

.svelte-sqlxvz .solo-input::placeholder {
  color: var(--mdc-theme-on-surface, #000);
  opacity: 0.6;
}
.item.svelte-xvbdbt {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
}
.item.hidden.svelte-xvbdbt {
  opacity: 0.45;
}
.item.selected.svelte-xvbdbt {
  border-color: var(--mdc-theme-primary, #ff5722);
}

.head.svelte-xvbdbt {
  display: flex;
  align-items: center;
}
.head.svelte-xvbdbt button:where(.svelte-xvbdbt) {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  font: inherit;
}
.head.svelte-xvbdbt .title:where(.svelte-xvbdbt) {
  flex: 1;
  gap: 6px;
  min-width: 0;
}
.head.svelte-xvbdbt .title:where(.svelte-xvbdbt) .name:where(.svelte-xvbdbt) {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.head.svelte-xvbdbt .material-icons {
  font-size: 17px;
}
.head.svelte-xvbdbt .type {
  opacity: 0.75;
}
.head.svelte-xvbdbt .chevron {
  opacity: 0.5;
}
.head.svelte-xvbdbt .del:where(.svelte-xvbdbt):hover {
  color: #ff6b6b;
}
.head.svelte-xvbdbt .pick:where(.svelte-xvbdbt) {
  opacity: 0.7;
}
.head.svelte-xvbdbt .pick:where(.svelte-xvbdbt):hover {
  opacity: 1;
}

.body.svelte-xvbdbt {
  padding: 4px 10px 12px;
  border-top: 1px solid var(--border);
}

.group-label.svelte-xvbdbt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.5;
  margin: 10px 0 4px;
}

.row.svelte-xvbdbt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.row.svelte-xvbdbt span:where(.svelte-xvbdbt) {
  width: 42px;
  font-size: 11px;
  opacity: 0.75;
}
.row.svelte-xvbdbt input[type=range]:where(.svelte-xvbdbt) {
  flex: 1;
  min-width: 0;
}
.row.svelte-xvbdbt input[type=number]:where(.svelte-xvbdbt) {
  width: 58px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: inherit;
  font-size: 11px;
  padding: 2px 4px;
}
.row.svelte-xvbdbt input[type=color]:where(.svelte-xvbdbt) {
  width: 34px;
  height: 22px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.row.check.svelte-xvbdbt span:where(.svelte-xvbdbt) {
  width: auto;
}

.bake.svelte-xvbdbt {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: var(--mdc-theme-primary, #ff5722);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.bake.svelte-xvbdbt:disabled {
  opacity: 0.6;
  cursor: default;
}

.chips.svelte-xvbdbt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 4px;
}
.chips.svelte-xvbdbt button:where(.svelte-xvbdbt) {
  flex: 1 1 auto;
  padding: 4px 0;
  background: #2a2a2a;
  color: #999;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}
.chips.svelte-xvbdbt button.active:where(.svelte-xvbdbt) {
  border-color: var(--mdc-theme-primary, #ff5722);
  color: #eee;
}

select.svelte-xvbdbt {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  background: #2a2a2a;
  color: #ddd;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  font: inherit;
  font-size: 11px;
}

.wide.svelte-xvbdbt {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: #2a2a2a;
  color: #ddd;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.wide.svelte-xvbdbt:hover {
  border-color: var(--mdc-theme-primary, #ff5722);
}

.hint.warn.svelte-xvbdbt {
  color: #e0955f;
  opacity: 0.95;
}

.hint.svelte-xvbdbt {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  opacity: 0.55;
}
.menu-backdrop.svelte-g774pt {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.menu.svelte-g774pt {
  position: fixed;
  z-index: 901;
  min-width: 150px;
  padding: 4px;
  background: var(--mdc-theme-surface, #2a2a2a);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.menu.svelte-g774pt button:where(.svelte-g774pt) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
.menu.svelte-g774pt button:where(.svelte-g774pt):hover {
  background: rgba(255, 255, 255, 0.1);
}
.menu.svelte-g774pt button.danger:where(.svelte-g774pt):hover {
  background: rgba(255, 107, 107, 0.18);
  color: #ff8f8f;
}
.menu.svelte-g774pt button:where(.svelte-g774pt) .material-icons {
  font-size: 16px;
  opacity: 0.8;
}

.add-bar.svelte-g774pt {
  display: flex;
  gap: 6px;
  padding: 14px 12px;
}
.add-bar.svelte-g774pt button:where(.svelte-g774pt) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}
.add-bar.svelte-g774pt button:where(.svelte-g774pt):hover {
  background: rgba(255, 255, 255, 0.12);
}
.add-bar.svelte-g774pt button:where(.svelte-g774pt) .material-icons {
  font-size: 18px;
}

.preview-toggle.svelte-g774pt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  padding: 6px 0;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #262626;
  color: #999;
  cursor: pointer;
  font-size: 11px;
}

.preview-toggle.on.svelte-g774pt {
  border-color: #b34a2c;
  color: #e0e0e0;
}

.mode-bar.svelte-g774pt {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
}
.mode-bar.svelte-g774pt button:where(.svelte-g774pt) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}
.mode-bar.svelte-g774pt button.active:where(.svelte-g774pt) {
  background: var(--mdc-theme-primary, #ff5722);
  border-color: transparent;
  color: #fff;
}
.mode-bar.svelte-g774pt button:where(.svelte-g774pt) .material-icons {
  font-size: 15px;
}

.empty.svelte-g774pt {
  padding: 20px 16px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.55;
}
.wrapper.svelte-7oyf39 {
  position: absolute;
  left: 0;
  top: 0;
  width: 310px;
  height: 100%;
  max-height: 100%;
  background-color: var(--mdc-theme-background);
  border-right: 1px solid var(--border);
  display: flex;
  transition: width 0.3s ease;
  overflow: visible;
  z-index: 100;
}
.wrapper.collapsed.svelte-7oyf39 {
  width: 40px;
}
.wrapper.collapsed.svelte-7oyf39 .panel-content:where(.svelte-7oyf39) {
  opacity: 0;
  pointer-events: none;
}
.wrapper.collapsed.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) {
  opacity: 1;
  pointer-events: auto;
}
.wrapper.svelte-7oyf39 .panel-content:where(.svelte-7oyf39) {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button:where(.svelte-7oyf39) {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 48px;
  padding: 0 2px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  outline: none;
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button:where(.svelte-7oyf39) .tab-label:where(.svelte-7oyf39) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button:where(.svelte-7oyf39) .material-icons {
  font-size: 16px;
  /* The icon font is loaded from Google Fonts; if it is unavailable the
     ligature falls back to its literal name and would blow up the tab
     width, so keep it clipped to the glyph box. */
  width: 18px;
  overflow: hidden;
  flex: 0 0 auto;
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button:where(.svelte-7oyf39):hover, .wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button:where(.svelte-7oyf39):focus-visible {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.06);
}
.wrapper.svelte-7oyf39 .tab-row:where(.svelte-7oyf39) .tab-button.active:where(.svelte-7oyf39) {
  opacity: 1;
  color: var(--mdc-theme-primary);
  border-bottom-color: var(--mdc-theme-primary);
}
.wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) {
  position: absolute;
  top: 10px;
  left: 0;
  width: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 5px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) .collapsed-tab-icon:where(.svelte-7oyf39) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 3px 8px;
  color: inherit;
  outline: none;
}
.wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) .collapsed-tab-icon:where(.svelte-7oyf39):hover, .wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) .collapsed-tab-icon:where(.svelte-7oyf39):focus {
  background-color: rgba(255, 255, 255, 0.1);
}
.wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) .collapsed-tab-icon:where(.svelte-7oyf39):focus-visible {
  outline: 1px solid var(--mdc-theme-primary);
}
.wrapper.svelte-7oyf39 .collapsed-tabs:where(.svelte-7oyf39) .collapsed-tab-icon.active:where(.svelte-7oyf39) {
  color: var(--mdc-theme-primary);
}
.wrapper.svelte-7oyf39 .collapse-toggle:where(.svelte-7oyf39) {
  position: absolute;
  bottom: 10px;
  z-index: 10;
  background-color: var(--mdc-theme-background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 0;
  outline: none;
  color: inherit;
  transition: right 0.3s ease, border-radius 0.3s ease, border 0.3s ease;
  /* Expanded state - outside the panel */
  right: -30px;
  border-radius: 0 4px 4px 0;
  border: 1px solid var(--border);
  border-left: none;
}
/* (unused) .collapsed .wrapper .collapse-toggle {
  /* Collapsed state - inside the panel *\/
  right: 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
}*/
.wrapper.svelte-7oyf39 .collapse-toggle:where(.svelte-7oyf39) .material-icons:where(.svelte-7oyf39) {
  font-size: 22px;
}
.wrapper.svelte-7oyf39 .collapse-toggle:where(.svelte-7oyf39):hover, .wrapper.svelte-7oyf39 .collapse-toggle:where(.svelte-7oyf39):focus {
  background-color: rgba(255, 255, 255, 0.1);
}
.wrapper.svelte-7oyf39 .collapse-toggle:where(.svelte-7oyf39):focus-visible {
  outline: 1px solid var(--mdc-theme-primary);
}
.wrapper.svelte-180iedn {
  width: 100%;
  height: calc(100% - 43px - env(safe-area-inset-top));
  max-height: 100%;
  max-width: 100%;
  background: #ccc;
  display: flex;
  position: relative;
}
.wrapper.svelte-180iedn .stats:where(.svelte-180iedn) {
  position: absolute;
  left: 5px;
  top: 5px;
  transition: all 0.3s ease;
}
.wrapper.svelte-180iedn .stats:where(.svelte-180iedn) > div {
  left: 310px !important;
  position: absolute !important;
  transition: left 0.3s ease;
}
.wrapper.svelte-180iedn .stats.collapsed:where(.svelte-180iedn) > div {
  left: 40px !important;
}
.wrapper.svelte-180iedn .right-panel:where(.svelte-180iedn) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  overflow: hidden;
  font-size: 11px;
  width: 310px;
  font-weight: 600;
}

  .header.svelte-7pev0n {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: #ffa726;
    color: white;
  }

  .warning-icon.svelte-7pev0n {
    margin-right: 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
  }

  .title {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 24px;
  }

  .content-container.svelte-7pev0n {
    padding: 8px 0;
  }

  .message.svelte-7pev0n {
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .message.svelte-7pev0n strong:where(.svelte-7pev0n) {
    color: #f57c00;
  }


  .snackbar.svelte-pf5gv {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s;
  }

  .snackbar-success.svelte-pf5gv {
    background-color: #4caf50;
  }

  .snackbar-error.svelte-pf5gv {
    background-color: #f44336;
  }

  .snackbar-warning.svelte-pf5gv {
    background-color: #ff9800;
  }

  .snackbar-info.svelte-pf5gv {
    background-color: #2196f3;
  }

  .snackbar.visible.svelte-pf5gv {
    opacity: 1;
    visibility: visible;
  }

  .snackbar-content.svelte-pf5gv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .snackbar-message.svelte-pf5gv {
    text-align: center;
  }

  .snackbar-dismiss.svelte-pf5gv {
    background-color: transparent;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
  }