/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Accordion/style.css ===== */
/* Basic accordion styling */
aui-accordion {
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Row styling */
aui-accordion .accordion-row {
    border-bottom: 1px solid #ddd;
}

aui-accordion .accordion-row:last-child {
    border-bottom: none;
}

/* Title styling */
aui-accordion .accordion-title {
    padding: 10px;
    background-color: #f5f5f5;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    position: relative;
    transition: background-color 0.2s ease;
    width: 100%;
}

aui-accordion .accordion-title:hover {
    background-color: #e9e9e9;
}

/* Arrow indicator */
aui-accordion .accordion-title .accordion-indicator {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    font-size: 14px;
    pointer-events: none;
}

/* Default arrow rotation (only when using default icons) */
aui-accordion:not([data-opened-icon]):not([data-closed-icon]) .accordion-title .accordion-indicator {
    transform: translateY(-50%) rotate(-90deg);
}

aui-accordion:not([data-opened-icon]):not([data-closed-icon]) .accordion-title.active .accordion-indicator {
    transform: translateY(-50%) rotate(0deg);
}

/* Legacy support - hide ::after when custom icons are used */
aui-accordion[data-opened-icon] .accordion-title::after,
aui-accordion[data-closed-icon] .accordion-title::after {
    display: none;
}

/* Fallback for browsers that don't support the above selectors */
aui-accordion .accordion-title::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.2s ease;
    font-size: 12px;
}

aui-accordion .accordion-title.active::after {
    transform: translateY(-50%) rotate(0deg);
}

/* Content styling */
aui-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

aui-accordion .accordion-content.active {
    max-height: 1000px; /* Adjust based on expected content height */
}

aui-accordion .accordion-content-inner {
    padding: 16px;
    background-color: #fff;
}

/* Active state */
aui-accordion .accordion-title.active {
    background-color: #e9e9e9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    aui-accordion .accordion-title,
    aui-accordion .accordion-content-inner {
        padding: 8px 12px;
    }
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Carousel/style.css ===== */
aui-carousel {
      display: block;
      position: relative;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden;
      box-sizing: border-box;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      cursor: grab;
}

aui-carousel:active {
      cursor: grabbing;
}

aui-carousel .carousel-inner {
      display: flex;
      transition: transform 0.5s ease;
      height: 100%;
}

aui-carousel .carousel-item {
      flex: 0 0 calc(100% / var(--items-to-show));
}

aui-carousel .carousel-item img {
      width: 100%;
      height: auto;
      display: block;
}

/* Navigation styles remain the same */
aui-carousel .carousel-prev,
aui-carousel .carousel-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 9px 15px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      transition: all 0.3s;
      display: none;
}
aui-carousel .carousel-prev:hover,
aui-carousel .carousel-next:hover {
      background: rgba(0, 0, 0, 0.8);
}

aui-carousel .carousel-prev {
      left: 10px;
}

aui-carousel .carousel-next {
      right: 10px;
}

aui-carousel .carousel-prev .icon,
aui-carousel .carousel-next .icon {
      border: solid white;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
}
aui-carousel .carousel-prev .icon {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
}
aui-carousel .carousel-next .icon {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
}

aui-carousel .carousel-dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      gap: 5px;
      display: none;
}
aui-carousel .carousel-dots.visible {
      display: flex;
}

aui-carousel .carousel-dot {
      width: 10px;
      height: 10px;
      background: #bbb;
      border-radius: 50%;
      cursor: pointer;
}

aui-carousel .carousel-dot.active {
      background: #333;
}

/* Mobile View */
@media (max-width: 768px) {
      aui-carousel .carousel-item {
            flex: 0 0 100%; /* Force single item view on mobile */
      }
}


/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/FontResizer/style.css ===== */
aui-font-resizer {
      border: solid 2px #64748b;
      position: absolute;
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Form/style.css ===== */
/* Form  */


/* Base form styling */
form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
}

/* General input styles (text, email, password, number, etc.) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4c4c4c;
  box-shadow: 0 0 0 3px #a4a4a433;
}

/* Textarea specific */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select dropdown */
select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9l4-5H2z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 30px;
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}

