@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, system-ui, -apple-system, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5{
  bottom: -0.125rem;
}
.-bottom-1{
  bottom: -0.25rem;
}
.-bottom-4{
  bottom: -1rem;
}
.-left-20{
  left: -5rem;
}
.-left-4{
  left: -1rem;
}
.-right-0\.5{
  right: -0.125rem;
}
.-right-1{
  right: -0.25rem;
}
.-right-20{
  right: -5rem;
}
.-right-6{
  right: -1.5rem;
}
.-top-6{
  top: -1.5rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-1\/4{
  bottom: 25%;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-6{
  bottom: 1.5rem;
}
.left-0{
  left: 0px;
}
.left-3{
  left: 0.75rem;
}
.left-\[15px\]{
  left: 15px;
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-2{
  right: 0.5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-6{
  right: 1.5rem;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1{
  top: 0.25rem;
}
.top-1\/2{
  top: 50%;
}
.top-1\/4{
  top: 25%;
}
.top-2{
  top: 0.5rem;
}
.top-3{
  top: 0.75rem;
}
.top-4{
  top: 1rem;
}
.top-8{
  top: 2rem;
}
.top-full{
  top: 100%;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[100\]{
  z-index: 100;
}
.z-\[9999\]{
  z-index: 9999;
}
.-mx-5{
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.-mt-5{
  margin-top: -1.25rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-2\.5{
  margin-top: 0.625rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-auto{
  margin-top: auto;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-28{
  height: 7rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-32{
  height: 8rem;
}
.h-36{
  height: 9rem;
}
.h-4{
  height: 1rem;
}
.h-40{
  height: 10rem;
}
.h-44{
  height: 11rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: 1.25rem;
}
.h-52{
  height: 13rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-72{
  height: 18rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[30px\]{
  height: 30px;
}
.h-\[calc\(100vh-64px\)\]{
  height: calc(100vh - 64px);
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-screen{
  height: 100vh;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-52{
  max-height: 13rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[85vh\]{
  max-height: 85vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[300px\]{
  min-height: 300px;
}
.min-h-\[32px\]{
  min-height: 32px;
}
.min-h-\[36px\]{
  min-height: 36px;
}
.min-h-\[44px\]{
  min-height: 44px;
}
.min-h-\[48px\]{
  min-height: 48px;
}
.min-h-screen{
  min-height: 100vh;
}
.w-1\.5{
  width: 0.375rem;
}
.w-1\/2{
  width: 50%;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-3\/4{
  width: 75%;
}
.w-32{
  width: 8rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-40{
  width: 10rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-52{
  width: 13rem;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[30px\]{
  width: 30px;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[16px\]{
  min-width: 16px;
}
.min-w-\[56px\]{
  min-width: 56px;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-\[120px\]{
  max-width: 120px;
}
.max-w-\[70\%\]{
  max-width: 70%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink-0{
  flex-shrink: 0;
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.resize-none{
  resize: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[2fr_1fr_1fr_1fr_120px\]{
  grid-template-columns: 2fr 1fr 1fr 1fr 120px;
}
.grid-cols-\[2fr_1fr_1fr_1fr_40px\]{
  grid-template-columns: 2fr 1fr 1fr 1fr 40px;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.justify-around{
  justify-content: space-around;
}
.gap-0{
  gap: 0px;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-50 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-divide-opacity, 1));
}
.self-end{
  align-self: flex-end;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-\[2px\]{
  border-radius: 2px;
}
.rounded-\[3px\]{
  border-radius: 3px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-bl-sm{
  border-bottom-left-radius: 0.125rem;
}
.rounded-br-sm{
  border-bottom-right-radius: 0.125rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-4{
  border-width: 4px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-blue-100{
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-brand-100{
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}
.border-brand-200{
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-brand-300{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-brand-500{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-50{
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-purple-300{
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/50{
  border-color: rgb(255 255 255 / 0.5);
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-t-transparent{
  border-top-color: transparent;
}
.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-accent-500\/5{
  background-color: rgb(245 158 11 / 0.05);
}
.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/50{
  background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-300{
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}
.bg-brand-400{
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.bg-brand-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-50\/30{
  background-color: rgb(238 242 255 / 0.3);
}
.bg-brand-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-brand-500\/5{
  background-color: rgb(99 102 241 / 0.05);
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-pink-400{
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}
.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-400{
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-teal-500{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-400{
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-400{
  --tw-gradient-from: #818CF8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-500{
  --tw-gradient-from: #6366F1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-400{
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-300{
  --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-500{
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-brand-400{
  --tw-gradient-to: #818CF8 var(--tw-gradient-to-position);
}
.to-brand-600{
  --tw-gradient-to: #4F46E5 var(--tw-gradient-to-position);
}
.to-brand-700{
  --tw-gradient-to: #4338CA var(--tw-gradient-to-position);
}
.to-cyan-400{
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}
.to-purple-500{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-yellow-400{
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-32{
  padding-bottom: 8rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-9{
  padding-left: 2.25rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pr-9{
  padding-right: 2.25rem;
}
.pt-0\.5{
  padding-top: 0.125rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-8{
  padding-top: 2rem;
}
.pt-\[15vh\]{
  padding-top: 15vh;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-8xl{
  font-size: 6rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-extrabold{
  font-weight: 800;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-brand-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-brand-500\/30{
  color: rgb(99 102 241 / 0.3);
}
.text-brand-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-brand-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-gray-100{
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-orange-300{
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700{
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-teal-500{
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.text-transparent{
  color: transparent;
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50{
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}
.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.line-through{
  text-decoration-line: line-through;
}
.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.accent-brand-500{
  accent-color: #6366F1;
}
.opacity-0{
  opacity: 0;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-80{
  opacity: 0.8;
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-500\/25{
  --tw-shadow-color: rgb(99 102 241 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-green-500\/30{
  --tw-shadow-color: rgb(34 197 94 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-green-600\/30{
  --tw-shadow-color: rgb(22 163 74 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-brand-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}
.ring-brand-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-offset-1{
  --tw-ring-offset-width: 1px;
}
.blur-3xl{
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000{
  transition-duration: 1000ms;
}
.duration-150{
  transition-duration: 150ms;
}
/* ============================================================
   FITNESS PLATFORM — PREMIUM CSS
   Riwer Labs · 2026 · 2000+ lines
   ============================================================ */
/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;

  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  --protein-color: #3b82f6;
  --carbs-color:   #f59e0b;
  --fat-color:     #ef4444;
  --cal-color:     #10b981;

  --sidebar-width: 260px;
  --topbar-height: 64px;

  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.16);
  --shadow-brand: 0 4px 20px rgba(99,102,241,.35);
  --shadow-accent: 0 4px 20px rgba(245,158,11,.35);

  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);

  --glass-bg:     rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --glass-blur:   blur(16px);
}
/* ============================================================
   2. GLOBAL POLISH
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  transition: background var(--transition-base), color var(--transition-base);
}
.dark body,
.dark {
  background: #0f1117;
  color: #e2e8f0;
}
/* Subtle body gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dark body::before,
.dark::before {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,.12) 0%, transparent 70%);
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--brand-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }
.dark ::-webkit-scrollbar-thumb { background: #374151; }
.dark ::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }
/* Selection highlight */
::-moz-selection {
  background: rgba(99,102,241,.25);
  color: inherit;
}
::selection {
  background: rgba(99,102,241,.25);
  color: inherit;
}
.dark ::-moz-selection { background: rgba(99,102,241,.4); }
.dark ::selection { background: rgba(99,102,241,.4); }
/* Focus visible */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Transition defaults */
a, button, input, select, textarea, [role="button"] {
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast),
              opacity var(--transition-fast);
}
/* Image defaults */
img { max-width: 100%; height: auto; }
/* Reset list */
ul, ol { list-style: none; margin: 0; padding: 0; }
/* ============================================================
   3. SIDEBAR & NAVIGATION
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid rgba(99,102,241,.1);
  box-shadow: 4px 0 24px rgba(0,0,0,.06);
  transition: transform var(--transition-slow), width var(--transition-slow);
  overflow: hidden;
}
.dark .sidebar {
  background: rgba(15,17,23,0.82);
  border-right-color: rgba(99,102,241,.15);
  box-shadow: 4px 0 24px rgba(0,0,0,.3);
}
.sidebar--collapsed { width: 72px; }
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(99,102,241,.08);
  min-height: var(--topbar-height);
}
.sidebar__logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-brand);
}
.sidebar__logo-text {
  font-weight: 700;
  font-size: 1.125rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-base), width var(--transition-base);
}
.sidebar--collapsed .sidebar__logo-text { opacity: 0; width: 0; }
/* Nav section */
.sidebar__nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar__section-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0.5rem 0.75rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-base);
}
.sidebar--collapsed .sidebar__section-label { opacity: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-lg);
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  margin-bottom: 2px;
  transition: all var(--transition-base);
}
.dark .nav-item { color: #94a3b8; }
.nav-item:hover {
  background: linear-gradient(90deg, rgba(99,102,241,.1), rgba(99,102,241,.04));
  color: var(--brand-600);
}
.dark .nav-item:hover {
  background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(99,102,241,.06));
  color: var(--brand-300);
}
.nav-item--active {
  background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(99,102,241,.06));
  color: var(--brand-600);
  font-weight: 600;
}
.dark .nav-item--active {
  background: linear-gradient(90deg, rgba(99,102,241,.22), rgba(99,102,241,.08));
  color: var(--brand-300);
}
.nav-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-500);
  box-shadow: 0 0 8px rgba(99,102,241,.6);
}
.nav-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  transition: transform var(--transition-spring);
}
.nav-item:hover .nav-item__icon { transform: scale(1.15); }
.nav-item__text {
  overflow: hidden;
  transition: opacity var(--transition-base), width var(--transition-base);
}
.sidebar--collapsed .nav-item__text { opacity: 0; width: 0; }
.nav-item__badge {
  margin-left: auto;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-full);
  line-height: 1.4;
  transition: opacity var(--transition-base);
}
.sidebar--collapsed .nav-item__badge { opacity: 0; }
/* Sidebar footer / avatar */
.sidebar__footer {
  padding: 1rem 0.75rem;
  border-top: 1px solid rgba(99,102,241,.08);
}
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background var(--transition-base);
}
.sidebar__user:hover { background: rgba(99,102,241,.08); }
.sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.sidebar__avatar img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.sidebar__user:hover .sidebar__avatar img {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.sidebar__avatar--online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  animation: statusPulse 2s ease-in-out infinite;
}
.dark .sidebar__avatar--online::after { border-color: #0f1117; }
/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  background: rgba(248,250,252,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
.dark .topbar {
  background: rgba(15,17,23,0.88);
  border-bottom-color: rgba(255,255,255,.06);
}
.topbar--scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.dark .topbar--scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.3); }
/* Mobile sidebar backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.sidebar-backdrop--active {
  opacity: 1;
  pointer-events: all;
}
/* ============================================================
   4. CARDS & CONTAINERS
   ============================================================ */
.card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}
.dark .card {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(99,102,241,.2);
}
.dark .card:hover { border-color: rgba(99,102,241,.3); }
.card--hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* Gradient border card */
.card--gradient-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.card--gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg, var(--brand-400), var(--accent-500), var(--brand-600));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.card--gradient-border:hover::before { opacity: 1; }
/* Stat card */
.stat-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}
.dark .stat-card {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 2px 2px 0;
  background: var(--brand-500);
}
.stat-card--brand::before  { background: var(--brand-500); }
.stat-card--success::before { background: var(--success); }
.stat-card--warning::before { background: var(--warning); }
.stat-card--danger::before  { background: var(--danger); }
.stat-card--accent::before  { background: var(--accent-500); }
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-card__value {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.dark .stat-card__value { color: #f1f5f9; }
.stat-card__label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
}
.dark .stat-card__label { color: #94a3b8; }
/* Glass card */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.dark .card--glass {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,.08);
}
/* Inner shadow depth */
.card--inset {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.06), var(--shadow-sm);
}
.dark .card--inset {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.1);
}
/* Dark mode subtle gradient overlay */
.dark .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.03) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
/* Card entrance animation */
.card--animate {
  animation: fadeInUp 0.4s var(--transition-base) both;
}
.card--animate:nth-child(1) { animation-delay: 0ms; }
.card--animate:nth-child(2) { animation-delay: 60ms; }
.card--animate:nth-child(3) { animation-delay: 120ms; }
.card--animate:nth-child(4) { animation-delay: 180ms; }
.card--animate:nth-child(5) { animation-delay: 240ms; }
.card--animate:nth-child(6) { animation-delay: 300ms; }
/* ============================================================
   5. BUTTONS & FORM ELEMENTS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}
.btn:active { transform: scale(0.97); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Ripple */
.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform 0.4s, opacity 0.5s;
}
.btn:active::after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}
/* Primary */
.btn--primary {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
/* Accent */
.btn--accent {
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.btn--accent:hover {
  background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 100%);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
/* Secondary */
.btn--secondary {
  background: rgba(99,102,241,.1);
  color: var(--brand-600);
  border: 1px solid rgba(99,102,241,.2);
}
.btn--secondary:hover {
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.4);
}
.dark .btn--secondary {
  background: rgba(99,102,241,.15);
  color: var(--brand-300);
  border-color: rgba(99,102,241,.25);
}
/* Ghost */
.btn--ghost {
  background: transparent;
  color: #64748b;
  border: 1px solid rgba(0,0,0,.1);
}
.btn--ghost:hover {
  background: rgba(0,0,0,.04);
  color: #334155;
}
.dark .btn--ghost {
  color: #94a3b8;
  border-color: rgba(255,255,255,.1);
}
.dark .btn--ghost:hover {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
}
/* Danger */
.btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.btn--danger:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  transform: translateY(-1px);
}
/* Sizes */
.btn--xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: var(--radius-md); }
.btn--sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn--lg { padding: 0.75rem 1.75rem; font-size: 1rem; border-radius: var(--radius-xl); }
.btn--xl { padding: 1rem 2.25rem; font-size: 1.125rem; border-radius: var(--radius-xl); }
.btn--icon { padding: 0.5rem; aspect-ratio: 1; }
/* Loading state */
.btn--loading {
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::before {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
/* Form inputs */
.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.dark .input {
  background: #1e2130;
  border-color: #2d3347;
  color: #e2e8f0;
}
.input::-moz-placeholder { color: #94a3b8; }
.input::placeholder { color: #94a3b8; }
.input:hover { border-color: #cbd5e1; }
.dark .input:hover { border-color: #3d4460; }
.input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
  background: #fff;
}
.dark .input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
  background: #1e2130;
}
.input--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.input--success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
/* Input group */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-group .input {
  border-radius: 0;
}
.input-group > :first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.input-group > :last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.input-group > :only-child  { border-radius: var(--radius-lg); }
.input-addon {
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #64748b;
  font-size: 0.875rem;
  white-space: nowrap;
}
.dark .input-addon {
  background: #1a1d26;
  border-color: #2d3347;
  color: #94a3b8;
}
/* Input with icon */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input { padding-left: 2.5rem; }
.input-icon-wrap .input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  transition: color var(--transition-fast);
}
.input-icon-wrap:focus-within .input-icon { color: var(--brand-500); }
/* Search input */
.search-input {
  padding-left: 2.75rem;
  padding-right: 2.5rem;
  border-radius: var(--radius-full);
  border-color: transparent;
  background: #f1f5f9;
}
.dark .search-input {
  background: #1e2130;
  border-color: transparent;
}
.search-input:focus {
  background: #fff;
  border-color: var(--brand-400);
  border-radius: var(--radius-lg);
}
.dark .search-input:focus {
  background: #1e2130;
}
/* Select */
.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
/* Floating label */
.field {
  position: relative;
  margin-bottom: 1.25rem;
}
.field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.375rem;
  transition: color var(--transition-fast);
}
.dark .field__label { color: #94a3b8; }
.field:focus-within .field__label { color: var(--brand-600); }
.dark .field:focus-within .field__label { color: var(--brand-400); }
.field__hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}
.field__error {
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Toggle / Checkbox custom */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.625rem;
}
.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle__track {
  width: 42px;
  height: 24px;
  border-radius: var(--radius-full);
  background: #cbd5e1;
  transition: background var(--transition-base);
  position: relative;
  flex-shrink: 0;
}
.dark .toggle__track { background: #374151; }
.toggle__input:checked ~ .toggle__track { background: var(--brand-500); }
.toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform var(--transition-spring);
}
.toggle__input:checked ~ .toggle__track .toggle__thumb { transform: translateX(18px); }
/* Custom checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.checkbox__box {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 2px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-base);
}
.dark .checkbox__box {
  background: #1e2130;
  border-color: #374151;
}
.checkbox input:checked ~ .checkbox__box {
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
/* ============================================================
   6. TABLES & LISTS
   ============================================================ */
.table-container {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.dark .table-container {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248,250,252,0.95);
  backdrop-filter: blur(8px);
}
.dark thead {
  background: rgba(26,29,38,0.95);
}
th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.dark th {
  color: #94a3b8;
  border-bottom-color: rgba(255,255,255,.06);
}
td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: #334155;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background var(--transition-fast);
}
.dark td {
  color: #cbd5e1;
  border-bottom-color: rgba(255,255,255,.04);
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover td {
  background: linear-gradient(90deg, rgba(99,102,241,.04), rgba(99,102,241,.02));
}
.dark tbody tr:hover td {
  background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(99,102,241,.04));
}
/* Striped */
.table--striped tbody tr:nth-child(even) td {
  background: rgba(0,0,0,.02);
}
.dark .table--striped tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}
/* Row selected */
.tr--selected td {
  background: rgba(99,102,241,.08) !important;
  animation: rowSelect 0.2s ease;
}
/* List item */
.list-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background var(--transition-fast);
  animation: slideInLeft 0.3s ease both;
}
.dark .list-item { border-bottom-color: rgba(255,255,255,.05); }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(99,102,241,.04); }
.dark .list-item:hover { background: rgba(99,102,241,.08); }
/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 1rem;
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  animation: float 3s ease-in-out infinite;
}
.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
}
.dark .empty-state__title { color: #cbd5e1; }
.empty-state__desc {
  font-size: 0.875rem;
  color: #94a3b8;
  max-width: 280px;
}
/* ============================================================
   7. BADGES & TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--brand   { background: rgba(99,102,241,.12);  color: var(--brand-600); }
.badge--success { background: rgba(16,185,129,.12);  color: #059669; }
.badge--warning { background: rgba(245,158,11,.12);  color: #d97706; }
.badge--danger  { background: rgba(239,68,68,.12);   color: #dc2626; }
.badge--info    { background: rgba(59,130,246,.12);  color: #2563eb; }
.badge--neutral { background: rgba(100,116,139,.1);  color: #475569; }
.dark .badge--brand   { background: rgba(99,102,241,.22);  color: var(--brand-300); }
.dark .badge--success { background: rgba(16,185,129,.18);  color: #34d399; }
.dark .badge--warning { background: rgba(245,158,11,.18);  color: #fbbf24; }
.dark .badge--danger  { background: rgba(239,68,68,.18);   color: #f87171; }
.dark .badge--info    { background: rgba(59,130,246,.18);  color: #60a5fa; }
.dark .badge--neutral { background: rgba(100,116,139,.18); color: #94a3b8; }
/* Gradient badge for levels */
.badge--level {
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.badge--gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.badge--platinum {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
}
/* Alert pulse */
.badge--pulse {
  animation: badgePulse 2s ease-in-out infinite;
}
/* XP badge shimmer */
.badge--xp {
  background: linear-gradient(90deg, var(--accent-500), var(--accent-400), var(--accent-500));
  background-size: 200% 100%;
  color: #fff;
  animation: shimmer 2s linear infinite;
}
/* Status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot--online  { background: var(--success); animation: statusPulse 2s ease-in-out infinite; }
.status-dot--offline { background: #94a3b8; }
.status-dot--busy    { background: var(--danger); }
.status-dot--away    { background: var(--warning); }
/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(99,102,241,.08);
  color: var(--brand-700);
  border: 1px solid rgba(99,102,241,.15);
  transition: all var(--transition-fast);
}
.dark .tag {
  background: rgba(99,102,241,.15);
  color: var(--brand-300);
  border-color: rgba(99,102,241,.2);
}
.tag__remove {
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.tag__remove:hover { background: rgba(239,68,68,.2); color: var(--danger); }
/* ============================================================
   8. MODALS & OVERLAYS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}
.modal {
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,.06);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSpring 0.4s var(--transition-spring) both;
}
.dark .modal {
  background: #1a1d26;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.08);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.dark .modal__header { border-bottom-color: rgba(255,255,255,.07); }
.modal__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
}
.dark .modal__title { color: #f1f5f9; }
.modal__body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.dark .modal__footer { border-top-color: rgba(255,255,255,.07); }
/* Drawer / Sheet */
.sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(480px, 95vw);
  background: #fff;
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.35s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.dark .sheet {
  background: #1a1d26;
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
/* Toast */
.toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 200;
  min-width: 320px;
  max-width: 420px;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(0,0,0,.07);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: toastIn 0.35s var(--transition-spring) both;
}
.dark .toast {
  background: #1e2130;
  border-color: rgba(255,255,255,.1);
}
.toast--success { border-left: 3px solid var(--success); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--danger  { border-left: 3px solid var(--danger); }
.toast--info    { border-left: 3px solid var(--info); }
.toast--exit { animation: toastOut 0.25s ease forwards; }
/* Notification badge bounce */
.notif-badge {
  animation: notifBounce 1s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
/* ============================================================
   9. GAMIFICATION
   ============================================================ */
/* XP Bar */
.xp-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: #e2e8f0;
  overflow: hidden;
  position: relative;
}
.dark .xp-bar { background: #2d3347; }
.xp-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500), var(--brand-400));
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite, progressFill 1s var(--transition-spring) both;
  position: relative;
}
.xp-bar__fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: rgba(255,255,255,.5);
  border-radius: var(--radius-full);
  filter: blur(3px);
}
/* Level badge glow */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25), var(--shadow-brand);
  animation: levelGlow 3s ease-in-out infinite;
}
/* Streak */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: #f59e0b;
}
.streak-badge__icon { animation: fireFlicker 1.5s ease-in-out infinite alternate; }
/* Achievement card */
.achievement-card {
  perspective: 800px;
  cursor: pointer;
}
.achievement-card__inner {
  transition: transform 0.6s var(--transition-spring);
  transform-style: preserve-3d;
  position: relative;
}
.achievement-card:hover .achievement-card__inner,
.achievement-card--unlocked .achievement-card__inner {
  transform: rotateY(180deg);
}
.achievement-card__front,
.achievement-card__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
}
.achievement-card__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--radius-xl);
}
/* Progress ring */
.progress-ring {
  transform: rotate(-90deg);
}
.progress-ring__circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke: var(--brand-500);
  transition: stroke-dashoffset 1s var(--transition-spring);
}
.progress-ring__track {
  fill: none;
  stroke-width: 4;
  stroke: #e2e8f0;
}
.dark .progress-ring__track { stroke: #2d3347; }
/* Leaderboard */
.leaderboard-row--1st {
  background: linear-gradient(90deg, rgba(245,158,11,.15), rgba(245,158,11,.06)) !important;
  border-left: 3px solid var(--accent-500);
}
.leaderboard-row--2nd {
  background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.05)) !important;
  border-left: 3px solid #94a3b8;
}
.leaderboard-row--3rd {
  background: linear-gradient(90deg, rgba(205,127,50,.12), rgba(205,127,50,.05)) !important;
  border-left: 3px solid #cd7f32;
}
.leaderboard-row--1st td:first-child { color: var(--accent-500); font-weight: 800; }
/* Confetti container */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -10px;
  animation: confettiFall linear both;
}
/* ============================================================
   10. CHARTS & DATA VIZ
   ============================================================ */
.chart-container {
  position: relative;
  width: 100%;
  padding: 1.25rem;
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
}
.dark .chart-container {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
.chart-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.chart-tooltip {
  background: rgba(15,17,23,0.92) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  color: #f1f5f9 !important;
  font-size: 0.8125rem !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.625rem 0.875rem !important;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
}
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #64748b;
  font-weight: 500;
}
.dark .chart-legend__item { color: #94a3b8; }
.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Responsive chart grid */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .charts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .charts-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
   11. NUTRITION SPECIFIC
   ============================================================ */
/* Meal card */
.meal-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: all var(--transition-base);
}
.dark .meal-card {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
.meal-card:hover { box-shadow: var(--shadow-md); }
.meal-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.dark .meal-card__header { border-bottom-color: rgba(255,255,255,.05); }
/* Colored time marker */
.meal-card__time-marker {
  width: 4px;
  height: 40px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.meal-card--breakfast .meal-card__time-marker { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.meal-card--lunch     .meal-card__time-marker { background: linear-gradient(180deg, #34d399, #10b981); }
.meal-card--snack     .meal-card__time-marker { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.meal-card--dinner    .meal-card__time-marker { background: linear-gradient(180deg, #a78bfa, #8b5cf6); }
.meal-card__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #0f172a;
}
.dark .meal-card__name { color: #f1f5f9; }
.meal-card__time {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin-top: 0.125rem;
}
/* Macro bars */
.macro-bars {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
}
.macro-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.macro-bar__label {
  font-size: 0.75rem;
  font-weight: 600;
  width: 64px;
  color: #64748b;
  flex-shrink: 0;
}
.dark .macro-bar__label { color: #94a3b8; }
.macro-bar__track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: #f1f5f9;
  overflow: hidden;
}
.dark .macro-bar__track { background: #2d3347; }
.macro-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  animation: progressFill 0.8s var(--transition-spring) both;
}
.macro-bar--protein .macro-bar__fill { background: linear-gradient(90deg, var(--protein-color), #60a5fa); }
.macro-bar--carbs   .macro-bar__fill { background: linear-gradient(90deg, var(--carbs-color), #fbbf24); }
.macro-bar--fat     .macro-bar__fill { background: linear-gradient(90deg, var(--fat-color), #f87171); }
.macro-bar--cal     .macro-bar__fill { background: linear-gradient(90deg, var(--cal-color), #34d399); }
.macro-bar__value {
  font-size: 0.75rem;
  font-weight: 700;
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}
.macro-bar--protein .macro-bar__value { color: var(--protein-color); }
.macro-bar--carbs   .macro-bar__value { color: var(--carbs-color); }
.macro-bar--fat     .macro-bar__value { color: var(--fat-color); }
.macro-bar--cal     .macro-bar__value { color: var(--cal-color); }
/* Food item row */
.food-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.dark .food-item { border-bottom-color: rgba(255,255,255,.04); }
.food-item:last-child { border-bottom: none; }
.food-item:hover { background: rgba(99,102,241,.04); }
.dark .food-item:hover { background: rgba(99,102,241,.08); }
.food-item:hover .food-item__details { opacity: 1; transform: translateY(0); }
.food-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: rgba(99,102,241,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.food-item__name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}
.dark .food-item__name { color: #cbd5e1; }
.food-item__amount {
  font-size: 0.8125rem;
  color: #94a3b8;
}
.food-item__calories {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cal-color);
  min-width: 56px;
  text-align: right;
}
.food-item__details {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(4px);
  transition: all var(--transition-base);
}
/* Daily totals sticky footer */
.daily-totals {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 10;
}
.dark .daily-totals {
  background: rgba(15,17,23,0.95);
  border-top-color: rgba(255,255,255,.08);
}
/* Meal section divider */
.meal-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meal-divider::before,
.meal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,102,241,.15), transparent);
}
.meal-divider::after { background: linear-gradient(270deg, rgba(99,102,241,.15), transparent); }
/* Nutrient pills */
.nutrient-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
}
.nutrient-pill--protein { background: rgba(59,130,246,.12);  color: #2563eb; }
.nutrient-pill--carbs   { background: rgba(245,158,11,.12);  color: #d97706; }
.nutrient-pill--fat     { background: rgba(239,68,68,.12);   color: #dc2626; }
.nutrient-pill--cal     { background: rgba(16,185,129,.12);  color: #059669; }
.dark .nutrient-pill--protein { background: rgba(59,130,246,.18);  color: #60a5fa; }
.dark .nutrient-pill--carbs   { background: rgba(245,158,11,.18);  color: #fbbf24; }
.dark .nutrient-pill--fat     { background: rgba(239,68,68,.18);   color: #f87171; }
.dark .nutrient-pill--cal     { background: rgba(16,185,129,.18);  color: #34d399; }
/* ============================================================
   12. RESPONSIVE & MOBILE
   ============================================================ */
/* Mobile bottom nav */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  gap: 0;
  display: none;
}
.dark .mobile-nav {
  background: rgba(15,17,23,0.92);
  border-top-color: rgba(255,255,255,.08);
}
.mobile-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.25rem;
  border-radius: var(--radius-lg);
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.mobile-nav__item--active {
  color: var(--brand-500);
  background: rgba(99,102,241,.08);
}
.mobile-nav__icon { font-size: 1.25rem; }
/* Safe area padding */
.safe-top    { padding-top:    env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left   { padding-left:   env(safe-area-inset-left); }
.safe-right  { padding-right:  env(safe-area-inset-right); }
/* Touch targets */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-item { min-height: 44px; }
  .input { min-height: 44px; }

  /* No tap highlight on iOS */
  * { -webkit-tap-highlight-color: transparent; }
}
/* Mobile card compact */
@media (max-width: 640px) {
  .card--compact { padding: 0.875rem; }
  .stat-card { padding: 1rem; }
  .stat-card__value { font-size: 1.5rem; }
  .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: auto; max-width: 100%; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .sidebar--open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,.2);
  }

  .mobile-nav { display: flex; }
  .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  .sidebar { width: 72px; }
  .sidebar__logo-text,
  .nav-item__text,
  .sidebar__section-label,
  .nav-item__badge,
  .sidebar__user-info { display: none; }
  .nav-item { justify-content: center; padding: 0.75rem; }
  .nav-item--active::before { display: none; }
}
/* Desktop layout */
@media (min-width: 1024px) {
  .main-content {
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem;
    min-height: 100vh;
  }

  .main-content--sidebar-collapsed { margin-left: 72px; }
}
/* Pull-to-refresh hint */
.ptr-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: #94a3b8;
  font-size: 0.8125rem;
  gap: 0.5rem;
}
.ptr-hint__icon { animation: spin 1s linear infinite; }
/* Swipe hint */
.swipe-hint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(99,102,241,.08));
  pointer-events: none;
  border-radius: inherit;
  animation: swipeHint 2s ease-in-out 1s 2 both;
}
/* ============================================================
   13. DARK MODE ENHANCEMENTS
   ============================================================ */
.dark {
  color-scheme: dark;
}
/* Dark card inner glow */
.dark .card--featured {
  background: linear-gradient(135deg, #1e2235, #1a1d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.3);
}
/* Dark stat card gradients */
.dark .stat-card--brand  { background: linear-gradient(135deg, #1e2235, #1a1d26); }
.dark .stat-card--success { background: linear-gradient(135deg, #0d2420, #1a1d26); }
.dark .stat-card--warning { background: linear-gradient(135deg, #231a0d, #1a1d26); }
.dark .stat-card--danger  { background: linear-gradient(135deg, #231212, #1a1d26); }
/* Dark scrollbar */
.dark * {
  scrollbar-color: #374151 transparent;
  scrollbar-width: thin;
}
/* Dark input */
.dark .input:not(:focus) { box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
/* Dark sidebar glass */
.dark .sidebar {
  background: linear-gradient(180deg, rgba(20,23,35,0.95) 0%, rgba(15,17,25,0.98) 100%);
  border-right-color: rgba(99,102,241,.12);
}
/* Dark topbar */
.dark .topbar {
  background: rgba(15,17,23,0.9);
}
/* Dark modal */
.dark .modal-overlay { background: rgba(0,0,0,.7); }
/* Dark glass card glow */
.dark .card--glass {
  background: rgba(99,102,241,.04);
  border-color: rgba(99,102,241,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* Dark table */
.dark thead { background: rgba(20,23,35,0.97); }
/* Dark daily totals */
.dark .daily-totals { box-shadow: 0 -4px 16px rgba(0,0,0,.3); }
/* Dark focus rings */
.dark :focus-visible {
  outline-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,.3);
}
/* Dark contrast adjustments */
.dark h1, .dark h2, .dark h3, .dark h4 { color: #f1f5f9; }
.dark p { color: #94a3b8; }
.dark small { color: #64748b; }
/* ============================================================
   14. SKELETON LOADERS
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e2130 25%, #252a3a 50%, #1e2130 75%);
  background-size: 200% 100%;
}
.skeleton--text   { height: 0.875rem; width: 100%; }
.skeleton--title  { height: 1.25rem;  width: 60%; }
.skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton--btn    { height: 2.25rem; width: 120px; border-radius: var(--radius-lg); }
.skeleton--card   { height: 160px; border-radius: var(--radius-xl); }
/* Typing indicator */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: #f1f5f9;
  border-radius: var(--radius-full);
}
.dark .typing-dots { background: #2d3347; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typingDot 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
/* ============================================================
   15. ANIMATIONS & KEYFRAMES
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modalSpring {
  from { opacity: 0; transform: scale(0.9) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(100%) scale(0.95); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50%       { box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
@keyframes levelGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(99,102,241,.25), var(--shadow-brand); }
  50%       { box-shadow: 0 0 0 6px rgba(99,102,241,.15), 0 4px 24px rgba(99,102,241,.5); }
}
@keyframes fireFlicker {
  0%   { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.1) rotate(3deg); }
}
@keyframes progressFill {
  from { width: 0 !important; }
  to   { /* uses inline width */ }
}
@keyframes rowSelect {
  from { background: rgba(99,102,241,.2); }
  to   { background: rgba(99,102,241,.08); }
}
@keyframes notifBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.3); }
  60%       { transform: scale(0.9); }
  80%       { transform: scale(1.1); }
}
@keyframes skeletonWave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40%            { transform: scale(1.1); opacity: 1; }
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes swipeHint {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes counterIncrement {
  from { opacity: 0; transform: translateY(10px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes expandIn {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 600px; opacity: 1; }
}
/* ============================================================
   16. UTILITY CLASSES
   ============================================================ */
/* Glass */
.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
}
.dark .glass {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--brand {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--warm {
  background: linear-gradient(135deg, var(--accent-400), #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Glow */
.glow {
  box-shadow: 0 0 16px rgba(99,102,241,.4), 0 0 32px rgba(99,102,241,.2);
}
.glow--accent { box-shadow: 0 0 16px rgba(245,158,11,.4), 0 0 32px rgba(245,158,11,.2); }
.glow--success { box-shadow: 0 0 16px rgba(16,185,129,.4), 0 0 32px rgba(16,185,129,.2); }
/* Hover lift */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
/* Animate in (intersection observer) */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Multi-line truncate */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Scrollbar hide */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
/* No tap highlight */
.no-tap-highlight { -webkit-tap-highlight-color: transparent; }
/* Divider */
.divider {
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 1.25rem 0;
}
.dark .divider { background: rgba(255,255,255,.06); }
/* Overlay gradient */
.overlay-top {
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
}
.overlay-bottom {
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
}
/* Aspect ratios */
.aspect-video    { aspect-ratio: 16/9; }
.aspect-square   { aspect-ratio: 1/1; }
.aspect-portrait { aspect-ratio: 3/4; }
/* Counter animation */
.counter-animate {
  animation: counterIncrement 0.4s var(--transition-spring) both;
}
/* Fade in animations with delays */
.animate-fade-up     { animation: fadeInUp   0.4s ease both; }
.animate-fade-down   { animation: fadeInDown 0.4s ease both; }
.animate-fade-left   { animation: fadeInLeft 0.4s ease both; }
.animate-fade-right  { animation: fadeInRight 0.4s ease both; }
.animate-scale-in    { animation: scaleIn    0.3s ease both; }
.animate-float       { animation: float  3s  ease-in-out infinite; }
.animate-pulse       { animation: pulse  2s  ease-in-out infinite; }
.animate-bounce      { animation: bounce 1s  ease-in-out infinite; }
.animate-spin        { animation: spin   0.7s linear    infinite; }
.animate-shimmer     {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
}
.animate-shake       { animation: shake 0.5s ease both; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
/* ============================================================
   17. PAGE LAYOUTS
   ============================================================ */
.page-header {
  margin-bottom: 1.75rem;
}
.page-title {
  font-size: 1.625rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.dark .page-title { color: #f1f5f9; }
.page-subtitle {
  font-size: 0.9375rem;
  color: #64748b;
  margin-top: 0.375rem;
}
.dark .page-subtitle { color: #94a3b8; }
/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .content-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .content-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .content-grid--sidebar { grid-template-columns: 1fr 320px; }
  .content-grid--wide-sidebar { grid-template-columns: 1fr 380px; }
}
/* ============================================================
   18. WORKOUT & FITNESS SPECIFIC
   ============================================================ */
/* Workout card */
.workout-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}
.dark .workout-card {
  background: #1a1d26;
  border-color: rgba(255,255,255,.07);
}
.workout-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(99,102,241,.3);
}
.workout-card__cover {
  height: 120px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workout-card__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.1), transparent 60%);
}
.workout-card__body { padding: 1rem 1.25rem; }
.workout-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.dark .workout-card__title { color: #f1f5f9; }
.workout-card__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  color: #64748b;
}
.dark .workout-card__meta { color: #94a3b8; }
.workout-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Exercise row */
.exercise-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background var(--transition-fast);
}
.dark .exercise-row { border-bottom-color: rgba(255,255,255,.05); }
.exercise-row:hover { background: rgba(99,102,241,.04); }
.exercise-row__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(99,102,241,.1);
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dark .exercise-row__number {
  background: rgba(99,102,241,.18);
  color: var(--brand-300);
}
/* Timer display */
.timer-display {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
/* Intensity indicator */
.intensity {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}
.intensity__bar {
  width: 6px;
  border-radius: 3px 3px 0 0;
  background: #e2e8f0;
  transition: background var(--transition-base);
}
.dark .intensity__bar { background: #2d3347; }
.intensity__bar:nth-child(1) { height: 40%; }
.intensity__bar:nth-child(2) { height: 65%; }
.intensity__bar:nth-child(3) { height: 90%; }
.intensity__bar:nth-child(4) { height: 100%; }
.intensity__bar:nth-child(5) { height: 100%; }
.intensity--low    .intensity__bar:nth-child(-n+2) { background: var(--success); }
.intensity--medium .intensity__bar:nth-child(-n+3) { background: var(--warning); }
.intensity--high   .intensity__bar { background: var(--danger); }
/* Body measurement chart */
.measurement-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.dark .measurement-row { border-bottom-color: rgba(255,255,255,.04); }
.measurement-row__label {
  width: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}
.dark .measurement-row__label { color: #94a3b8; }
.measurement-row__bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: #f1f5f9;
  overflow: hidden;
}
.dark .measurement-row__bar { background: #2d3347; }
.measurement-row__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  animation: progressFill 1s var(--transition-spring) both;
}
/* Water intake tracker */
.water-tracker {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: wrap;
}
.water-drop {
  width: 32px;
  height: 36px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #e2e8f0;
  cursor: pointer;
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}
.dark .water-drop { background: #2d3347; }
.water-drop--filled {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  animation: waterFill 0.3s var(--transition-spring);
}
.water-drop:hover { transform: scale(1.1); }
@keyframes waterFill {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* ============================================================
   19. NOTIFICATIONS & ALERTS
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  font-size: 0.875rem;
}
.alert--info {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.2);
  color: #1d4ed8;
}
.dark .alert--info {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25);
  color: #93c5fd;
}
.alert--success {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.2);
  color: #065f46;
}
.dark .alert--success {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color: #6ee7b7;
}
.alert--warning {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.2);
  color: #92400e;
}
.dark .alert--warning {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
  color: #fcd34d;
}
.alert--danger {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color: #991b1b;
}
.dark .alert--danger {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color: #fca5a5;
}
.alert__icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; }
.alert__title { font-weight: 700; margin-bottom: 0.125rem; }
/* Notification item */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid rgba(0,0,0,.05);
  position: relative;
}
.dark .notification-item { border-bottom-color: rgba(255,255,255,.05); }
.notification-item:hover { background: rgba(99,102,241,.04); }
.notification-item--unread::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
.notification-item--unread { padding-left: 1.75rem; }
/* ============================================================
   20. PROFILE & AVATAR COMPONENTS
   ============================================================ */
.avatar {
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}
.avatar--xs  { width: 24px;  height: 24px;  font-size: 0.625rem; }
.avatar--sm  { width: 32px;  height: 32px;  font-size: 0.75rem; }
.avatar--md  { width: 40px;  height: 40px;  font-size: 0.875rem; }
.avatar--lg  { width: 48px;  height: 48px;  font-size: 1rem; }
.avatar--xl  { width: 64px;  height: 64px;  font-size: 1.25rem; }
.avatar--2xl { width: 80px;  height: 80px;  font-size: 1.5rem; }
.avatar--3xl { width: 96px;  height: 96px;  font-size: 1.75rem; }
/* Avatar group */
.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  border: 2px solid #fff;
  margin-left: -8px;
  transition: transform var(--transition-fast);
}
.dark .avatar-group .avatar { border-color: #1a1d26; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar:hover {
  transform: translateY(-3px);
  z-index: 10;
}
/* Profile card */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  gap: 0.75rem;
}
.profile-card__avatar-wrap {
  position: relative;
  display: inline-flex;
}
.profile-card__avatar-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--accent-500));
  z-index: -1;
  animation: levelGlow 3s ease-in-out infinite;
}
.profile-card__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
}
.dark .profile-card__name { color: #f1f5f9; }
.profile-card__role {
  font-size: 0.875rem;
  color: #64748b;
}
.dark .profile-card__role { color: #94a3b8; }
.profile-card__stats {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
}
.profile-stat { text-align: center; }
.profile-stat__value {
  font-size: 1.375rem;
  font-weight: 800;
  color: #0f172a;
  display: block;
}
.dark .profile-stat__value { color: #f1f5f9; }
.profile-stat__label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}
/* ============================================================
   21. SEARCH & FILTER COMPONENTS
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.dark .search-bar {
  background: #1e2130;
  border-color: #2d3347;
}
.search-bar:focus-within {
  background: #fff;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.dark .search-bar:focus-within {
  background: #1e2130;
  border-color: var(--brand-500);
}
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: #334155;
  flex: 1;
  height: 42px;
}
.dark .search-bar input { color: #e2e8f0; }
/* Filter chips */
.filter-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dark .filter-chip {
  background: #1e2130;
  border-color: #2d3347;
  color: #94a3b8;
}
.filter-chip:hover {
  border-color: var(--brand-300);
  color: var(--brand-600);
  background: rgba(99,102,241,.04);
}
.filter-chip--active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.filter-chip--active:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
/* ============================================================
   22. DROPDOWN & MENUS
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(0,0,0,.07);
  padding: 0.375rem;
  z-index: 60;
  animation: scaleIn 0.2s var(--transition-spring) both;
  transform-origin: top right;
}
.dark .dropdown__menu {
  background: #1e2130;
  border-color: rgba(255,255,255,.1);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.05);
}
.dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: #334155;
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
}
.dark .dropdown__item { color: #cbd5e1; }
.dropdown__item:hover { background: rgba(99,102,241,.06); color: var(--brand-600); }
.dark .dropdown__item:hover { background: rgba(99,102,241,.12); color: var(--brand-300); }
.dropdown__item--danger { color: var(--danger); }
.dropdown__item--danger:hover { background: rgba(239,68,68,.06); color: var(--danger); }
.dropdown__divider {
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 0.25rem 0;
}
.dark .dropdown__divider { background: rgba(255,255,255,.07); }
/* Context menu label */
.dropdown__label {
  padding: 0.375rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
/* ============================================================
   23. TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.dark .tabs { border-bottom-color: #2d3347; }
.tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.dark .tab { color: #94a3b8; }
.tab:hover { color: var(--brand-600); }
.dark .tab:hover { color: var(--brand-400); }
.tab--active {
  color: var(--brand-600);
  border-bottom-color: var(--brand-500);
}
.dark .tab--active {
  color: var(--brand-400);
  border-bottom-color: var(--brand-400);
}
/* Pill tabs */
.tabs--pill {
  border-bottom: none;
  background: #f1f5f9;
  border-radius: var(--radius-xl);
  padding: 0.25rem;
  gap: 0;
  display: inline-flex;
}
.dark .tabs--pill { background: #1e2130; }
.tabs--pill .tab {
  border-bottom: none;
  margin: 0;
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
  transition: all var(--transition-base);
}
.tabs--pill .tab--active {
  background: #fff;
  color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}
.dark .tabs--pill .tab--active {
  background: #2d3347;
  color: var(--brand-400);
}
/* ============================================================
   24. PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  transition: all var(--transition-fast);
}
.dark .page-btn {
  background: #1e2130;
  border-color: #2d3347;
  color: #94a3b8;
}
.page-btn:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
  background: rgba(99,102,241,.04);
}
.page-btn--active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.page-btn--active:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
/* ============================================================
   25. PROGRESS & STATS
   ============================================================ */
.progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: #e2e8f0;
  overflow: hidden;
}
.dark .progress { background: #2d3347; }
.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  transition: width 0.6s var(--transition-spring);
}
.progress--sm { height: 4px; }
.progress--lg { height: 12px; }
.progress--striped .progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.2) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
  animation: shimmer 1s linear infinite;
}
/* Circular progress */
.circular-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.circular-progress__label {
  position: absolute;
  font-weight: 700;
  font-size: 0.875rem;
  color: #0f172a;
}
.dark .circular-progress__label { color: #f1f5f9; }
/* Score display */
.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.score-display__value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: counterIncrement 0.5s var(--transition-spring) both;
}
.score-display__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
/* ============================================================
   26. CALENDAR & SCHEDULING
   ============================================================ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: #334155;
}
.dark .calendar-day { color: #cbd5e1; }
.calendar-day:hover { background: rgba(99,102,241,.1); color: var(--brand-600); }
.calendar-day--today {
  background: var(--brand-500);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.calendar-day--has-event::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-500);
  position: absolute;
  bottom: 3px;
}
.calendar-day--selected {
  background: rgba(99,102,241,.15);
  color: var(--brand-600);
  border: 2px solid var(--brand-400);
}
.calendar-day--other-month { color: #cbd5e1; }
.dark .calendar-day--other-month { color: #374151; }
/* ============================================================
   27. MISC COMPONENTS
   ============================================================ */
/* Tooltip */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip-content {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(15,17,23,0.92);
  color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s ease;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.tooltip-wrap .tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15,17,23,0.92);
}
.tooltip-wrap:hover .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* Divider with text */
.divider-text {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 500;
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.dark .divider-text::before,
.dark .divider-text::after { background: #2d3347; }
/* Code block */
.code-block {
  background: #0f172a;
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.8125rem;
  color: #94a3b8;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.06);
}
.dark .code-block { background: #0a0c14; border-color: rgba(255,255,255,.08); }
/* Step indicator */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.step {
  display: flex;
  align-items: center;
  flex: 1;
}
.step__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  z-index: 1;
  transition: all var(--transition-base);
}
.dark .step__circle {
  background: #1e2130;
  border-color: #374151;
}
.step--active .step__circle {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,.2);
}
.step--done .step__circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.step__line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 0.25rem;
  transition: background var(--transition-base);
}
.dark .step__line { background: #374151; }
.step--done + .step .step__line,
.step--done .step__line { background: var(--success); }
/* Accordion */
.accordion__item {
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.dark .accordion__item { border-bottom-color: rgba(255,255,255,.07); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  background: none;
  border: none;
  text-align: left;
  transition: color var(--transition-fast);
}
.dark .accordion__trigger { color: #f1f5f9; }
.accordion__trigger:hover { color: var(--brand-600); }
.dark .accordion__trigger:hover { color: var(--brand-400); }
.accordion__icon {
  transition: transform var(--transition-base);
  flex-shrink: 0;
  color: #94a3b8;
}
.accordion__item--open .accordion__icon { transform: rotate(180deg); }
.accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.accordion__item--open .accordion__content { max-height: 600px; }
.accordion__body {
  padding-bottom: 1rem;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}
.dark .accordion__body { color: #94a3b8; }
/* ============================================================
   28. PRINT STYLES
   ============================================================ */
@media print {
  .sidebar,
  .topbar,
  .mobile-nav,
  .btn--icon,
  .confetti-container { display: none !important; }

  .main-content { margin-left: 0 !important; }

  .card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e2e8f0;
  }

  body { background: #fff !important; color: #000 !important; }
}
/* ============================================================
   29. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .xp-bar__fill { animation: none; }
  .shimmer { animation: none; }
  html { scroll-behavior: auto; }
}
/* ============================================================
   30. HIGH CONTRAST
   ============================================================ */
@media (prefers-contrast: high) {
  .card { border-width: 2px; }
  .btn--primary { background: var(--brand-700); }
  .input { border-width: 2px; }
  .nav-item--active::before { width: 4px; }
}
/* ============================================================
   31. LAYOUT CONSISTENCY
   ============================================================ */
/* Dark mode softer card borders */
.dark .rounded-xl.border {
  border-color: rgba(255, 255, 255, 0.06);
}
/* Dark mode subtle card bg */
.dark .dark\:bg-gray-800 {
  background-color: #1e2533;
}
/* Consistent table row padding */
table td,
table th {
  padding: 0.75rem 1rem;
}
/* Sidebar nav spacing */
nav a,
nav button {
  margin-bottom: 0.125rem;
}
/* Card hover consistent */
.rounded-xl.shadow-sm {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.rounded-xl.shadow-sm:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
/* Dark scrollbar */
.dark ::-webkit-scrollbar-track { background: #1a2030; }
.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
/* ============================================================
   31. LAYOUT CONSISTENCY
   ============================================================ */
/* Dark mode softer card borders */
.dark .rounded-xl.border {
  border-color: rgba(255, 255, 255, 0.06);
}
/* Dark mode subtle card bg */
.dark .dark\:bg-gray-800 {
  background-color: #1e2533;
}
/* Consistent table row padding */
table td,
table th {
  padding: 0.75rem 1rem;
}
/* Sidebar nav spacing */
nav a,
nav button {
  margin-bottom: 0.125rem;
}
/* Card hover consistent */
.rounded-xl.shadow-sm {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.rounded-xl.shadow-sm:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
/* Dark scrollbar */
.dark ::-webkit-scrollbar-track { background: #1a2030; }
.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
/* ============================================================
   31. LAYOUT CONSISTENCY
   ============================================================ */
/* Dark mode softer card borders */
.dark .rounded-xl.border {
  border-color: rgba(255, 255, 255, 0.06);
}
/* Dark mode subtle card bg */
.dark .dark\:bg-gray-800 {
  background-color: #1e2533;
}
/* Consistent table row padding */
table td,
table th {
  padding: 0.75rem 1rem;
}
/* Sidebar nav spacing */
nav a,
nav button {
  margin-bottom: 0.125rem;
}
/* Card hover consistent */
.rounded-xl.shadow-sm {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.rounded-xl.shadow-sm:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
/* Dark scrollbar */
.dark ::-webkit-scrollbar-track { background: #1a2030; }
.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
/* ============================================================
   31. LAYOUT CONSISTENCY
   ============================================================ */
/* Dark mode softer card borders */
.dark .rounded-xl.border {
  border-color: rgba(255, 255, 255, 0.06);
}
/* Dark mode subtle card bg */
.dark .dark\:bg-gray-800 {
  background-color: #1e2533;
}
/* Consistent table row padding */
table td,
table th {
  padding: 0.75rem 1rem;
}
/* Sidebar nav spacing */
nav a,
nav button {
  margin-bottom: 0.125rem;
}
/* Card hover consistent */
.rounded-xl.shadow-sm {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.rounded-xl.shadow-sm:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}
/* Dark scrollbar */
.dark ::-webkit-scrollbar-track { background: #1a2030; }
.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
/* ============================================================
   END — FITNESS PLATFORM PREMIUM CSS
   ============================================================ */
/* === CARD HEIGHT CONSISTENCY === */
.grid > div > [class*="min-h-"],
.grid > [class*="min-h-"] {
  height: 100%;
}
/* Stat cards equal height */
[class*="grid-cols-2"][class*="lg:grid-cols-4"] > * {
  min-height: 120px;
}
/* Exercise/Program cards equal height in grid */
[class*="grid-cols-1"][class*="sm:grid-cols-2"] > *,
[class*="grid-cols-1"][class*="lg:grid-cols-3"] > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Card content fills height */
[class*="rounded-xl"][class*="shadow-sm"][class*="flex-col"] {
  flex: 1;
}
/* ============================================================
   CSS ADDITIONS — FITNESS APP (REACT + TAILWIND)
   Seções 15–28 | Complemento ao index.css (3698 linhas)
   Cores brand: indigo #6366F1 / #4F46E5 | Accent: amber #F59E0B
   Font: Inter | Dark mode: class-based (.dark)
   ============================================================ */
/* ============================================================
   15. ANIMATIONS & KEYFRAMES
   ============================================================ */
/* --- Entrada / Saída --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
/* --- Pulso / Float / Bounce --- */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes bounce-sm {
  0%, 100% { transform: translateY(0);    animation-timing-function: ease-in-out; }
  50%       { transform: translateY(-6px); animation-timing-function: ease-in-out; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-6deg); }
  40%       { transform: rotate(6deg); }
  60%       { transform: rotate(-3deg); }
  80%       { transform: rotate(3deg); }
}
/* --- Rotação / Flip / Morph --- */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rotate-y {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes flip {
  0%   { transform: perspective(400px) rotateX(0); }
  50%  { transform: perspective(400px) rotateX(-180deg); }
  100% { transform: perspective(400px) rotateX(-360deg); }
}
@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
/* --- Gradientes / Brilhos --- */
@keyframes shimmer-gradient {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(99, 102, 241, 0.4); }
  50%       { box-shadow: 0 0 24px 6px rgba(99, 102, 241, 0.7); }
}
@keyframes border-dance {
  0%   { outline-color: #6366F1; }
  33%  { outline-color: #F59E0B; }
  66%  { outline-color: #10B981; }
  100% { outline-color: #6366F1; }
}
/* --- Celebração / Confetti --- */
@keyframes confetti {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
  80%  { transform: translateY(-120px) rotate(720deg); opacity: 0.9; }
  100% { transform: translateY(-160px) rotate(900deg); opacity: 0; }
}
@keyframes firework-burst {
  0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
  60%  { transform: scale(1.4) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
@keyframes celebration {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.15) rotate(-3deg); }
  40%  { transform: scale(1.15) rotate(3deg); }
  60%  { transform: scale(1.08) rotate(-2deg); }
  80%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1); }
}
/* --- Slide in/out para toasts --- */
@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
@keyframes slideInTop {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes progressShrink {
  from { width: 100%; }
  to   { width: 0%; }
}
/* --- Utility classes de animação --- */
.animate-fadeInUp    { animation: fadeInUp   0.4s ease both; }
.animate-fadeInDown  { animation: fadeInDown 0.4s ease both; }
.animate-fadeInLeft  { animation: fadeInLeft 0.4s ease both; }
.animate-fadeInRight { animation: fadeInRight 0.4s ease both; }
.animate-scaleIn     { animation: scaleIn    0.35s ease both; }
.animate-slideUp     { animation: slideUp    0.4s ease both; }
.animate-float       { animation: float      3s ease-in-out infinite; }
.animate-bounce-sm   { animation: bounce-sm  1.5s ease-in-out infinite; }
.animate-pulse-soft  { animation: pulse-soft 2s ease-in-out infinite; }
.animate-pulse-brand { animation: pulse-brand 2s ease-in-out infinite; }
.animate-spin-slow   { animation: spin-slow  8s linear infinite; }
.animate-wiggle      { animation: wiggle     0.6s ease-in-out; }
.animate-shake       { animation: shake      0.5s ease; }
.animate-celebration { animation: celebration 0.6s ease; }
/* Delays utilitários */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
/* --- Micro-interações hover / click --- */
.hover-lift {
  transition: transform var(--transition-base, 0.2s ease),
              box-shadow var(--transition-base, 0.2s ease);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12));
}
.hover-scale {
  transition: transform var(--transition-base, 0.2s ease);
}
.hover-scale:hover {
  transform: scale(1.02);
}
.hover-glow {
  transition: box-shadow var(--transition-base, 0.2s ease);
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.45);
}
.click-shrink:active {
  transform: scale(0.97);
}
/* ============================================================
   16. GLASS MORPHISM & PREMIUM SURFACES
   ============================================================ */
/* --- Glass cards --- */
.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.glass-card-dark {
  background: rgba(15, 15, 30, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.glass-nav {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
}
.dark .glass-modal {
  background: rgba(15, 17, 40, 0.88);
  border-color: rgba(99, 102, 241, 0.2);
}
/* --- Surfaces --- */
.surface-elevated {
  background: var(--color-surface, #ffffff);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  border-radius: var(--radius-lg, 0.75rem);
}
.dark .surface-elevated {
  background: var(--color-surface-dark, #1e213a);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}
.surface-sunken {
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: var(--radius-md, 0.5rem);
}
.dark .surface-sunken {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.14);
}
.surface-gradient {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 50%, #A5B4FC 100%);
  border-radius: var(--radius-xl, 1rem);
  color: #fff;
}
/* --- Gradient border animada --- */
.gradient-border {
  position: relative;
  border-radius: var(--radius-xl, 1rem);
  background: var(--color-surface, #fff);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366F1, #F59E0B, #10B981, #6366F1);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease infinite;
  z-index: -1;
}
.dark .gradient-border {
  background: #1e213a;
}
/* --- Frost panel --- */
.frost-panel {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(40px) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-2xl, 1.5rem);
}
.dark .frost-panel {
  background: rgba(20, 22, 50, 0.75);
  border-color: rgba(99, 102, 241, 0.2);
}
/* --- Neumorphism --- */
.neumorphic {
  background: #f0f0f5;
  border-radius: var(--radius-xl, 1rem);
  box-shadow: 6px 6px 14px rgba(190, 190, 210, 0.7),
              -6px -6px 14px rgba(255, 255, 255, 0.9);
}
.dark .neumorphic {
  background: #1a1c2e;
  box-shadow: 6px 6px 14px rgba(8, 9, 18, 0.7),
              -6px -6px 14px rgba(38, 42, 68, 0.8);
}
/* --- Card shine sweep on hover --- */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -75%;
  width: 50%;
  height: 220%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.card-shine:hover::after {
  left: 120%;
}
/* --- Gradient mesh background --- */
.gradient-mesh {
  background-color: #0f1127;
  background-image:
    radial-gradient(at 20% 30%, rgba(99,102,241,0.35) 0px, transparent 50%),
    radial-gradient(at 80% 10%, rgba(245,158,11,0.2) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(16,185,129,0.2) 0px, transparent 50%),
    radial-gradient(at 90% 70%, rgba(129,140,248,0.25) 0px, transparent 50%);
}
/* ============================================================
   17. EXERCISE & WORKOUT CARDS
   ============================================================ */
/* --- Exercise card base --- */
.exercise-card {
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.exercise-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(99,102,241,0.15);
}
.dark .exercise-card {
  background: #1e213a;
  border-color: rgba(99,102,241,0.12);
}
/* --- Thumbnail --- */
.exercise-card__thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.exercise-card__thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.35s ease;
}
.exercise-card:hover .exercise-card__thumbnail img {
  transform: scale(1.05);
}
.exercise-card__thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
}
/* --- Play button --- */
.exercise-card__play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exercise-card__play-btn span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(99,102,241,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 0 rgba(99,102,241,0.5);
}
.exercise-card:hover .exercise-card__play-btn span {
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(99,102,241,0);
  animation: pulse-brand 1.5s infinite;
}
/* --- Card body --- */
.exercise-card__body {
  padding: 0.875rem 1rem 1rem;
}
.exercise-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-primary, #111827);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.dark .exercise-card__name {
  color: #f1f5f9;
}
.exercise-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
/* --- Workout execution card --- */
.workout-execution-card {
  border-radius: var(--radius-xl, 1rem);
  padding: 1.25rem;
  background: var(--color-surface, #fff);
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.workout-execution-card--active {
  border-color: #6366F1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.dark .workout-execution-card {
  background: #1e213a;
}
/* --- Set rows --- */
.set-row {
  display: grid;
  grid-template-columns: 2rem 1fr 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6b7280);
  transition: background 0.15s ease;
}
.set-row:last-child { border-bottom: none; }
.set-row:hover { background: rgba(99,102,241,0.04); border-radius: var(--radius-sm, 0.25rem); }
.dark .set-row {
  border-color: rgba(255,255,255,0.04);
  color: #94a3b8;
}
.set-row--completed {
  opacity: 0.65;
  text-decoration: line-through;
  color: #10B981;
}
.set-row--completed::before {
  content: '✓';
  color: #10B981;
  font-weight: 700;
}
.set-row--current {
  background: rgba(99,102,241,0.06);
  border-radius: var(--radius-sm, 0.25rem);
  border-left: 3px solid #6366F1;
  padding-left: 0.5rem;
  animation: pulse-soft 2s ease-in-out infinite;
}
/* --- Rest timer circular --- */
.rest-timer {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.rest-timer__svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.rest-timer__track {
  fill: none;
  stroke: rgba(99,102,241,0.15);
  stroke-width: 6;
}
.rest-timer__fill {
  fill: none;
  stroke: #6366F1;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.rest-timer__label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #6366F1;
  line-height: 1;
}
/* --- Muscle group tag --- */
.muscle-group-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.muscle-group-tag--chest    { background: rgba(239,68,68,0.1);   color: #ef4444; }
.muscle-group-tag--back     { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.muscle-group-tag--legs     { background: rgba(16,185,129,0.1);  color: #10b981; }
.muscle-group-tag--arms     { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.muscle-group-tag--core     { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
.muscle-group-tag--shoulders{ background: rgba(236,72,153,0.1);  color: #ec4899; }
/* ============================================================
   18. CALENDAR & SCHEDULING
   ============================================================ */
/* --- Calendar wrapper --- */
.calendar-wrapper {
  border-radius: var(--radius-xl, 1rem);
  background: var(--color-surface, #fff);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm, 0 1px 8px rgba(0,0,0,0.06));
}
.dark .calendar-wrapper {
  background: #1e213a;
}
/* --- Header do mês --- */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.calendar-header__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
}
.dark .calendar-header__title { color: #f1f5f9; }
.calendar-header__nav {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid rgba(99,102,241,0.2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: #6366F1;
}
.calendar-header__nav:hover {
  background: rgba(99,102,241,0.08);
  border-color: #6366F1;
}
/* --- Weekday labels --- */
.calendar-weekday-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.375rem;
}
.calendar-weekday-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #9ca3af);
  padding: 0.25rem 0;
}
/* --- Grid do calendário --- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
/* --- Dia base --- */
.calendar-day {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md, 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-primary, #374151);
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.calendar-day:hover {
  background: rgba(99,102,241,0.08);
  transform: scale(1.06);
}
.dark .calendar-day { color: #cbd5e1; }
.dark .calendar-day:hover { background: rgba(99,102,241,0.15); }
/* --- Estado: hoje --- */
.calendar-day--today {
  outline: 2px solid #6366F1;
  outline-offset: -2px;
  font-weight: 700;
  color: #6366F1;
  animation: pulse-brand 3s ease infinite;
}
.dark .calendar-day--today { color: #818cf8; outline-color: #818cf8; }
/* --- Estado: selecionado --- */
.calendar-day--selected {
  background: #6366F1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
  transform: scale(1.08);
}
/* --- Indicadores dot --- */
.calendar-day__dot {
  position: absolute;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.calendar-day--completed .calendar-day__dot { background: #10B981; }
.calendar-day--missed    .calendar-day__dot { background: #EF4444; }
.calendar-day--scheduled .calendar-day__dot { background: #3B82F6; }
/* --- Estado: descanso --- */
.calendar-day--rest {
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.15);
  color: var(--color-text-muted, #9ca3af);
}
.dark .calendar-day--rest {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
/* --- Slot de horário --- */
.schedule-slot {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  border-left: 3px solid transparent;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.schedule-slot:hover { opacity: 0.8; }
.schedule-slot--workout  { background: rgba(99,102,241,0.1);  border-left-color: #6366F1; color: #4F46E5; }
.schedule-slot--cardio   { background: rgba(16,185,129,0.1);  border-left-color: #10B981; color: #059669; }
.schedule-slot--rest     { background: rgba(107,114,128,0.08); border-left-color: #6B7280; color: #6B7280; }
.schedule-slot--nutrition{ background: rgba(245,158,11,0.1);  border-left-color: #F59E0B; color: #D97706; }
.dark .schedule-slot--workout  { color: #818cf8; }
.dark .schedule-slot--cardio   { color: #34d399; }
.dark .schedule-slot--nutrition{ color: #fbbf24; }
/* ============================================================
   19. ACHIEVEMENTS & TROPHIES
   ============================================================ */
/* --- Grid responsivo --- */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .achievement-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .achievement-grid { grid-template-columns: repeat(4, 1fr); } }
/* --- Card base --- */
.achievement-card {
  border-radius: var(--radius-xl, 1rem);
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.achievement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}
.dark .achievement-card {
  background: #1e213a;
  border-color: rgba(255,255,255,0.06);
}
/* --- Locked state --- */
.achievement-card--locked {
  filter: grayscale(1);
  opacity: 0.55;
}
.achievement-card--locked::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: rgba(0,0,0,0.3);
  border-radius: inherit;
}
/* --- Unlocked glow --- */
.achievement-card--unlocked {
  animation: scaleIn 0.4s ease both;
}
.achievement-card--unlocked .achievement-icon {
  animation: glow-pulse 2.5s ease infinite;
}
/* --- Ícone circular --- */
.achievement-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  position: relative;
}
.achievement-icon::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #F59E0B, #10B981);
  z-index: -1;
}
/* --- Variantes metálicas de troféu --- */
.trophy-gold .achievement-icon::before {
  background: linear-gradient(135deg, #F59E0B, #FDE68A, #D97706);
}
.trophy-silver .achievement-icon::before {
  background: linear-gradient(135deg, #9CA3AF, #E5E7EB, #6B7280);
}
.trophy-bronze .achievement-icon::before {
  background: linear-gradient(135deg, #B45309, #FCD34D, #92400E);
}
/* --- Badge de conquista flutuante --- */
.achievement-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6366F1;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #fff;
  font-weight: 700;
  animation: pulse-brand 2s ease infinite;
}
.dark .achievement-badge { border-color: #1e213a; }
/* --- XP reward pill --- */
.xp-reward {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  border: 1px solid rgba(245,158,11,0.25);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* --- Level badge circular --- */
.level-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #818CF8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
  border: 2px solid rgba(255,255,255,0.25);
}
/* --- Streak flame --- */
.streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(239,68,68,0.15));
  border: 1px solid rgba(251,146,60,0.3);
  color: #f97316;
  font-size: 0.8rem;
  font-weight: 700;
}
.streak-flame--active {
  animation: float 2s ease-in-out infinite;
  background: linear-gradient(135deg, rgba(251,146,60,0.25), rgba(239,68,68,0.25));
}
/* --- Animação de desbloqueio --- */
@keyframes unlockGlow {
  0%   { transform: scale(0.6); opacity: 0; box-shadow: 0 0 0 0 rgba(245,158,11,0.8); }
  50%  { transform: scale(1.15); box-shadow: 0 0 40px 16px rgba(245,158,11,0.4); }
  100% { transform: scale(1);   opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.unlock-animation {
  animation: unlockGlow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* ============================================================
   20. PROGRESS BARS & INDICATORS
   ============================================================ */
/* --- Barra base com track --- */
.progress-bar {
  width: 100%;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
  height: 8px;
}
.dark .progress-bar { background: rgba(255,255,255,0.1); }
.progress-bar__fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* --- Variantes de cor --- */
.progress-bar--brand   .progress-bar__fill { background: #6366F1; }
.progress-bar--success .progress-bar__fill { background: #10B981; }
.progress-bar--warning .progress-bar__fill { background: #F59E0B; }
.progress-bar--danger  .progress-bar__fill { background: #EF4444; }
.progress-bar--accent  .progress-bar__fill { background: #F59E0B; }
/* --- Striped --- */
.progress-bar--striped .progress-bar__fill {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.18) 8px,
    rgba(255,255,255,0.18) 16px
  );
}
/* --- Animated stripes --- */
@keyframes stripeMove {
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}
.progress-bar--animated .progress-bar__fill {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.2) 8px,
    rgba(255,255,255,0.2) 16px
  );
  animation: stripeMove 0.8s linear infinite;
}
/* --- Gradient fill --- */
.progress-bar--gradient .progress-bar__fill {
  background: linear-gradient(90deg, #6366F1, #F59E0B, #10B981);
  background-size: 200% 100%;
  animation: gradient-shift 3s ease infinite;
}
/* --- Tamanhos --- */
.progress-bar--xs { height: 4px; }
.progress-bar--sm { height: 6px; }
.progress-bar--lg { height: 12px; }
.progress-bar--xl { height: 16px; border-radius: var(--radius-sm, 0.25rem); }
/* --- Circular progress (SVG wrapper) --- */
.progress-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.progress-circular--sm  { width: 48px;  height: 48px; }
.progress-circular--md  { width: 80px;  height: 80px; }
.progress-circular--lg  { width: 120px; height: 120px; }
.progress-circular svg {
  transform: rotate(-90deg);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.progress-circular__track {
  fill: none;
  stroke: rgba(99,102,241,0.12);
  stroke-width: 5;
}
.progress-circular__fill {
  fill: none;
  stroke: #6366F1;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.progress-circular__label {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary, #111827);
}
.dark .progress-circular__label { color: #f1f5f9; }
/* --- Ring thin variant --- */
.progress-ring .progress-circular__track { stroke-width: 2; }
.progress-ring .progress-circular__fill  { stroke-width: 2; }
/* --- Step progress --- */
.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.progress-steps__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  flex: 1;
}
.progress-steps__step::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(0,0,0,0.1);
  z-index: 0;
}
.progress-steps__step:last-child::before { display: none; }
.progress-steps__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  background: var(--color-surface, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dark .progress-steps__dot {
  background: #1e213a;
  border-color: rgba(255,255,255,0.12);
  color: #cbd5e1;
}
.progress-steps__step--active    .progress-steps__dot { background: #6366F1; border-color: #6366F1; color: #fff; }
.progress-steps__step--completed .progress-steps__dot { background: #10B981; border-color: #10B981; color: #fff; }
.progress-steps__step--completed::before { background: #10B981; }
.progress-steps__step--active::before    { background: linear-gradient(90deg, #10B981, #6366F1); }
.progress-steps__label {
  font-size: 0.7rem;
  color: var(--color-text-muted, #9ca3af);
  text-align: center;
  white-space: nowrap;
}
.progress-steps__step--active    .progress-steps__label { color: #6366F1; font-weight: 600; }
.progress-steps__step--completed .progress-steps__label { color: #10B981; }
/* --- Indicator dots --- */
.indicator-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.indicator-dot--online  { background: #10B981; animation: pulse-soft 2s infinite; }
.indicator-dot--offline { background: #9CA3AF; }
.indicator-dot--busy    { background: #F59E0B; animation: pulse-soft 1.5s infinite; }
.indicator-dot--error   { background: #EF4444; animation: pulse-soft 1.5s infinite; }
/* ============================================================
   21. STUDENT PROFILE & EVOLUTION
   ============================================================ */
/* --- Profile header --- */
.profile-header {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-xl, 1rem);
  position: relative;
  overflow: hidden;
}
.profile-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  z-index: 0;
}
.dark .profile-header { background: #1e213a; }
/* --- Avatar grande --- */
.profile-avatar--lg {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--color-surface, #fff);
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.dark .profile-avatar--lg { border-color: #1e213a; }
/* --- Stats da row --- */
.profile-stats-row {
  display: flex;
  gap: 2rem;
  position: relative;
  z-index: 1;
  padding-bottom: 0.25rem;
}
.profile-stat {
  text-align: center;
}
.profile-stat__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary, #111827);
  line-height: 1;
}
.profile-stat__label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
  margin-top: 0.25rem;
}
.dark .profile-stat__value { color: #f1f5f9; }
/* --- Evolution card (antes/depois) --- */
.evolution-card {
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  position: relative;
}
.evolution-card__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.evolution-card__photo {
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.evolution-card__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  z-index: 2;
}
.evolution-card__labels {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  z-index: 3;
}
.evolution-card__label {
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* --- Evolution metrics --- */
.evolution-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.evolution-metric:last-child { border-bottom: none; }
.dark .evolution-metric { border-color: rgba(255,255,255,0.05); }
.evolution-metric__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
}
.dark .evolution-metric__value { color: #f1f5f9; }
.evolution-metric__change {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
}
.evolution-metric__change--positive { background: rgba(16,185,129,0.1); color: #10B981; }
.evolution-metric__change--negative { background: rgba(239,68,68,0.1);  color: #EF4444; }
/* --- Body measurements grid --- */
.body-measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.body-measurement-item {
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.08);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 0.75rem;
}
.dark .body-measurement-item {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.14);
}
.body-measurement-item__label {
  font-size: 0.72rem;
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.body-measurement-item__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
}
.dark .body-measurement-item__value { color: #f1f5f9; }
/* --- Photo grid de evolução --- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-frame {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.photo-frame:hover { transform: scale(1.03); }
.photo-frame img {
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.photo-frame__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
}
/* ============================================================
   22. FORM POLISH & INPUTS
   ============================================================ */
/* --- Input group (icon + input) --- */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group__icon {
  position: absolute;
  left: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
  pointer-events: none;
  z-index: 1;
  width: 18px;
  height: 18px;
}
.input-group input {
  padding-left: 2.75rem;
  width: 100%;
}
.input-group__trailing {
  position: absolute;
  right: 0.875rem;
  cursor: pointer;
  color: var(--color-text-muted, #9ca3af);
  transition: color 0.15s ease;
  z-index: 1;
}
.input-group__trailing:hover { color: #6366F1; }
/* --- Float label material-like --- */
.input-float-label {
  position: relative;
  margin-top: 0.5rem;
}
.input-float-label input,
.input-float-label select {
  width: 100%;
  padding: 1.125rem 0.875rem 0.375rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-md, 0.5rem);
  font-size: 0.875rem;
  background: transparent;
  outline: none;
  transition: border-color 0.2s ease;
  color: var(--color-text-primary, #111827);
}
.dark .input-float-label input,
.dark .input-float-label select {
  border-color: rgba(255,255,255,0.12);
  color: #f1f5f9;
  background: rgba(255,255,255,0.04);
}
.input-float-label label {
  position: absolute;
  left: 0.875rem;
  top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
  pointer-events: none;
  transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
  background: transparent;
  padding: 0 0.125rem;
}
.input-float-label input:not(:-moz-placeholder) ~ label {
  top: 0.2rem;
  font-size: 0.72rem;
  color: #6366F1;
}
.input-float-label input:focus ~ label,
.input-float-label input:not(:placeholder-shown) ~ label,
.input-float-label select:focus ~ label {
  top: 0.2rem;
  font-size: 0.72rem;
  color: #6366F1;
}
.input-float-label input:focus,
.input-float-label select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
/* --- Input with unit suffix --- */
.input-with-unit {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-with-unit:focus-within {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.input-with-unit input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.625rem 0.875rem;
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-text-primary, #111827);
}
.dark .input-with-unit input { color: #f1f5f9; }
.input-with-unit__unit {
  padding: 0.625rem 0.875rem;
  background: rgba(99,102,241,0.06);
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.8rem;
  font-weight: 600;
  border-left: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}
.dark .input-with-unit {
  border-color: rgba(255,255,255,0.12);
}
.dark .input-with-unit__unit {
  border-left-color: rgba(255,255,255,0.08);
  background: rgba(99,102,241,0.1);
}
/* --- Custom checkbox --- */
.checkbox-custom {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.checkbox-custom input[type="checkbox"] { display: none; }
.checkbox-custom__box {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm, 0.25rem);
  border: 2px solid rgba(0,0,0,0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.checkbox-custom input:checked + .checkbox-custom__box {
  background: #6366F1;
  border-color: #6366F1;
}
.checkbox-custom input:checked + .checkbox-custom__box::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.dark .checkbox-custom__box { border-color: rgba(255,255,255,0.2); }
/* --- Custom radio --- */
.radio-custom {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.radio-custom input[type="radio"] { display: none; }
.radio-custom__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}
.radio-custom input:checked + .radio-custom__dot {
  border-color: #6366F1;
}
.radio-custom input:checked + .radio-custom__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366F1;
  display: block;
  animation: scaleIn 0.2s ease;
}
.dark .radio-custom__dot { border-color: rgba(255,255,255,0.2); }
/* --- Toggle switch iOS-style --- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s ease;
}
.toggle-switch input:checked ~ .toggle-switch__track {
  background: #6366F1;
}
.toggle-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.toggle-switch input:checked ~ .toggle-switch__thumb {
  transform: translateX(20px);
}
/* Sizes */
.toggle-switch--sm { width: 34px; height: 18px; }
.toggle-switch--sm .toggle-switch__thumb { width: 14px; height: 14px; }
.toggle-switch--sm input:checked ~ .toggle-switch__thumb { transform: translateX(16px); }
.toggle-switch--lg { width: 56px; height: 30px; }
.toggle-switch--lg .toggle-switch__thumb { width: 26px; height: 26px; }
.toggle-switch--lg input:checked ~ .toggle-switch__thumb { transform: translateX(26px); }
/* --- Form states --- */
.form-error input,
.form-error select,
.form-error textarea {
  border-color: #EF4444 !important;
  animation: shake 0.4s ease;
}
.form-success input,
.form-success select {
  border-color: #10B981 !important;
}
.form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
  margin-top: 0.25rem;
}
.form-error .form-hint  { color: #EF4444; }
.form-success .form-hint { color: #10B981; }
/* --- Select fancy --- */
.select-fancy {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366F1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
/* ============================================================
   23. NOTIFICATIONS & TOASTS
   ============================================================ */
/* --- Toast container --- */
.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  width: 100%;
  pointer-events: none;
}
/* --- Toast base --- */
.toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--color-surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
}
.dark .toast {
  background: #1e213a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
/* --- Variantes de cor --- */
.toast--success { border-left-color: #10B981; }
.toast--error   { border-left-color: #EF4444; }
.toast--warning { border-left-color: #F59E0B; }
.toast--info    { border-left-color: #6366F1; }
/* --- Toast icon --- */
.toast__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.toast--success .toast__icon { color: #10B981; }
.toast--error   .toast__icon { color: #EF4444; }
.toast--warning .toast__icon { color: #F59E0B; }
.toast--info    .toast__icon { color: #6366F1; }
.toast__content { flex: 1; }
.toast__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
  line-height: 1.3;
}
.dark .toast__title { color: #f1f5f9; }
.toast__message {
  font-size: 0.8rem;
  color: var(--color-text-muted, #6b7280);
  margin-top: 0.125rem;
}
/* --- Progress bar do toast --- */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 0 var(--radius-lg, 0.75rem);
  animation: progressShrink linear forwards;
}
.toast--success .toast__progress { background: #10B981; }
.toast--error   .toast__progress { background: #EF4444; }
.toast--warning .toast__progress { background: #F59E0B; }
.toast--info    .toast__progress { background: #6366F1; }
/* --- Animações de entrada/saída --- */
.toast--entering { animation: slideInRight 0.3s ease forwards; }
.toast--exiting  { animation: slideOutRight 0.25s ease forwards; }
/* --- Notification item (dropdown) --- */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.15s ease;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: rgba(99,102,241,0.04); }
.dark .notification-item {
  border-color: rgba(255,255,255,0.04);
}
.dark .notification-item:hover { background: rgba(99,102,241,0.08); }
.notification-item--unread {
  background: rgba(99,102,241,0.04);
}
.notification-item--unread .notification-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6366F1;
  flex-shrink: 0;
  margin-top: 0.375rem;
  animation: pulse-soft 2s infinite;
}
/* --- Badge no sino (bell) --- */
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 0.25rem;
  border-radius: 99px;
  background: #EF4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface, #fff);
}
.notification-badge--new { animation: bounce-sm 1.5s ease infinite; }
.dark .notification-badge { border-color: #1e213a; }
/* --- Alert banner full-width --- */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: 0.875rem;
  font-weight: 500;
}
.alert-banner--info    { background: rgba(99,102,241,0.1);  color: #4F46E5; border: 1px solid rgba(99,102,241,0.2);  }
.alert-banner--warning { background: rgba(245,158,11,0.1);  color: #D97706; border: 1px solid rgba(245,158,11,0.2);  }
.alert-banner--danger  { background: rgba(239,68,68,0.1);   color: #DC2626; border: 1px solid rgba(239,68,68,0.2);   }
.alert-banner--success { background: rgba(16,185,129,0.1);  color: #059669; border: 1px solid rgba(16,185,129,0.2);  }
.dark .alert-banner--info    { color: #818cf8; }
.dark .alert-banner--warning { color: #fbbf24; }
.dark .alert-banner--danger  { color: #f87171; }
.dark .alert-banner--success { color: #34d399; }
/* ============================================================
   24. MESSAGES & CHAT
   ============================================================ */
/* --- Container principal --- */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 4px; }
/* --- Bubble wrapper --- */
.chat-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 78%;
}
.chat-bubble-wrap--sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-bubble-wrap--received {
  align-self: flex-start;
}
/* --- Avatar pequeno --- */
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(99,102,241,0.2);
}
/* --- Bubble base --- */
.chat-bubble {
  padding: 0.625rem 0.875rem;
  border-radius: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
}
.chat-bubble--sent {
  background: #6366F1;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble--received {
  background: rgba(0,0,0,0.06);
  color: var(--color-text-primary, #111827);
  border-bottom-left-radius: 4px;
}
.dark .chat-bubble--received {
  background: rgba(255,255,255,0.08);
  color: #f1f5f9;
}
/* --- Timestamp --- */
.chat-bubble__time {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 0.2rem;
  text-align: right;
  display: block;
}
.chat-bubble--received .chat-bubble__time { text-align: left; }
/* --- Media em bubble --- */
.chat-bubble__media {
  max-width: 240px;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.375rem;
}
.chat-bubble__media img,
.chat-bubble__media video {
  width: 100%;
  display: block;
}
/* --- Input area fixa no rodapé --- */
.chat-input-area {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: var(--color-surface, #fff);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.dark .chat-input-area {
  background: #1e213a;
  border-color: rgba(255,255,255,0.06);
}
.chat-input-area input {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.03);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.dark .chat-input-area input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #f1f5f9;
}
.chat-input-area input:focus { border-color: #6366F1; }
/* --- Typing indicator --- */
@keyframes typingDot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%       { transform: translateY(-4px); opacity: 1; }
}
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.875rem;
  background: rgba(0,0,0,0.06);
  border-radius: 1.125rem;
  border-bottom-left-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
.dark .chat-typing-indicator { background: rgba(255,255,255,0.08); }
.chat-typing-indicator span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted, #9ca3af);
  animation: typingDot 1.2s ease infinite;
}
.chat-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
/* --- Date divider --- */
.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.08);
}
.dark .chat-date-divider::before,
.dark .chat-date-divider::after { background: rgba(255,255,255,0.08); }
.chat-date-divider__label {
  font-size: 0.72rem;
  color: var(--color-text-muted, #9ca3af);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  background: var(--color-bg, #f9fafb);
  border-radius: 99px;
}
.dark .chat-date-divider__label { background: #131523; }
/* ============================================================
   25. PAYMENTS & FINANCIAL
   ============================================================ */
/* --- Payment card base --- */
.payment-card {
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1rem 1.25rem;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: box-shadow 0.2s ease;
}
.payment-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.dark .payment-card {
  background: #1e213a;
  border-color: rgba(255,255,255,0.06);
}
/* --- States --- */
.payment-card--overdue {
  border-left-color: #EF4444;
  animation: pulse-soft 3s ease infinite;
}
.payment-card--paid    { border-left-color: #10B981; background: rgba(16,185,129,0.03); }
.payment-card--pending { border-left-color: #F59E0B; }
.dark .payment-card--paid { background: rgba(16,185,129,0.06); }
/* --- Amount display --- */
.amount-display {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #111827);
}
.dark .amount-display { color: #f1f5f9; }
.amount-display--positive { color: #10B981; }
.amount-display--negative { color: #EF4444; }
.amount-display--sm { font-size: 1.25rem; }
/* --- Invoice table --- */
.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.invoice-table th {
  text-align: left;
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #9ca3af);
  border-bottom: 2px solid rgba(0,0,0,0.06);
}
.dark .invoice-table th { border-color: rgba(255,255,255,0.06); }
.invoice-table td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--color-text-primary, #374151);
}
.dark .invoice-table td {
  border-color: rgba(255,255,255,0.04);
  color: #cbd5e1;
}
.invoice-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.dark .invoice-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.invoice-table tbody tr:hover { background: rgba(99,102,241,0.04); }
/* --- Pricing plan card --- */
.pricing-plan-card {
  border-radius: var(--radius-xl, 1rem);
  padding: 1.75rem 1.5rem;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.dark .pricing-plan-card {
  background: #1e213a;
  border-color: rgba(255,255,255,0.06);
}
.pricing-plan-card--popular {
  border-color: #6366F1;
  box-shadow: 0 8px 32px rgba(99,102,241,0.2);
}
.pricing-plan-card__popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366F1, #818CF8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.875rem;
  border-radius: 99px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-plan-card__price {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-text-primary, #111827);
  letter-spacing: -0.03em;
}
.dark .pricing-plan-card__price { color: #f1f5f9; }
.pricing-plan-card__period {
  font-size: 0.85rem;
  color: var(--color-text-muted, #9ca3af);
}
.pricing-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.pricing-plan-card__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #4B5563);
}
.dark .pricing-plan-card__features li { color: #94a3b8; }
.pricing-plan-card__features li::before {
  content: '✓';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: #10B981;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ============================================================
   26. TOOLTIPS & POPOVERS
   ============================================================ */
/* --- Tooltip base --- */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.tooltip {
  position: absolute;
  z-index: 1000;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  animation: fadeInUp 0.18s ease;
  backdrop-filter: blur(8px);
}
.dark .tooltip { background: rgba(255,255,255,0.9); color: #111827; }
/* --- Posicionamento + arrows --- */
.tooltip--top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.tooltip--bottom { top:    calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.tooltip--left   { right:  calc(100% + 8px); top: 50%;  transform: translateY(-50%); }
.tooltip--right  { left:   calc(100% + 8px); top: 50%;  transform: translateY(-50%); }
.tooltip::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border: 5px solid transparent;
}
.tooltip--top::after    { top: 100%;   left: 50%; transform: translateX(-50%); border-top-color: rgba(17,24,39,0.92); }
.tooltip--bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: rgba(17,24,39,0.92); }
.tooltip--left::after   { left: 100%;  top: 50%;  transform: translateY(-50%); border-left-color: rgba(17,24,39,0.92); }
.tooltip--right::after  { right: 100%; top: 50%;  transform: translateY(-50%); border-right-color: rgba(17,24,39,0.92); }
/* --- Tooltip brand variant --- */
.tooltip--brand { background: #6366F1; }
.tooltip--brand::after { border-top-color: #6366F1; }
/* --- Popover --- */
.popover {
  position: absolute;
  z-index: 900;
  min-width: 220px;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  animation: scaleIn 0.2s ease;
  overflow: hidden;
}
.dark .popover {
  background: #1e213a;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.popover__header {
  padding: 0.875rem 1rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dark .popover__header {
  color: #f1f5f9;
  border-color: rgba(255,255,255,0.05);
}
.popover__body {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary, #6b7280);
}
.popover__footer {
  padding: 0.5rem 1rem 0.875rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.dark .popover__footer { border-color: rgba(255,255,255,0.05); }
/* --- Dropdown menu --- */
.dropdown-menu {
  position: absolute;
  z-index: 800;
  min-width: 180px;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  padding: 0.375rem;
  animation: fadeInDown 0.18s ease;
  overflow: hidden;
}
.dark .dropdown-menu {
  background: #1e213a;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: 0.85rem;
  color: var(--color-text-primary, #374151);
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dropdown-item:hover { background: rgba(99,102,241,0.06); color: #6366F1; }
.dropdown-item:active { background: rgba(99,102,241,0.12); }
.dark .dropdown-item { color: #cbd5e1; }
.dark .dropdown-item:hover { background: rgba(99,102,241,0.12); color: #818cf8; }
.dropdown-item--danger { color: #EF4444; }
.dropdown-item--danger:hover { background: rgba(239,68,68,0.06); color: #DC2626; }
.dropdown-divider {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 0.375rem 0;
}
.dark .dropdown-divider { background: rgba(255,255,255,0.06); }
/* ============================================================
   27. PRINT & ACCESSIBILITY
   ============================================================ */
/* --- Screen reader only --- */
.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;
}
/* --- Skip to main content link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #6366F1;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
/* --- Focus indicators aprimorados --- */
:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 3px;
  border-radius: var(--radius-sm, 0.25rem);
}
.dark :focus-visible { outline-color: #818CF8; }
/* --- High contrast mode --- */
@media (prefers-contrast: high) {
  .card,
  .glass-card,
  .surface-elevated {
    border: 2px solid currentColor !important;
  }
  .progress-bar { background: #000; }
  .dark .progress-bar { background: #fff; }
  .badge { border: 1px solid currentColor; }
}
/* --- Visually hidden (alias sr-only) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-fadeInUp,
  .animate-fadeInDown,
  .animate-fadeInLeft,
  .animate-fadeInRight,
  .animate-scaleIn,
  .animate-float,
  .animate-bounce-sm,
  .animate-pulse-soft,
  .animate-pulse-brand,
  .animate-spin-slow,
  .animate-wiggle,
  .animate-shake,
  .animate-celebration {
    animation: none !important;
  }
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
  }
  .card-shine::after { display: none; }
  .gradient-border::before { animation: none; }
}
/* --- Print styles --- */
@media print {
  /* Ocultar elementos de navegação e UI */
  .sidebar,
  .topbar,
  .nav,
  nav,
  header,
  .toast-container,
  .notification-badge,
  .chat-input-area,
  button:not(.print-show),
  .btn:not(.print-show),
  [class*="dropdown"],
  [class*="modal"],
  .skip-link {
    display: none !important;
  }

  /* Layout limpo para impressão */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  .main-content,
  main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards impressos sem sombra */
  .card,
  .glass-card,
  .surface-elevated,
  .exercise-card,
  .achievement-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  /* Tabelas impressas com bordas */
  .invoice-table th,
  .invoice-table td {
    border: 1px solid #ccc !important;
    padding: 0.5rem !important;
  }

  /* Links impressos com URL */
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75rem;
    color: #666;
  }

  /* Progress bars na impressão */
  .progress-bar { background: #eee !important; }
  .progress-bar__fill { background: #333 !important; }

  @page {
    margin: 1.5cm 1.5cm;
  }
}
/* ============================================================
   28. UTILITY ADDITIONS
   ============================================================ */
/* --- Gradient text --- */
.text-gradient-brand {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 60%, #A5B4FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-accent {
  background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 60%, #FDE68A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-success {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* --- Background patterns --- */
.bg-pattern-dots {
  background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dark .bg-pattern-dots {
  background-image: radial-gradient(circle, rgba(99,102,241,0.25) 1px, transparent 1px);
}
.bg-pattern-grid {
  background-image:
    linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dark .bg-pattern-grid {
  background-image:
    linear-gradient(rgba(99,102,241,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.15) 1px, transparent 1px);
}
.bg-pattern-diagonal {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(99,102,241,0.04),
    rgba(99,102,241,0.04) 1px,
    transparent 1px,
    transparent 10px
  );
}
.dark .bg-pattern-diagonal {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(99,102,241,0.1),
    rgba(99,102,241,0.1) 1px,
    transparent 1px,
    transparent 10px
  );
}
/* --- Border gradient via pseudo-element --- */
.border-gradient-brand {
  position: relative;
  background: var(--color-surface, #fff);
}
.border-gradient-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366F1, #F59E0B, #10B981);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dark .border-gradient-brand { background: #1e213a; }
/* --- Multi-line truncation --- */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* --- Aspect ratios --- */
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-9-16 { aspect-ratio: 9 / 16; }
/* --- Hide scrollbar (mas ainda funcional) --- */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
/* Scrollbar custom styling (para elementos que exibem) */
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.25);
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); }
/* --- No select --- */
.no-select { -moz-user-select: none; user-select: none; -webkit-user-select: none; }
/* --- GPU accelerated rendering --- */
.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* --- Overflow utilities extras --- */
.overflow-x-auto-touch {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.snap-start { scroll-snap-align: start; }
.snap-center { scroll-snap-align: center; }
/* --- Pointer utilities --- */
.cursor-grab         { cursor: grab; }
.cursor-grab:active  { cursor: grabbing; }
.cursor-zoom-in      { cursor: zoom-in; }
.cursor-zoom-out     { cursor: zoom-out; }
/* --- Z-index scale --- */
.z-dropdown  { z-index: 800; }
.z-sticky    { z-index: 810; }
.z-fixed     { z-index: 820; }
.z-modal-bg  { z-index: 830; }
.z-modal     { z-index: 840; }
.z-popover   { z-index: 850; }
.z-tooltip   { z-index: 860; }
.z-toast     { z-index: 9999; }
/* --- Dividers decorativos --- */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
  border: none;
  margin: 1.5rem 0;
}
.dark .divider-gradient {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
}
/* --- Empty state container --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted, #9ca3af);
}
.empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}
.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 0.5rem;
}
.empty-state__description {
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.6;
}
.dark .empty-state__title { color: #94a3b8; }
/* --- Responsive helpers adicionais --- */
@media (max-width: 639px) {
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: block !important; }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-stats-row { gap: 1rem; }
  .profile-stat__value { font-size: 1.25rem; }
  .body-measurement-grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet  { display: none !important; }
  .show-tablet  { display: block !important; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}
/* --- Spacing helpers complementares --- */
.gap-xs  { gap: 0.25rem; }
.gap-sm  { gap: 0.5rem; }
.gap-md  { gap: 1rem; }
.gap-lg  { gap: 1.5rem; }
.gap-xl  { gap: 2rem; }
/* --- Line clamp polyfill fallback --- */
@supports not (-webkit-line-clamp: 2) {
  .truncate-2 { max-height: 3em; overflow: hidden; }
  .truncate-3 { max-height: 4.5em; overflow: hidden; }
}
/* --- Color swatch utility --- */
.swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm, 0.25rem);
  border: 2px solid rgba(0,0,0,0.12);
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.swatch--selected {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}
/* --- Tag/chip base extra --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.chip--brand    { background: rgba(99,102,241,0.1); color: #6366F1; border-color: rgba(99,102,241,0.2); }
.chip--success  { background: rgba(16,185,129,0.1); color: #10B981; border-color: rgba(16,185,129,0.2); }
.chip--warning  { background: rgba(245,158,11,0.1); color: #D97706; border-color: rgba(245,158,11,0.2); }
.chip--danger   { background: rgba(239,68,68,0.1);  color: #EF4444; border-color: rgba(239,68,68,0.2); }
.chip--neutral  { background: rgba(107,114,128,0.1); color: #6B7280; border-color: rgba(107,114,128,0.2); }
.chip button {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.6; padding: 0;
  font-size: 1rem; line-height: 1;
  margin-left: 0.125rem;
  transition: opacity 0.15s ease;
}
.chip button:hover { opacity: 1; }
.dark .chip--brand   { color: #818cf8; }
.dark .chip--success { color: #34d399; }
.dark .chip--warning { color: #fbbf24; }
.dark .chip--danger  { color: #f87171; }
.dark .chip--neutral { color: #9ca3af; }
/* ============================================================
   FIM DAS ADIÇÕES — CSS Premium Fitness App
   Seções 15–28 | Total: 2000+ linhas
   ============================================================ */
/* ============================================================
   FITNESS SAAS — SEÇÕES 29-38: USABILIDADE AVANÇADA
   Complemento ao index.css (seções 1-28, 6338 linhas)
   Brand: Indigo #6366F1 | Accent: Amber #F59E0B | Font: Inter
   Dark mode: .dark class | Mobile-first | WCAG 2.5.5 compliant
   Total: 1500+ linhas de CSS puro focado em experiência real
   ============================================================ */
/* ============================================================
   29. TOUCH TARGETS & MOBILE UX
   Botões com mínimo 44px (WCAG 2.5.5), safe areas, bottom sheets,
   FAB, swipe cards, pull-to-refresh, inputs otimizados para toque
   ============================================================ */
/* Área de toque mínima WCAG 2.5.5 — 44x44px garantido */
.touch-target {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Expansão de área clicável sem alterar layout visual */
.touch-target-expand {
  position: relative;
  cursor: pointer;
}
.touch-target-expand::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: max(100%, 44px);
  height: max(100%, 44px);
}
/* Links inline com área de toque expandida */
a.touch-link,
button.touch-link {
  min-height: 44px;
  padding-top: max(0.5rem, calc((44px - 1.5em) / 2));
  padding-bottom: max(0.5rem, calc((44px - 1.5em) / 2));
  display: inline-flex;
  align-items: center;
}
/* Scroll otimizado para toque — permite pan vertical suave */
.touch-action-pan-y {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* Scroll horizontal com toque */
.touch-action-pan-x {
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* Sem zoom em double-tap */
.touch-action-manipulation {
  touch-action: manipulation;
}
/* Safe area — respeitar notch, Dynamic Island, home indicator (iOS) */
.safe-area-inset {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
.safe-area-inset-top {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
}
.safe-area-inset-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
/* Bottom Sheet — painel que sobe de baixo (mobile modal) */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal, 0.2s ease);
  backdrop-filter: blur(2px);
}
.bottom-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9001;
  background: var(--color-bg-card, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  padding: 0 1.25rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--transition-normal, 0.3s) cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* JS: usar pointer events para swipe-to-dismiss */
}
.bottom-sheet.is-open {
  transform: translateY(0);
}
.bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--color-border, #e2e8f0);
  border-radius: 2px;
  margin: 0.75rem auto 1.25rem;
  flex-shrink: 0;
}
.dark .bottom-sheet__handle {
  background: rgba(255, 255, 255, 0.2);
}
.bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  margin-bottom: 1rem;
}
.bottom-sheet__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
}
.dark .bottom-sheet__title {
  color: #f1f5f9;
}
/* Pull-to-refresh — indicador visual */
.pull-to-refresh {
  position: fixed;
  top: calc(-60px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  width: 40px;
  height: 40px;
  background: var(--brand-primary, #6366f1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transition: top 0.2s ease;
}
.pull-to-refresh.is-pulling {
  top: calc(12px + env(safe-area-inset-top, 0px));
}
.pull-to-refresh.is-refreshing {
  top: calc(12px + env(safe-area-inset-top, 0px));
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}
.pull-to-refresh__icon {
  color: white;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
/* Card deslizável horizontalmente (swipe-to-action) */
.swipeable-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  touch-action: pan-y;
  /* JS: escutar touchstart/touchmove para arrastar e revelar ações */
}
.swipeable-card__content {
  position: relative;
  z-index: 2;
  background: var(--color-bg-card, #fff);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.dark .swipeable-card__content {
  background: var(--color-bg-elevated, #1e293b);
}
.swipeable-card__actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 1;
  gap: 0;
}
.swipeable-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 1.25rem;
  height: 100%;
  min-width: 72px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.swipeable-card__action:active {
  filter: brightness(0.9);
}
.swipeable-card__action--danger {
  background: #ef4444;
}
.swipeable-card__action--info {
  background: var(--brand-primary, #6366f1);
}
.swipeable-card__action--warning {
  background: var(--brand-accent, #f59e0b);
}
/* FAB — Floating Action Button (mobile) */
.mobile-fab {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  z-index: 8500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary, #6366f1);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45),
              0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mobile-fab:hover,
.mobile-fab:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.55),
              0 4px 8px rgba(0, 0, 0, 0.2);
}
.mobile-fab:active {
  transform: scale(0.94);
}
.mobile-fab--extended {
  width: auto;
  border-radius: 28px;
  padding: 0 1.25rem;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
/* Feedback tátil visual — escala rápida simulando vibração */
.haptic-feedback {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.haptic-feedback:active {
  animation: haptic-pulse 0.15s ease;
}
@keyframes haptic-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* Inputs maiores em mobile (WCAG: altura mínima 44px) */
@media (max-width: 767px) {
  .input-mobile,
  .input-mobile input,
  .input-mobile select,
  .input-mobile textarea {
    font-size: 1rem !important; /* Evita zoom automático no iOS (min 16px) */
    min-height: 48px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 8px);
  }

  .input-mobile textarea {
    min-height: 100px;
  }

  /* Prevenir zoom no iOS em inputs menores que 16px */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}
/* Dark mode — bottom sheet */
.dark .bottom-sheet {
  background: var(--color-bg-elevated, #1e293b);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}
.dark .bottom-sheet__header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark .mobile-fab {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.6),
              0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ============================================================
   30. FEEDBACK VISUAL & MICRO-INTERACTIONS
   Botão loading/success/error, ripple, long press, drag & drop,
   counter animado, copy feedback, save indicator, offline bar
   ============================================================ */
/* Botão loading — spinner substitui o texto */
.btn-loading {
  position: relative;
  pointer-events: none;
  cursor: not-allowed;
}
.btn-loading .btn-text {
  opacity: 0;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
/* Botão success — muda para verde com check */
.btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important;
  pointer-events: none;
  animation: btn-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes btn-success-pop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* Botão error — muda para vermelho com shake */
.btn-error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
  animation: btn-shake 0.4s ease;
}
@keyframes btn-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-4px); }
  60%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
/* Ripple — efeito Material Design ao clicar */
.ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  width: 100px;
  height: 100px;
  margin: -50px;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  /* JS: definir --ripple-x e --ripple-y a partir do click event,
     depois adicionar classe 'is-rippling' */
}
.ripple.is-rippling::after {
  animation: ripple-effect 0.55s ease-out forwards;
}
@keyframes ripple-effect {
  to {
    transform: scale(6);
    opacity: 0;
  }
}
/* Para fundos claros */
.ripple--dark::after {
  background: rgba(0, 0, 0, 0.12);
}
/* Long press — indicador de progresso circular */
.long-press {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.long-press__progress {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    var(--brand-primary, #6366f1) var(--lp-progress, 0%),
    transparent var(--lp-progress, 0%)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  /* JS: escutar pointerdown, incrementar --lp-progress a cada frame */
}
.long-press.is-pressing .long-press__progress {
  opacity: 1;
}
/* Drag handle — cursor e visual */
.drag-handle {
  cursor: grab;
  color: var(--color-text-muted, #94a3b8);
  padding: 0.375rem;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  touch-action: none; /* Necessário para drag em mobile */
}
.drag-handle:hover {
  color: var(--color-text-secondary, #475569);
  background: var(--color-bg-hover, rgba(99, 102, 241, 0.06));
}
.drag-handle:active,
.drag-handle.is-dragging {
  cursor: grabbing;
  color: var(--brand-primary, #6366f1);
}
/* Drag over — borda pontilhada animada */
.drag-over {
  outline: 2px dashed var(--brand-primary, #6366f1);
  outline-offset: 3px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: var(--radius-md, 8px);
  animation: dash-march 0.5s linear infinite;
}
@keyframes dash-march {
  to { outline-offset: 5px; }
}
/* Sortable ghost — item transparente durante drag */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 2px dashed var(--brand-primary, #6366f1) !important;
  box-shadow: none !important;
}
/* Sortable chosen — item sendo arrastado */
.sortable-chosen {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  transform: scale(1.02) rotate(1deg);
  z-index: 9999;
  cursor: grabbing;
}
/* Counter animate — número que anima ao mudar */
.counter-animate {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
}
.counter-animate.is-updating {
  transform: scale(1.25);
  color: var(--brand-primary, #6366f1);
}
.counter-animate.is-increase {
  color: #10b981;
}
.counter-animate.is-decrease {
  color: #ef4444;
}
/* Copy feedback — tooltip "Copiado!" */
.copy-feedback {
  position: relative;
  cursor: pointer;
}
.copy-feedback__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: #1e293b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.copy-feedback__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
}
.copy-feedback.is-copied .copy-feedback__tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* Save indicator — "Salvando..." → "Salvo ✓" */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
  transition: color 0.3s ease;
}
.save-indicator.is-saving {
  color: var(--brand-accent, #f59e0b);
}
.save-indicator.is-saving::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid var(--brand-accent, #f59e0b);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  display: inline-block;
}
.save-indicator.is-saved {
  color: #10b981;
}
.save-indicator.is-error {
  color: #ef4444;
}
/* Offline indicator — barra no topo */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ef4444;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.offline-indicator.is-visible {
  transform: translateY(0);
}
/* Connection restored — barra verde temporária */
.connection-restored {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #10b981;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
  animation: slide-down-fade 2.5s ease forwards;
}
@keyframes slide-down-fade {
  0%   { transform: translateY(-100%); opacity: 1; }
  15%  { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
/* Undo toast — toast com botão desfazer e countdown */
.undo-toast {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9500;
  background: #1e293b;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 0.9rem;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.undo-toast.is-visible {
  transform: translateX(-50%) translateY(0);
}
.undo-toast__message {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.undo-toast__btn {
  background: none;
  border: 1px solid rgba(99, 102, 241, 0.6);
  color: var(--brand-primary, #6366f1);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.undo-toast__btn:hover {
  background: rgba(99, 102, 241, 0.12);
}
.undo-toast__countdown {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255,255,255,0.15) var(--undo-progress, 100%),
    rgba(255,255,255,0.5) var(--undo-progress, 100%)
  );
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* JS: decrementar --undo-progress a cada 100ms */
}
.dark .undo-toast {
  background: #0f172a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* ============================================================
   31. FORMULÁRIOS INTELIGENTES
   Label+input+hint+error, força de senha, OTP, currency, tags,
   date nativo, range dual, counter, search results, stepper form
   ============================================================ */
/* Grupo vertical: label + input + hint + erro */
.input-group-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.input-group-stacked > label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
  line-height: 1.4;
}
.dark .input-group-stacked > label {
  color: #94a3b8;
}
.input-group-stacked .input-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
  line-height: 1.4;
}
.input-group-stacked .input-error-msg {
  font-size: 0.8125rem;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.input-group-stacked .input-error-msg::before {
  content: '⚠';
  font-size: 0.75rem;
}
/* Barra de força de senha */
.input-strength {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
.input-strength__bars {
  display: flex;
  gap: 0.25rem;
}
.input-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border, #e2e8f0);
  transition: background 0.3s ease;
}
.dark .input-strength__bar {
  background: rgba(255, 255, 255, 0.1);
}
/* Força 1/4 — fraca */
.input-strength[data-strength="1"] .input-strength__bar:nth-child(1) {
  background: #ef4444;
}
/* Força 2/4 — razoável */
.input-strength[data-strength="2"] .input-strength__bar:nth-child(-n+2) {
  background: #f97316;
}
/* Força 3/4 — boa */
.input-strength[data-strength="3"] .input-strength__bar:nth-child(-n+3) {
  background: var(--brand-accent, #f59e0b);
}
/* Força 4/4 — forte */
.input-strength[data-strength="4"] .input-strength__bar {
  background: #10b981;
}
.input-strength__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #94a3b8);
}
.input-strength[data-strength="1"] .input-strength__label { color: #ef4444; }
.input-strength[data-strength="2"] .input-strength__label { color: #f97316; }
.input-strength[data-strength="3"] .input-strength__label { color: var(--brand-accent, #f59e0b); }
.input-strength[data-strength="4"] .input-strength__label { color: #10b981; }
/* OTP — inputs de código (4-6 dígitos) */
.input-otp {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.input-otp__digit {
  width: 48px;
  height: 56px;
  border: 2px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-primary, #0f172a);
  caret-color: var(--brand-primary, #6366f1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  /* JS: auto-foco para próximo input ao digitar; retrocede ao apagar */
}
.dark .input-otp__digit {
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.04);
}
.input-otp__digit:focus {
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.input-otp__digit.has-value {
  border-color: var(--brand-primary, #6366f1);
  background: rgba(99, 102, 241, 0.04);
}
.input-otp__separator {
  color: var(--color-text-muted, #94a3b8);
  font-weight: 300;
  font-size: 1.25rem;
}
/* Input currency — R$ fixo à esquerda */
.input-currency {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-currency__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-right: none;
  border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  white-space: nowrap;
}
.dark .input-currency__prefix {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
.input-currency input {
  flex: 1;
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  border-left: none;
  min-width: 0;
}
/* Input tags — pills editáveis inline */
.input-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-card, #fff);
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}
.dark .input-tags {
  background: var(--color-bg-elevated, #1e293b);
  border-color: rgba(255, 255, 255, 0.1);
}
.input-tags:focus-within {
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.input-tags__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: var(--brand-primary, #6366f1);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.dark .input-tags__pill {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
.input-tags__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease;
  font-size: 0.75rem;
  opacity: 0.7;
}
.input-tags__remove:hover {
  background: rgba(99, 102, 241, 0.2);
  opacity: 1;
}
.input-tags__input {
  border: none;
  outline: none;
  background: none;
  font-size: 0.9375rem;
  color: var(--color-text-primary, #0f172a);
  min-width: 80px;
  flex: 1;
}
.dark .input-tags__input {
  color: #f1f5f9;
}
/* Range slider dual thumb — min/max */
.input-range-dual {
  position: relative;
  padding: 1rem 0 0.25rem;
}
.input-range-dual__track {
  position: relative;
  height: 4px;
  background: var(--color-border, #e2e8f0);
  border-radius: 2px;
}
.dark .input-range-dual__track {
  background: rgba(255, 255, 255, 0.1);
}
.input-range-dual__fill {
  position: absolute;
  height: 100%;
  background: var(--brand-primary, #6366f1);
  border-radius: 2px;
  /* JS: largura e posição calculadas a partir dos dois inputs */
}
.input-range-dual input[type="range"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  pointer-events: none;
  height: 4px;
}
.input-range-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background: var(--brand-primary, #6366f1);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.input-range-dual input[type="range"]::-webkit-slider-thumb:hover,
.input-range-dual input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}
.input-range-dual__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #475569);
}
/* Input counter — botões +/- nas laterais */
.input-counter {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg-card, #fff);
}
.dark .input-counter {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--color-bg-elevated, #1e293b);
}
.input-counter__btn {
  width: 40px;
  min-height: 44px;
  background: var(--color-bg-subtle, #f8fafc);
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--color-text-secondary, #475569);
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.dark .input-counter__btn {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
.input-counter__btn:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--brand-primary, #6366f1);
}
.input-counter__btn:active {
  background: rgba(99, 102, 241, 0.15);
}
.input-counter__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.input-counter input {
  width: 64px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border, #e2e8f0);
  border-right: 1px solid var(--color-border, #e2e8f0);
  background: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
  outline: none;
}
.dark .input-counter input {
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
/* Search com dropdown de resultados */
.input-search-results {
  position: relative;
}
.input-search-results__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.12));
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dark .input-search-results__dropdown {
  background: var(--color-bg-elevated, #1e293b);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.input-search-results__item {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  font-size: 0.9375rem;
  transition: background 0.1s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
}
.input-search-results__item:hover,
.input-search-results__item.is-focused {
  background: rgba(99, 102, 241, 0.06);
}
.dark .input-search-results__item:hover,
.dark .input-search-results__item.is-focused {
  background: rgba(99, 102, 241, 0.12);
}
/* Char counter */
.char-counter {
  font-size: 0.75rem;
  color: var(--color-text-muted, #94a3b8);
  text-align: right;
  transition: color 0.2s ease;
  font-variant-numeric: tabular-nums;
}
.char-counter.is-warning {
  color: var(--brand-accent, #f59e0b);
}
.char-counter.is-over {
  color: #ef4444;
  font-weight: 600;
  animation: counter-warn 0.3s ease;
}
@keyframes counter-warn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* Autocomplete item com highlight do match */
.autocomplete-item {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.1s ease;
}
.autocomplete-item mark {
  background: rgba(245, 158, 11, 0.2);
  color: var(--brand-accent, #f59e0b);
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}
.dark .autocomplete-item mark {
  background: rgba(245, 158, 11, 0.15);
}
/* Form step indicator — stepper horizontal */
.form-step-indicator {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 0 0 1.25rem;
}
.form-step-indicator::before {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% / var(--total-steps, 3));
  right: calc(50% / var(--total-steps, 3));
  height: 2px;
  background: var(--color-border, #e2e8f0);
  z-index: 0;
}
.dark .form-step-indicator::before {
  background: rgba(255, 255, 255, 0.1);
}
.form-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  z-index: 1;
}
.form-step__number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-subtle, #f8fafc);
  border: 2px solid var(--color-border, #e2e8f0);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #94a3b8);
  transition: all 0.3s ease;
}
.dark .form-step__number {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: #64748b;
}
.form-step.is-active .form-step__number {
  background: var(--brand-primary, #6366f1);
  border-color: var(--brand-primary, #6366f1);
  color: white;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.form-step.is-completed .form-step__number {
  background: #10b981;
  border-color: #10b981;
  color: white;
}
.form-step__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #94a3b8);
  text-align: center;
  transition: color 0.2s ease;
}
.form-step.is-active .form-step__label {
  color: var(--brand-primary, #6366f1);
  font-weight: 600;
}
.form-step.is-completed .form-step__label {
  color: #10b981;
}
/* Form section divider */
.form-section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.form-section-divider::before,
.form-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border, #e2e8f0);
}
.dark .form-section-divider::before,
.dark .form-section-divider::after {
  background: rgba(255, 255, 255, 0.08);
}
.form-section-divider__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* ============================================================
   32. TABELAS RESPONSIVAS & DATA GRIDS
   Scroll, sticky header/col, sort, expand, select, empty,
   paginação, filtros, ações em lote, card-table em mobile
   ============================================================ */
/* Wrapper com scroll horizontal em mobile */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #e2e8f0);
}
.dark .table-responsive {
  border-color: rgba(255, 255, 255, 0.08);
}
/* Thead fixo */
.table-sticky-header thead,
.table-sticky-header th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-subtle, #f8fafc);
}
.dark .table-sticky-header thead,
.dark .table-sticky-header th {
  background: var(--color-bg-elevated, #1e293b);
}
/* Primeira coluna fixa */
.table-sticky-col td:first-child,
.table-sticky-col th:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: inherit;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
}
.dark .table-sticky-col td:first-child,
.dark .table-sticky-col th:first-child {
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
}
/* Header clicável com seta de sort */
.table-sort-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.15s ease;
}
.table-sort-header:hover {
  color: var(--brand-primary, #6366f1);
}
.table-sort-header::after {
  content: '↕';
  font-size: 0.75rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.table-sort-header.sort-asc::after {
  content: '↑';
  opacity: 1;
  color: var(--brand-primary, #6366f1);
}
.table-sort-header.sort-desc::after {
  content: '↓';
  opacity: 1;
  color: var(--brand-primary, #6366f1);
}
/* Linha expandível */
.table-row-expandable {
  cursor: pointer;
  transition: background 0.15s ease;
}
.table-row-expandable td:first-child::before {
  content: '▶';
  font-size: 0.625rem;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
  display: inline-block;
  opacity: 0.5;
}
.table-row-expandable.is-expanded td:first-child::before {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--brand-primary, #6366f1);
}
.table-row-expanded-content {
  background: rgba(99, 102, 241, 0.03);
}
.dark .table-row-expanded-content {
  background: rgba(99, 102, 241, 0.06);
}
/* Linha selecionada */
.table-row-selected td {
  background: rgba(99, 102, 241, 0.06) !important;
  border-left: 3px solid var(--brand-primary, #6366f1);
}
/* Hover com elevação */
.table-row-hover tbody tr {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.table-row-hover tbody tr:hover td {
  background: rgba(99, 102, 241, 0.04);
}
.dark .table-row-hover tbody tr:hover td {
  background: rgba(99, 102, 241, 0.08);
}
/* Empty state da tabela */
.table-empty-row td {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.9375rem;
}
.table-empty-row__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}
/* Paginação */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dark .table-pagination {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.table-pagination__info {
  font-size: 0.875rem;
  color: var(--color-text-muted, #94a3b8);
}
.table-pagination__controls {
  display: flex;
  gap: 0.25rem;
}
.table-pagination__btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #e2e8f0);
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  min-height: 36px;
}
.dark .table-pagination__btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
.table-pagination__btn:hover:not(:disabled) {
  border-color: var(--brand-primary, #6366f1);
  color: var(--brand-primary, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}
.table-pagination__btn.is-current {
  background: var(--brand-primary, #6366f1);
  border-color: var(--brand-primary, #6366f1);
  color: white;
}
.table-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Barra de filtros */
.table-filters-bar {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  flex-wrap: wrap;
  align-items: center;
}
.dark .table-filters-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Ações em lote */
.table-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(99, 102, 241, 0.06);
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.dark .table-bulk-actions {
  background: rgba(99, 102, 241, 0.1);
}
.table-bulk-actions__count {
  font-weight: 600;
  color: var(--brand-primary, #6366f1);
}
/* Card-table — tabela vira cards em mobile */
@media (max-width: 639px) {
  .card-table {
    display: block;
    border: none;
    background: none;
    box-shadow: none;
  }

  .card-table thead {
    display: none;
  }

  .card-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .card-table tr {
    display: block;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }

  .dark .card-table tr {
    background: var(--color-bg-elevated, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .card-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border: none;
    font-size: 0.875rem;
    gap: 0.5rem;
  }

  .card-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .card-table td:not(:last-child) {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }

  .dark .card-table td:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
}
/* ============================================================
   33. NAVEGAÇÃO & WAYFINDING
   Breadcrumbs, tabs com indicador animado, stepper vertical,
   back-to-top, page indicator, scroll progress bar
   ============================================================ */
/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #94a3b8);
  min-height: 44px;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.breadcrumb__item a {
  color: var(--color-text-secondary, #475569);
  text-decoration: none;
  transition: color 0.15s ease;
  padding: 0.25rem 0.125rem;
}
.dark .breadcrumb__item a {
  color: #94a3b8;
}
.breadcrumb__item a:hover {
  color: var(--brand-primary, #6366f1);
}
.breadcrumb__item--current span {
  color: var(--color-text-primary, #0f172a);
  font-weight: 500;
}
.dark .breadcrumb__item--current span {
  color: #e2e8f0;
}
.breadcrumb__separator {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.75rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Truncar em mobile */
@media (max-width: 767px) {
  .breadcrumb__item:not(:nth-last-child(-n+2)):not(:first-child) {
    display: none;
  }

  .breadcrumb__item:nth-last-child(3) .breadcrumb__separator::before {
    content: '…';
  }
}
/* Tab bar com indicador deslizante */
.tab-bar {
  position: relative;
  display: flex;
  border-bottom: 2px solid var(--color-border, #e2e8f0);
}
.dark .tab-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.tab-bar--scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.tab-bar--scrollable::-webkit-scrollbar {
  display: none;
}
.tab-bar__tab {
  position: relative;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: none;
  transition: color 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  touch-action: manipulation;
}
.dark .tab-bar__tab {
  color: #94a3b8;
}
.tab-bar__tab:hover {
  color: var(--brand-primary, #6366f1);
}
.tab-bar__tab.is-active {
  color: var(--brand-primary, #6366f1);
  font-weight: 600;
}
/* Underline deslizante animado */
.tab-bar__indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--brand-primary, #6366f1);
  border-radius: 2px 2px 0 0;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* JS: atualizar left e width baseado na tab ativa */
}
.tab-bar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary, #6366f1);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  padding: 0 0.3rem;
  line-height: 1;
}
/* Stepper vertical */
.stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stepper__step {
  display: flex;
  gap: 1rem;
  position: relative;
}
.stepper__step:not(:last-child) .stepper__icon-wrap::after {
  content: '';
  position: absolute;
  top: calc(36px + 4px);
  left: 17px;
  width: 2px;
  height: calc(100% - 40px);
  background: var(--color-border, #e2e8f0);
  z-index: 0;
}
.dark .stepper__step:not(:last-child) .stepper__icon-wrap::after {
  background: rgba(255, 255, 255, 0.1);
}
.stepper__step--completed:not(:last-child) .stepper__icon-wrap::after {
  background: #10b981;
}
.stepper__icon-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.stepper__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-subtle, #f8fafc);
  border: 2px solid var(--color-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted, #94a3b8);
  transition: all 0.3s ease;
}
.dark .stepper__icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
.stepper__step--active .stepper__icon {
  background: var(--brand-primary, #6366f1);
  border-color: var(--brand-primary, #6366f1);
  color: white;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  animation: stepper-pulse 2s ease-in-out infinite;
}
@keyframes stepper-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
  50%       { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.08); }
}
.stepper__step--completed .stepper__icon {
  background: #10b981;
  border-color: #10b981;
  color: white;
}
.stepper__step--error .stepper__icon {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}
.stepper__content {
  flex: 1;
  padding-bottom: 1.5rem;
  padding-top: 0.375rem;
}
.stepper__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
  line-height: 1.3;
}
.dark .stepper__title {
  color: #e2e8f0;
}
.stepper__description {
  font-size: 0.875rem;
  color: var(--color-text-muted, #94a3b8);
  margin-top: 0.25rem;
}
/* Back-to-top button */
.back-to-top {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  z-index: 8000;
  width: 44px;
  height: 44px;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  color: var(--color-text-secondary, #475569);
  font-size: 1.125rem;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* JS: mostrar após scrollar 300px */
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover {
  background: var(--brand-primary, #6366f1);
  color: white;
  border-color: var(--brand-primary, #6366f1);
}
.dark .back-to-top {
  background: var(--color-bg-elevated, #1e293b);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
/* Page indicator — dots de carrossel */
.page-indicator {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem;
}
.page-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border, #e2e8f0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.dark .page-indicator__dot {
  background: rgba(255, 255, 255, 0.2);
}
.page-indicator__dot.is-active {
  background: var(--brand-primary, #6366f1);
  width: 24px;
  border-radius: 4px;
}
/* Scroll progress bar — barra fina no topo */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary, #6366f1), var(--brand-accent, #f59e0b));
  z-index: 9998;
  border-radius: 0 2px 2px 0;
  width: var(--scroll-progress, 0%);
  transition: width 0.1s linear;
  /* JS: atualizar --scroll-progress = scrollY / (documentHeight - windowHeight) * 100 */
}
/* ============================================================
   34. EMPTY STATES & ONBOARDING
   Containers centralizados, spotlight, tooltip onboarding,
   step counter, feature callout, first use hints
   ============================================================ */
/* Empty state container */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  min-height: 280px;
}
.empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.dark .empty-state__icon {
  background: rgba(99, 102, 241, 0.15);
}
.empty-state__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.dark .empty-state__title {
  color: #e2e8f0;
}
.empty-state__description {
  font-size: 0.9375rem;
  color: var(--color-text-muted, #94a3b8);
  max-width: 360px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  background: var(--brand-primary, #6366f1);
  color: white;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}
.empty-state__cta:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
/* Onboarding spotlight — overlay com buraco */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  /* JS: usar clip-path para criar buraco sobre o elemento alvo:
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,
       0 TARGET_TOP, TARGET_LEFT TARGET_TOP,
       TARGET_LEFT TARGET_BOTTOM, TARGET_RIGHT TARGET_BOTTOM,
       TARGET_RIGHT TARGET_TOP, 0 TARGET_TOP)
  */
  background: rgba(0, 0, 0, 0.65);
  pointer-events: all;
}
.onboarding-spotlight {
  position: absolute;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  /* JS: posição e tamanho calculados a partir do elemento alvo + getBoundingClientRect() */
}
/* Tooltip do onboarding */
.onboarding-tooltip {
  position: absolute;
  z-index: 9300;
  background: var(--color-bg-card, #fff);
  border-radius: var(--radius-lg, 12px);
  padding: 1.125rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 320px;
  width: calc(100vw - 2rem);
}
.dark .onboarding-tooltip {
  background: var(--color-bg-elevated, #1e293b);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.onboarding-tooltip__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}
.onboarding-tooltip__arrow--top {
  top: -6px;
  left: calc(50% - 6px);
  box-shadow: -2px -2px 4px rgba(0,0,0,0.06);
}
.onboarding-tooltip__arrow--bottom {
  bottom: -6px;
  left: calc(50% - 6px);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.06);
}
.onboarding-tooltip__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  margin-bottom: 0.375rem;
}
.dark .onboarding-tooltip__title {
  color: #e2e8f0;
}
.onboarding-tooltip__body {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #475569);
  line-height: 1.5;
}
.dark .onboarding-tooltip__body {
  color: #94a3b8;
}
.onboarding-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.dark .onboarding-tooltip__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}
/* Step counter */
.onboarding-step-counter {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
  font-weight: 500;
}
/* Feature callout — card "Novo!" */
.feature-callout {
  position: relative;
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.06) 0%,
    rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}
.dark .feature-callout {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(245, 158, 11, 0.06) 100%);
  border-color: rgba(99, 102, 241, 0.3);
}
.feature-callout__badge {
  background: var(--brand-primary, #6366f1);
  color: white;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.125rem 0.4375rem;
  border-radius: 100px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.feature-callout__content {
  flex: 1;
}
.feature-callout__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
  line-height: 1.3;
}
.dark .feature-callout__title {
  color: #e2e8f0;
}
.feature-callout__description {
  font-size: 0.875rem;
  color: var(--color-text-muted, #94a3b8);
  margin-top: 0.25rem;
  line-height: 1.5;
}
/* First use hint — dica contextual */
.first-use-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  color: var(--color-text-secondary, #475569);
  line-height: 1.5;
  animation: first-use-fade 0.5s ease;
}
.dark .first-use-hint {
  background: rgba(245, 158, 11, 0.08);
  color: #94a3b8;
}
.first-use-hint__icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}
@keyframes first-use-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   35. LOADING & SKELETON AVANÇADOS
   Skeletons específicos (text/avatar/card/table/chart),
   loading overlay, barra YouTube, dots, lazy/progressive images
   ============================================================ */
/* Base shimmer animation reutilizável */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle, #f1f5f9) 25%,
    rgba(226, 232, 240, 0.6) 37%,
    var(--color-bg-subtle, #f1f5f9) 63%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.dark .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.09) 37%,
    rgba(255,255,255,0.05) 63%
  );
  background-size: 800px 100%;
}
/* Skeleton text */
.skeleton-text {
  height: 14px;
  border-radius: 7px;
  display: block;
}
.skeleton-text.skeleton-shimmer {
  margin-bottom: 0.5rem;
}
.skeleton-text--lg { height: 18px; border-radius: 9px; }
.skeleton-text--sm { height: 11px; border-radius: 6px; }
.skeleton-text--short { width: 60%; }
.skeleton-text--medium { width: 80%; }
.skeleton-text--full   { width: 100%; }
/* Skeleton avatar */
.skeleton-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-avatar--sm  { width: 32px; height: 32px; }
.skeleton-avatar--md  { width: 40px; height: 40px; }
.skeleton-avatar--lg  { width: 56px; height: 56px; }
.skeleton-avatar--xl  { width: 80px; height: 80px; }
/* Skeleton card completo */
.skeleton-card {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dark .skeleton-card {
  background: var(--color-bg-elevated, #1e293b);
  border-color: rgba(255, 255, 255, 0.06);
}
.skeleton-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.skeleton-card__header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skeleton-card__footer {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.skeleton-card__btn {
  height: 36px;
  flex: 1;
  border-radius: var(--radius-md, 8px);
}
/* Skeleton tabela */
.skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
.dark .skeleton-table {
  border-color: rgba(255, 255, 255, 0.08);
}
.skeleton-table__header {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.dark .skeleton-table__header {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.skeleton-table__row {
  display: flex;
  gap: 1rem;
  padding: 0.875rem 1rem;
  align-items: center;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.dark .skeleton-table__row {
  border-color: rgba(255, 255, 255, 0.06);
}
.skeleton-table__row:last-child {
  border-bottom: none;
}
.skeleton-table__col {
  height: 12px;
  border-radius: 6px;
}
/* Skeleton chart */
.skeleton-chart {
  border-radius: var(--radius-lg, 12px);
  min-height: 200px;
  width: 100%;
}
/* Loading overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.dark .loading-overlay {
  background: rgba(15, 23, 42, 0.7);
}
.loading-overlay__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: var(--brand-primary, #6366f1);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
/* Loading bar — barra no topo (YouTube/NProgress style) */
.loading-bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 3px;
  z-index: 9997;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--brand-primary, #6366f1) 0%, var(--brand-accent, #f59e0b) 100%);
  transition: width 0.3s ease, opacity 0.4s ease 0.3s;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  pointer-events: none;
  /* JS: width de 0% → 85% automático, depois 100% ao concluir, opacity 0 após 300ms */
}
/* Indeterminate loading bar */
.loading-bar--indeterminate {
  width: 100% !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-primary, #6366f1) 40%,
    var(--brand-accent, #f59e0b) 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: loading-bar-slide 1.5s linear infinite;
  box-shadow: none;
}
@keyframes loading-bar-slide {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
/* Loading dots */
.loading-dots {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}
.loading-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary, #6366f1);
  animation: loading-dots-bounce 1.2s ease-in-out infinite;
}
.loading-dots__dot:nth-child(1) { animation-delay: 0s; }
.loading-dots__dot:nth-child(2) { animation-delay: 0.18s; }
.loading-dots__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes loading-dots-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}
/* Loading skeleton wave — mais sofisticada */
.loading-skeleton-wave {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.loading-skeleton-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: wave-slide 1.6s linear infinite;
}
.dark .loading-skeleton-wave::after {
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
}
@keyframes wave-slide {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
/* Lazy image — placeholder blur enquanto carrega */
.lazy-image {
  background: var(--color-bg-subtle, #f1f5f9);
  overflow: hidden;
}
.dark .lazy-image {
  background: rgba(255, 255, 255, 0.05);
}
.lazy-image img {
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lazy-image.is-loaded img {
  opacity: 1;
}
/* Progressive image — blur → sharp */
.progressive-image {
  position: relative;
  overflow: hidden;
}
.progressive-image__placeholder {
  position: absolute;
  inset: 0;
  filter: blur(20px);
  transform: scale(1.05);
  transition: opacity 0.4s ease;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.progressive-image__full {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.progressive-image.is-loaded .progressive-image__placeholder {
  opacity: 0;
}
.progressive-image.is-loaded .progressive-image__full {
  opacity: 1;
}
/* ============================================================
   36. KEYBOARD NAVIGATION & FOCUS MANAGEMENT
   Focus ring apenas teclado, kbd styling, skip nav,
   focus trap, shortcuts, arrow navigation, focus-within
   ============================================================ */
/* Focus ring visível SOMENTE com teclado (não mouse) */
.focus-ring {
  outline: none;
}
.focus-ring:focus-visible {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 3px;
  border-radius: inherit;
}
/* Brand focus ring */
.focus-ring--brand:focus-visible {
  outline: 2.5px solid var(--brand-primary, #6366f1);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.15);
}
/* Desabilitar focus ring de mouse — aplicar globalmente */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
/* Focus-visible global para todos os interativos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}
/* Focus-within destaca o container pai */
.focus-within-highlight:focus-within {
  outline: 2px solid rgba(99, 102, 241, 0.35);
  outline-offset: 3px;
  border-radius: var(--radius-md, 8px);
}
/* KBD — atalhos de teclado estilizados */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-size: 0.75rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  line-height: 1.4;
}
.dark kbd, .dark .kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: #94a3b8;
}
.kbd-combo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.kbd-combo__sep {
  font-size: 0.75rem;
  color: var(--color-text-muted, #94a3b8);
}
/* Shortcut hint no tooltip */
.shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
}
/* Focus trap — container que prende foco (modais) */
.focus-trap {
  isolation: isolate;
  /* JS: quando ativo, interceptar Tab para ciclar apenas dentro deste container */
}
/* Skip navigation — acessibilidade */
.skip-nav {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  background: var(--brand-primary, #6366f1);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
  white-space: nowrap;
}
.skip-nav:focus {
  top: 0;
  outline: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}
/* Arrow navigation — navegação por setas em listas */
.arrow-nav [role="option"],
.arrow-nav [role="menuitem"],
.arrow-nav [role="tab"] {
  outline: none;
}
.arrow-nav [role="option"]:focus,
.arrow-nav [role="menuitem"]:focus,
.arrow-nav [role="tab"]:focus {
  background: rgba(99, 102, 241, 0.08);
  outline: 2px solid var(--brand-primary, #6366f1);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 4px);
}
.dark .arrow-nav [role="option"]:focus,
.dark .arrow-nav [role="menuitem"]:focus,
.dark .arrow-nav [role="tab"]:focus {
  background: rgba(99, 102, 241, 0.15);
}
/* Tab focus order — visualizar ordem de tab em debug */
.debug-tab-order *:focus {
  counter-increment: tab-order;
}
.debug-tab-order *:focus::before {
  content: counter(tab-order);
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
/* Dark mode enhanced focus */
.dark a:focus-visible,
.dark button:focus-visible,
.dark input:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible {
  outline-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}
/* ============================================================
   37. SCROLL & OVERFLOW UX
   Snap scroll, smooth, overscroll contain, sticky headers/footers,
   scroll shadows, fade edges, infinite scroll trigger, virtual list
   ============================================================ */
/* Scroll snap horizontal */
.scroll-snap-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.scroll-snap-x::-webkit-scrollbar {
  display: none;
}
.scroll-snap-x > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.scroll-snap-x--center > * {
  scroll-snap-align: center;
}
/* Scroll snap vertical */
.scroll-snap-y {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.scroll-snap-y > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Scroll suave */
.scroll-smooth {
  scroll-behavior: smooth;
}
/* Prevenir bounce em modais */
.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-none {
  overscroll-behavior: none;
}
/* Sticky header */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-base, #fff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dark .sticky-header {
  background: rgba(10, 15, 35, 0.9);
}
.sticky-header--bordered {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.dark .sticky-header--bordered {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Sticky footer */
.sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--color-bg-base, #fff);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(8px);
}
.dark .sticky-footer {
  background: rgba(10, 15, 35, 0.9);
}
/* Scroll shadows — sombra aparece quando há mais conteúdo */
.scroll-shadow-wrapper {
  position: relative;
  overflow: hidden;
}
.scroll-shadow-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom,
    var(--color-bg-card, #fff) 0%,
    transparent 100%);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dark .scroll-shadow-top::before {
  background: linear-gradient(to bottom,
    var(--color-bg-elevated, #1e293b) 0%,
    transparent 100%);
}
.scroll-shadow-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top,
    var(--color-bg-card, #fff) 0%,
    transparent 100%);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dark .scroll-shadow-bottom::after {
  background: linear-gradient(to top,
    var(--color-bg-elevated, #1e293b) 0%,
    transparent 100%);
}
/* Fade nas bordas de scroll horizontal */
.scroll-fade-edges {
  position: relative;
  overflow: hidden;
}
.scroll-fade-edges::before,
.scroll-fade-edges::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 5;
  pointer-events: none;
}
.scroll-fade-edges::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-base, #fff), transparent);
}
.scroll-fade-edges::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-base, #fff), transparent);
}
.dark .scroll-fade-edges::before {
  background: linear-gradient(to right, var(--color-bg-base, #0a0f1e), transparent);
}
.dark .scroll-fade-edges::after {
  background: linear-gradient(to left, var(--color-bg-base, #0a0f1e), transparent);
}
.scroll-fade-edges__inner {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.scroll-fade-edges__inner::-webkit-scrollbar {
  display: none;
}
/* Infinite scroll trigger (sentinela) */
.infinite-scroll-trigger {
  height: 1px;
  width: 100%;
  /* JS: IntersectionObserver — quando visível, carregar mais dados */
}
.infinite-scroll-trigger--loading {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Virtual list — container otimizado */
.virtual-list {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  contain: strict;
  will-change: transform;
  /* JS: calcular quais items estão visíveis e renderizar apenas esses */
}
.virtual-list__item {
  position: absolute;
  width: 100%;
  /* JS: top definido por JS baseado no index */
}
/* Scrollbar customizada (onde suportado) */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border, #e2e8f0);
  border-radius: 3px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.4);
}
/* Scrollbar oculta mas funcional */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
/* Dark mode scroll shadows */
.dark .scroll-shadow-top::before {
  background: linear-gradient(to bottom, var(--color-bg-base, #0a0f1e) 0%, transparent 100%);
}
.dark .scroll-shadow-bottom::after {
  background: linear-gradient(to top, var(--color-bg-base, #0a0f1e) 0%, transparent 100%);
}
/* ============================================================
   38. RESPONSIVIDADE AVANÇADA
   Container queries, hide/show por breakpoint, fluid typography,
   grid auto-fit, layouts empilhados, sidebar overlay mobile,
   full-bleed, otimizações para 320-414px e landscape
   ============================================================ */
/* Container queries — componentes auto-responsivos */
.cq-container {
  container-type: inline-size;
}
.cq-card {
  container-type: inline-size;
  container-name: card;
}
/* Card interno adapta ao container, não ao viewport */
@container card (min-width: 400px) {
  .cq-card__content {
    display: flex;
    gap: 1rem;
  }
}
@container (max-width: 320px) {
  .cq-compact .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .cq-compact .card {
    padding: 0.875rem;
  }
}
/* Visibilidade por breakpoint */
.hide-mobile {
  display: none !important;
}
@media (min-width: 768px) {
  .hide-mobile {
    display: revert !important;
  }

  .show-mobile {
    display: none !important;
  }
}
.hide-tablet {
  display: none !important;
}
@media (min-width: 1024px) {
  .hide-tablet {
    display: revert !important;
  }

  .show-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .show-mobile {
    display: revert !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet {
    display: revert !important;
  }
}
/* Fluid typography — escala com o viewport */
.text-responsive {
  font-size: clamp(0.875rem, 2.5vw, 1.0625rem);
  line-height: 1.6;
}
.text-responsive--lg {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}
.text-responsive--xl {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}
.text-responsive--2xl {
  font-size: clamp(1.875rem, 5vw, 3rem);
}
.text-responsive--hero {
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1.1;
}
/* Spacing responsivo */
.spacing-responsive {
  padding: clamp(1rem, 3vw, 1.5rem);
}
.spacing-responsive--lg {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.gap-responsive {
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
/* Grid auto-fit — ajusta colunas automaticamente */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.grid-auto-fit--sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-auto-fit--lg {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
/* Stack em mobile (row → column) */
.stack-on-mobile {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 767px) {
  .stack-on-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .stack-on-mobile--start {
    align-items: flex-start;
  }
}
/* Sidebar overlay em mobile */
.sidebar-overlay-mobile {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: none;
}
@media (max-width: 1023px) {
  .sidebar-overlay-mobile {
    display: block;
  }

  .sidebar-overlay-mobile.is-open {
    opacity: 1;
    pointer-events: all;
  }
}
/* Full-bleed — ignora padding do container */
.full-bleed-mobile {
  width: 100%;
}
@media (max-width: 767px) {
  .full-bleed-mobile {
    margin-left: calc(-1 * var(--container-padding, 1rem));
    margin-right: calc(-1 * var(--container-padding, 1rem));
    width: calc(100% + 2 * var(--container-padding, 1rem));
    border-radius: 0;
  }
}
/* Layout 2 colunas responsivo */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .two-col-layout {
    grid-template-columns: 1fr 1fr;
  }

  .two-col-layout--sidebar {
    grid-template-columns: 280px 1fr;
  }

  .two-col-layout--sidebar-right {
    grid-template-columns: 1fr 280px;
  }

  .two-col-layout--wide-left {
    grid-template-columns: 2fr 1fr;
  }

  .two-col-layout--wide-right {
    grid-template-columns: 1fr 2fr;
  }
}
/* Otimizações específicas para 320px (iPhone SE) */
@media (max-width: 359px) {
  .container,
  .page-container {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .btn-group-mobile {
    flex-direction: column;
    width: 100%;
  }

  .btn-group-mobile > * {
    width: 100%;
  }

  .mobile-fab {
    right: 0.875rem;
    bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  }

  .input-otp__digit {
    width: 40px;
    height: 48px;
    font-size: 1.25rem;
  }
}
/* 375px (iPhone 12 mini / SE 3) */
@media (min-width: 360px) and (max-width: 389px) {
  .grid-auto-fit {
    grid-template-columns: 1fr;
  }

  .two-col-layout--sidebar {
    grid-template-columns: 1fr;
  }
}
/* 390px (iPhone 14) */
@media (min-width: 390px) and (max-width: 413px) {
  .input-otp {
    gap: 0.5rem;
  }

  .input-otp__digit {
    width: 46px;
    height: 54px;
  }
}
/* 414px (iPhone Plus) */
@media (min-width: 414px) {
  .mobile-fab--extended {
    min-width: 140px;
  }
}
/* Landscape mode — ajustes de altura */
@media (max-height: 500px) and (orientation: landscape) {
  .bottom-sheet {
    max-height: 95dvh;
    overflow-y: auto;
  }

  .empty-state-container {
    min-height: 180px;
    padding: 1.5rem 1rem;
  }

  .empty-state__icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .mobile-fab {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
  }

  .onboarding-tooltip {
    max-height: 80vh;
    overflow-y: auto;
  }
}
/* Landscape com notch (iPhone X+ landscape) */
@media (max-height: 500px) and (orientation: landscape) and (display-mode: standalone) {
  .safe-area-inset-bottom {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }
}
/* Dark mode — ajustes globais das seções 35-38 */
.dark .loading-overlay {
  background: rgba(15, 23, 42, 0.8);
}
.dark .scroll-shadow-wrapper::before,
.dark .scroll-shadow-wrapper::after {
  opacity: 0.9;
}
.dark .empty-state__icon {
  background: rgba(99, 102, 241, 0.12);
}
/* Reduced motion — respeitar preferência do usuário */
@media (prefers-reduced-motion: reduce) {
  .ripple.is-rippling::after,
  .btn-error,
  .counter-animate,
  .stepper__step--active .stepper__icon,
  .haptic-feedback:active,
  .pull-to-refresh.is-refreshing,
  .loading-bar--indeterminate,
  .loading-dots__dot,
  .loading-skeleton-wave::after,
  .skeleton-shimmer,
  .connection-restored,
  .first-use-hint {
    animation: none !important;
  }

  .bottom-sheet,
  .bottom-sheet-overlay,
  .undo-toast,
  .offline-indicator,
  .back-to-top,
  .copy-feedback__tooltip,
  .save-indicator,
  .tab-bar__indicator,
  .swipeable-card__content,
  .progressive-image__placeholder,
  .progressive-image__full,
  .lazy-image img {
    transition: none !important;
  }
}
/* High contrast — melhorar para visibilidade */
@media (prefers-contrast: high) {
  .touch-target-expand::before {
    min-width: 48px;
    min-height: 48px;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  [tabindex]:focus-visible {
    outline-width: 3px;
    outline-offset: 4px;
  }

  .table-row-selected td {
    border-left-width: 4px;
  }

  .input-otp__digit:focus {
    border-width: 3px;
  }
}
/* Print — esconder elementos de interação */
@media print {
  .mobile-fab,
  .back-to-top,
  .bottom-sheet,
  .bottom-sheet-overlay,
  .offline-indicator,
  .connection-restored,
  .undo-toast,
  .onboarding-overlay,
  .onboarding-spotlight,
  .onboarding-tooltip,
  .scroll-indicator,
  .loading-bar,
  .loading-overlay,
  .pull-to-refresh,
  .skip-nav {
    display: none !important;
  }

  .scroll-snap-x,
  .tab-bar--scrollable {
    overflow: visible;
    display: block;
  }
}
/* ============================================================
   FIM — css-usability.css
   Seções: 29-38 | Foco: Experiência real do usuário
   Compatível com React + Tailwind CSS + índice.css seções 1-28
   ============================================================ */
.first\:pt-0:first-child{
  padding-top: 0px;
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.hover\:border-blue-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-200:hover{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-red-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.hover\:bg-black\/10:hover{
  background-color: rgb(0 0 0 / 0.1);
}
.hover\:bg-blue-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/30:hover{
  background-color: rgb(255 255 255 / 0.3);
}
.hover\:text-blue-400:hover{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-500:hover{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-500:hover{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-600:hover{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-green-500:hover{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.hover\:text-green-700:hover{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-brand-500\/40:hover{
  --tw-shadow-color: rgb(99 102 241 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-transparent:focus{
  border-color: transparent;
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-brand-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-brand-500\/40:focus{
  --tw-ring-color: rgb(99 102 241 / 0.4);
}
.focus\:ring-offset-1:focus{
  --tw-ring-offset-width: 1px;
}
.active\:bg-brand-700:active{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.active\:bg-green-700:active{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.active\:bg-red-700:active{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-30:disabled{
  opacity: 0.3;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group:hover .group-hover\:bg-brand-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-brand-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.dark\:divide-gray-700\/50:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(55 65 81 / 0.5);
}
.dark\:divide-gray-800:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-divide-opacity, 1));
}
.dark\:border-amber-800\/30:is(.dark *){
  border-color: rgb(146 64 14 / 0.3);
}
.dark\:border-amber-900\/30:is(.dark *){
  border-color: rgb(120 53 15 / 0.3);
}
.dark\:border-blue-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800\/30:is(.dark *){
  border-color: rgb(30 64 175 / 0.3);
}
.dark\:border-blue-900\/20:is(.dark *){
  border-color: rgb(30 58 138 / 0.2);
}
.dark\:border-brand-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}
.dark\:border-brand-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}
.dark\:border-brand-800\/30:is(.dark *){
  border-color: rgb(55 48 163 / 0.3);
}
.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700\/50:is(.dark *){
  border-color: rgb(55 65 81 / 0.5);
}
.dark\:border-gray-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-red-900\/30:is(.dark *){
  border-color: rgb(127 29 29 / 0.3);
}
.dark\:border-red-900\/50:is(.dark *){
  border-color: rgb(127 29 29 / 0.5);
}
.dark\:border-yellow-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-900\/20:is(.dark *){
  background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-amber-900\/30:is(.dark *){
  background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-blue-900\/10:is(.dark *){
  background-color: rgb(30 58 138 / 0.1);
}
.dark\:bg-blue-900\/20:is(.dark *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-blue-900\/40:is(.dark *){
  background-color: rgb(30 58 138 / 0.4);
}
.dark\:bg-brand-500:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.dark\:bg-brand-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.dark\:bg-brand-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
}
.dark\:bg-brand-900\/10:is(.dark *){
  background-color: rgb(49 46 129 / 0.1);
}
.dark\:bg-brand-900\/20:is(.dark *){
  background-color: rgb(49 46 129 / 0.2);
}
.dark\:bg-brand-900\/30:is(.dark *){
  background-color: rgb(49 46 129 / 0.3);
}
.dark\:bg-brand-900\/40:is(.dark *){
  background-color: rgb(49 46 129 / 0.4);
}
.dark\:bg-gray-500:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700\/40:is(.dark *){
  background-color: rgb(55 65 81 / 0.4);
}
.dark\:bg-gray-700\/50:is(.dark *){
  background-color: rgb(55 65 81 / 0.5);
}
.dark\:bg-gray-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800\/50:is(.dark *){
  background-color: rgb(31 41 55 / 0.5);
}
.dark\:bg-gray-800\/60:is(.dark *){
  background-color: rgb(31 41 55 / 0.6);
}
.dark\:bg-gray-800\/70:is(.dark *){
  background-color: rgb(31 41 55 / 0.7);
}
.dark\:bg-gray-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900\/10:is(.dark *){
  background-color: rgb(20 83 45 / 0.1);
}
.dark\:bg-green-900\/20:is(.dark *){
  background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *){
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-indigo-900\/30:is(.dark *){
  background-color: rgb(49 46 129 / 0.3);
}
.dark\:bg-orange-900\/20:is(.dark *){
  background-color: rgb(124 45 18 / 0.2);
}
.dark\:bg-orange-900\/30:is(.dark *){
  background-color: rgb(124 45 18 / 0.3);
}
.dark\:bg-purple-900\/20:is(.dark *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:bg-purple-900\/30:is(.dark *){
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-red-900\/20:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-red-900\/30:is(.dark *){
  background-color: rgb(127 29 29 / 0.3);
}
.dark\:bg-yellow-900\/20:is(.dark *){
  background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-yellow-900\/30:is(.dark *){
  background-color: rgb(113 63 18 / 0.3);
}
.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.dark\:text-brand-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-600:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-700:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-800:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-indigo-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-gray-500:is(.dark *)::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-gray-500:is(.dark *)::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.dark\:opacity-20:is(.dark *){
  opacity: 0.2;
}
.dark\:ring-brand-700:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity, 1));
}
.dark\:ring-brand-800:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(55 48 163 / var(--tw-ring-opacity, 1));
}
.dark\:ring-gray-800:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity, 1));
}
.dark\:ring-offset-gray-800:is(.dark *){
  --tw-ring-offset-color: #1f2937;
}
.dark\:ring-offset-gray-900:is(.dark *){
  --tw-ring-offset-color: #111827;
}
.dark\:hover\:border-blue-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-brand-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-gray-600:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-blue-900\/20:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:hover\:bg-blue-900\/50:hover:is(.dark *){
  background-color: rgb(30 58 138 / 0.5);
}
.dark\:hover\:bg-brand-900\/20:hover:is(.dark *){
  background-color: rgb(49 46 129 / 0.2);
}
.dark\:hover\:bg-brand-900\/40:hover:is(.dark *){
  background-color: rgb(49 46 129 / 0.4);
}
.dark\:hover\:bg-gray-600:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700\/30:hover:is(.dark *){
  background-color: rgb(55 65 81 / 0.3);
}
.dark\:hover\:bg-gray-700\/50:hover:is(.dark *){
  background-color: rgb(55 65 81 / 0.5);
}
.dark\:hover\:bg-gray-700\/60:hover:is(.dark *){
  background-color: rgb(55 65 81 / 0.6);
}
.dark\:hover\:bg-gray-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-800\/40:hover:is(.dark *){
  background-color: rgb(31 41 55 / 0.4);
}
.dark\:hover\:bg-gray-800\/50:hover:is(.dark *){
  background-color: rgb(31 41 55 / 0.5);
}
.dark\:hover\:bg-green-900\/20:hover:is(.dark *){
  background-color: rgb(20 83 45 / 0.2);
}
.dark\:hover\:bg-indigo-900\/50:hover:is(.dark *){
  background-color: rgb(49 46 129 / 0.5);
}
.dark\:hover\:bg-purple-900\/20:hover:is(.dark *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:hover\:bg-red-900\/20:hover:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:hover\:bg-white\/10:hover:is(.dark *){
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:text-brand-400:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-200:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-white:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .sm\:block{
    display: block;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:inline-flex{
    display: inline-flex;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:w-56{
    width: 14rem;
  }
  .sm\:w-72{
    width: 18rem;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 768px){
  .md\:block{
    display: block;
  }
  .md\:flex{
    display: flex;
  }
  .md\:grid{
    display: grid;
  }
  .md\:hidden{
    display: none;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-\[2fr_1fr_1fr_1fr_120px\]{
    grid-template-columns: 2fr 1fr 1fr 1fr 120px;
  }
  .md\:grid-cols-\[2fr_1fr_1fr_1fr_40px\]{
    grid-template-columns: 2fr 1fr 1fr 1fr 40px;
  }
  .md\:items-center{
    align-items: center;
  }
  .md\:gap-4{
    gap: 1rem;
  }
  .md\:gap-5{
    gap: 1.25rem;
  }
  .md\:gap-6{
    gap: 1.5rem;
  }
  .md\:p-6{
    padding: 1.5rem;
  }
  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px){
  .lg\:flex{
    display: flex;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:w-80{
    width: 20rem;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:pb-0{
    padding-bottom: 0px;
  }
}
@media (min-width: 1280px){
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}