/* Checkbox styling */
input[type="checkbox"] {
  appearance: none;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: #fff;
  border-color: #2f2f2f; /* Or a grey like #808080 if preferred for less contrast */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path stroke="%23808080" stroke-linecap="round" stroke-width="2" d="M3 3L9 9M3 9L9 3"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Radio styling */
input[type="radio"] {
  appearance: none;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-color: #fff;
  border-color: #2f2f2f;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><circle fill="%23808080" cx="6" cy="6" r="3"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Labels for checkboxes and radios */
label {
  display: inline-block;
  margin-bottom: 10px;
  color: #333;
  cursor: pointer;
}

/* File input */
input[type="file"] {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

/* Button and submit input */
input[type="submit"],
input[type="button"],
button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #EEE;
  color: #111;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background-color: #DDD;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="submit"]:focus,
input[type="button"]:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px #4f515333;
}

/* Disabled states */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  background-color: #f5f5f5;
  border-color: #e5e5e5;
  color: #999;
  cursor: not-allowed;
}

/* Fieldset and legend */
fieldset {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 15px;
}

legend {
  padding: 0 10px;
  font-weight: 500;
  color: #333;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  form {
        padding: 15px;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
        font-size: 14px;
        padding: 8px 12px;
  }
  input[type="submit"],
  input[type="button"],
  button {
        font-size: 14px;
        padding: 8px 16px;
  }
}


/* Validation Styles */
._validateParent {
  position: relative;
}

input._validatedError, textarea._validatedError, select._validatedError,
._validatedError, ._validatedError:focus, ._validatedError:active {
  /* border: 2px solid red; */
  border: 1px solid red;
}
._validatedSuccess {
  /* border: 2px solid green; */
  border: 1px solid green;
}
._validationErrorMessage {
  color: #FFF;
  font-size: 10px;
  position: absolute;
  top: -12px;
  right: 5px;
  background: #ff4d4d;
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 10;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(255, 77, 77, 0.3);
  pointer-events: none;
  animation: slideDown 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._creditcard {
  /* Dynamic classes for credit card brands */
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/General/style.css ===== */
.backDrop{
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100000;
      transition: all 0.3s ease-out;
      /* backdrop-filter: blur(5px); */
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Marquee/style.css ===== */
aui-marquee {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    --aui-marquee-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: var(--mask-image, var(--aui-marquee-mask-image));
    mask-image: var(--mask-image, var(--aui-marquee-mask-image));
}

aui-marquee[data-direction="ttb"],
aui-marquee[data-direction="btt"] {
    --aui-marquee-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

aui-marquee .marquee-tracker {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    will-change: transform;
}

aui-marquee[data-direction="ttb"] .marquee-tracker,
aui-marquee[data-direction="btt"] .marquee-tracker {
    flex-direction: column;
}

aui-marquee .marquee-holder {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

aui-marquee .marquee-holder > * {
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Modals/style.css ===== */
/* /Modal and Drawer  */
._modalHolder{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100001;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10%;
}
._modal{
      width: 30%;
      min-height: 30%;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: inset 0 0 10px #0000001a;      
}

      ._modal.top{}

._shade{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 110000;
      display: none;
      justify-content: center;
      align-items: center;
      /* backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px); */
      background-color: #00000080;
      transition: all 0.3s ease-in-out;
      overflow: hidden;
      /* pointer-events: none; */
}
._shade.show{
      display: flex;
}
      ._shade .messageHolder{
            width: fit-content;
            max-width: 300px;
            box-sizing: border-box;
            max-height: 100px;
            overflow: hidden;
            padding: 10px 25px;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 0 10px #0000001a;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
      }

._notificationHolder{
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      max-width: 280px;
      height: 100%;
      z-index: 120000;
      padding: 10px 15px;
      background: none;
      box-sizing: border-box;
      pointer-events: none;
}
      ._notificationHolder ._notification{
            width: 100%;
            border-radius: 5px;
            box-shadow: 0 0 10px #0000001a;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 13px;
            font-weight: 600;
            text-shadow: 0 0 1px #000000b0;
            pointer-events: auto;
            cursor: pointer;
            box-sizing: border-box;
            color: #FFF;
            position: relative;
            transition: all 0.3s ease-in-out;
      }
      ._notificationHolder ._notification.hide{ display: none; }
            ._notificationHolder ._notification .title{
                  font-weight: 700;
                  margin: 4px;
                  color: #FFF;
                  text-transform: uppercase;
                  font-size: 11px;
            }
            ._notificationHolder ._notification .close{
                  position: absolute;
                  top: 5px;
                  right: 8px;
                  font-size: 9px;
                  color: #FFF;
            }
            ._notificationHolder ._notification .message{
                  font-weight: 400;
                  margin: 4px;
                  color: #FFF;
                  font-size: 13px;
            }
            ._notificationHolder ._notification .message *{
                  margin: 0px;
                  line-height: normal;
            }
            ._notificationHolder ._notification.info{ background-color: #18232d; }
            ._notificationHolder ._notification.success{ background-color: #027502; }
            ._notificationHolder ._notification.error{ background-color: #780505; }
            ._notificationHolder ._notification.warning{ background-color: #ff6f00; }


/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/RTE/style.css ===== */
/**
 * AUI Rich Text Editor — External Theming Reference
 *
 * The editor's internal styles live inside its Shadow DOM and are NOT affected
 * by global CSS. To customise the appearance, override the CSS Custom Properties
 * on the <aui-rte> host element from your own stylesheet.
 *
 * All available CSS variables and their defaults are listed below.
 *
 * Example — Dark theme:
 *
 *   aui-rte {
 *     --rte-bg:              #0d1117;
 *     --rte-color:           #e6edf3;
 *     --rte-toolbar-bg:      #161b22;
 *     --rte-toolbar-border:  1px solid #30363d;
 *     --rte-border:          1px solid #30363d;
 *     --rte-btn-hover-bg:    #21262d;
 *     --rte-btn-active-bg:   rgba(56,139,253,0.15);
 *     --rte-btn-active-color:#58a6ff;
 *     --rte-divider-color:   #30363d;
 *     --rte-placeholder-color:#6e7681;
 *     --rte-popover-bg:      #161b22;
 *     --rte-popover-border:  1px solid #30363d;
 *     --rte-popover-shadow:  0 8px 24px rgba(1,4,9,0.5);
 *   }
 */

/* ── Complete CSS Custom Property Reference ──────────────────────────────

  Layout & Dimensions:
    --rte-border-radius      — outer corner radius               (default: 6px)
    --rte-editor-padding     — content area padding              (default: 14px 16px)
    --rte-toolbar-padding    — toolbar inner padding             (default: 4px 6px)
    --rte-btn-size           — toolbar button width & height     (default: 28px)
    --rte-btn-radius         — toolbar button corner radius      (default: 4px)

  Typography:
    --rte-font-family        — editor font family
    --rte-font-size          — editor font size                  (default: 14px)
    --rte-line-height        — editor line height                (default: 1.6)

  Colors — Container:
    --rte-bg                 — editor background                 (default: #ffffff)
    --rte-color              — editor text color                 (default: #1f2328)
    --rte-border             — outer border                      (default: 1px solid #d1d9e0)

  Colors — Toolbar:
    --rte-toolbar-bg         — toolbar background                (default: #f6f8fa)
    --rte-toolbar-border     — toolbar bottom border             (default: 1px solid #d1d9e0)
    --rte-divider-color      — group divider color               (default: #d1d9e0)

  Colors — Buttons:
    --rte-btn-color          — default icon color                (default: #1f2328)
    --rte-btn-hover-bg       — button hover background           (default: #e8ecf0)
    --rte-btn-active-bg      — active/toggled background         (default: rgba(9,105,218,0.12))
    --rte-btn-active-color   — active/toggled icon color         (default: #0969da)

  Colors — Editor:
    --rte-placeholder-color  — placeholder text color            (default: #9ba1a8)

  Colors — Popover:
    --rte-popover-bg         — dropdown background               (default: #ffffff)
    --rte-popover-border     — dropdown border                   (default: 1px solid #d1d9e0)
    --rte-popover-radius     — dropdown corner radius            (default: 6px)
    --rte-popover-shadow     — dropdown drop shadow

────────────────────────────────────────────────────────────────────────── */

/* Default (light) — no overrides needed, these are the built-in values */
aui-rte {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Slider/style.css ===== */
/* Base slider styles */
aui-slider {
      display: block;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden;
}

aui-slider .slider-container {
      position: relative;
      width: 100%;
      height: 100%;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      cursor: grab;
}

aui-slider .slider-slides {
      display: flex;
      height: 100%;
      transition-property: transform;
}

aui-slider .slider-slide {
      min-width: 100%;
      height: 100%;
      position: relative;
}

/* Navigation arrows */
aui-slider .slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background: #00000050;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
	color: #FFF;
}

aui-slider .slider-arrow-prev {
      left: 10px;
}

aui-slider .slider-arrow-next {
      right: 10px;
}

/* Dots navigation */
aui-slider .slider-dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
}

aui-slider .slider-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #272727a8;
      cursor: pointer;
}

aui-slider .slider-dot.active {
      background-color: white;
}

/* YouTube container */
aui-slider .slider-youtube {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

/* Hide on mobile */
@media (max-width: 768px) {
      aui-slider .slider-slide[data-hide-on-mobile="true"] {
            display: none;
      }
}


/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Tables/style.css ===== */
/* Reset default table styles for consistency */
table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

/* Default table borders and spacing */
table, th, td {
  border: 1px solid #e5e5e5;
}

/* Table header styling */
th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 500;
  background-color: #f8f8f8;
  color: #333;
  border-bottom: 2px solid #e5e5e5;
}

/* Table cell styling */
td {
  padding: 12px 15px;
  vertical-align: middle;
}

/* Default alternating row colors */
/* tr:nth-child(even) {
  background-color: #fafafa;
} */

/* Default hover effect on rows */
tr:hover {
  background-color: #EFEFEF;
  transition: background-color 0.2s ease;
}

/* Caption styling */
caption {
  padding: 10px;
  caption-side: bottom;
  font-size: 14px;
  color: #666;
  text-align: left;
}

/* Responsive table behavior */
@media (max-width: 600px) {
  table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px 10px;
  }
  
  /* Stack table for small screens */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Disabled or inactive rows */
tr:disabled,
tr.disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Modifier: Bordered (explicit borders on all sides) */
table.bordered, 
table.bordered th, 
table.bordered td {
  border: 1px solid #e5e5e5;
}

/* Modifier: Borderless (removes all borders) */
table.borderless,
table.borderless th,
table.borderless td {
  border: none;
}

/* Modifier: Borderedrows (horizontal borders only between rows) */
table.borderedrows {
  border: none;
}

table.borderedrows th,
table.borderedrows td {
  border: none;
  border-bottom: 1px solid #e5e5e5;
}

table.borderedrows tr:last-child th,
table.borderedrows tr:last-child td {
  border-bottom: none; /* Remove border from last row for cleaner look */
}

/* Modifier: Striped (explicit alternating row colors) */
table.striped tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* Modifier: Hover (explicit hover effect) */
table.hover tr:hover {
  background-color: #f1f5f9;
}

/* Remove default striping and hover when modifiers are not used */
table:not(.striped) tr:nth-child(even) {
  background-color: inherit;
}

table:not(.hover) tr:hover {
  background-color: inherit;
}

/* ===== File: /media/acefxlabs/PROJECTS/LAB/_Engine_Lab/Components/Tabs/style.css ===== */
/*
 * <aui-tabs> component styles
 * The markup expects:
 * <aui-tabs>
 *   <div class="headers">
 *     <div class="header">...</div>
 *   </div>
 *   <div class="bodies">
 *     <div class="body">...</div>
 *   </div>
 * </aui-tabs>
 */

aui-tabs {
	--aui-tabs-border-color: #e2e8f0;
	--aui-tabs-surface: #ffffff;
	--aui-tabs-surface-muted: #f8fafc;
	--aui-tabs-text: #0f172a;
	--aui-tabs-text-muted: #64748b;
	--aui-tabs-indicator: #64748b;
	--aui-tabs-radius: 14px;
	--aui-tabs-transition: 320ms ease;
	--aui-tabs-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
	--aui-tabs-active-index: 0;
	--aui-tabs-fixed-header-width: 160px;
	--aui-tabs-header-gap: 0.35rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
	color: var(--aui-tabs-text);
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-sizing: border-box;
}

aui-tabs * {
	box-sizing: border-box;
}

aui-tabs .headers,
aui-tabs .bodies {
	border-radius: var(--aui-tabs-radius);
	background: var(--aui-tabs-surface);
	border: 1px solid var(--aui-tabs-border-color);
	box-shadow: var(--aui-tabs-shadow);
}

aui-tabs .headers {
	display: flex;
	align-items: center;
	gap: var(--aui-tabs-header-gap, 0.35rem);
	justify-content: var(--aui-tabs-header-justify, flex-start);
	padding: 0.35rem;
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--aui-tabs-indicator) transparent;
}

/* Custom scrollbar for webkit browsers */
aui-tabs .headers::-webkit-scrollbar {
	height: 4px;
}

aui-tabs .headers::-webkit-scrollbar-track {
	background: transparent;
}

aui-tabs .headers::-webkit-scrollbar-thumb {
	background: var(--aui-tabs-indicator);
	border-radius: 2px;
}

aui-tabs .headers::-webkit-scrollbar-thumb:hover {
	background: var(--aui-tabs-text-muted);
}

aui-tabs .headers::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

aui-tabs .header {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: fit-content;
	padding: 0.65rem 1rem;
	border-radius: calc(var(--aui-tabs-radius) - 6px);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--aui-tabs-text-muted);
	text-align: center;
	transition: color 180ms ease, background 220ms ease;
	cursor: pointer;
	user-select: none;
	outline: none;
}

aui-tabs .header:hover,
aui-tabs .header:focus-visible {
	color: var(--aui-tabs-text);
	background: rgba(100, 116, 139, 0.08);
}

aui-tabs .header.is-active {
	color: var(--aui-tabs-text);
}

aui-tabs .headers .tabs-indicator {
	position: absolute;
	background: var(--aui-tabs-indicator);
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: transform var(--aui-tabs-transition), width var(--aui-tabs-transition), height var(--aui-tabs-transition), top var(--aui-tabs-transition), left var(--aui-tabs-transition);
}

aui-tabs[data-indicator-animation="false"] .headers .tabs-indicator {
	transition: none;
}

aui-tabs .bodies {
	position: relative;
	padding: 1.5rem;
	min-height: var(--aui-tabs-panel-height, 160px);
	background: var(--aui-tabs-surface-muted);
	overflow: hidden;
}

aui-tabs .panel-track {
	width: 100%;
	height: 100%;
}

aui-tabs .body {
	display: none;
	gap: 0.5rem;
	flex-direction: column;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--aui-tabs-text);
}

aui-tabs .body.is-active {
	display: flex;
}

/* Built-in theme modifiers */
aui-tabs[data-theme="dark"] {
	--aui-tabs-border-color: rgba(15, 23, 42, 0.5);
	--aui-tabs-surface: #0f172a;
	--aui-tabs-surface-muted: #111c31;
	--aui-tabs-text: #f8fafc;
	--aui-tabs-text-muted: #cbd5f5;
	--aui-tabs-indicator: #94a3b8;
	--aui-tabs-shadow: 0 18px 40px rgba(2, 6, 23, 0.65);
}

aui-tabs[data-theme="glass"] {
	--aui-tabs-border-color: rgba(255, 255, 255, 0.35);
	--aui-tabs-surface: rgba(255, 255, 255, 0.7);
	--aui-tabs-surface-muted: rgba(248, 250, 252, 0.65);
	--aui-tabs-text: #0f172a;
	--aui-tabs-text-muted: #475569;
	--aui-tabs-indicator: #64748b;
	--aui-tabs-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
	backdrop-filter: blur(10px);
}

/* Layout variations */
aui-tabs[data-header-location="bottom"] {
	flex-direction: column-reverse;
}

aui-tabs[data-header-width="stretch"] .header {
	flex: 1 1 0;
	min-width: 0;
}

aui-tabs[data-header-width="auto"] .header {
	flex: 0 0 auto;
}

aui-tabs[data-header-width="fixed"] .header {
	flex: 0 0 var(--aui-tabs-fixed-header-width, 160px);
	max-width: var(--aui-tabs-fixed-header-width, 160px);
}

aui-tabs[data-header-align="center"] .headers {
	--aui-tabs-header-justify: center;
}

aui-tabs[data-header-align="right"] .headers {
	--aui-tabs-header-justify: flex-end;
}

aui-tabs[data-header-align="left"] .headers {
	--aui-tabs-header-justify: flex-start;
}

aui-tabs[data-header-location="left"],
aui-tabs[data-header-location="right"] {
	flex-direction: row;
	align-items: stretch;
}

aui-tabs[data-header-location="left"] .headers,
aui-tabs[data-header-location="right"] .headers {
	flex-direction: column;
	min-width: 220px;
	height: auto;
	align-items: stretch;
}

aui-tabs[data-header-location="left"][data-header-align="center"] .headers,
aui-tabs[data-header-location="right"][data-header-align="center"] .headers {
	align-items: center;
}

aui-tabs[data-header-location="left"][data-header-align="right"] .headers,
aui-tabs[data-header-location="right"][data-header-align="right"] .headers {
	align-items: flex-end;
}

aui-tabs[data-header-location="right"] {
	flex-direction: row-reverse;
}

aui-tabs[data-header-location="left"] .header,
aui-tabs[data-header-location="right"] .header {
	text-align: left;
}

/* Indicator placement modifiers */
aui-tabs[data-indicator-position="top"] .headers .tabs-indicator,
aui-tabs[data-indicator-position="bottom"] .headers .tabs-indicator {
	height: 3px;
}

aui-tabs[data-indicator-position="top"] .headers .tabs-indicator {
	top: 0;
}

aui-tabs[data-indicator-position="bottom"] .headers .tabs-indicator {
	bottom: 0;
}

aui-tabs[data-indicator-position="left"] .headers .tabs-indicator,
aui-tabs[data-indicator-position="right"] .headers .tabs-indicator {
	width: 3px;
}

aui-tabs[data-indicator-position="left"] .headers .tabs-indicator {
	left: 0;
}

aui-tabs[data-indicator-position="right"] .headers .tabs-indicator {
	right: 0;
}

/* Switch effects */
aui-tabs[data-switch-effect="slide"] .bodies,
aui-tabs[data-switch-effect="scroll"] .bodies {
	padding: 0;
}

aui-tabs[data-switch-effect="slide"] .panel-track,
aui-tabs[data-switch-effect="scroll"] .panel-track {
	display: flex;
	width: 100%;
	height: 100%;
}

aui-tabs[data-switch-effect="slide"] .body,
aui-tabs[data-switch-effect="scroll"] .body {
	display: block;
	flex: 0 0 100%;
	padding: 1.5rem;
}

aui-tabs[data-switch-effect="slide"] .panel-track {
	flex-direction: row;
	transform: translateX(calc(var(--aui-tabs-active-index, 0) * -100%));
	transition: transform var(--aui-tabs-transition);
}

aui-tabs[data-switch-effect="scroll"] .panel-track {
	flex-direction: column;
	transform: translateY(calc(var(--aui-tabs-active-index, 0) * -100%));
	transition: transform var(--aui-tabs-transition);
}

aui-tabs[data-switch-effect="fade"] .bodies,
aui-tabs[data-switch-effect="flip"] .bodies {
	padding: 0;
}

aui-tabs[data-switch-effect="fade"] .body,
aui-tabs[data-switch-effect="flip"] .body {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transform-origin: center;
	transition: opacity var(--aui-tabs-transition), transform var(--aui-tabs-transition);
}

aui-tabs[data-switch-effect="fade"] .body.is-active,
aui-tabs[data-switch-effect="flip"] .body.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

aui-tabs[data-switch-effect="flip"] .body {
	transform: rotateX(-8deg);
}

aui-tabs[data-switch-effect="flip"] .body.is-active {
	transform: rotateX(0deg);
}

aui-tabs[data-switch-effect="none"] .bodies {
	padding: 1.5rem;
}

aui-tabs[data-switch-effect="none"] .body {
	display: none;
}

aui-tabs[data-switch-effect="none"] .body.is-active {
	display: block;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	aui-tabs,
	aui-tabs * {
		transition-duration: 0ms !important;
	}
}

/* Responsive behavior */
@media (max-width: 768px) {
	/* Stack side-oriented tabs vertically on mobile */
	aui-tabs[data-header-location="left"],
	aui-tabs[data-header-location="right"] {
		flex-direction: column;
	}

	aui-tabs[data-header-location="left"] .headers,
	aui-tabs[data-header-location="right"] .headers {
		flex-direction: row;
		min-width: unset;
	}

	/* Adjust header sizing for mobile */
	aui-tabs .header {
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		text-align: center;
	}

	/* Store original text in data attribute for truncation */
	aui-tabs .header[data-mobile-truncate="true"] {
		white-space: nowrap;
		max-width: 80px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Ensure headers container allows scrolling */
	aui-tabs .headers {
		justify-content: flex-start;
	}

	/* Adjust body padding for mobile */
	aui-tabs .bodies {
		padding: 1rem;
	}

	aui-tabs[data-switch-effect="slide"] .body,
	aui-tabs[data-switch-effect="scroll"] .body,
	aui-tabs[data-switch-effect="fade"] .body,
	aui-tabs[data-switch-effect="flip"] .body {
		padding: 1rem;
	}

	aui-tabs[data-switch-effect="none"] .bodies {
		padding: 1rem;
	}
}

/* Extra small screens */
@media (max-width: 480px) {
	aui-tabs .header {
		padding: 0.45rem 0.65rem;
		font-size: 0.8125rem;
	}

	aui-tabs .bodies {
		padding: 0.875rem;
	}

	/* Reduce gap between headers on very small screens */
	aui-tabs .headers {
		gap: 0.25rem;
		padding: 0.25rem;
	}
}