/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-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.
 */

[type="search"]::-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 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/*!
   Grid System Based on Flexbox - v1.0 | Eliezer Pujols (@wideckop)
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Grid System */
.grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.grid__cell {
  width: 100%;
}

.grid--gutter {
  margin: -20px 0 20px -20px;
}

.grid--gutter > .grid__cell {
  padding: 20px 0 0 20px;
}

.grid--gutter-small {
  margin: -12px 0 20px -12px;
}

.grid--gutter-small > .grid__cell {
  padding: 12px 0 0 12px;
}

/* Small device screen */
@media (min-width: 480px) {
  .grid__cell--small-1of12 {
    width: 8.33333%;
  }
  .grid__cell--small-2of12 {
    width: 16.66667%;
  }
  .grid__cell--small-3of12 {
    width: 25%;
  }
  .grid__cell--small-4of12 {
    width: 33.33333%;
  }
  .grid__cell--small-5of12 {
    width: 41.66667%;
  }
  .grid__cell--small-6of12 {
    width: 50%;
  }
  .grid__cell--small-7of12 {
    width: 58.33333%;
  }
  .grid__cell--small-8of12 {
    width: 66.66667%;
  }
  .grid__cell--small-9of12 {
    width: 75%;
  }
  .grid__cell--small-10of12 {
    width: 83.33333%;
  }
  .grid__cell--small-11of12 {
    width: 91.66667%;
  }
  .grid__cell--small-12of12 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .grid--small-square .grid__cell--small-1of12 {
    width: 8.33333%;
  }
  .grid--small-square .grid__cell--small-2of12 {
    width: 16.66667%;
  }
  .grid--small-square .grid__cell--small-3of12 {
    width: 25%;
  }
  .grid--small-square .grid__cell--small-4of12 {
    width: 33.33333%;
  }
  .grid--small-square .grid__cell--small-5of12 {
    width: 41.66667%;
  }
  .grid--small-square .grid__cell--small-6of12 {
    width: 50%;
  }
  .grid--small-square .grid__cell--small-7of12 {
    width: 58.33333%;
  }
  .grid--small-square .grid__cell--small-8of12 {
    width: 66.66667%;
  }
  .grid--small-square .grid__cell--small-9of12 {
    width: 75%;
  }
  .grid--small-square .grid__cell--small-10of12 {
    width: 83.33333%;
  }
  .grid--small-square .grid__cell--small-11of12 {
    width: 91.66667%;
  }
  .grid--small-square .grid__cell--small-12of12 {
    width: 100%;
  }
}


/* Medium device screen */
@media (min-width: 768px) {
  .grid__cell--medium-1of12 {
    width: 8.33333%;
  }
  .grid__cell--medium-2of12 {
    width: 16.66667%;
  }
  .grid__cell--medium-3of12 {
    width: 25%;
  }
  .grid__cell--medium-4of12 {
    width: 33.33333%;
  }
  .grid__cell--medium-5of12 {
    width: 41.66667%;
  }
  .grid__cell--medium-6of12 {
    width: 50%;
  }
  .grid__cell--medium-7of12 {
    width: 58.33333%;
  }
  .grid__cell--medium-8of12 {
    width: 66.66667%;
  }
  .grid__cell--medium-9of12 {
    width: 75%;
  }
  .grid__cell--medium-10of12 {
    width: 83.33333%;
  }
  .grid__cell--medium-11of12 {
    width: 91.66667%;
  }
  .grid__cell--medium-12of12 {
    width: 100%;
  }
}

/* Large device screen */
@media (min-width: 960px) {
  .grid__cell--large-1of12 {
    width: 8.33333%;
  }
  .grid__cell--large-2of12 {
    width: 16.66667%;
  }
  .grid__cell--large-3of12 {
    width: 25%;
  }
  .grid__cell--large-4of12 {
    width: 33.33333%;
  }
  .grid__cell--large-5of12 {
    width: 41.66667%;
  }
  .grid__cell--large-6of12 {
    width: 50%;
  }
  .grid__cell--large-7of12 {
    width: 58.33333%;
  }
  .grid__cell--large-8of12 {
    width: 66.66667%;
  }
  .grid__cell--large-9of12 {
    width: 75%;
  }
  .grid__cell--lager-10of12 {
    width: 83.33333%;
  }
  .grid__cell--large-11of12 {
    width: 91.66667%;
  }
  .grid__cell--large-12of12 {
    width: 100%;
  }
}

/* Small device screen for Half */
@media (min-width: 480px) {
  .grid__cell--small-half-1 {
    margin-left: 8.33333%;
  }
  .grid__cell--small-half-2 {
    margin-left: 16.66667%;
  }
  .grid__cell--small-half-3 {
    margin-left: 25%;
  }
  .grid__cell--small-half-4 {
    margin-left: 33.33333%;
  }
  .grid__cell--small-half-5 {
    margin-left: 41.66667%;
  }
  .grid__cell--small-half-6 {
    margin-left: 50%;
  }
  .grid__cell--small-half-7 {
    margin-left: 58.33333%;
  }
  .grid__cell--small-half-8 {
    margin-left: 66.66667%;
  }
  .grid__cell--small-half-9 {
    margin-left: 75%;
  }
  .grid__cell--small-half-10 {
    margin-left: 83.33333%;
  }
  .grid__cell--small-half-11 {
    margin-left: 91.66667%;
  }
}

/* Medium device screen for Half */
@media (min-width: 768px) {
  .grid__cell--medium-half-1 {
    margin-left: 8.33333%;
  }
  .grid__cell--medium-half-2 {
    margin-left: 16.66667%;
  }
  .grid__cell--medium-half-3 {
    margin-left: 25%;
  }
  .grid__cell--medium-half-4 {
    margin-left: 33.33333%;
  }
  .grid__cell--medium-half-5 {
    margin-left: 41.66667%;
  }
  .grid__cell--medium-half-6 {
    margin-left: 50%;
  }
  .grid__cell--medium-half-7 {
    margin-left: 58.33333%;
  }
  .grid__cell--medium-half-8 {
    margin-left: 66.66667%;
  }
  .grid__cell--medium-half-9 {
    margin-left: 75%;
  }
  .grid__cell--medium-half-10 {
    margin-left: 83.33333%;
  }
  .grid__cell--medium-half-11 {
    margin-left: 91.66667%;
  }
}

/* Large device screen for Half */
@media (min-width: 960px) {
  .grid__cell--large-half-1 {
    margin-left: 8.33333%;
  }
  .grid__cell--large-half-2 {
    margin-left: 16.66667%;
  }
  .grid__cell--large-half-3 {
    margin-left: 25%;
  }
  .grid__cell--large-half-4 {
    margin-left: 33.33333%;
  }
  .grid__cell--large-half-5 {
    margin-left: 41.66667%;
  }
  .grid__cell--large-half-6 {
    margin-left: 50%;
  }
  .grid__cell--large-half-7 {
    margin-left: 58.33333%;
  }
  .grid__cell--large-half-8 {
    margin-left: 66.66667%;
  }
  .grid__cell--large-half-9 {
    margin-left: 75%;
  }
  .grid__cell--large-half-10 {
    margin-left: 83.33333%;
  }
  .grid__cell--large-half-11 {
    margin-left: 91.66667%;
  }
}
/* --------------------

    VARIABLES

----------------------- */
:root {
  /* Colors */
  --color-gray-01: #1F1F1F;
  --color-gray-02: #282828;
  --color-gray-03: #363636;
  --color-gray-04: #535353;
  --color-gray-05: #949494;
  --color-gray-06: #C9C9C9;
  --color-primary-01: #DF4C42;
  --color-primary-02: #FF746A;
  --color-primary-03: #FFC6C6;
  /* Fonts */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Rubik', sans-serif;
  /* Shadows */
  --shadow-bigger: 0px 16px 31px rgba(0, 0, 0, 0.4); }

/* --------------------

    BOX-SIZING

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

/* --------------------

    PAGE

----------------------- */
body {
  background-color: var(--color-gray-01);
  font-family: var(--font-primary);
  font-size: 17px;
  color: white;
  padding-bottom: 56px; }

*:focus {
  outline: none; }

/* --------------------

    HEADING

----------------------- */
h1, h2, h3, h4, h5 {
  margin-top: 0;
  margin-bottom: 24px; }

h1 {
  font-family: var(--font-secondary);
  font-weight: bold;
  font-size: 54px;
  line-height: 64px; }

h2 {
  font-family: var(--font-secondary);
  font-weight: bold;
  font-size: 36px;
  line-height: 43px; }

h3 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 22px;
  line-height: 26px; }

H4 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase; }

h5 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72; }

/* --------------------

    PAGE

----------------------- */
a {
  color: var(--color-primary-02);
  text-decoration: none; }

/* --------------------

    PARAGRAPH

----------------------- */
p {
  margin-top: 0px;
  line-height: 160%; }

/* --------------------

    CONTAINER

----------------------- */
.container {
  position: relative;
  padding-left: 8px;
  padding-right: 8px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto; }

.container--flex {
  display: flex;
  flex-wrap: wrap; }

/* --------------------

    BUTTONS

----------------------- */
.btn {
  cursor: pointer;
  display: inline-block;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 9px 12px;
  font-weight: 600; }

.btn--primary {
  border: 1px solid var(--color-primary-01);
  background-color: var(--color-primary-01);
  color: #fff; }

.btn--secondary {
  border: 1px solid #fff;
  color: #fff; }

.btn--large {
  padding: 16px 24px; }

.btn--fluid {
  display: block;
  width: 100%;
  text-align: center; }

/* --------------------

    INPUTS

----------------------- */
.input-group {
  position: relative;
  margin-bottom: 20px; }
  .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase; }

/* Textfield */
.textfield {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--color-gray-04);
  background-position: 8px 8px;
  color: #fff; }

.textfield::placeholder {
  color: var(--color-gray-06); }

.textfield:focus {
  border: 2px solid var(--color-primary-01); }

/* --------------------

    TAGS

----------------------- */
.tag {
  border-radius: 20px;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  margin-right: 4px;
  margin-bottom: 8px;
  background-color: var(--color-gray-04); }

/* --------------------

    HEADER

----------------------- */
.header {
  padding-top: 6px;
  padding-bottom: 16px; }
  @media (min-width: 768px) {
    .header {
      padding: 0; }
      .header .container--flex {
        align-items: center;
        padding: 8px 32px;
        order: 1;
        flex: none; } }

.header__logo {
  display: inline-block;
  flex: 1;
  margin-bottom: 4px; }
  .header__logo img {
    width: 107px; }
  @media (min-width: 768px) {
    .header__logo {
      order: 1;
      flex: none;
      margin-right: 20px; } }

.header__search {
  width: 100%; }
  .header__search input {
    display: block;
    width: 100%;
    padding: 10px 8px 10px 44px;
    border: none;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: var(--color-gray-04);
    //background-image: url(https://www.exotha.com/../img/icon-search.svg);
    background-image: url(https://www.exotha.com/assets/icon-search-a649e7c05bd389472fa2077625213b7fb13ce7b9af342a29bcc0a054d93e9e75.svg);
    background-repeat: no-repeat;
    background-position: 8px 8px;
    color: #fff; }
    .header__search input::placeholder {
      color: #fff; }
    .header__search input:focus {
      border: 2px solid var(--color-primary-01); }
  @media (min-width: 768px) {
    .header__search {
      order: 2;
      max-width: 322px;
      margin-right: 20px; }
      .header__search input {
        border-radius: 40px; } }

/* Navigation */
@media (min-width: 768px) {
  .header__nav {
    flex: 1;
    display: flex;
    order: 3; } }

.nav__quick,
.nav__tabs {
  align-self: center;
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0; }

.nav__quick {
  display: flex;
  padding-top: 10px; }
  .nav__quick li {
    margin-left: 12px; }
  @media (min-width: 768px) {
    .nav__quick {
      padding-top: 0;
      order: 2; } }

.nav__tabs {
  z-index: 10;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  background-color: var(--color-gray-03);
  box-shadow: 0px 8px 31px rgba(0, 0, 0, 0.4); }
  .nav__tabs > li {
    width: 25%; }
    .nav__tabs > li > a {
      display: block;
      padding: 33px 0px 7px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      color: #fff;
      background-repeat: no-repeat;
      background-position: center 6px;
      border-top: 2px solid var(--color-gray-03); }
      .nav__tabs > li > a.icon-home {
        /* background-image: url(https://www.exotha.com/../img/icon-home.svg); } */
        background-image: url(https://www.exotha.com/assets/icon-home-a18f65af8609266fedaf7acf783aa264b2e7f43ebac9e6cc57d82d767250c547.svg); }
      .nav__tabs > li > a.icon-star {
        background-image: url(https://www.exotha.com/../img/icon-star.svg); }
      .nav__tabs > li > a.icon-category {
        background-image: url(https://www.exotha.com/../img/icon-tags.svg); }
      .nav__tabs > li > a.icon-video {
        background-image: url(https://www.exotha.com/../img/icon-video.svg); }
    .nav__tabs > li.is-active > a.icon-home,
    .nav__tabs > li.is-active > a.icon-star,
    .nav__tabs > li.is-active > a.icon-category,
    .nav__tabs > li.is-active > a.icon-video {
      border-top: 2px solid var(--color-primary-01);
      color: var(--color-primary-01); }
    .nav__tabs > li.is-active > a.icon-home {
      background-image: url(https://www.exotha.com/../img/icon-home-actived.svg); }
    .nav__tabs > li.is-active > a.icon-star {
      background-image: url(https://www.exotha.com/../img/icon-star-actived.svg); }
    .nav__tabs > li.is-active > a.icon-category {
      background-image: url(https://www.exotha.com/../img/icon-tags-actived.svg); }
    .nav__tabs > li.is-active > a.icon-video {
      background-image: url(https://www.exotha.com/../img/icon-video-actived.svg); }
  @media (min-width: 768px) {
    .nav__tabs {
      position: static;
      background-color: transparent;
      box-shadow: none;
      width: auto;
      flex: 1;
      order: 1; }
      .nav__tabs > li {
        width: auto;
        margin-right: 12px; }
        .nav__tabs > li > a {
          border-radius: 200px;
          border-top: none;
          font-size: 17px;
          padding: 8px 16px;
          background-image: none !important; }
          .nav__tabs > li > a:hover {
            background-color: var(--color-gray-03); }
        .nav__tabs > li.is-active > a {
          border-top: none !important; } }

/* Dropdown active */
.nav__tabs > li.is-opened .dropdown {
  display: block; }

/* --------------------

    DROPDOWN

----------------------- */
.dropdown {
  z-index: 3;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  border-bottom: 1px solid var(--color-gray-04);
  background-color: var(--color-gray-03); }

.dropdown__header {
  position: relative;
  padding: 16px;
  color: var(--color-primary-03); }

.dropdown__close {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/../img/icon-close-red.svg);
  background-position: center;
  background-repeat: no-repeat; }

.dropdown__header h4 {
  margin-bottom: 0; }

.dropdown__menu {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0; }

.dropdown__menu > li {
  margin-bottom: 1px; }

.dropdown__menu > li > a {
  position: relative;
  display: block;
  color: #fff;
  padding: 16px;
  background-color: var(--color-gray-04); }

.dropdown__menu > li > a::before {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/../img/icon-arrow-right.svg);
  background-position: center;
  background-repeat: no-repeat; }

/* --------------------

    FOOTER

----------------------- */
.footer {
  padding: 40px 8px 48px; }
  @media (min-width: 768px) {
    .footer {
      padding: 72px 0; }
      .footer .container {
        padding-left: 40px;
        padding-right: 40px; } }
  .footer .footer__logo {
    display: block;
    width: 107px;
    margin-bottom: 16px; }
    .footer .footer__logo img {
      width: 100%; }
  .footer .footer__about {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 36px; }
  .footer .footer__links {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 56px;
    list-style: none; }
    .footer .footer__links li {
      margin-bottom: 16px; }
      .footer .footer__links li a {
        color: #fff;
        font-weight: 600; }
  .footer .footer__legal {
    font-size: 14px;
    opacity: 0.8; }
  @media (min-width: 768px) {
    .footer .footer__about {
      max-width: 445px; }
    .footer .footer__links {
      margin-bottom: 0; } }

/* --------------------

    SLIDESHOW

----------------------- */
.slide {
  padding: 0 8px 56px; }
  .slide::before {
    z-index: -1;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 678px;
    background: linear-gradient(180deg, rgba(223, 76, 66, 0) 0%, rgba(223, 76, 66, 0.37) 48.44%, rgba(223, 76, 66, 0) 100%); }
  @media (min-width: 768px) {
    .slide {
      display: flex;
      align-items: center;
      position: relative;
      padding: 0px;
      height: 720px; }
      .slide::before {
        display: none; }
      .slide .container {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px; } }

.slide__img {
  width: 100%;
  padding-top: 60%;
  border-radius: 4px;
  box-shadow: var(--shadow-bigger);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }
  @media (min-width: 768px) {
    .slide__img {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 0;
      border-radius: 0px;
      height: 720px;
      box-shadow: none; } }

.slide__content {
  padding-top: 32px;
  text-align: center; }
  .slide__content h3 {
    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 23px;
    color: var(--color-primary-03);
    margin-bottom: 8px; }
  .slide__content h2 {
    margin-bottom: 12px;
    color: #fff; }
  .slide__content p {
    margin-bottom: 28px;
    opacity: 0.9;
    color: #fff; }
  .slide__content a {
    box-shadow: var(--shadow-bigger); }
  @media (min-width: 768px) {
    .slide__content {
      z-index: 4;
      position: relative;
      text-align: left; }
      .slide__content h3, .slide__content h2, .slide__content p {
        max-width: 600px; }
      .slide__content h3 {
        text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4); }
      .slide__content h2 {
        font-size: 54px;
        line-height: 64px;
        text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); }
      .slide__content p {
        font-size: 20px;
        line-height: 32px;
        text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6); } }

@media (min-width: 768px) {
  .slide__overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(-90deg, rgba(31, 31, 31, 0) 40%, #1F1F1F 100%); }
    .slide__overlay::before, .slide__overlay::after {
      z-index: 1;
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 123px;
      background: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 100%); }
    .slide__overlay::before {
      top: 0;
      transform: rotate(180deg); }
    .slide__overlay::after {
      bottom: 0; } }

/* --------------------

    FEATURED

----------------------- */
.featured {
  padding-bottom: 48px; }
  @media (min-width: 768px) {
    .featured {
      padding-top: 72px;
      padding-bottom: 72px; }
      .featured .container {
        padding-left: 32px;
        padding-right: 32px; } }

.featured-item {
  position: relative;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 8px;
  padding-top: 60%;
  width: 100%; }
  .featured-item .featured-item__content {
    position: absolute;
    left: 0;
    bottom: 14px; }
    .featured-item .featured-item__content h4,
    .featured-item .featured-item__content p {
      padding: 8px 8px 8px 24px;
      box-shadow: var(--shadow-bigger); }
    .featured-item .featured-item__content h4 {
      margin-bottom: 0;
      color: #fff;
      background-color: var(--color-primary-01);
      border-radius: 0px 4px 4px 0px; }
    .featured-item .featured-item__content p {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-gray-01);
      background-color: #fff;
      border-radius: 0px 0px 4px 0px; }
  @media (min-width: 768px) {
    .featured-item {
      margin-left: 8px;
      margin-right: 8px;
      margin-bottom: 0;
      padding-top: 38%;
      width: calc(50% - 16px); }
      .featured-item h4 {
        font-size: 24px;
        line-height: 26px;
        text-transform: none; }
      .featured-item .featured-item__content p {
        font-size: 17px;
        font-weight: 500; } }

/* --------------------

    VIDEO

----------------------- */
.video-item {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 4px;
  background-color: var(--color-gray-03); }
  .video-item .video-item__source {
    display: block;
    margin-bottom: 8px;
    border-radius: 2px;
    overflow: hidden; }
    .video-item .video-item__source img {
      width: 100%;
      display: block; }
  .video-item .video-item__content {
    padding: 4px 12px; }
    .video-item .video-item__content .video-item__title {
      margin-bottom: 4px;
      margin-left: 0px !important;
      text-transform: none !important; }
      .video-item .video-item__content .video-item__title a {
        color: #fff; }
      @media (min-width: 768px) {
        .video-item .video-item__content .video-item__title {
          font-size: 20px; } }
    .video-item .video-item__content .video-item__stars,
    .video-item .video-item__content .video-item__views,
    .video-item .video-item__content .video-item__duration {
      font-size: 14px; }
    .video-item .video-item__content .video-item__stars {
      margin-bottom: 4px; }
    .video-item .video-item__content .video-item__views {
      color: #fff; }
    .video-item .video-item__content .video-item__duration {
      position: absolute;
      top: 16px;
      right: 16px;
      padding: 5px 6px 5px 32px;
      color: var(--color-gray-01);
      border-radius: 20px;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: 7px center;
      background-image: url(https://www.exotha.com/assets/icon-play-a6ef0e6c64de77dd651ab5885daf83c66031d000ffd7a68bc0f5e751cd02611c.svg); }
    .video-item .video-item__content .video-item__premium {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 5px 6px 5px 32px;
      color: var(--color-gray-01);
      border-radius: 20px;
      background-color: black;
      background-repeat: no-repeat;
      background-position: 7px center;
      }

/* --------------------

    POPULAR VIDEOS

----------------------- */
.popular-videos {
  padding: 56px 0px 36px; }
  .popular-videos h3 {
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 19px;
    line-height: 23px;
    text-transform: uppercase;
    margin-left: 8px; }
  .popular-videos .popular-videos__view-all {
    margin-top: 24px;
    width: 100%; }
  @media (min-width: 768px) {
    .popular-videos {
      padding: 72px 0px 52px; }
      .popular-videos h3 {
        font-size: 24px;
        line-height: 26px; }
      .popular-videos .container {
        padding-left: 40px;
        padding-right: 40px; }
      .popular-videos .popular-videos__view-all {
        margin-top: 0px;
        position: absolute;
        top: -4px;
        right: 40px;
        width: auto; } }

.svg-black {
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(340deg) brightness(0) contrast(100%);
}

.banner_add{
  width: 1200px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: auto;
}

.banner_content{
  display: flex;
  height: 252px;
}
/* --------------------

    SIMILAR VIDEOS

----------------------- */
.similar-videos {
  padding-top: 56px;
  padding-bottom: 36px; }
  .similar-videos h3 {
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 19px;
    line-height: 23px;
    text-transform: uppercase;
    margin-left: 8px; }
  .similar-videos .similar-videos__view-all {
    margin-top: 24px;
    width: 100%; }
  @media (min-width: 768px) {
    .similar-videos {
      padding: 72px 0px 52px; }
      .similar-videos h3 {
        font-size: 24px;
        line-height: 26px; }
      .similar-videos .container {
        padding-left: 40px;
        padding-right: 40px; }
      .similar-videos .similar-videos__view-all {
        margin-top: 0px;
        position: absolute;
        top: -4px;
        right: 40px;
        width: auto; } }

/* --------------------

    CATEGORIES FEATURED

----------------------- */
.featured-categories {
  padding-bottom: 56px; }
  .featured-categories h3 {
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 19px;
    line-height: 23px;
    text-transform: uppercase;
    margin-left: 8px; }
  .featured-categories .featured-categories__view-all {
    margin-top: 24px;
    width: 100%; }
  @media (min-width: 768px) {
    .featured-categories {
      padding: 72px 0px 52px; }
      .featured-categories h3 {
        font-size: 24px;
        line-height: 26px; }
      .featured-categories .container {
        padding-left: 40px;
        padding-right: 40px; }
      .featured-categories .featured-categories__view-all {
        margin-top: 0px;
        position: absolute;
        top: -4px;
        right: 40px;
        width: auto; } }

/* --------------------

    CATEGORIES ITEM

----------------------- */
.categories-item {
  display: block;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  color: #fff; }
  .categories-item .categories-item__source {
    display: none; }
  .categories-item .categories-item__content {
    position: relative;
    padding: 8px 16px 12px; }
    .categories-item .categories-item__content::before {
      content: " ";
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
      background-position: center;
      background-repeat: no-repeat; }
    .categories-item .categories-item__content .categories-item__title {
      font-family: var(--font-secondary);
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      text-transform: none !important;
      margin-bottom: 4px;
      margin-left: 0 !important; }
    .categories-item .categories-item__content .categories-item__count {
      opacity: 0.72; }
  @media (min-width: 768px) {
    .categories-item .categories-item__source {
      padding: 8px;
      display: block; }
      .categories-item .categories-item__source img {
        border-radius: 4px;
        width: 100%; }
    .categories-item .categories-item__content::before {
      display: none; } }

/* --------------------

    CTA

----------------------- */
.cta {
  position: relative;
  padding: 0 8px 96px; }
  .cta::before {
    z-index: -1;
    content: " ";
    position: absolute;
    top: -72px;
    left: 0;
    width: 100%;
    height: 678px;
    background: linear-gradient(180deg, rgba(223, 76, 66, 0) 0%, rgba(223, 76, 66, 0.37) 48.44%, rgba(223, 76, 66, 0) 100%); }
  @media (min-width: 768px) {
    .cta {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 720px; }
      .cta::before {
        display: none; }
      .cta::after {
        z-index: 1;
        content: " ";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(31, 31, 31, 0.3) 0%, #1F1F1F 100%);
        bottom: 0; } }
  .cta .cta__img {
    width: 100%;
    padding-top: 60%;
    border-radius: 4px;
    box-shadow: var(--shadow-bigger);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
    @media (min-width: 768px) {
      .cta .cta__img {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 0;
        border-radius: 0px;
        height: 720px;
        box-shadow: none; } }
  .cta .cta__content {
    text-align: center;
    margin-top: 24px; }
    .cta .cta__content h2 {
      margin-bottom: 16px;
      text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); }
    .cta .cta__content p {
      margin-bottom: 24px;
      opacity: 0.9; }
    .cta .cta__content a {
      box-shadow: var(--shadow-bigger); }
    @media (min-width: 768px) {
      .cta .cta__content {
        z-index: 4;
        position: relative; }
        .cta .cta__content h3, .cta .cta__content h2, .cta .cta__content p {
          max-width: 700px; }
        .cta .cta__content h2 {
          font-size: 54px;
          line-height: 64px; }
        .cta .cta__content p {
          font-size: 20px;
          line-height: 32px;
          text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6); } }

/* --------------------

    STARS

----------------------- */
.featured-stars {
  display: none;
  padding-bottom: 56px;
  background-color: var(--color-gray-02); }
  .featured-stars h3 {
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 19px;
    line-height: 23px;
    text-transform: uppercase;
    margin-left: 8px; }
  .featured-stars .stars-item__view-all {
    margin-top: 24px;
    width: 100%; }
  @media (min-width: 768px) {
    .featured-stars {
      display: block;
      padding: 72px 0px 52px; }
      .featured-stars h3 {
        font-size: 24px;
        line-height: 26px; }
      .featured-stars .container {
        padding-left: 40px;
        padding-right: 40px; }
      .featured-stars .stars-item__view-all {
        margin-top: 0px;
        position: absolute;
        top: -4px;
        right: 40px;
        width: auto; } }

/* --------------------

    STARS ITEM

----------------------- */
.stars-item {
  display: block;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  color: #fff; }
  .stars-item .stars-item__source {
    display: none; }
  .stars-item .stars-item__content {
    position: relative;
    padding: 8px 16px 12px; }
    .stars-item .stars-item__content::before {
      content: " ";
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
      background-position: center;
      background-repeat: no-repeat; }
    .stars-item .stars-item__content .stars-item__title {
      font-family: var(--font-secondary);
      font-weight: 500;
      font-size: 22px;
      line-height: 26px;
      text-transform: none !important;
      margin-bottom: 4px;
      margin-left: 0 !important; }
    .stars-item .stars-item__content .stars-item__count {
      opacity: 0.72; }
  @media (min-width: 768px) {
    .stars-item .stars-item__source {
      padding: 8px;
      display: block; }
      .stars-item .stars-item__source img {
        border-radius: 4px;
        width: 100%; }
    .stars-item .stars-item__content::before {
      display: none; } }

/* --------------------

    ENTER

----------------------- */
.enter {
  display: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-03);
  padding: 20% 48px 48px;
  overflow-y: scroll; }
  .enter .enter__logo {
    display: block;
    width: 156px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px; }
  .enter .enter__close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 40px;
    background-color: var(--color-gray-04);
    background-image: url(https://www.exotha.com/../img/icon-close-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px; }
  .enter .enter__divider {
    position: relative;
    margin-top: 40px;
    margin-bottom: 38px;
    text-align: center; }
    .enter .enter__divider h4 {
      position: relative;
      display: inline-block;
      padding: 0 8px;
      margin-bottom: 0;
      font-weight: 600;
      font-size: 13px;
      line-height: 16px;
      text-align: center;
      text-transform: uppercase;
      color: var(--color-gray-06);
      background-color: var(--color-gray-03); }
    .enter .enter__divider::before {
      content: " ";
      display: block;
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: var(--color-gray-05); }
  .enter .enter__form .change-password {
    display: block;
    margin-top: 6px;
    color: var(--color-primary-03);
    font-size: 13px; }
  @media (min-width: 768px) {
    .enter {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3); }
      .enter .enter__wrapper {
        position: fixed;
        padding: 48px 48px;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
        border-radius: 6px;
        background-color: var(--color-gray-03);
        box-shadow: var(--shadow-bigger); } }

/* --------------------

    VIDEOS DETAIL

----------------------- */
.video-detail {
  display: block; }
  @media (min-width: 768px) {
    .video-detail .container {
      padding-left: 40px;
      padding-right: 40px; } }

/* Video */
.video-detail__source {
  order: 1;
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px; }
  .video-detail__source video {
    width: 100%; }
  @media (min-width: 960px) {
    .video-detail__source {
      width: 100%;
      margin-left: 0;
      margin-right: 0; } }

/* Title */
.video-detail__head {
  flex: 1;
  order: 2;
  padding: 16px;
  margin-left: -8px;
  margin-right: -8px; }
  .video-detail__head h1 {
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 8px; }
  .video-detail__head p {
    color: var(--color-gray-05);
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    margin-bottom: 0; }
  @media (min-width: 960px) {
    .video-detail__head {
      width: auto;
      margin-left: 0;
      margin-right: 0; }
      .video-detail__head h1 {
        font-size: 28px;
        line-height: 32px; } }

/* Specs */
.video-detail__specs {
  display: flex;
  order: 4;
  justify-content: space-between;
  padding: 16px;
  width: calc(100% + 16px);
  margin: 0px -8px;
  border-top: 1px solid var(--color-gray-04);
  border-bottom: 1px solid var(--color-gray-04);
  list-style: none; }
  .video-detail__specs li:nth-child(2) {
    text-align: center; }
  .video-detail__specs li:last-child {
    text-align: right; }
  .video-detail__specs li .info__value {
    color: var(--color-primary-03);
    font-weight: 400;
    margin-bottom: 2px; }
  .video-detail__specs li .info__label {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase; }
  @media (min-width: 960px) {
    .video-detail__specs {
      order: 5;
      margin: 0px;
      width: 100%;
      justify-content: flex-start; }
      .video-detail__specs li {
        text-align: left !important;
        margin-right: 48px; } }

/* Plan */
.video-detail__plan {
  order: 5;
  width: calc(100% + 16px);
  padding: 16px;
  margin-left: -8px;
  margin-right: -8px; }
  @media (min-width: 960px) {
    .video-detail__plan {
      order: 4;
      width: auto; } }

.video-detail__favorite {
  order: 3;
  padding: 16px; }

/* Tabs */
.video-detail__tabs {
  order: 6;
  width: 100%;
  margin-top: 16px;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  margin-bottom: 24px; }
  .video-detail__tabs .tabs {
    display: flex;
    border-bottom: 1px solid var(--color-gray-04); }
    .video-detail__tabs .tabs .tabs__item {
      position: relative;
      padding: 15px 16px 17px;
      border: none;
      background-color: transparent;
      color: var(--color-gray-05);
      font-weight: 600;
      font-size: 13px;
      line-height: 16px;
      text-transform: uppercase; }
      .video-detail__tabs .tabs .tabs__item.is-active {
        color: #fff; }
        .video-detail__tabs .tabs .tabs__item.is-active::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: -1px;
          height: 2px;
          width: 100%;
          background-color: var(--color-primary-01); }
  .video-detail__tabs .tabs-body {
    display: none;
    padding: 16px; }
    .video-detail__tabs .tabs-body p {
      font-weight: 400;
      font-size: 14px;
      line-height: 160%;
      color: var(--color-gray-06); }
    .video-detail__tabs .tabs-body.is-active {
      display: block; }
  @media (min-width: 960px) {
    .video-detail__tabs {
      margin-right: 16px;
      flex: 1;
      order: 6; } }

/* Stars */
.video-detail__stars {
  order: 7;
  width: 100%;
  margin-top: 0;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  margin-bottom: 24px; }
  .video-detail__stars .stars__head {
    border-bottom: 1px solid var(--color-gray-04);
    padding: 15px 16px 17px; }
    .video-detail__stars .stars__head h4 {
      color: #fff;
      font-weight: 600;
      font-size: 13px;
      line-height: 16px;
      text-transform: uppercase;
      margin-bottom: 0; }
  .video-detail__stars .stars__item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-gray-04); }
    .video-detail__stars .stars__item:last-child {
      border-bottom: none; }
    .video-detail__stars .stars__item .item__img {
      width: 112px;
      border-radius: 4px;
      height: 112px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
    .video-detail__stars .stars__item .item__info {
      padding-left: 24px; }
      .video-detail__stars .stars__item .item__info h4 {
        font-weight: 400;
        margin-bottom: 12px;
        text-transform: none; }
      .video-detail__stars .stars__item .item__info a {
        color: var(--color-primary-03);
        font-weight: 600; }
  @media (min-width: 960px) {
    .video-detail__stars {
      order: 7;
      width: 40%;
      margin-top: 16px; } }

/* Shots */
.video-detail__shots {
  order: 8;
  width: 100%;
  margin-top: 0;
  background-color: var(--color-gray-03);
  border-radius: 4px; }
  .video-detail__shots .shots__head {
    position: relative;
    border-bottom: 1px solid var(--color-gray-04);
    padding: 15px 16px 17px; }
    .video-detail__shots .shots__head h4 {
      color: #fff;
      font-weight: 600;
      font-size: 13px;
      line-height: 16px;
      text-transform: uppercase;
      margin-bottom: 0; }
    .video-detail__shots .shots__head .shots__controls {
      display: flex;
      position: absolute;
      top: 4px;
      right: 4px; }
      .video-detail__shots .shots__head .shots__controls .prev,
      .video-detail__shots .shots__head .shots__controls .next {
        width: 40px;
        height: 40px;
        display: block;
        border-radius: 4px;
        background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 24px;
        border: none; }
        .video-detail__shots .shots__head .shots__controls .prev:focus,
        .video-detail__shots .shots__head .shots__controls .next:focus {
          background-color: var(--color-gray-04); }
      .video-detail__shots .shots__head .shots__controls .prev {
        transform: rotate(180deg); }
  .video-detail__shots .shots__slider {
    margin-top: 0;
    margin-bottom: 0;
    padding: 16px 16px 8px;
    list-style: none;
    overflow: hidden; }
    .video-detail__shots .shots__slider .shots__item {
      width: 40%;
      height: auto;
      margin-right: 16px; }
      .video-detail__shots .shots__slider .shots__item img {
        border-radius: 4px;
        display: block;
        width: 100%; }
  @media (min-width: 960px) {
    .video-detail__shots {
      order: 7; } }

/* --------------------

    TEXT ALIGN

----------------------- */
.text-align--center {
  text-align: center; }

/*# sourceMappingURL=main.css.map */
.div-adv-center{
  text-align: center;
}
.div-adv-center-desktop{
  text-align: center;
  padding-top: 60px;
}

/* --------------------

    PAGY

----------------------- */

.page {
    padding: 4px 12px;
    text-decoration: none;
    background-color: var(--color-gray-02);
    border: 1px solid #888888;
}

.text_init {
  padding-top: 10px;
}

.long_description{
  display: none;
}

.text_description{
  font-size: 42px;
}

.footer .footer__logo_red_instagram {
    display: block;
    width: 44px;
    padding-top: 3px;
    margin-bottom: 16px; }
    .footer .footer__logo_red_instagram img {
      width: 100%; }

.footer .footer__logo_red_tik_tok {
    display: block;
    width: 50px;
    margin-bottom: 16px; }
    .footer .footer__logo_red_tik_tok img {
      width: 100%; }
@charset "UTF-8";
/* ==============================================================
   EXOTHA · COLORS (legacy + alineadas a la línea oficial)
   --------------------------------------------------------------
   IMPORTANTE: Las variables --color-* están aquí por compatibilidad
   con el código existente (197 usos en el proyecto). Sus VALORES se
   actualizaron para alinear con la línea gráfica oficial — magenta
   #ff0074 en vez del coral #DF4C42 anterior, que nunca se usó en
   producción y generaba mismatch visual.

   Para vistas nuevas o refactorizadas usa los tokens --exo-* que
   viven en _settings.tokens.scss (sistema completo).
   ============================================================== */
/* line 14, app/assets/stylesheets/_settings.colors.scss */
:root {
  /* ----- Grays (legacy · sin cambios) ----- */
  --color-gray-01: #1F1F1F;
  --color-gray-02: #282828;
  --color-gray-03: #363636;
  --color-gray-04: #535353;
  --color-gray-05: #949494;
  --color-gray-06: #C9C9C9;
  /* ----- Primary (legacy · ahora alineado a magenta brand) ----- */
  --color-primary-01: #ff0074;
  /* antes #DF4C42 (coral) — ahora magenta brand */
  --color-primary-02: #ff3d9a;
  /* antes #FF746A (salmón) — ahora magenta light */
  --color-primary-03: #b000ff;
  /* antes #FFC6C6 (peach) — ahora purple electric */
  /* ----- Fonts (sin cambios) ----- */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Rubik', sans-serif;
  /* ----- Shadows (legacy) ----- */
  --shadow-bigger: 0px 16px 31px rgba(0, 0, 0, 0.4);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · DESIGN TOKENS (sistema completo)
   -----------------------------------------------------------------
   Línea gráfica oficial basada en el landing aprobado.
   Paleta: magenta #ff0074 + púrpura #b000ff + warm-black #0a0a0a.
   Tipografía: Montserrat (display) + Rubik (body).

   Convención: prefix --exo-* para todos los tokens nuevos.
   Los --color-* legacy en _settings.colors.scss siguen funcionando
   por compatibilidad con código existente (197 usos).
   ================================================================= */
/* -----------------------------------------------------------------
   SCSS variables (para @media queries y operaciones de build)
   ----------------------------------------------------------------- */
/* line 23, app/assets/stylesheets/_settings.tokens.scss */
:root {
  /* ===============================================================
     PALETTE · Brand magenta
     =============================================================== */
  --exo-magenta-50:  #fff0f7;
  --exo-magenta-100: #ffd4e8;
  --exo-magenta-200: #ffabd0;
  --exo-magenta-300: #ff7eb8;
  --exo-magenta-400: #ff52a0;
  --exo-magenta-500: #ff0074;
  /* primary brand */
  --exo-magenta-600: #d80064;
  --exo-magenta-700: #a8004d;
  --exo-magenta-800: #780036;
  --exo-magenta-900: #4e0023;
  --exo-magenta-950: #2a0014;
  /* ===============================================================
     PALETTE · Brand púrpura electric (acento secundario)
     =============================================================== */
  --exo-purple-50:  #fbf3ff;
  --exo-purple-100: #f5e3ff;
  --exo-purple-200: #ecc8ff;
  --exo-purple-300: #dca0ff;
  --exo-purple-400: #c673ff;
  --exo-purple-500: #b000ff;
  /* electric purple */
  --exo-purple-600: #9000d8;
  --exo-purple-700: #7000a8;
  --exo-purple-800: #500078;
  --exo-purple-900: #34004e;
  --exo-purple-950: #1c002a;
  /* ===============================================================
     PALETTE · Neutral (warm-black con tinte sutil)
     =============================================================== */
  --exo-bg-base:        #0a0a0a;
  /* fondo principal */
  --exo-bg-base-2:      #12050d;
  /* tinte magenta sutil para gradients */
  --exo-bg-base-3:      #0d0812;
  /* tinte púrpura sutil para gradients */
  --exo-surface:        #111111;
  /* cards, secciones */
  --exo-surface-2:      #1a1a1a;
  /* surface elevada */
  --exo-surface-hover:  rgba(255, 255, 255, 0.04);
  --exo-surface-active: rgba(255, 255, 255, 0.08);
  --exo-surface-glass:  rgba(10, 10, 10, 0.65);
  /* ===============================================================
     SEMANTIC · Text
     =============================================================== */
  --exo-text:           #f5f5f5;
  --exo-text-muted:     rgba(255, 255, 255, 0.55);
  --exo-text-subtle:    rgba(255, 255, 255, 0.40);
  --exo-text-faint:     rgba(255, 255, 255, 0.25);
  --exo-text-on-brand:  #ffffff;
  --exo-text-link:      var(--exo-magenta-300);
  /* ===============================================================
     SEMANTIC · Border
     =============================================================== */
  --exo-border:         rgba(255, 255, 255, 0.06);
  --exo-border-strong:  rgba(255, 255, 255, 0.12);
  --exo-border-brand:   rgba(255, 0, 116, 0.25);
  --exo-border-focus:   var(--exo-magenta-400);
  /* ===============================================================
     SEMANTIC · Status
     =============================================================== */
  --exo-success:  #22c55e;
  --exo-warning:  #eab308;
  --exo-danger:   #ef4444;
  --exo-info:     #3b82f6;
  --exo-live:     #ef4444;
  /* alias para streams en vivo */
  /* ===============================================================
     BRAND GRADIENTS (firma visual)
     =============================================================== */
  --exo-gradient-brand: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  --exo-gradient-brand-purple: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%);
  --exo-gradient-text-brand: linear-gradient(135deg, #ffffff 0%, #ff3d9a 50%, #ffffff 100%);
  --exo-gradient-hero-bg: linear-gradient(135deg, #0a0a0a 0%, #12050d 25%, #0a0a0a 50%, #0d0812 75%, #0a0a0a 100%);
  --exo-gradient-veil: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
  /* ===============================================================
     SPACING (escala 4px / 8px)
     =============================================================== */
  --exo-space-0:   0;
  --exo-space-1:   0.25rem;
  /* 4 */
  --exo-space-2:   0.5rem;
  /* 8 */
  --exo-space-3:   0.75rem;
  /* 12 */
  --exo-space-4:   1rem;
  /* 16 */
  --exo-space-5:   1.25rem;
  /* 20 */
  --exo-space-6:   1.5rem;
  /* 24 */
  --exo-space-7:   1.75rem;
  /* 28 */
  --exo-space-8:   2rem;
  /* 32 */
  --exo-space-10:  2.5rem;
  /* 40 */
  --exo-space-12:  3rem;
  /* 48 */
  --exo-space-14:  3.5rem;
  /* 56 */
  --exo-space-16:  4rem;
  /* 64 */
  --exo-space-20:  5rem;
  /* 80 — section padding standard */
  --exo-space-24:  6rem;
  /* 96 */
  --exo-space-32:  8rem;
  /* 128 */
  --exo-space-40:  10rem;
  /* 160 */
  /* Section paddings (fluid) */
  --exo-section-y:    clamp(4rem, 8vw, 7rem);
  /* alias compatible con landing */
  --exo-section-y-sm: clamp(2.5rem, 5vw, 4rem);
  /* ===============================================================
     TYPOGRAPHY · Familias (alias semánticos)
     =============================================================== */
  --exo-font-display: 'Montserrat', sans-serif;
  --exo-font-body:    'Rubik', sans-serif;
  --exo-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Font sizes (clamp para fluidez) */
  --exo-fs-hero:      clamp(40px, 8vw, 88px);
  /* hero title del landing */
  --exo-fs-h1:        clamp(32px, 5vw, 52px);
  --exo-fs-h2:        clamp(28px, 4.5vw, 44px);
  /* section titles */
  --exo-fs-h3:        clamp(22px, 3vw, 32px);
  --exo-fs-h4:        clamp(18px, 2vw, 22px);
  --exo-fs-h5:        17px;
  --exo-fs-h6:        15px;
  --exo-fs-body-lg:   clamp(16px, 2vw, 18px);
  --exo-fs-body:      15px;
  --exo-fs-body-sm:   13px;
  --exo-fs-caption:   12px;
  --exo-fs-eyebrow:   11px;
  /* Line heights */
  --exo-lh-tight:     1.05;
  --exo-lh-snug:      1.15;
  --exo-lh-normal:    1.45;
  --exo-lh-relaxed:   1.65;
  --exo-lh-loose:     1.75;
  /* Letter spacing */
  --exo-track-tight:    -0.02em;
  --exo-track-normal:   0;
  --exo-track-wide:     0.04em;
  --exo-track-wider:    0.08em;
  --exo-track-widest:   0.18em;
  /* eyebrows uppercase del landing */
  /* Font weights */
  --exo-fw-regular:   400;
  --exo-fw-medium:    500;
  --exo-fw-semibold:  600;
  --exo-fw-bold:      700;
  --exo-fw-black:     800;
  /* ===============================================================
     RADIUS
     =============================================================== */
  --exo-radius-sm:   4px;
  --exo-radius-md:   8px;
  --exo-radius-lg:   12px;
  /* botones del landing */
  --exo-radius-xl:   16px;
  --exo-radius-2xl:  20px;
  /* cards del landing */
  --exo-radius-3xl:  28px;
  /* for-creators box */
  --exo-radius-pill: 50px;
  /* badge del landing */
  --exo-radius-full: 9999px;
  /* ===============================================================
     SHADOWS · neutral elevation
     =============================================================== */
  --exo-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --exo-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --exo-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  --exo-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.55);
  --exo-shadow-5: 0 32px 80px rgba(0, 0, 0, 0.65);
  --exo-shadow-bigger: var(--shadow-bigger);
  /* alias legacy */
  /* GLOWS · efecto neón brand (firma del landing) */
  --exo-glow-magenta-sm: 0 0 12px rgba(255, 0, 116, 0.4);
  --exo-glow-magenta:    0 4px 24px rgba(255, 0, 116, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --exo-glow-magenta-lg: 0 8px 40px rgba(255, 0, 116, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --exo-glow-purple:     0 0 24px rgba(180, 0, 255, 0.35), 0 0 48px rgba(180, 0, 255, 0.18);
  --exo-glow-mixed:      0 4px 24px rgba(255, 0, 116, 0.30), 0 0 48px rgba(180, 0, 255, 0.15);
  --exo-glow-card-hover: 0 16px 48px rgba(255, 0, 116, 0.20), 0 0 80px rgba(255, 0, 116, 0.06);
  /* Filter glows (para drop-shadow del logo y elementos hero) */
  --exo-filter-logo-glow: drop-shadow(0 0 16px rgba(255, 0, 116, 0.45)) drop-shadow(0 0 32px rgba(180, 0, 255, 0.25));
  --exo-filter-logo-glow-lg: drop-shadow(0 0 22px rgba(255, 0, 116, 0.7)) drop-shadow(0 0 48px rgba(180, 0, 255, 0.4));
  /* ===============================================================
     Z-INDEX (escala disciplinada · NO usar valores fuera de aquí)
     =============================================================== */
  --exo-z-hide:           -1;
  --exo-z-base:           1;
  --exo-z-raised:         10;
  --exo-z-dropdown:       1000;
  --exo-z-sticky:         1100;
  --exo-z-overlay:        1500;
  --exo-z-modal-backdrop: 2000;
  --exo-z-modal:          2100;
  --exo-z-popover:        2500;
  --exo-z-toast:          3000;
  --exo-z-tooltip:        4000;
  /* ===============================================================
     MOTION · durations + easings
     =============================================================== */
  --exo-dur-instant:    100ms;
  --exo-dur-fast:       150ms;
  --exo-dur-base:       250ms;
  --exo-dur-slow:       400ms;
  --exo-dur-slower:     600ms;
  --exo-dur-cinematic:  800ms;
  /* reveals al scroll del landing */
  /* Easings (los del landing aprobado) */
  --exo-ease-noir:       cubic-bezier(0.16, 1, 0.3, 1);
  /* firma del landing */
  --exo-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  /* botones, transforms con peso */
  --exo-ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  /* default hover */
  /* ===============================================================
     BLUR (backdrop / surface)
     =============================================================== */
  --exo-blur-sm: 8px;
  --exo-blur-md: 16px;
  --exo-blur-lg: 20px;
  /* nav glass */
  --exo-blur-xl: 40px;
  /* ===============================================================
     LAYOUT
     =============================================================== */
  --exo-container-max:    1400px;
  --exo-container-narrow: 1200px;
  /* landing nav */
  --exo-sidebar-left:     240px;
  --exo-sidebar-right:    320px;
  --exo-header-h:         80px;
  --exo-mobile-nav-h:     80px;
  --exo-grid-gap:         clamp(1rem, 2vw, 2rem);
  /* ===============================================================
     BACKWARDS-COMPAT BRIDGE
     ---------------------------------------------------------------
     Aliases para que vistas que aún usan --static-* del layout
     legacy puedan resolverse desde aquí también.
     =============================================================== */
  --static-bg:           var(--exo-bg-base);
  --static-surface:      var(--exo-surface);
  --static-surface-2:    var(--exo-surface-2);
  --static-border:       var(--exo-border);
  --static-text:         var(--exo-text);
  --static-text-muted:   #8e8e8e;
  --static-accent:       var(--exo-magenta-500);
  --static-accent-light: var(--exo-magenta-400);
}

/* -----------------------------------------------------------------
   REDUCED MOTION · accesibilidad
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* line 273, app/assets/stylesheets/_settings.tokens.scss */
  :root {
    --exo-dur-instant:   0.01ms;
    --exo-dur-fast:      0.01ms;
    --exo-dur-base:      0.01ms;
    --exo-dur-slow:      0.01ms;
    --exo-dur-slower:    0.01ms;
    --exo-dur-cinematic: 0.01ms;
  }
}
/* --------------------

    BOX-SIZING

----------------------- */
/* line 7, app/assets/stylesheets/_generic.box-sizing.scss */
*, *::before, *::after {
  box-sizing: border-box;
}
/* --------------------

    PAGE

----------------------- */
/* line 7, app/assets/stylesheets/_elements.page.scss */
body {
  background-color: var(--color-gray-01);
  font-family: var(--font-primary);
  font-size: 17px;
  color: white;
  padding-bottom: 56px;
}

/* line 15, app/assets/stylesheets/_elements.page.scss */
*:focus {
  outline: none;
}
/* --------------------

    HEADING

----------------------- */
/* line 7, app/assets/stylesheets/_elements.heading.scss */
h1, h2, h3, h4, h5 {
  margin-top: 0;
  margin-bottom: 24px;
}

/* line 12, app/assets/stylesheets/_elements.heading.scss */
h1 {
  font-family: var(--font-secondary);
  font-weight: bold;
  font-size: 54px;
  line-height: 64px;
}

/* line 19, app/assets/stylesheets/_elements.heading.scss */
h2 {
  font-family: var(--font-secondary);
  font-weight: bold;
  font-size: 36px;
  line-height: 43px;
}

/* line 26, app/assets/stylesheets/_elements.heading.scss */
h3 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
}

/* line 33, app/assets/stylesheets/_elements.heading.scss */
H4 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
}

/* line 41, app/assets/stylesheets/_elements.heading.scss */
h5 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}
/* --------------------

    PAGE

----------------------- */
/* line 7, app/assets/stylesheets/_elements.links.scss */
a {
  color: var(--color-primary-02);
  text-decoration: none;
}
/* --------------------

    PARAGRAPH

----------------------- */
/* line 7, app/assets/stylesheets/_elements.paragraph.scss */
p {
  margin-top: 0px;
  line-height: 160%;
}
/* --------------------

    CONTAINER

----------------------- */
/* line 7, app/assets/stylesheets/_components.container.scss */
.container {
  position: relative;
  padding-left: 8px;
  padding-right: 8px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* line 16, app/assets/stylesheets/_components.container.scss */
.container--flex {
  display: flex;
  flex-wrap: wrap;
}
/* --------------------

    BUTTONS

----------------------- */
/* line 7, app/assets/stylesheets/_components.buttons.scss */
.btn {
  cursor: pointer;
  display: inline-block;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 9px 12px;
  font-weight: 600;
}

/* line 17, app/assets/stylesheets/_components.buttons.scss */
.btn--primary {
  border: 1px solid var(--color-primary-01);
  background-color: var(--color-primary-01);
  color: #fff;
}

/* line 23, app/assets/stylesheets/_components.buttons.scss */
.btn--secondary {
  border: 1px solid #fff;
  color: #fff;
}

/* line 28, app/assets/stylesheets/_components.buttons.scss */
.btn--large {
  padding: 16px 24px;
}

/* line 32, app/assets/stylesheets/_components.buttons.scss */
.btn--fluid {
  display: block;
  width: 100%;
  text-align: center;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · BUTTONS (sistema oficial)
   -----------------------------------------------------------------
   Variantes: primary · ghost · secondary · danger · icon
   Tamaños:   sm · md (default) · lg · xl
   Estados:   default · hover · focus-visible · active · disabled · loading

   Coexiste con .btn (legacy en _components.buttons.scss) y .stg-btn
   (legacy en settings.scss). Vistas migradas usan .exo-btn-*.

   Estilos basados en el landing aprobado.
   ================================================================= */
/* -----------------------------------------------------------------
   BASE · todos los .exo-btn comparten
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn,
.exo-btn-primary,
.exo-btn-ghost,
.exo-btn-secondary,
.exo-btn-danger,
.exo-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-2);
  padding: var(--exo-space-4) calc(var(--exo-space-8) + var(--exo-space-1));
  /* 16px 36px */
  border: 1px solid transparent;
  border-radius: var(--exo-radius-lg);
  background: transparent;
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-body);
  font-weight: var(--exo-fw-bold);
  letter-spacing: 0.3px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  position: relative;
  transition: transform var(--exo-dur-fast) var(--exo-ease-out-quart), background var(--exo-dur-base) var(--exo-ease-out-quart), color var(--exo-dur-base) var(--exo-ease-out-quart), border-color var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-base) var(--exo-ease-out-quart);
  /* Icon slot (svg dentro del botón) */
  /* Estados generales */
  /* Loading state */
}

/* line 52, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn > svg,
.exo-btn-primary > svg,
.exo-btn-ghost > svg,
.exo-btn-secondary > svg,
.exo-btn-danger > svg,
.exo-btn-icon > svg {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
  transition: transform var(--exo-dur-base) var(--exo-ease-spring);
}

/* line 60, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn:focus-visible,
.exo-btn-primary:focus-visible,
.exo-btn-ghost:focus-visible,
.exo-btn-secondary:focus-visible,
.exo-btn-danger:focus-visible,
.exo-btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--exo-bg-base), 0 0 0 4px var(--exo-magenta-400);
}

/* line 65, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn:disabled, .exo-btn[aria-disabled='true'],
.exo-btn-primary:disabled,
.exo-btn-primary[aria-disabled='true'],
.exo-btn-ghost:disabled,
.exo-btn-ghost[aria-disabled='true'],
.exo-btn-secondary:disabled,
.exo-btn-secondary[aria-disabled='true'],
.exo-btn-danger:disabled,
.exo-btn-danger[aria-disabled='true'],
.exo-btn-icon:disabled,
.exo-btn-icon[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

/* line 73, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn.is-loading,
.exo-btn-primary.is-loading,
.exo-btn-ghost.is-loading,
.exo-btn-secondary.is-loading,
.exo-btn-danger.is-loading,
.exo-btn-icon.is-loading {
  color: transparent;
  pointer-events: none;
}

/* line 77, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn.is-loading::before,
.exo-btn-primary.is-loading::before,
.exo-btn-ghost.is-loading::before,
.exo-btn-secondary.is-loading::before,
.exo-btn-danger.is-loading::before,
.exo-btn-icon.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--exo-text);
  animation: exo-btn-spin 720ms linear infinite;
}

/* -----------------------------------------------------------------
   VARIANT · PRIMARY (gradient brand + glow + sheen)
   ----------------------------------------------------------------- */
/* line 97, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary {
  background: var(--exo-gradient-brand);
  color: var(--exo-text-on-brand);
  box-shadow: var(--exo-glow-magenta);
  overflow: hidden;
  /* contiene el sheen ::after dentro del border-radius */
  /* Sheen sweep que cruza al hover (firma del landing) */
}

/* line 104, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform var(--exo-dur-cinematic) var(--exo-ease-noir);
  pointer-events: none;
}

/* line 120, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--exo-glow-magenta-lg);
  /* Trailing arrow nudge */
}

/* line 124, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary:hover:not(:disabled):not(.is-loading)::after {
  transform: translateX(120%);
}

/* line 127, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary:hover:not(:disabled):not(.is-loading) > svg:last-child {
  transform: translateX(3px);
}

/* line 130, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-primary:active:not(:disabled):not(.is-loading) {
  transform: translateY(0) scale(1);
  transition-duration: var(--exo-dur-instant);
}

/* -----------------------------------------------------------------
   VARIANT · GHOST (transparente con border + backdrop blur)
   ----------------------------------------------------------------- */
/* line 140, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--exo-text-muted);
  border-color: var(--exo-border-strong);
  font-weight: var(--exo-fw-semibold);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 148, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-ghost:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-2px);
  color: var(--exo-text);
  border-color: var(--exo-border-brand);
  background: rgba(255, 0, 116, 0.08);
}

/* line 155, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-ghost:active:not(:disabled):not(.is-loading) {
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   VARIANT · SECONDARY (surface elevada · neutral)
   ----------------------------------------------------------------- */
/* line 164, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-secondary {
  background: var(--exo-surface-2);
  color: var(--exo-text);
  border-color: var(--exo-border-strong);
}

/* line 169, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-secondary:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-2px);
  background: var(--exo-surface);
  border-color: var(--exo-border-brand);
  box-shadow: var(--exo-shadow-2);
}

/* line 176, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-secondary:active:not(:disabled):not(.is-loading) {
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   VARIANT · DANGER (rojo cálido)
   ----------------------------------------------------------------- */
/* line 185, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-danger {
  background: var(--exo-danger);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* line 190, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-danger:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-2px);
  background: #dc2626;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45);
}

/* line 196, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-danger:active:not(:disabled):not(.is-loading) {
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   VARIANT · ICON (cuadrado/circular para iconos solos)
   ----------------------------------------------------------------- */
/* line 205, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--exo-surface-2);
  color: var(--exo-text-muted);
  border-color: var(--exo-border-strong);
  border-radius: var(--exo-radius-full);
  /* Variante brand (gradient + glow) para FABs y CTAs flotantes */
}

/* line 214, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon > svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* line 219, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon:hover:not(:disabled):not(.is-loading) {
  background: var(--exo-surface);
  color: var(--exo-text);
  border-color: var(--exo-border-brand);
  transform: translateY(-2px);
}

/* line 226, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon:active:not(:disabled):not(.is-loading) {
  transform: translateY(0);
}

/* line 231, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon.exo-btn-icon--brand {
  background: var(--exo-gradient-brand);
  color: var(--exo-text-on-brand);
  border-color: transparent;
  box-shadow: var(--exo-glow-magenta);
}

/* line 237, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-icon.exo-btn-icon--brand:hover:not(:disabled):not(.is-loading) {
  box-shadow: var(--exo-glow-magenta-lg);
}

/* -----------------------------------------------------------------
   SIZES · sm / md (default) / lg / xl
   ----------------------------------------------------------------- */
/* line 247, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-sm {
  padding: var(--exo-space-3) var(--exo-space-5);
  /* 12px 20px */
  font-size: var(--exo-fs-body-sm);
  border-radius: var(--exo-radius-md);
}

/* line 252, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-sm > svg {
  width: 1rem;
  height: 1rem;
}

/* line 254, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-sm.exo-btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

/* line 257, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-lg {
  padding: var(--exo-space-5) var(--exo-space-12);
  /* 20px 48px */
  font-size: var(--exo-fs-body-lg);
  font-weight: var(--exo-fw-bold);
  letter-spacing: 0.04em;
}

/* line 263, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-lg.exo-btn-icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
}

/* line 266, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn-xl {
  padding: var(--exo-space-6) var(--exo-space-14);
  /* 24px 56px */
  font-size: 18px;
  font-weight: var(--exo-fw-bold);
  letter-spacing: 0.06em;
}

/* -----------------------------------------------------------------
   SHAPE modifiers
   ----------------------------------------------------------------- */
/* line 277, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn--pill {
  border-radius: var(--exo-radius-full);
}

/* line 278, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn--square {
  border-radius: var(--exo-radius-md);
}

/* line 279, app/assets/stylesheets/_components.exo-buttons.scss */
.exo-btn--block {
  display: flex;
  width: 100%;
}

/* -----------------------------------------------------------------
   KEYFRAME · loading spinner
   ----------------------------------------------------------------- */
@keyframes exo-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CARDS (sistema oficial)
   -----------------------------------------------------------------
   feed-card · creator-card · content-tile · feature-card · stat-card
   Hover states con peso · glow brand · transiciones noir.
   ================================================================= */
/* -----------------------------------------------------------------
   CARD BASE
   ----------------------------------------------------------------- */
/* line 12, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card {
  position: relative;
  background: var(--exo-surface);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--exo-dur-base) var(--exo-ease-out-quart), transform var(--exo-dur-slow) var(--exo-ease-noir), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 24, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card--interactive {
  cursor: pointer;
}

/* line 27, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--exo-border-strong);
  box-shadow: var(--exo-shadow-3);
}

/* line 33, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card--interactive:focus-visible {
  outline: none;
  border-color: var(--exo-magenta-400);
  box-shadow: 0 0 0 2px var(--exo-bg-base), 0 0 0 4px var(--exo-magenta-400);
}

/* line 40, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card--glass {
  background: var(--exo-surface-glass);
  backdrop-filter: blur(var(--exo-blur-md)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--exo-blur-md)) saturate(150%);
  border-color: var(--exo-border-strong);
}

/* line 47, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card__header, .exo-card__body, .exo-card__footer {
  padding: var(--exo-space-6);
}

/* line 53, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exo-space-4);
  border-bottom: 1px solid var(--exo-border);
}

/* line 61, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exo-space-4);
  border-top: 1px solid var(--exo-border);
}

/* line 69, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card__title {
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h5);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-tight);
  line-height: var(--exo-lh-snug);
}

/* line 78, app/assets/stylesheets/_components.exo-cards.scss */
.exo-card__subtitle {
  color: var(--exo-text-subtle);
  font-size: var(--exo-fs-body-sm);
  line-height: var(--exo-lh-relaxed);
}

/* -----------------------------------------------------------------
   CREATOR CARD (galería editorial · scroll snap)
   ----------------------------------------------------------------- */
/* line 89, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  text-align: center;
  padding: var(--exo-space-7) var(--exo-space-4) var(--exo-space-6);
  background: var(--exo-surface);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-2xl);
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), border-color var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 106, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08), rgba(180, 0, 255, 0.04));
  opacity: 0;
  z-index: -1;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 117, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card:hover {
  transform: translateY(-8px);
  border-color: var(--exo-border-brand);
  box-shadow: var(--exo-glow-card-hover);
}

/* line 122, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card:hover::before {
  opacity: 1;
}

/* line 125, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__avatar-wrap {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--exo-space-3);
  padding: 3px;
  background: var(--exo-gradient-brand-purple);
  border-radius: 50%;
  transition: transform var(--exo-dur-slow) var(--exo-ease-spring), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 137, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card:hover .exo-creator-card__avatar-wrap {
  transform: scale(1.08);
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.5);
}

/* line 142, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--exo-surface);
}

/* line 151, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-1);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h6);
  font-weight: var(--exo-fw-bold);
  color: var(--exo-text);
  margin: 0 0 2px;
}

/* line 163, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__verified {
  width: 12px;
  height: 12px;
  color: var(--exo-magenta-400);
  flex-shrink: 0;
}

/* line 170, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__handle {
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-caption);
  margin: 0 0 var(--exo-space-2);
}

/* line 177, app/assets/stylesheets/_components.exo-cards.scss */
.exo-creator-card__meta {
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-eyebrow);
  letter-spacing: var(--exo-track-wide);
}

/* -----------------------------------------------------------------
   CONTENT TILE (grid del perfil con paywall)
   ----------------------------------------------------------------- */
/* line 189, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--exo-surface);
  border-radius: var(--exo-radius-lg);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 199, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--exo-dur-cinematic) var(--exo-ease-noir), filter var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 208, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__type {
  position: absolute;
  top: var(--exo-space-2);
  right: var(--exo-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-1);
  padding: var(--exo-space-1) var(--exo-space-2);
  background: rgba(10, 7, 16, 0.7);
  backdrop-filter: blur(var(--exo-blur-sm));
  -webkit-backdrop-filter: blur(var(--exo-blur-sm));
  border-radius: var(--exo-radius-full);
  color: #fff;
  font-family: var(--exo-font-mono);
  font-size: 10px;
  letter-spacing: var(--exo-track-wider);
  text-transform: uppercase;
}

/* line 226, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__type svg {
  width: 12px;
  height: 12px;
}

/* line 229, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-2);
  background: linear-gradient(180deg, rgba(10, 7, 16, 0.45) 0%, rgba(10, 7, 16, 0.85) 100%);
  backdrop-filter: blur(var(--exo-blur-sm));
  -webkit-backdrop-filter: blur(var(--exo-blur-sm));
  color: #fff;
}

/* line 242, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__lock svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.6));
}

/* line 248, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__lock-price {
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-body-sm);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-wide);
}

/* line 255, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile__lock-hint {
  color: var(--exo-magenta-300);
  font-size: 10px;
  letter-spacing: var(--exo-track-wider);
  text-transform: uppercase;
}

/* line 263, app/assets/stylesheets/_components.exo-cards.scss */
.exo-tile:hover .exo-tile__media {
  transform: scale(1.04);
}

/* -----------------------------------------------------------------
   FEATURE CARD (sección "todo lo que necesitas")
   ----------------------------------------------------------------- */
/* line 270, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card {
  position: relative;
  padding: var(--exo-space-8) var(--exo-space-7);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), background var(--exo-dur-slow) var(--exo-ease-out-quart), border-color var(--exo-dur-slow) var(--exo-ease-out-quart);
  /* Top line gradient al hover (firma del landing) */
}

/* line 284, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--exo-magenta-500), transparent);
  opacity: 0;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 296, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
  z-index: -1;
}

/* line 310, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 0, 116, 0.04);
  border-color: var(--exo-border-brand);
}

/* line 315, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card:hover::before {
  opacity: 1;
}

/* line 316, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card:hover::after {
  opacity: 1;
}

/* line 319, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--exo-space-5);
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18), rgba(180, 0, 255, 0.1));
  border-radius: var(--exo-radius-lg);
  transition: transform var(--exo-dur-slow) var(--exo-ease-spring);
}

/* line 330, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--exo-magenta-500);
}

/* line 337, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card:hover .exo-feature-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* line 341, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card__title {
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h5);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-tight);
  margin: 0 0 var(--exo-space-2);
}

/* line 350, app/assets/stylesheets/_components.exo-cards.scss */
.exo-feature-card__desc {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  line-height: var(--exo-lh-relaxed);
  margin: 0;
}

/* -----------------------------------------------------------------
   STAT CARD (números prominentes con borderGlow animado)
   ----------------------------------------------------------------- */
/* line 363, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card {
  position: relative;
  text-align: center;
  padding: var(--exo-space-9, var(--exo-space-8)) var(--exo-space-4);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--exo-radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), background var(--exo-dur-slow) var(--exo-ease-out-quart), border-color var(--exo-dur-slow) var(--exo-ease-out-quart);
  animation: exo-border-glow 4s ease-in-out infinite;
}

/* line 378, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 60%);
  z-index: -1;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
  opacity: 0;
}

/* line 391, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 0, 116, 0.05);
  border-color: var(--exo-border-brand);
}

/* line 396, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card:hover::before {
  opacity: 1;
}

/* line 399, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card__number {
  background: linear-gradient(135deg, #fff 0%, var(--exo-magenta-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--exo-font-display);
  font-size: clamp(36px, 5.5vw, 54px);
  font-weight: var(--exo-fw-black);
  line-height: 1.1;
  letter-spacing: var(--exo-track-tight);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--exo-space-2);
}

/* line 413, app/assets/stylesheets/_components.exo-cards.scss */
.exo-stat-card__label {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  font-weight: var(--exo-fw-medium);
  letter-spacing: 2px;
  text-transform: uppercase;
}

@keyframes exo-border-glow {
  0%, 100% {
    border-color: rgba(255, 0, 116, 0.15);
  }
  50% {
    border-color: rgba(255, 0, 116, 0.4);
  }
}

/* -----------------------------------------------------------------
   POST CARD (feed)
   ----------------------------------------------------------------- */
/* line 432, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post {
  background: var(--exo-surface);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-2xl);
  overflow: hidden;
}

/* line 438, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__header {
  display: flex;
  align-items: center;
  gap: var(--exo-space-3);
  padding: var(--exo-space-4) var(--exo-space-5);
}

/* line 445, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__author {
  flex: 1;
  min-width: 0;
}

/* line 447, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__name {
  display: flex;
  align-items: center;
  gap: var(--exo-space-1);
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h6);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-tight);
}

/* line 457, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__name svg {
  width: 14px;
  height: 14px;
  color: var(--exo-magenta-400);
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.5));
}

/* line 465, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__meta {
  display: flex;
  align-items: center;
  gap: var(--exo-space-2);
  margin-top: 2px;
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-mono);
  font-size: var(--exo-fs-eyebrow);
  letter-spacing: var(--exo-track-wide);
}

/* line 475, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__meta-dot {
  width: 3px;
  height: 3px;
  background: var(--exo-text-faint);
  border-radius: 50%;
}

/* line 483, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__body {
  padding: 0 var(--exo-space-5) var(--exo-space-4);
}

/* line 487, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__caption {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  line-height: var(--exo-lh-relaxed);
}

/* line 493, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__caption strong {
  color: var(--exo-magenta-300);
  font-weight: var(--exo-fw-medium);
}

/* line 499, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--exo-surface-2);
  overflow: hidden;
  isolation: isolate;
}

/* line 507, app/assets/stylesheets/_components.exo-cards.scss */
.exo-post__actions {
  display: flex;
  align-items: center;
  gap: var(--exo-space-1);
  padding: var(--exo-space-3) var(--exo-space-5);
  border-top: 1px solid var(--exo-border);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MODALS (sistema oficial)
   -----------------------------------------------------------------
   Modal con backdrop blur + radial glow brand.
   Variantes: default · payment · tip · sheet (mobile slide-up).
   ================================================================= */
/* -----------------------------------------------------------------
   BACKDROP
   ----------------------------------------------------------------- */
/* line 12, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--exo-z-modal-backdrop);
  display: grid;
  place-items: center;
  padding: var(--exo-space-4);
  background: rgba(5, 3, 8, 0.78);
  backdrop-filter: blur(var(--exo-blur-md));
  -webkit-backdrop-filter: blur(var(--exo-blur-md));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart), backdrop-filter var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 28, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* -----------------------------------------------------------------
   MODAL BASE
   ----------------------------------------------------------------- */
/* line 38, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal {
  position: relative;
  z-index: var(--exo-z-modal);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 4rem);
  background: var(--exo-surface-2);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-3xl);
  box-shadow: var(--exo-shadow-5), 0 0 80px rgba(180, 0, 255, 0.15);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform var(--exo-dur-slower) var(--exo-ease-spring), opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
  /* Radial glow brand desde la esquina superior izquierda */
  /* Línea brand top (firma visual) */
  /* Estado abierto · activado por padre */
  /* Sizes */
  /* -----------------------------------------------------
     STRUCTURE
     ----------------------------------------------------- */
}

/* line 61, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(180, 0, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 74, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--exo-magenta-400) 50%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

/* line 87, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal-backdrop.is-open .exo-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* line 93, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--sm {
  max-width: 24rem;
}

/* line 94, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--md {
  max-width: 32rem;
}

/* line 95, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--lg {
  max-width: 44rem;
}

/* line 96, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--xl {
  max-width: 56rem;
}

/* line 97, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--full {
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
}

/* line 107, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--exo-space-4);
  padding: var(--exo-space-7) var(--exo-space-7) var(--exo-space-4);
}

/* line 115, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__hero-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--exo-gradient-brand);
  border-radius: var(--exo-radius-lg);
  color: var(--exo-text-on-brand);
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.45);
  animation: exo-modal-pulse 2.6s ease-in-out infinite;
}

/* line 127, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__hero-icon svg {
  width: 24px;
  height: 24px;
}

/* line 130, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__title-block {
  flex: 1;
  min-width: 0;
}

/* line 132, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__title {
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h3);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-tight);
  line-height: var(--exo-lh-snug);
  margin: 0;
}

/* line 142, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__subtitle {
  margin-top: var(--exo-space-2);
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  line-height: var(--exo-lh-relaxed);
}

/* line 150, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__close {
  position: absolute;
  top: var(--exo-space-4);
  right: var(--exo-space-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--exo-surface);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-full);
  color: var(--exo-text-subtle);
  cursor: pointer;
  transition: transform var(--exo-dur-base) var(--exo-ease-out-quart), background var(--exo-dur-base) var(--exo-ease-out-quart), color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 168, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__close svg {
  width: 16px;
  height: 16px;
}

/* line 170, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__close:hover {
  background: var(--exo-surface-hover);
  color: var(--exo-text);
  transform: rotate(90deg);
}

/* line 176, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--exo-bg-base), 0 0 0 4px var(--exo-magenta-400);
}

/* line 182, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__body {
  padding: var(--exo-space-4) var(--exo-space-7) var(--exo-space-7);
  overflow-y: auto;
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body);
  line-height: var(--exo-lh-relaxed);
}

/* line 190, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__body > * + * {
  margin-top: var(--exo-space-5);
}

/* line 193, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__footer {
  display: flex;
  align-items: center;
  gap: var(--exo-space-3);
  padding: var(--exo-space-5) var(--exo-space-7);
  background: var(--exo-bg-base);
  border-top: 1px solid var(--exo-border);
}

/* line 201, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__footer--end {
  justify-content: flex-end;
}

/* line 202, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal__footer--between {
  justify-content: space-between;
}

/* -----------------------------------------------------------------
   MODAL · PAYMENT (Flowguard form)
   ----------------------------------------------------------------- */
/* line 210, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment {
  max-width: 28rem;
}

/* line 213, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary {
  margin: var(--exo-space-4) var(--exo-space-7) 0;
  padding: var(--exo-space-5);
  background: var(--exo-bg-base);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-lg);
}

/* line 221, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--exo-space-4);
  padding: var(--exo-space-2) 0;
}

/* line 228, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary-row + .exo-modal--payment .exo-modal__summary-row {
  border-top: 1px solid var(--exo-border);
}

/* line 231, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary-label {
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
}

/* line 237, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary-value {
  color: var(--exo-text);
  font-family: var(--exo-font-mono);
  font-size: var(--exo-fs-body-sm);
  font-variant-numeric: tabular-nums;
}

/* line 243, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--payment .exo-modal__summary-value--total {
  background: linear-gradient(135deg, #fff 0%, var(--exo-magenta-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h4);
  font-weight: var(--exo-fw-black);
}

/* -----------------------------------------------------------------
   MODAL · TIP (preset amounts + custom)
   ----------------------------------------------------------------- */
/* line 260, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--tip .exo-modal__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--exo-space-2);
  margin-bottom: var(--exo-space-4);
}

/* line 267, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--tip .exo-modal__preset {
  padding: var(--exo-space-3);
  background: var(--exo-surface);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-md);
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-body);
  font-weight: var(--exo-fw-bold);
  cursor: pointer;
  transition: transform var(--exo-dur-fast) var(--exo-ease-out-quart), background var(--exo-dur-base) var(--exo-ease-out-quart), border-color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 282, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--tip .exo-modal__preset:hover {
  transform: translateY(-2px);
  border-color: var(--exo-magenta-400);
}

/* line 287, app/assets/stylesheets/_components.exo-modals.scss */
.exo-modal--tip .exo-modal__preset.is-active {
  background: var(--exo-gradient-brand);
  color: var(--exo-text-on-brand);
  border-color: transparent;
  box-shadow: var(--exo-glow-magenta);
}

/* -----------------------------------------------------------------
   MOBILE SHEET (slide-up bottom sheet · <= 768px)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  /* $exo-bp-md */
  /* line 301, app/assets/stylesheets/_components.exo-modals.scss */
  .exo-modal--sheet {
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--exo-radius-3xl) var(--exo-radius-3xl) 0 0;
    transform: translateY(100%);
    /* Drag handle visual */
  }
  /* line 310, app/assets/stylesheets/_components.exo-modals.scss */
  .exo-modal--sheet::before {
    content: '';
    position: absolute;
    top: var(--exo-space-3);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--exo-border-strong);
    border-radius: var(--exo-radius-full);
    z-index: 1;
  }
  /* line 323, app/assets/stylesheets/_components.exo-modals.scss */
  .exo-modal-backdrop.is-open .exo-modal--sheet {
    transform: translateY(0);
  }
  /* line 328, app/assets/stylesheets/_components.exo-modals.scss */
  .exo-modal-backdrop:has(.exo-modal--sheet) {
    align-items: flex-end;
    padding: 0;
  }
}

/* -----------------------------------------------------------------
   KEYFRAME · hero icon pulse
   ----------------------------------------------------------------- */
@keyframes exo-modal-pulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(255, 0, 116, 0.4);
  }
  50% {
    box-shadow: 0 0 48px rgba(255, 0, 116, 0.65);
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · INPUTS (sistema oficial)
   -----------------------------------------------------------------
   Field, input, textarea, search, checkbox, radio, toggle.
   Focus glow brand · estados error/disabled integrados.
   ================================================================= */
/* -----------------------------------------------------------------
   FIELD WRAPPER (label + input + hint/error)
   ----------------------------------------------------------------- */
/* line 12, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field {
  display: flex;
  flex-direction: column;
  gap: var(--exo-space-2);
}

/* line 17, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field__label {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
}

/* line 26, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field__hint {
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-caption);
  line-height: var(--exo-lh-relaxed);
}

/* line 33, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field__error {
  display: flex;
  align-items: center;
  gap: var(--exo-space-2);
  color: var(--exo-danger);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-caption);
  line-height: var(--exo-lh-relaxed);
}

/* line 42, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field__error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* line 46, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field--invalid .exo-input,
.exo-field--invalid .exo-textarea,
.exo-field--invalid .exo-select {
  border-color: var(--exo-danger);
}

/* line 51, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-field--invalid .exo-input:focus,
.exo-field--invalid .exo-textarea:focus,
.exo-field--invalid .exo-select:focus {
  box-shadow: 0 0 0 1px var(--exo-danger), 0 0 24px rgba(239, 68, 68, 0.25);
}

/* -----------------------------------------------------------------
   INPUT, TEXTAREA, SELECT
   ----------------------------------------------------------------- */
/* line 64, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input,
.exo-textarea,
.exo-select {
  width: 100%;
  height: 46px;
  padding: 0 var(--exo-space-4);
  background: var(--exo-surface-2);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-md);
  color: var(--exo-text);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body);
  line-height: var(--exo-lh-normal);
  transition: border-color var(--exo-dur-base) var(--exo-ease-out-quart), background var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 82, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input::placeholder,
.exo-textarea::placeholder,
.exo-select::placeholder {
  color: var(--exo-text-subtle);
}

/* line 86, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input:hover:not(:disabled):not(:focus),
.exo-textarea:hover:not(:disabled):not(:focus),
.exo-select:hover:not(:disabled):not(:focus) {
  border-color: var(--exo-magenta-700);
  background: var(--exo-surface);
}

/* line 91, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input:focus,
.exo-textarea:focus,
.exo-select:focus {
  outline: none;
  border-color: var(--exo-magenta-400);
  background: var(--exo-surface);
  box-shadow: 0 0 0 1px var(--exo-magenta-400), 0 0 32px rgba(255, 0, 116, 0.18);
}

/* line 100, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input:disabled,
.exo-textarea:disabled,
.exo-select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* line 106, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-textarea {
  height: auto;
  min-height: 8rem;
  padding: var(--exo-space-3) var(--exo-space-4);
  resize: vertical;
  line-height: var(--exo-lh-relaxed);
}

/* -----------------------------------------------------------------
   INPUT GROUP (con icono prefijo/sufijo)
   ----------------------------------------------------------------- */
/* line 118, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 123, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group .exo-input {
  flex: 1;
}

/* line 125, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--exo-text-subtle);
  pointer-events: none;
  transition: color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 133, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* line 135, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon--leading {
  left: var(--exo-space-4);
}

/* line 138, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon--leading ~ .exo-input {
  padding-left: 46px;
}

/* line 141, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon--trailing {
  right: var(--exo-space-4);
}

/* line 144, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group__icon--trailing ~ .exo-input {
  padding-right: 46px;
}

/* line 148, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-input-group:focus-within .exo-input-group__icon {
  color: var(--exo-magenta-400);
}

/* -----------------------------------------------------------------
   SEARCH (variante con lupa + atajo)
   ----------------------------------------------------------------- */
/* line 155, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 160, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__input {
  width: 100%;
  height: 42px;
  padding: 0 var(--exo-space-12) 0 44px;
  background: var(--exo-surface-2);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-full);
  color: var(--exo-text);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  transition: border-color var(--exo-dur-base) var(--exo-ease-out-quart), background var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 175, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__input::placeholder {
  color: var(--exo-text-subtle);
}

/* line 177, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__input:focus {
  outline: none;
  border-color: var(--exo-magenta-400);
  background: var(--exo-surface);
  box-shadow: 0 0 0 1px var(--exo-magenta-400), 0 0 32px rgba(255, 0, 116, 0.18);
}

/* line 187, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__icon {
  position: absolute;
  left: var(--exo-space-4);
  color: var(--exo-text-subtle);
  pointer-events: none;
  transition: color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 194, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* line 197, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search__shortcut {
  position: absolute;
  right: var(--exo-space-3);
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--exo-space-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-sm);
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-mono);
  font-size: 11px;
  letter-spacing: var(--exo-track-wide);
}

/* line 213, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-search:focus-within .exo-search__icon {
  color: var(--exo-magenta-400);
}

/* -----------------------------------------------------------------
   CHECKBOX & RADIO
   ----------------------------------------------------------------- */
/* line 220, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-3);
  cursor: pointer;
  user-select: none;
}

/* line 227, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--exo-surface-2);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--exo-dur-base) var(--exo-ease-out-quart), border-color var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 243, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__input::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--exo-text-on-brand);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--exo-dur-fast) var(--exo-ease-spring);
}

/* line 253, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__input:checked {
  background: var(--exo-gradient-brand);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.4);
}

/* line 258, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__input:checked::after {
  transform: scale(1);
}

/* line 261, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__input:focus-visible {
  box-shadow: 0 0 0 2px var(--exo-bg-base), 0 0 0 4px var(--exo-magenta-400);
}

/* line 266, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check--radio .exo-check__input {
  border-radius: var(--exo-radius-full);
}

/* line 269, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check--radio .exo-check__input::after {
  width: 8px;
  height: 8px;
  background: var(--exo-text-on-brand);
  clip-path: circle(50%);
}

/* line 277, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-check__label {
  color: var(--exo-text);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  line-height: 1.3;
}

/* -----------------------------------------------------------------
   TOGGLE (switch)
   ----------------------------------------------------------------- */
/* line 289, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-toggle {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  background: var(--exo-surface-2);
  border-radius: var(--exo-radius-full);
  cursor: pointer;
  transition: background var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 299, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-toggle__input {
  position: absolute;
  inset: 0;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* line 308, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--exo-text);
  border-radius: 50%;
  box-shadow: var(--exo-shadow-1);
  transition: transform var(--exo-dur-base) var(--exo-ease-spring);
}

/* line 320, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-toggle:has(:checked) {
  background: var(--exo-gradient-brand);
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.3);
}

/* line 324, app/assets/stylesheets/_components.exo-inputs.scss */
.exo-toggle:has(:checked) .exo-toggle__thumb {
  transform: translateX(20px);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · BADGES (sistema oficial)
   -----------------------------------------------------------------
   badge · eyebrow · status-dot · live-badge · promo-ribbon
   ================================================================= */
/* -----------------------------------------------------------------
   BADGE BASE
   ----------------------------------------------------------------- */
/* line 11, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-1);
  padding: var(--exo-space-1) var(--exo-space-3);
  background: var(--exo-surface-2);
  border: 1px solid var(--exo-border-strong);
  border-radius: var(--exo-radius-full);
  color: var(--exo-text-muted);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-caption);
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-wide);
  line-height: 1;
  white-space: nowrap;
  /* Variantes de color */
  /* Tamaños */
  /* Solid (gradient brand lleno) */
  /* Glass (sobre media) */
}

/* line 27, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge > svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* line 30, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--brand {
  background: var(--exo-magenta-950);
  color: var(--exo-magenta-300);
  border-color: var(--exo-border-brand);
}

/* line 36, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--purple {
  background: var(--exo-purple-950);
  color: var(--exo-purple-300);
  border-color: rgba(180, 0, 255, 0.35);
}

/* line 42, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--success {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

/* line 48, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--warning {
  background: rgba(234, 179, 8, 0.1);
  color: #facc15;
  border-color: rgba(234, 179, 8, 0.3);
}

/* line 54, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

/* line 60, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--info {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

/* line 67, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--sm {
  padding: 2px var(--exo-space-2);
  font-size: 10px;
}

/* line 72, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--lg {
  padding: var(--exo-space-2) var(--exo-space-4);
  font-size: var(--exo-fs-body-sm);
}

/* line 78, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--solid {
  background: var(--exo-gradient-brand);
  color: var(--exo-text-on-brand);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.3);
}

/* line 86, app/assets/stylesheets/_components.exo-badges.scss */
.exo-badge--glass {
  background: rgba(10, 7, 16, 0.7);
  backdrop-filter: blur(var(--exo-blur-sm));
  -webkit-backdrop-filter: blur(var(--exo-blur-sm));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* -----------------------------------------------------------------
   EYEBROW (etiqueta uppercase con tracking ancho · sobre títulos)
   ----------------------------------------------------------------- */
/* line 99, app/assets/stylesheets/_components.exo-badges.scss */
.exo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-3);
  color: var(--exo-magenta-300);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
}

/* line 110, app/assets/stylesheets/_components.exo-badges.scss */
.exo-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--exo-magenta-400) 100%);
}

/* line 118, app/assets/stylesheets/_components.exo-badges.scss */
.exo-eyebrow--center::before {
  background: linear-gradient(90deg, transparent 0%, var(--exo-magenta-400) 50%, transparent 100%);
}

/* line 121, app/assets/stylesheets/_components.exo-badges.scss */
.exo-eyebrow--center::after {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--exo-magenta-400) 0%, transparent 100%);
}

/* -----------------------------------------------------------------
   STATUS DOT (online indicator)
   ----------------------------------------------------------------- */
/* line 134, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--exo-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--exo-bg-base);
}

/* line 142, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot--pulse {
  position: relative;
}

/* line 145, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot--pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--exo-success);
  animation: exo-pulse-dot 1.6s ease-out infinite;
}

/* line 155, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot--offline {
  background: var(--exo-text-subtle);
}

/* line 156, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot--away {
  background: var(--exo-warning);
}

/* line 157, app/assets/stylesheets/_components.exo-badges.scss */
.exo-status-dot--live {
  background: var(--exo-live);
  box-shadow: 0 0 0 3px var(--exo-bg-base), 0 0 12px var(--exo-live);
}

@keyframes exo-pulse-dot {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* -----------------------------------------------------------------
   LIVE BADGE ("EN VIVO" para streams)
   ----------------------------------------------------------------- */
/* line 174, app/assets/stylesheets/_components.exo-badges.scss */
.exo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-2);
  padding: 3px var(--exo-space-2);
  background: var(--exo-live);
  border-radius: var(--exo-radius-sm);
  color: #fff;
  font-family: var(--exo-font-display);
  font-size: 9px;
  font-weight: var(--exo-fw-black);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

/* line 189, app/assets/stylesheets/_components.exo-badges.scss */
.exo-live-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  animation: exo-live-blink 1.4s ease-in-out infinite;
}

@keyframes exo-live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* -----------------------------------------------------------------
   PROMO RIBBON (descuentos en perfil)
   ----------------------------------------------------------------- */
/* line 208, app/assets/stylesheets/_components.exo-badges.scss */
.exo-promo-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-3);
  padding: var(--exo-space-2) var(--exo-space-4);
  background: linear-gradient(100deg, var(--exo-magenta-950) 0%, var(--exo-purple-900) 100%);
  border: 1px solid rgba(180, 0, 255, 0.35);
  border-radius: var(--exo-radius-full);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-body-sm);
  font-weight: var(--exo-fw-semibold);
}

/* line 220, app/assets/stylesheets/_components.exo-badges.scss */
.exo-promo-ribbon__discount {
  color: var(--exo-magenta-300);
  letter-spacing: var(--exo-track-wide);
  text-transform: uppercase;
}

/* line 226, app/assets/stylesheets/_components.exo-badges.scss */
.exo-promo-ribbon__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
}

/* line 232, app/assets/stylesheets/_components.exo-badges.scss */
.exo-promo-ribbon__code {
  color: var(--exo-purple-300);
  font-family: var(--exo-font-mono);
  letter-spacing: var(--exo-track-wider);
}

/* -----------------------------------------------------------------
   HERO BADGE (badge con dot pulsante · usado en hero del landing)
   ----------------------------------------------------------------- */
/* line 243, app/assets/stylesheets/_components.exo-badges.scss */
.exo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-2);
  padding: var(--exo-space-2) var(--exo-space-5);
  background: rgba(255, 0, 116, 0.12);
  border: 1px solid var(--exo-border-brand);
  border-radius: var(--exo-radius-pill);
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* line 258, app/assets/stylesheets/_components.exo-badges.scss */
.exo-hero-badge__dot {
  width: 6px;
  height: 6px;
  background: var(--exo-magenta-500);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--exo-magenta-500);
  animation: exo-hero-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes exo-hero-badge-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · AVATARS (sistema oficial)
   -----------------------------------------------------------------
   Avatar redondo con rings opcionales (brand, story, live).
   Tamaños xs · sm · md (default) · lg · xl · 2xl · 3xl · profile.
   ================================================================= */
/* line 9, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar {
  --_av-size: 40px;
  /* md por defecto */
  --_av-ring: 0;
  --_av-ring-color: transparent;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--_av-size);
  height: var(--_av-size);
  /* -----------------------------------------------------------------
     RINGS (variantes)
     ----------------------------------------------------------------- */
  /* -----------------------------------------------------------------
     INDICATOR (status / verified / live · esquina inferior derecha)
     ----------------------------------------------------------------- */
  /* -----------------------------------------------------------------
     SIZES
     ----------------------------------------------------------------- */
}

/* line 20, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__img, .exo-avatar__placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--exo-surface-2);
  display: grid;
  place-items: center;
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-display);
  font-weight: var(--exo-fw-bold);
  font-size: calc(var(--_av-size) * 0.4);
  text-transform: uppercase;
  letter-spacing: var(--exo-track-tight);
  user-select: none;
}

/* line 41, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--ring {
  padding: var(--_av-ring);
  background: var(--_av-ring-color);
  border-radius: 50%;
}

/* line 46, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--ring .exo-avatar__img,
.exo-avatar--ring .exo-avatar__placeholder {
  border: 2px solid var(--exo-bg-base);
}

/* line 52, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--ring-brand {
  --_av-ring: 3px;
  --_av-ring-color: var(--exo-gradient-brand-purple);
  box-shadow: 0 0 24px rgba(255, 0, 116, 0.3);
}

/* line 58, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--ring-story {
  --_av-ring: 3px;
  --_av-ring-color: conic-gradient(
      from 220deg,
      var(--exo-magenta-500) 0%,
      var(--exo-purple-500) 35%,
      var(--exo-magenta-400) 65%,
      var(--exo-magenta-500) 100%
    );
}

/* line 69, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--ring-live {
  --_av-ring: 3px;
  --_av-ring-color: var(--exo-live);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55);
}

/* line 78, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 28%;
  height: 28%;
  min-width: 10px;
  min-height: 10px;
  background: var(--exo-success);
  border: 2px solid var(--exo-bg-base);
  border-radius: 50%;
}

/* line 92, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator--offline {
  background: var(--exo-text-subtle);
}

/* line 93, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator--away {
  background: var(--exo-warning);
}

/* line 95, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator--verified {
  width: 32%;
  height: 32%;
  background: var(--exo-gradient-brand);
  box-shadow: 0 0 12px rgba(180, 0, 255, 0.45);
  color: #fff;
}

/* line 102, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator--verified svg {
  width: 60%;
  height: 60%;
}

/* line 105, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar__indicator--live {
  width: auto;
  min-width: 0;
  padding: 2px var(--exo-space-2);
  background: var(--exo-live);
  border-radius: var(--exo-radius-sm);
  color: #fff;
  font-family: var(--exo-font-display);
  font-size: 8px;
  font-weight: var(--exo-fw-black);
  letter-spacing: var(--exo-track-wider);
  text-transform: uppercase;
  bottom: -4px;
  right: 50%;
  transform: translateX(50%);
}

/* line 126, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--xs {
  --_av-size: 24px;
}

/* line 127, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--sm {
  --_av-size: 32px;
}

/* line 128, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--md {
  --_av-size: 40px;
}

/* line 129, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--lg {
  --_av-size: 48px;
}

/* line 130, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--xl {
  --_av-size: 64px;
}

/* line 131, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--2xl {
  --_av-size: 96px;
}

/* line 132, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--3xl {
  --_av-size: 128px;
}

/* line 133, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar--profile {
  --_av-size: 180px;
}

/* -----------------------------------------------------------------
   AVATAR STACK (grupo solapado)
   ----------------------------------------------------------------- */
/* line 140, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar-stack {
  display: inline-flex;
  align-items: center;
}

/* line 144, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar-stack .exo-avatar {
  margin-left: -10px;
  border: 2px solid var(--exo-bg-base);
  border-radius: 50%;
  transition: transform var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 150, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar-stack .exo-avatar:first-child {
  margin-left: 0;
}

/* line 152, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar-stack .exo-avatar:hover {
  z-index: 2;
  transform: translateY(-2px);
}

/* line 158, app/assets/stylesheets/_components.exo-avatars.scss */
.exo-avatar-stack__more {
  margin-left: -10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--exo-surface-2);
  border: 2px solid var(--exo-bg-base);
  border-radius: 50%;
  color: var(--exo-text-muted);
  font-family: var(--exo-font-mono);
  font-size: var(--exo-fs-caption);
  font-weight: var(--exo-fw-semibold);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · AUTH MODALS (sign in · sign up · forgot password)
   -----------------------------------------------------------------
   Mantiene los selectores `auth-modal__*`, `signup-modal__*`,
   `forgot-modal__*` para preservar el JS y los handlers existentes.
   Solo cambia tratamiento visual: glass blur, glow brand, sheen,
   motion noir, logo con drop-shadow neón.
   ================================================================= */
/* -----------------------------------------------------------------
   KEYFRAMES (compartidos por los 3 modales)
   ----------------------------------------------------------------- */
@keyframes exo-auth-modal-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes exo-auth-icon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.45)) drop-shadow(0 0 32px rgba(180, 0, 255, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(255, 0, 116, 0.65)) drop-shadow(0 0 48px rgba(180, 0, 255, 0.4));
  }
}

/* -----------------------------------------------------------------
   CONTAINER (el div root de cada modal)
   ----------------------------------------------------------------- */
/* line 34, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal,
.signup-modal,
.forgot-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--exo-z-modal-backdrop, 9999);
  overflow-y: auto;
}

/* -----------------------------------------------------------------
   BACKDROP
   ----------------------------------------------------------------- */
/* line 48, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__backdrop,
.signup-modal__backdrop,
.forgot-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 8, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* -----------------------------------------------------------------
   CONTAINER (centra el card)
   ----------------------------------------------------------------- */
/* line 62, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__container,
.signup-modal__container,
.forgot-modal__container {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--exo-space-5);
}

/* -----------------------------------------------------------------
   CARD (el modal en sí)
   ----------------------------------------------------------------- */
/* line 77, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__card,
.signup-modal__card,
.forgot-modal__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, #14121a 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--exo-radius-3xl, 28px);
  padding: var(--exo-space-12) var(--exo-space-8);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 80px rgba(255, 0, 116, 0.1);
  overflow: hidden;
  isolation: isolate;
  animation: exo-auth-modal-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Radial glow brand desde la esquina superior izquierda */
/* line 97, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__card::before,
.signup-modal__card::before,
.forgot-modal__card::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Línea brand top (firma del modal) */
/* line 112, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__card::after,
.signup-modal__card::after,
.forgot-modal__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

/* -----------------------------------------------------------------
   CLOSE (circular con rotate al hover)
   ----------------------------------------------------------------- */
/* line 129, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__close,
.signup-modal__close,
.forgot-modal__close {
  position: absolute;
  top: var(--exo-space-4);
  right: var(--exo-space-4);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 152, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__close svg,
.signup-modal__close svg,
.forgot-modal__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* line 158, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__close:hover,
.signup-modal__close:hover,
.forgot-modal__close:hover {
  background: rgba(255, 0, 116, 0.1);
  border-color: rgba(255, 0, 116, 0.35);
  color: #fff;
  transform: rotate(90deg);
}

/* -----------------------------------------------------------------
   LOGO (con drop-shadow brand multicapa)
   ----------------------------------------------------------------- */
/* line 170, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__logo,
.signup-modal__logo,
.forgot-modal__logo {
  display: block;
  width: auto;
  height: 100px;
  margin: 0 auto var(--exo-space-2);
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.45)) drop-shadow(0 0 32px rgba(180, 0, 255, 0.25));
  animation: exo-auth-icon-pulse 4s ease-in-out infinite;
}

/* -----------------------------------------------------------------
   TITLE + SUBTITLE
   ----------------------------------------------------------------- */
/* line 185, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__title,
.signup-modal__title,
.forgot-modal__title {
  text-align: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--exo-space-2);
}

/* line 198, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__subtitle,
.signup-modal__subtitle,
.forgot-modal__subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 var(--exo-space-8);
}

/* -----------------------------------------------------------------
   FLASH MESSAGES
   ----------------------------------------------------------------- */
/* line 213, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash,
.signup-modal__flash,
.forgot-modal__flash {
  margin-bottom: var(--exo-space-5);
}

/* line 218, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash .flash-message,
.auth-modal__flash .flash-alert,
.auth-modal__flash #error_explanation,
.signup-modal__flash .flash-message,
.signup-modal__flash .flash-alert,
.signup-modal__flash #error_explanation,
.forgot-modal__flash .flash-message,
.forgot-modal__flash .flash-alert,
.forgot-modal__flash #error_explanation {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--exo-radius-md, 8px);
  padding: var(--exo-space-3) var(--exo-space-4);
  color: #f87171;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* line 232, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash .flash-notice,
.signup-modal__flash .flash-notice,
.forgot-modal__flash .flash-notice {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--exo-radius-md, 8px);
  padding: var(--exo-space-3) var(--exo-space-4);
  color: #4ade80;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* line 244, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash #error_explanation h2,
.signup-modal__flash #error_explanation h2,
.forgot-modal__flash #error_explanation h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f87171;
  margin: 0 0 var(--exo-space-2);
  letter-spacing: 0.02em;
}

/* line 253, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash #error_explanation ul,
.signup-modal__flash #error_explanation ul,
.forgot-modal__flash #error_explanation ul {
  margin: 0;
  padding-left: var(--exo-space-5);
}

/* line 258, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__flash #error_explanation li,
.signup-modal__flash #error_explanation li,
.forgot-modal__flash #error_explanation li {
  margin-bottom: var(--exo-space-1);
}

/* -----------------------------------------------------------------
   FORM
   ----------------------------------------------------------------- */
/* line 267, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__form,
.signup-modal__form,
.forgot-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--exo-space-5);
}

/* line 275, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__field,
.signup-modal__field,
.forgot-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--exo-space-2);
}

/* line 283, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__label,
.signup-modal__label,
.forgot-modal__label {
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* line 293, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__label em,
.signup-modal__label em,
.forgot-modal__label em {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* line 304, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input-wrapper,
.signup-modal__input-wrapper,
.forgot-modal__input-wrapper {
  position: relative;
}

/* -----------------------------------------------------------------
   INPUTS
   ----------------------------------------------------------------- */
/* line 314, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input,
.signup-modal__input,
.forgot-modal__input {
  width: 100%;
  height: 50px;
  padding: 0 var(--exo-space-4);
  padding-right: var(--exo-space-12);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--exo-radius-md, 8px);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  outline: none;
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 333, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input::placeholder,
.signup-modal__input::placeholder,
.forgot-modal__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* line 337, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input:hover:not(:focus),
.signup-modal__input:hover:not(:focus),
.forgot-modal__input:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}

/* line 342, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input:focus,
.signup-modal__input:focus,
.forgot-modal__input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: #ff3d9a;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 32px rgba(255, 0, 116, 0.18);
}

/* Forgot modal no tiene toggle de password, padding sin reservar */
/* line 352, app/assets/stylesheets/_components.exo-auth-modals.scss */
.forgot-modal__input {
  padding-right: var(--exo-space-4);
}

/* -----------------------------------------------------------------
   AUTOFILL OVERRIDE (Chrome/Firefox/Safari pintan el bg azul al guardar)
   ----------------------------------------------------------------- */
/* line 360, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input:-webkit-autofill,
.auth-modal__input:-webkit-autofill:hover,
.auth-modal__input:-webkit-autofill:focus,
.auth-modal__input:-webkit-autofill:active,
.signup-modal__input:-webkit-autofill,
.signup-modal__input:-webkit-autofill:hover,
.signup-modal__input:-webkit-autofill:focus,
.signup-modal__input:-webkit-autofill:active,
.forgot-modal__input:-webkit-autofill,
.forgot-modal__input:-webkit-autofill:hover,
.forgot-modal__input:-webkit-autofill:focus,
.forgot-modal__input:-webkit-autofill:active {
  /* Background dark forzado mediante box-shadow inset (truco standard) */
  -webkit-box-shadow: 0 0 0 1000px #1a1420 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Mantener focus glow brand cuando está autofilled */
/* line 381, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__input:-webkit-autofill:focus,
.signup-modal__input:-webkit-autofill:focus,
.forgot-modal__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1420 inset, 0 0 0 1px #ff3d9a, 0 0 32px rgba(255, 0, 116, 0.18) !important;
  border-color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   TOGGLE PASSWORD
   ----------------------------------------------------------------- */
/* line 395, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__toggle-password,
.signup-modal__toggle-password {
  position: absolute;
  right: var(--exo-space-3);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

/* line 412, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__toggle-password:hover,
.signup-modal__toggle-password:hover {
  color: #ff3d9a;
  background: rgba(255, 0, 116, 0.08);
}

/* line 417, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__toggle-password .eye-icon,
.signup-modal__toggle-password .eye-icon {
  display: block;
}

/* -----------------------------------------------------------------
   OPTIONS (remember + forgot link)
   ----------------------------------------------------------------- */
/* line 424, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__options {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--exo-space-1);
  justify-content: space-between;
}

/* line 432, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__remember {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-2);
  min-height: 36px;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  cursor: pointer;
}

/* line 443, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ff0074;
  cursor: pointer;
  flex-shrink: 0;
}

/* line 452, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__forgot,
a.auth-modal__forgot {
  /* Override .toggle-switch (de creator_content_new.scss) que pone width:50px height:26px */
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 32px;
  position: static !important;
  padding: 4px 0 !important;
  color: #ff3d9a !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 471, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__forgot:hover,
a.auth-modal__forgot:hover {
  color: #ff7eb8 !important;
  text-decoration: underline !important;
}

/* -----------------------------------------------------------------
   TERMS (signup)
   ----------------------------------------------------------------- */
/* line 481, app/assets/stylesheets/_components.exo-auth-modals.scss */
.signup-modal__terms {
  display: flex;
  align-items: flex-start;
  gap: var(--exo-space-3);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

/* line 490, app/assets/stylesheets/_components.exo-auth-modals.scss */
.signup-modal__terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ff0074;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 499, app/assets/stylesheets/_components.exo-auth-modals.scss */
.signup-modal__terms a {
  color: #ff3d9a;
  text-decoration: none;
  font-weight: 500;
}

/* line 504, app/assets/stylesheets/_components.exo-auth-modals.scss */
.signup-modal__terms a:hover {
  color: #ff7eb8;
  text-decoration: underline;
}

/* -----------------------------------------------------------------
   SUBMIT BUTTON (con sheen sweep + glow + arrow nudge)
   ----------------------------------------------------------------- */
/* line 515, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit,
.signup-modal__submit,
.forgot-modal__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-2);
  width: 100%;
  height: 52px;
  padding: 0 var(--exo-space-6);
  margin-top: var(--exo-space-2);
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  border-radius: var(--exo-radius-md, 8px);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  /* Sheen sweep */
}

/* line 546, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit::after,
.signup-modal__submit::after,
.forgot-modal__submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 556, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit:hover,
.signup-modal__submit:hover,
.forgot-modal__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* line 562, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit:hover::after,
.signup-modal__submit:hover::after,
.forgot-modal__submit:hover::after {
  transform: translateX(120%);
}

/* line 565, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit:active,
.signup-modal__submit:active,
.forgot-modal__submit:active {
  transform: translateY(0);
}

/* line 569, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__submit:disabled,
.signup-modal__submit:disabled,
.forgot-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------
   OAUTH BUTTONS (Google + X) — preservan branding propio
   ----------------------------------------------------------------- */
/* line 579, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__google-btn,
.signup-modal__google-btn {
  width: 100%;
  height: 50px;
  padding: 0 var(--exo-space-6);
  margin-top: var(--exo-space-4);
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--exo-radius-md, 8px);
  color: #3c4043;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-3);
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 602, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__google-btn svg,
.signup-modal__google-btn svg {
  width: 20px;
  height: 20px;
}

/* line 604, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__google-btn:hover,
.signup-modal__google-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* line 611, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__x-btn,
.signup-modal__x-btn {
  width: 100%;
  height: 50px;
  padding: 0 var(--exo-space-6);
  margin-top: var(--exo-space-3);
  background: #000;
  border: 1px solid #2a2a2a;
  border-radius: var(--exo-radius-md, 8px);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--exo-space-3);
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 634, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__x-btn svg,
.signup-modal__x-btn svg {
  width: 18px;
  height: 18px;
}

/* line 636, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__x-btn:hover,
.signup-modal__x-btn:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}

/* -----------------------------------------------------------------
   DIVIDER ("o" entre OAuth y switch)
   ----------------------------------------------------------------- */
/* line 647, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__divider,
.signup-modal__divider,
.forgot-modal__divider {
  display: flex;
  align-items: center;
  gap: var(--exo-space-4);
  margin: var(--exo-space-7) 0;
}

/* line 655, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__divider::before, .auth-modal__divider::after,
.signup-modal__divider::before,
.signup-modal__divider::after,
.forgot-modal__divider::before,
.forgot-modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

/* line 663, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__divider span,
.signup-modal__divider span,
.forgot-modal__divider span {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* -----------------------------------------------------------------
   SWITCH (link a otro modal)
   ----------------------------------------------------------------- */
/* line 677, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__switch,
.signup-modal__switch,
.forgot-modal__switch {
  text-align: center;
}

/* line 682, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__switch p,
.signup-modal__switch p,
.forgot-modal__switch p {
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  margin: 0 0 var(--exo-space-3);
}

/* line 690, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__switch-link,
.signup-modal__switch-link,
.forgot-modal__switch-link,
a.auth-modal__switch-link,
a.signup-modal__switch-link,
a.forgot-modal__switch-link {
  /* Override .toggle-switch (de creator_content_new.scss) que pone width:50px height:26px */
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  position: static !important;
  padding: 14px 28px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--exo-radius-md, 8px) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
  transition: background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 722, app/assets/stylesheets/_components.exo-auth-modals.scss */
.auth-modal__switch-link:hover,
.signup-modal__switch-link:hover,
.forgot-modal__switch-link:hover,
a.auth-modal__switch-link:hover,
a.signup-modal__switch-link:hover,
a.forgot-modal__switch-link:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 480px) {
  /* line 735, app/assets/stylesheets/_components.exo-auth-modals.scss */
  .auth-modal__card,
.signup-modal__card,
.forgot-modal__card {
    padding: var(--exo-space-8) var(--exo-space-6);
    border-radius: var(--exo-radius-2xl, 20px);
  }
  /* line 742, app/assets/stylesheets/_components.exo-auth-modals.scss */
  .auth-modal__logo,
.signup-modal__logo,
.forgot-modal__logo {
    height: 76px;
  }
  /* line 748, app/assets/stylesheets/_components.exo-auth-modals.scss */
  .auth-modal__title,
.signup-modal__title,
.forgot-modal__title {
    font-size: 22px;
  }
}
/* --------------------

    INPUTS

----------------------- */
/* line 7, app/assets/stylesheets/_components.inputs.scss */
.input-group {
  position: relative;
  margin-bottom: 20px;
}

/* line 10, app/assets/stylesheets/_components.inputs.scss */
.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
}

/* Textfield */
/* line 22, app/assets/stylesheets/_components.inputs.scss */
.textfield {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--color-gray-04);
  background-position: 8px 8px;
  color: #fff;
}

/* line 34, app/assets/stylesheets/_components.inputs.scss */
.textfield::placeholder {
  color: var(--color-gray-06);
}

/* line 38, app/assets/stylesheets/_components.inputs.scss */
.textfield:focus {
  border: 2px solid var(--color-primary-01);
}
/* --------------------

    TAGS

----------------------- */
/* line 7, app/assets/stylesheets/_components.tags.scss */
.tag {
  border-radius: 20px;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  margin-right: 4px;
  margin-bottom: 8px;
  background-color: var(--color-gray-04);
}
/* --------------------

    SLIDESHOW

----------------------- */
/* line 7, app/assets/stylesheets/_components.slideshow.scss */
.slide {
  padding: 0 8px 56px;
}

/* line 9, app/assets/stylesheets/_components.slideshow.scss */
.slide::before {
  z-index: -1;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 678px;
  background: linear-gradient(180deg, rgba(223, 76, 66, 0) 0%, rgba(223, 76, 66, 0.37) 48.44%, rgba(223, 76, 66, 0) 100%);
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.slideshow.scss */
  .slide {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px;
    height: 720px;
  }
  /* line 27, app/assets/stylesheets/_components.slideshow.scss */
  .slide::before {
    display: none;
  }
  /* line 31, app/assets/stylesheets/_components.slideshow.scss */
  .slide .container {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* line 39, app/assets/stylesheets/_components.slideshow.scss */
.slide__img {
  width: 100%;
  padding-top: 60%;
  border-radius: 4px;
  box-shadow: var(--shadow-bigger);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  /* line 39, app/assets/stylesheets/_components.slideshow.scss */
  .slide__img {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0;
    border-radius: 0px;
    height: 720px;
    box-shadow: none;
  }
}

/* line 59, app/assets/stylesheets/_components.slideshow.scss */
.slide__content {
  padding-top: 32px;
  text-align: center;
}

/* line 62, app/assets/stylesheets/_components.slideshow.scss */
.slide__content h3 {
  font-family: var(--font-primary);
  font-size: 19px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 23px;
  color: var(--color-primary-03);
  margin-bottom: 8px;
}

/* line 72, app/assets/stylesheets/_components.slideshow.scss */
.slide__content h2 {
  margin-bottom: 12px;
  color: #fff;
}

/* line 77, app/assets/stylesheets/_components.slideshow.scss */
.slide__content p {
  margin-bottom: 28px;
  opacity: 0.9;
  color: #fff;
}

/* line 83, app/assets/stylesheets/_components.slideshow.scss */
.slide__content a {
  box-shadow: var(--shadow-bigger);
}

@media (min-width: 768px) {
  /* line 59, app/assets/stylesheets/_components.slideshow.scss */
  .slide__content {
    z-index: 4;
    position: relative;
    text-align: left;
  }
  /* line 91, app/assets/stylesheets/_components.slideshow.scss */
  .slide__content h3, .slide__content h2, .slide__content p {
    max-width: 600px;
  }
  /* line 95, app/assets/stylesheets/_components.slideshow.scss */
  .slide__content h3 {
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
  }
  /* line 99, app/assets/stylesheets/_components.slideshow.scss */
  .slide__content h2 {
    font-size: 54px;
    line-height: 64px;
    text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  }
  /* line 105, app/assets/stylesheets/_components.slideshow.scss */
  .slide__content p {
    font-size: 20px;
    line-height: 32px;
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 768px) {
  /* line 113, app/assets/stylesheets/_components.slideshow.scss */
  .slide__overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(-90deg, rgba(31, 31, 31, 0) 40%, #1F1F1F 100%);
  }
  /* line 124, app/assets/stylesheets/_components.slideshow.scss */
  .slide__overlay::before, .slide__overlay::after {
    z-index: 1;
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 123px;
    background: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 100%);
  }
  /* line 136, app/assets/stylesheets/_components.slideshow.scss */
  .slide__overlay::before {
    top: 0;
    transform: rotate(180deg);
  }
  /* line 141, app/assets/stylesheets/_components.slideshow.scss */
  .slide__overlay::after {
    bottom: 0;
  }
}
/* --------------------

    FOOTER

----------------------- */
/* line 7, app/assets/stylesheets/_components.footer.scss */
.footer {
  padding: 40px 8px 48px;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.footer.scss */
  .footer {
    padding: 72px 0;
  }
  /* line 11, app/assets/stylesheets/_components.footer.scss */
  .footer .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* line 17, app/assets/stylesheets/_components.footer.scss */
.footer .footer__logo {
  display: block;
  width: 107px;
  margin-bottom: 16px;
}

/* line 21, app/assets/stylesheets/_components.footer.scss */
.footer .footer__logo img {
  width: 100%;
}

/* line 26, app/assets/stylesheets/_components.footer.scss */
.footer .footer__about {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 36px;
}

/* line 32, app/assets/stylesheets/_components.footer.scss */
.footer .footer__links {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 56px;
  list-style: none;
}

/* line 38, app/assets/stylesheets/_components.footer.scss */
.footer .footer__links li {
  margin-bottom: 16px;
}

/* line 41, app/assets/stylesheets/_components.footer.scss */
.footer .footer__links li a {
  color: #fff;
  font-weight: 600;
}

/* line 49, app/assets/stylesheets/_components.footer.scss */
.footer .footer__legal {
  font-size: 14px;
  opacity: 0.8;
}

@media (min-width: 768px) {
  /* line 55, app/assets/stylesheets/_components.footer.scss */
  .footer .footer__about {
    max-width: 445px;
  }
  /* line 59, app/assets/stylesheets/_components.footer.scss */
  .footer .footer__links {
    margin-bottom: 0;
  }
}
/* --------------------

    FEATURED

----------------------- */
/* line 7, app/assets/stylesheets/_components.featured.scss */
.featured {
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.featured.scss */
  .featured {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  /* line 13, app/assets/stylesheets/_components.featured.scss */
  .featured .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* line 20, app/assets/stylesheets/_components.featured.scss */
.featured-item {
  position: relative;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 8px;
  padding-top: 60%;
  width: 100%;
}

/* line 31, app/assets/stylesheets/_components.featured.scss */
.featured-item .featured-item__content {
  position: absolute;
  left: 0;
  bottom: 14px;
}

/* line 35, app/assets/stylesheets/_components.featured.scss */
.featured-item .featured-item__content h4,
.featured-item .featured-item__content p {
  padding: 8px 8px 8px 24px;
  box-shadow: var(--shadow-bigger);
}

/* line 41, app/assets/stylesheets/_components.featured.scss */
.featured-item .featured-item__content h4 {
  margin-bottom: 0;
  color: #fff;
  background-color: var(--color-primary-01);
  border-radius: 0px 4px 4px 0px;
}

/* line 48, app/assets/stylesheets/_components.featured.scss */
.featured-item .featured-item__content p {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-01);
  background-color: #fff;
  border-radius: 0px 0px 4px 0px;
}

@media (min-width: 768px) {
  /* line 20, app/assets/stylesheets/_components.featured.scss */
  .featured-item {
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 0;
    padding-top: 38%;
    width: calc(50% - 16px);
  }
  /* line 65, app/assets/stylesheets/_components.featured.scss */
  .featured-item h4 {
    font-size: 24px;
    line-height: 26px;
    text-transform: none;
  }
  /* line 72, app/assets/stylesheets/_components.featured.scss */
  .featured-item .featured-item__content p {
    font-size: 17px;
    font-weight: 500;
  }
}
/* --------------------

    CTA

----------------------- */
/* line 7, app/assets/stylesheets/_components.cta.scss */
.cta {
  position: relative;
  padding: 0 8px 96px;
}

/* line 10, app/assets/stylesheets/_components.cta.scss */
.cta::before {
  z-index: -1;
  content: " ";
  position: absolute;
  top: -72px;
  left: 0;
  width: 100%;
  height: 678px;
  background: linear-gradient(180deg, rgba(223, 76, 66, 0) 0%, rgba(223, 76, 66, 0.37) 48.44%, rgba(223, 76, 66, 0) 100%);
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.cta.scss */
  .cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 720px;
  }
  /* line 26, app/assets/stylesheets/_components.cta.scss */
  .cta::before {
    display: none;
  }
  /* line 30, app/assets/stylesheets/_components.cta.scss */
  .cta::after {
    z-index: 1;
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(31, 31, 31, 0.3) 0%, #1F1F1F 100%);
    bottom: 0;
  }
}

/* line 43, app/assets/stylesheets/_components.cta.scss */
.cta .cta__img {
  width: 100%;
  padding-top: 60%;
  border-radius: 4px;
  box-shadow: var(--shadow-bigger);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  /* line 43, app/assets/stylesheets/_components.cta.scss */
  .cta .cta__img {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0;
    border-radius: 0px;
    height: 720px;
    box-shadow: none;
  }
}

/* line 63, app/assets/stylesheets/_components.cta.scss */
.cta .cta__content {
  text-align: center;
  margin-top: 24px;
}

/* line 66, app/assets/stylesheets/_components.cta.scss */
.cta .cta__content h2 {
  margin-bottom: 16px;
  text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}

/* line 71, app/assets/stylesheets/_components.cta.scss */
.cta .cta__content p {
  margin-bottom: 24px;
  opacity: 0.9;
}

/* line 76, app/assets/stylesheets/_components.cta.scss */
.cta .cta__content a {
  box-shadow: var(--shadow-bigger);
}

@media (min-width: 768px) {
  /* line 63, app/assets/stylesheets/_components.cta.scss */
  .cta .cta__content {
    z-index: 4;
    position: relative;
  }
  /* line 84, app/assets/stylesheets/_components.cta.scss */
  .cta .cta__content h3, .cta .cta__content h2, .cta .cta__content p {
    max-width: 700px;
  }
  /* line 88, app/assets/stylesheets/_components.cta.scss */
  .cta .cta__content h2 {
    font-size: 54px;
    line-height: 64px;
  }
  /* line 93, app/assets/stylesheets/_components.cta.scss */
  .cta .cta__content p {
    font-size: 20px;
    line-height: 32px;
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6);
  }
}
/* line 5, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js, .pagy-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  padding: 10px 0;
}

/* line 13, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a, .pagy-nav a, .pagy-nav-js span, .pagy-nav span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  text-decoration: none;
  background-color: var(--color-gray-02);
  border: 1px solid var(--color-gray-03);
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* line 26, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a:hover, .pagy-nav a:hover, .pagy-nav-js span:hover, .pagy-nav span:hover {
  background-color: var(--color-gray-03);
  border-color: var(--color-primary-01);
  text-decoration: none;
}

/* line 32, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.current, .pagy-nav a.current, .pagy-nav-js span.current, .pagy-nav span.current {
  background-color: var(--color-primary-01);
  border-color: var(--color-primary-01);
  color: #fff;
  cursor: default;
}

/* line 38, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.current:hover, .pagy-nav a.current:hover, .pagy-nav-js span.current:hover, .pagy-nav span.current:hover {
  background-color: var(--color-primary-01);
  border-color: var(--color-primary-01);
}

/* line 44, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.disabled, .pagy-nav a.disabled, .pagy-nav-js span.disabled, .pagy-nav span.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* line 48, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.disabled:hover, .pagy-nav a.disabled:hover, .pagy-nav-js span.disabled:hover, .pagy-nav span.disabled:hover {
  background-color: var(--color-gray-02);
  border-color: var(--color-gray-03);
}

/* line 54, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.gap, .pagy-nav a.gap, .pagy-nav-js span.gap, .pagy-nav span.gap {
  background: none;
  border: none;
  cursor: default;
}

/* line 59, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a.gap:hover, .pagy-nav a.gap:hover, .pagy-nav-js span.gap:hover, .pagy-nav span.gap:hover {
  background: none;
  border: none;
}

/* line 67, app/assets/stylesheets/_components.pagination.scss */
.pagy-nav-js a:first-child, .pagy-nav a:first-child,
.pagy-nav-js a:last-child,
.pagy-nav a:last-child {
  font-weight: 600;
  padding: 8px 16px;
}

@media (max-width: 768px) {
  /* line 81, app/assets/stylesheets/_components.pagination.scss */
  .pagy-nav-js,
.pagy-nav {
    gap: 4px;
  }
  /* line 85, app/assets/stylesheets/_components.pagination.scss */
  .pagy-nav-js a, .pagy-nav-js span,
.pagy-nav a,
.pagy-nav span {
    padding: 6px 10px;
    margin: 0 2px;
    font-size: 14px;
  }
}
/* --------------------

    STARS

----------------------- */
/* line 7, app/assets/stylesheets/_components.stars.scss.erb */
.featured-stars {
  display: none;
  padding-bottom: 56px;
  background-color: var(--color-gray-02);
}

/* line 12, app/assets/stylesheets/_components.stars.scss.erb */
.featured-stars h3 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* line 21, app/assets/stylesheets/_components.stars.scss.erb */
.featured-stars .stars-item__view-all {
  margin-top: 24px;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.stars.scss.erb */
  .featured-stars {
    display: block;
    padding: 72px 0px 52px;
  }
  /* line 29, app/assets/stylesheets/_components.stars.scss.erb */
  .featured-stars h3 {
    font-size: 24px;
    line-height: 26px;
  }
  /* line 34, app/assets/stylesheets/_components.stars.scss.erb */
  .featured-stars .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  /* line 39, app/assets/stylesheets/_components.stars.scss.erb */
  .featured-stars .stars-item__view-all {
    margin-top: 0px;
    position: absolute;
    top: -4px;
    right: 40px;
    width: auto;
  }
}

/* --------------------

    STARS ITEM

----------------------- */
/* line 55, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item {
  display: block;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  color: #fff;
}

/* line 61, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item .stars-item__source {
  display: none;
}

/* line 65, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item .stars-item__content {
  position: relative;
  padding: 8px 16px 12px;
}

/* line 68, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item .stars-item__content::before {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
  background-position: center;
  background-repeat: no-repeat;
}

/* line 82, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item .stars-item__content .stars-item__title {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  text-transform: none !important;
  margin-bottom: 4px;
  margin-left: 0 !important;
}

/* line 92, app/assets/stylesheets/_components.stars.scss.erb */
.stars-item .stars-item__content .stars-item__count {
  opacity: 0.72;
}

@media (min-width: 768px) {
  /* line 98, app/assets/stylesheets/_components.stars.scss.erb */
  .stars-item .stars-item__source {
    padding: 8px;
    display: block;
  }
  /* line 101, app/assets/stylesheets/_components.stars.scss.erb */
  .stars-item .stars-item__source img {
    border-radius: 4px;
    width: 100%;
  }
  /* line 107, app/assets/stylesheets/_components.stars.scss.erb */
  .stars-item .stars-item__content::before {
    display: none;
  }
}
/* --------------------

    VIDEO

----------------------- */
/* line 8, app/assets/stylesheets/_components.videos.scss.erb */
.video-item {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 4px;
  background-color: var(--color-gray-03);
}

/* line 15, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__source {
  display: block;
  margin-bottom: 8px;
  border-radius: 2px;
  overflow: hidden;
}

/* line 21, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__source img {
  width: 100%;
  display: block;
}

/* line 27, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content {
  padding: 4px 12px;
}

/* line 29, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__title {
  margin-bottom: 4px;
  margin-left: 0px !important;
  text-transform: none !important;
}

/* line 34, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__title a {
  color: #fff;
}

@media (min-width: 768px) {
  /* line 29, app/assets/stylesheets/_components.videos.scss.erb */
  .video-item .video-item__content .video-item__title {
    font-size: 20px;
  }
}

/* line 43, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__stars,
.video-item .video-item__content .video-item__views,
.video-item .video-item__content .video-item__duration {
  font-size: 14px;
}

/* line 49, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__stars {
  margin-bottom: 4px;
}

/* line 53, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__views {
  color: #fff;
}

/* line 57, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__duration {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 6px 5px 32px;
  color: var(--color-gray-01);
  border-radius: 20px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 7px center;
  background-image: url(https://www.exotha.com/assets/icon-play-a6ef0e6c64de77dd651ab5885daf83c66031d000ffd7a68bc0f5e751cd02611c.svg);
}

/* line 70, app/assets/stylesheets/_components.videos.scss.erb */
.video-item .video-item__content .video-item__premium {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 5px 29px 5px;
  color: var(--color-gray-01);
  border-radius: 20px;
  height: 30px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 7px center;
}

/* --------------------

    POPULAR VIDEOS

----------------------- */
/* line 91, app/assets/stylesheets/_components.videos.scss.erb */
.popular-videos {
  padding: 56px 0px 36px;
}

/* line 94, app/assets/stylesheets/_components.videos.scss.erb */
.popular-videos h3 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* line 103, app/assets/stylesheets/_components.videos.scss.erb */
.popular-videos .popular-videos__view-all {
  margin-top: 24px;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 91, app/assets/stylesheets/_components.videos.scss.erb */
  .popular-videos {
    padding: 72px 0px 52px;
  }
  /* line 110, app/assets/stylesheets/_components.videos.scss.erb */
  .popular-videos h3 {
    font-size: 24px;
    line-height: 26px;
  }
  /* line 115, app/assets/stylesheets/_components.videos.scss.erb */
  .popular-videos .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  /* line 120, app/assets/stylesheets/_components.videos.scss.erb */
  .popular-videos .popular-videos__view-all {
    margin-top: 0px;
    position: absolute;
    top: -4px;
    right: 40px;
    width: auto;
  }
}

/* --------------------

    SIMILAR VIDEOS

----------------------- */
/* line 136, app/assets/stylesheets/_components.videos.scss.erb */
.similar-videos {
  padding-top: 56px;
  padding-bottom: 36px;
}

/* line 140, app/assets/stylesheets/_components.videos.scss.erb */
.similar-videos h3 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* line 149, app/assets/stylesheets/_components.videos.scss.erb */
.similar-videos .similar-videos__view-all {
  margin-top: 24px;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 136, app/assets/stylesheets/_components.videos.scss.erb */
  .similar-videos {
    padding: 72px 0px 52px;
  }
  /* line 156, app/assets/stylesheets/_components.videos.scss.erb */
  .similar-videos h3 {
    font-size: 24px;
    line-height: 26px;
  }
  /* line 161, app/assets/stylesheets/_components.videos.scss.erb */
  .similar-videos .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  /* line 166, app/assets/stylesheets/_components.videos.scss.erb */
  .similar-videos .similar-videos__view-all {
    margin-top: 0px;
    position: absolute;
    top: -4px;
    right: 40px;
    width: auto;
  }
}
/* --------------------

    VIDEOS DETAIL

----------------------- */
/* line 7, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail {
  display: block;
}

@media (min-width: 768px) {
  /* line 10, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Video */
/* line 20, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__source {
  order: 1;
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px;
}

/* line 26, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__source video {
  width: 100%;
}

@media (min-width: 960px) {
  /* line 20, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__source {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Title */
/* line 39, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__head {
  flex: 1;
  order: 2;
  padding: 16px;
  margin-left: -8px;
  margin-right: -8px;
}

/* line 46, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__head h1 {
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 8px;
}

/* line 53, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__head p {
  color: var(--color-gray-05);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  margin-bottom: 0;
}

@media (min-width: 960px) {
  /* line 39, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__head {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  /* line 67, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__head h1 {
    font-size: 28px;
    line-height: 32px;
  }
}

/* Specs */
/* line 76, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__specs {
  display: flex;
  order: 4;
  justify-content: space-between;
  padding: 16px;
  width: calc(100% + 16px);
  margin: 0px -8px;
  border-top: 1px solid var(--color-gray-04);
  border-bottom: 1px solid var(--color-gray-04);
  list-style: none;
}

/* line 88, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__specs li:nth-child(2) {
  text-align: center;
}

/* line 92, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__specs li:last-child {
  text-align: right;
}

/* line 96, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__specs li .info__value {
  color: var(--color-primary-03);
  font-weight: 400;
  margin-bottom: 2px;
}

/* line 102, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__specs li .info__label {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  /* line 76, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__specs {
    order: 5;
    margin: 0px;
    width: 100%;
    justify-content: flex-start;
  }
  /* line 116, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__specs li {
    text-align: left !important;
    margin-right: 48px;
  }
}

/* Plan */
/* line 124, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__plan {
  order: 5;
  width: calc(100% + 16px);
  padding: 16px;
  margin-left: -8px;
  margin-right: -8px;
}

@media (min-width: 960px) {
  /* line 124, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__plan {
    order: 4;
    width: auto;
  }
}

/* line 137, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__favorite {
  order: 3;
  padding: 16px;
}

/* line 141, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__favorite #btn-favorite {
  width: 53px;
  height: 53px;
  border-radius: 200px;
  background-image: url(https://www.exotha.com/assets/heart-1-71c5d49560bb17fc704e43319f4acc22b20d268d7e4dcda29020fbafc7c8181b.svg);
  background-position: center;
  background-repeat: no-repeat;
  transition: 100ms all;
}

/* line 150, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__favorite #btn-favorite.is-saved {
  width: 53px;
  height: 53px;
  border-radius: 200px;
  background-image: url(https://www.exotha.com/assets/heart-2-0298ed1b886ea60ab3e3c9a30efaa082899464d50e80eb4fcc7bb033345ef86f.svg);
  background-position: center;
  background-repeat: no-repeat;
  transition: 100ms all;
}

@media (min-width: 960px) {
  /* line 137, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__favorite {
    order: 2;
    width: auto;
  }
}

/* Tabs */
/* line 169, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs {
  order: 6;
  width: 100%;
  margin-top: 16px;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  margin-bottom: 24px;
}

/* line 177, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs {
  display: flex;
  border-bottom: 1px solid var(--color-gray-04);
}

/* line 181, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs .tabs__item {
  position: relative;
  padding: 15px 16px 17px;
  border: none;
  background-color: transparent;
  color: var(--color-gray-05);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
}

/* line 191, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs .tabs__item.is-active {
  color: #fff;
}

/* line 193, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs .tabs__item.is-active::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background-color: var(--color-primary-01);
}

/* line 206, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs-body {
  display: none;
  padding: 16px;
}

/* line 209, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs-body p {
  font-weight: 400;
  font-size: 14px;
  line-height: 160%;
  color: var(--color-gray-06);
}

/* line 216, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__tabs .tabs-body.is-active {
  display: block;
}

@media (min-width: 960px) {
  /* line 169, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__tabs {
    margin-right: 16px;
    flex: 1;
    order: 6;
  }
}

/* Stars */
/* line 230, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars {
  order: 7;
  width: 100%;
  margin-top: 0;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  margin-bottom: 24px;
}

/* line 238, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__head {
  border-bottom: 1px solid var(--color-gray-04);
  padding: 15px 16px 17px;
}

/* line 241, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__head h4 {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* line 251, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-gray-04);
}

/* line 256, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item:last-child {
  border-bottom: none;
}

/* line 260, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item .item__img {
  width: 112px;
  border-radius: 4px;
  height: 112px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 269, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item .item__info {
  padding-left: 24px;
}

/* line 271, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item .item__info h4 {
  font-weight: 400;
  margin-bottom: 12px;
  text-transform: none;
}

/* line 277, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__stars .stars__item .item__info a {
  color: var(--color-primary-03);
  font-weight: 600;
}

@media (min-width: 960px) {
  /* line 230, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__stars {
    order: 7;
    width: 40%;
    margin-top: 16px;
  }
}

/* Shots */
/* line 293, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots {
  order: 8;
  width: 100%;
  margin-top: 0;
  background-color: var(--color-gray-03);
  border-radius: 4px;
}

/* line 300, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head {
  position: relative;
  border-bottom: 1px solid var(--color-gray-04);
  padding: 15px 16px 17px;
}

/* line 304, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head h4 {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* line 313, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head .shots__controls {
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

/* line 318, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head .shots__controls .prev,
.video-detail__shots .shots__head .shots__controls .next {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 4px;
  background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border: none;
}

/* line 330, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head .shots__controls .prev:focus,
.video-detail__shots .shots__head .shots__controls .next:focus {
  background-color: var(--color-gray-04);
}

/* line 335, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__head .shots__controls .prev {
  transform: rotate(180deg);
}

/* line 341, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__slider {
  margin-top: 0;
  margin-bottom: 0;
  padding: 16px 16px 8px;
  list-style: none;
  overflow: hidden;
}

/* line 347, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__slider .shots__item {
  width: 40%;
  height: auto;
  margin-right: 16px;
}

/* line 351, app/assets/stylesheets/_components.videos-detail.scss.erb */
.video-detail__shots .shots__slider .shots__item img {
  border-radius: 4px;
  display: block;
  width: 100%;
}

@media (min-width: 960px) {
  /* line 293, app/assets/stylesheets/_components.videos-detail.scss.erb */
  .video-detail__shots {
    order: 7;
  }
}

/* line 364, app/assets/stylesheets/_components.videos-detail.scss.erb */
.text_init {
  padding-top: 10px;
}
/* --------------------

    CATEGORIES FEATURED

----------------------- */
/* line 7, app/assets/stylesheets/_components.categories.scss.erb */
.featured-categories {
  padding-bottom: 56px;
}

/* line 10, app/assets/stylesheets/_components.categories.scss.erb */
.featured-categories h3 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* line 19, app/assets/stylesheets/_components.categories.scss.erb */
.featured-categories .featured-categories__view-all {
  margin-top: 24px;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.categories.scss.erb */
  .featured-categories {
    padding: 72px 0px 52px;
  }
  /* line 26, app/assets/stylesheets/_components.categories.scss.erb */
  .featured-categories h3 {
    font-size: 24px;
    line-height: 26px;
  }
  /* line 31, app/assets/stylesheets/_components.categories.scss.erb */
  .featured-categories .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  /* line 36, app/assets/stylesheets/_components.categories.scss.erb */
  .featured-categories .featured-categories__view-all {
    margin-top: 0px;
    position: absolute;
    top: -4px;
    right: 40px;
    width: auto;
  }
}

/* --------------------

    CATEGORIES ITEM

----------------------- */
/* line 52, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item {
  display: block;
  background-color: var(--color-gray-03);
  border-radius: 4px;
  color: #fff;
}

/* line 58, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item .categories-item__source {
  display: none;
}

/* line 62, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item .categories-item__content {
  position: relative;
  padding: 8px 16px 12px;
}

/* line 65, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item .categories-item__content::before {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
  background-position: center;
  background-repeat: no-repeat;
}

/* line 79, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item .categories-item__content .categories-item__title {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  text-transform: none !important;
  margin-bottom: 4px;
  margin-left: 0 !important;
}

/* line 89, app/assets/stylesheets/_components.categories.scss.erb */
.categories-item .categories-item__content .categories-item__count {
  opacity: 0.72;
}

@media (min-width: 768px) {
  /* line 95, app/assets/stylesheets/_components.categories.scss.erb */
  .categories-item .categories-item__source {
    padding: 8px;
    display: block;
  }
  /* line 98, app/assets/stylesheets/_components.categories.scss.erb */
  .categories-item .categories-item__source img {
    border-radius: 4px;
    width: 100%;
  }
  /* line 104, app/assets/stylesheets/_components.categories.scss.erb */
  .categories-item .categories-item__content::before {
    display: none;
  }
}
/* --------------------

    HEADER

----------------------- */
/* line 7, app/assets/stylesheets/_components.header.scss.erb */
.header {
  padding-top: 6px;
  padding-bottom: 16px;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.header.scss.erb */
  .header {
    padding: 0;
  }
  /* line 12, app/assets/stylesheets/_components.header.scss.erb */
  .header .container--flex {
    align-items: center;
    padding: 8px 32px;
    order: 1;
    flex: none;
  }
}

/* line 21, app/assets/stylesheets/_components.header.scss.erb */
.header__logo {
  display: inline-block;
  flex: 1;
  margin-bottom: 4px;
}

/* line 26, app/assets/stylesheets/_components.header.scss.erb */
.header__logo img {
  width: 107px;
}

@media (min-width: 768px) {
  /* line 21, app/assets/stylesheets/_components.header.scss.erb */
  .header__logo {
    order: 1;
    flex: none;
    margin-right: 20px;
  }
}

/* line 37, app/assets/stylesheets/_components.header.scss.erb */
.header__search {
  width: 100%;
}

/* line 40, app/assets/stylesheets/_components.header.scss.erb */
.header__search input {
  display: block;
  width: 100%;
  padding: 10px 8px 10px 44px;
  border: none;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--color-gray-04);
  background-image: url(https://www.exotha.com/assets/icon-search-a649e7c05bd389472fa2077625213b7fb13ce7b9af342a29bcc0a054d93e9e75.svg);
  background-repeat: no-repeat;
  background-position: 8px 8px;
  color: #fff;
}

/* line 52, app/assets/stylesheets/_components.header.scss.erb */
.header__search input::placeholder {
  color: #fff;
}

/* line 56, app/assets/stylesheets/_components.header.scss.erb */
.header__search input:focus {
  border: 2px solid var(--color-primary-01);
}

@media (min-width: 768px) {
  /* line 37, app/assets/stylesheets/_components.header.scss.erb */
  .header__search {
    order: 2;
    max-width: 322px;
    margin-right: 20px;
  }
  /* line 65, app/assets/stylesheets/_components.header.scss.erb */
  .header__search input {
    border-radius: 40px;
  }
}

/* Navigation */
@media (min-width: 768px) {
  /* line 73, app/assets/stylesheets/_components.header.scss.erb */
  .header__nav {
    flex: 1;
    display: flex;
    order: 3;
  }
}

/* line 81, app/assets/stylesheets/_components.header.scss.erb */
.nav__quick,
.nav__tabs {
  align-self: center;
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* line 90, app/assets/stylesheets/_components.header.scss.erb */
.nav__quick {
  display: flex;
  padding-top: 10px;
}

/* line 93, app/assets/stylesheets/_components.header.scss.erb */
.nav__quick li {
  margin-left: 12px;
}

@media (min-width: 768px) {
  /* line 90, app/assets/stylesheets/_components.header.scss.erb */
  .nav__quick {
    padding-top: 0;
    order: 2;
  }
}

/* line 103, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs {
  z-index: 10;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  background-color: var(--color-gray-03);
  box-shadow: 0px 8px 31px rgba(0, 0, 0, 0.4);
}

/* line 112, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li {
  width: 25%;
}

/* line 114, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li > a {
  display: block;
  padding: 33px 0px 7px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center 6px;
  border-top: 2px solid var(--color-gray-03);
}

/* line 124, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li > a.icon-home {
  background-image: url(https://www.exotha.com/assets/icon-home-a18f65af8609266fedaf7acf783aa264b2e7f43ebac9e6cc57d82d767250c547.svg);
}

/* line 129, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li > a.icon-star {
  background-image: url(https://www.exotha.com/assets/icon-star-b90241a37a4ab844241db72bec4eb64c602f76818db94dcbab7bb474298ce98b.svg);
}

/* line 133, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li > a.icon-category {
  background-image: url(https://www.exotha.com/assets/icon-tags-8e5eeb387282f4a284e1726b3223f90f32485947520ab32af08781f7d56ee4fa.svg);
}

/* line 137, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li > a.icon-video {
  background-image: url(https://www.exotha.com/assets/icon-video-51472c8c46a68b203ef72ad74668a6feddf26eae2de77e1c15ee0060dd310a00.svg);
}

/* line 143, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-active > a.icon-home,
.nav__tabs > li.is-active > a.icon-star,
.nav__tabs > li.is-active > a.icon-category,
.nav__tabs > li.is-active > a.icon-video {
  border-top: 2px solid var(--color-primary-01);
  color: var(--color-primary-01);
}

/* line 151, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-active > a.icon-home {
  background-image: url(https://www.exotha.com/assets/icon-home-actived-55e02abeda7f31b2bd3f6f4f39e953fc705dffb5dc344a09818b28e662836142.svg);
}

/* line 156, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-active > a.icon-star {
  background-image: url(https://www.exotha.com/assets/icon-star-actived-eb91dbe0845d89abfdfbca66f08f8b7c8b0f2aab96d0f08816c97777aee405aa.svg);
}

/* line 160, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-active > a.icon-category {
  background-image: url(https://www.exotha.com/assets/icon-tags-actived-644f541cf99cd3a34f674fe4f168fe63fe6fe1c632ddd69a54f4f629ba3a84d1.svg);
}

/* line 164, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-active > a.icon-video {
  background-image: url(https://www.exotha.com/assets/icon-video-actived-f50d2a788dd01fe012b623c9701e9e9356f04cdd64084f1952ad3a24fa41599d.svg);
}

@media (min-width: 768px) {
  /* line 103, app/assets/stylesheets/_components.header.scss.erb */
  .nav__tabs {
    position: static;
    background-color: transparent;
    box-shadow: none;
    width: auto;
    flex: 1;
    order: 1;
  }
  /* line 177, app/assets/stylesheets/_components.header.scss.erb */
  .nav__tabs > li {
    width: auto;
    margin-right: 12px;
  }
  /* line 180, app/assets/stylesheets/_components.header.scss.erb */
  .nav__tabs > li > a {
    border-radius: 200px;
    border-top: none;
    font-size: 17px;
    padding: 8px 16px;
    background-image: none !important;
  }
  /* line 186, app/assets/stylesheets/_components.header.scss.erb */
  .nav__tabs > li > a:hover {
    background-color: var(--color-gray-03);
  }
  /* line 192, app/assets/stylesheets/_components.header.scss.erb */
  .nav__tabs > li.is-active > a {
    border-top: none !important;
  }
}

/* Dropdown active */
/* line 201, app/assets/stylesheets/_components.header.scss.erb */
.nav__tabs > li.is-opened .dropdown {
  display: block;
}
/* --------------------

    DROPDOWN

----------------------- */
/* line 7, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown {
  z-index: 3;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  border-bottom: 1px solid var(--color-gray-04);
  background-color: var(--color-gray-03);
}

/* line 19, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__header {
  position: relative;
  padding: 16px;
  color: var(--color-primary-03);
}

/* line 25, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__close {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/../img/icon-close-red.svg);
  background-position: center;
  background-repeat: no-repeat;
}

/* line 38, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__header h4 {
  margin-bottom: 0;
}

/* line 42, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__menu {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* line 48, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__menu > li {
  margin-bottom: 1px;
}

/* line 52, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__menu > li > a {
  position: relative;
  display: block;
  color: #fff;
  padding: 16px;
  background-color: var(--color-gray-04);
}

/* line 60, app/assets/stylesheets/_components.dropdown.scss.erb */
.dropdown__menu > li > a::before {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background-image: url(https://www.exotha.com/assets/icon-arrow-right-3b7e1d9c4dc8eedf9579e2debe6367941553d228a00d00e6cba299f031aca8b4.svg);
  background-position: center;
  background-repeat: no-repeat;
}
/* --------------------

    ENTER

----------------------- */
/* line 7, app/assets/stylesheets/_components.enter.scss.erb */
.enter {
  display: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-03);
  padding: 20% 48px 48px;
  overflow-y: scroll;
}

/* line 19, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__logo {
  display: block;
  width: 156px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

/* line 27, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 40px;
  background-color: var(--color-gray-04);
  background-image: url(https://www.exotha.com/assets/icon-close-white-17db28d77cc19c5569727eac7f88b46c9ae23a15e5577c59f35008ec4016d370.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

/* line 42, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__divider {
  position: relative;
  margin-top: 40px;
  margin-bottom: 38px;
  text-align: center;
}

/* line 48, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__divider h4 {
  position: relative;
  display: inline-block;
  padding: 0 8px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gray-06);
  background-color: var(--color-gray-03);
}

/* line 62, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__divider::before {
  content: " ";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-05);
}

/* line 75, app/assets/stylesheets/_components.enter.scss.erb */
.enter .enter__form .change-password {
  display: block;
  margin-top: 6px;
  color: var(--color-primary-03);
  font-size: 13px;
}

@media (min-width: 768px) {
  /* line 7, app/assets/stylesheets/_components.enter.scss.erb */
  .enter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  /* line 91, app/assets/stylesheets/_components.enter.scss.erb */
  .enter .enter__wrapper {
    position: fixed;
    padding: 48px 48px;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background-color: var(--color-gray-03);
    box-shadow: var(--shadow-bigger);
  }
}

/* line 106, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-03);
  padding: 20% 48px 48px;
  overflow-y: scroll;
}

/* line 117, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__logo {
  display: block;
  width: 156px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

/* line 125, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 40px;
  background-color: var(--color-gray-04);
  background-image: url(https://www.exotha.com/assets/icon-close-red-52d4c7f775d413aff1b7b19225622cab84738c83fa0fdfd6b6f08417199d6cce.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

/* line 140, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__divider {
  position: relative;
  margin-top: 40px;
  margin-bottom: 38px;
  text-align: center;
}

/* line 146, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__divider h4 {
  position: relative;
  display: inline-block;
  padding: 0 8px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gray-06);
  background-color: var(--color-gray-03);
}

/* line 160, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__divider::before {
  content: " ";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-05);
}

/* line 173, app/assets/stylesheets/_components.enter.scss.erb */
.enter_login .enter__form .change-password {
  display: block;
  margin-top: 6px;
  color: var(--color-primary-03);
  font-size: 13px;
}
/* --------------------

    TEXT ALIGN

----------------------- */
/* line 7, app/assets/stylesheets/_trumps.text-align.scss */
.text-align--center {
  text-align: center;
}
/* ========================================
   NOTIFICATIONS - Estilos generales
   Exotha Design System
   ======================================== */
/* line 23, app/assets/stylesheets/notifications.scss */
.notification-container {
  position: relative;
  display: inline-block;
}

/* line 31, app/assets/stylesheets/notifications.scss */
.notification-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

/* line 41, app/assets/stylesheets/notifications.scss */
.notification-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* line 50, app/assets/stylesheets/notifications.scss */
.notification-dropdown-container {
  position: fixed !important;
  width: 360px !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 80px -20px rgba(255, 0, 116, 0.1) !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 480px !important;
  overflow: hidden !important;
}

/* line 68, app/assets/stylesheets/notifications.scss */
.notification-dropdown-container.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* line 75, app/assets/stylesheets/notifications.scss */
.notification-dropdown-container::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--arrow-position, 30px);
  width: 12px;
  height: 12px;
  background: #0a0a0a;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}

/* line 93, app/assets/stylesheets/notifications.scss */
.notifications-dropdown {
  max-height: 480px;
  display: flex;
  flex-direction: column;
}

/* line 99, app/assets/stylesheets/notifications.scss */
.notifications-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255, 0, 116, 0.05) 0%, transparent 100%);
}

/* line 111, app/assets/stylesheets/notifications.scss */
.notifications-header h3 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 121, app/assets/stylesheets/notifications.scss */
.notifications-header h3::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #ff0074;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff0074;
}

/* line 131, app/assets/stylesheets/notifications.scss */
.notifications-header .mark-all-read {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #ff3d9a;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* line 142, app/assets/stylesheets/notifications.scss */
.notifications-header .mark-all-read:hover {
  background: rgba(255, 0, 116, 0.1);
}

/* line 151, app/assets/stylesheets/notifications.scss */
.notifications-list {
  flex: 1;
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* line 156, app/assets/stylesheets/notifications.scss */
.notifications-list::-webkit-scrollbar {
  width: 5px;
}

/* line 160, app/assets/stylesheets/notifications.scss */
.notifications-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 164, app/assets/stylesheets/notifications.scss */
.notifications-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* line 168, app/assets/stylesheets/notifications.scss */
.notifications-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* line 180, app/assets/stylesheets/notifications.scss */
.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* line 191, app/assets/stylesheets/notifications.scss */
.notification-item:last-child {
  border-bottom: none;
}

/* line 195, app/assets/stylesheets/notifications.scss */
.notification-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* line 199, app/assets/stylesheets/notifications.scss */
.notification-item.unread {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.08) 0%, transparent 100%);
}

/* line 205, app/assets/stylesheets/notifications.scss */
.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #ff3d9a, #ff0074);
}

/* line 215, app/assets/stylesheets/notifications.scss */
.notification-item.unread:hover {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* line 227, app/assets/stylesheets/notifications.scss */
.notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 14px;
  flex-shrink: 0;
}

/* line 238, app/assets/stylesheets/notifications.scss */
.notification-icon.notification-success {
  background: linear-gradient(145deg, rgba(40, 167, 69, 0.18) 0%, rgba(40, 167, 69, 0.06) 100%);
  border: 1px solid rgba(40, 167, 69, 0.2);
}

/* line 246, app/assets/stylesheets/notifications.scss */
.notification-icon.notification-danger {
  background: linear-gradient(145deg, rgba(220, 53, 69, 0.18) 0%, rgba(220, 53, 69, 0.06) 100%);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* line 254, app/assets/stylesheets/notifications.scss */
.notification-icon.notification-primary {
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.18) 0%, rgba(255, 0, 116, 0.06) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
}

/* line 262, app/assets/stylesheets/notifications.scss */
.notification-icon.notification-warning {
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.06) 100%);
  border: 1px solid rgba(255, 193, 7, 0.2);
}

/* line 270, app/assets/stylesheets/notifications.scss */
.notification-icon.notification-info {
  background: linear-gradient(145deg, rgba(23, 162, 184, 0.18) 0%, rgba(23, 162, 184, 0.06) 100%);
  border: 1px solid rgba(23, 162, 184, 0.2);
}

/* line 282, app/assets/stylesheets/notifications.scss */
.notification-content {
  flex: 1;
  min-width: 0;
}

/* line 287, app/assets/stylesheets/notifications.scss */
.notification-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.3;
}

/* line 296, app/assets/stylesheets/notifications.scss */
.notification-message {
  font-family: 'Rubik', sans-serif;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* line 308, app/assets/stylesheets/notifications.scss */
.notification-time {
  font-family: 'Rubik', sans-serif;
  color: #5a5a5a;
  font-size: 11px;
}

/* line 317, app/assets/stylesheets/notifications.scss */
.notification-actions {
  margin-left: 12px;
  flex-shrink: 0;
}

/* line 321, app/assets/stylesheets/notifications.scss */
.notification-actions .mark-read-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #5a5a5a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 331, app/assets/stylesheets/notifications.scss */
.notification-actions .mark-read-btn:hover {
  background: rgba(255, 0, 116, 0.1);
  border-color: rgba(255, 0, 116, 0.3);
  color: #ff3d9a;
}

/* line 342, app/assets/stylesheets/notifications.scss */
.notifications-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  flex-shrink: 0;
  background: linear-gradient(0deg, rgba(255, 0, 116, 0.03) 0%, transparent 100%);
}

/* line 352, app/assets/stylesheets/notifications.scss */
.notifications-footer .view-all-link {
  font-family: 'Montserrat', sans-serif;
  color: #ff3d9a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  transition: all 0.2s ease;
}

/* line 363, app/assets/stylesheets/notifications.scss */
.notifications-footer .view-all-link:hover {
  background: rgba(255, 0, 116, 0.1);
}

/* line 372, app/assets/stylesheets/notifications.scss */
.empty-notifications {
  padding: 50px 20px;
  text-align: center;
}

/* line 376, app/assets/stylesheets/notifications.scss */
.empty-notifications .empty-icon {
  font-size: 36px;
  margin-bottom: 14px;
  opacity: 0.25;
  filter: grayscale(0.8);
}

/* line 383, app/assets/stylesheets/notifications.scss */
.empty-notifications p {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #5a5a5a;
}

/* line 394, app/assets/stylesheets/notifications.scss */
meta[name="current-user-id"] {
  display: none;
}
/* ========================================
   NOTIFICATIONS MODAL - Exotha Premium
   Design System: Dark luxury with coral accents
   ======================================== */
/* line 25, app/assets/stylesheets/notifications_modal.scss */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 37, app/assets/stylesheets/notifications_modal.scss */
.modal-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* line 46, app/assets/stylesheets/notifications_modal.scss */
.notification-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 32px 64px -12px rgba(0, 0, 0, 0.8), 0 0 120px -20px rgba(255, 0, 116, 0.15);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* line 69, app/assets/stylesheets/notifications_modal.scss */
.notification-modal-container.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* line 79, app/assets/stylesheets/notifications_modal.scss */
.notifications-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 80vh;
}

/* line 89, app/assets/stylesheets/notifications_modal.scss */
.modal-header {
  padding: 24px 28px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 0, 116, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 102, app/assets/stylesheets/notifications_modal.scss */
.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ff0074 50%, transparent 100%);
  opacity: 0.6;
}

/* line 117, app/assets/stylesheets/notifications_modal.scss */
.modal-header h2 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 128, app/assets/stylesheets/notifications_modal.scss */
.modal-header h2::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #ff0074;
  border-radius: 50%;
  box-shadow: 0 0 12px #ff0074;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* line 139, app/assets/stylesheets/notifications_modal.scss */
.modal-header .close-modal {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #8a8a8a;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 152, app/assets/stylesheets/notifications_modal.scss */
.modal-header .close-modal svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 158, app/assets/stylesheets/notifications_modal.scss */
.modal-header .close-modal:hover {
  background: rgba(255, 0, 116, 0.12);
  border-color: rgba(255, 0, 116, 0.3);
  color: #ff3d9a;
}

/* line 163, app/assets/stylesheets/notifications_modal.scss */
.modal-header .close-modal:hover svg {
  transform: rotate(90deg);
}

/* line 168, app/assets/stylesheets/notifications_modal.scss */
.modal-header .close-modal:active {
  transform: scale(0.95);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 12px #ff0074;
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 20px #ff0074;
  }
}

/* line 188, app/assets/stylesheets/notifications_modal.scss */
.modal-actions {
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 193, app/assets/stylesheets/notifications_modal.scss */
.modal-actions .mark-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255, 0, 116, 0.25);
  color: #ff3d9a;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 209, app/assets/stylesheets/notifications_modal.scss */
.modal-actions .mark-all-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* line 215, app/assets/stylesheets/notifications_modal.scss */
.modal-actions .mark-all-btn:hover {
  background: rgba(255, 0, 116, 0.1);
  border-color: rgba(255, 0, 116, 0.4);
  transform: translateY(-1px);
}

/* line 221, app/assets/stylesheets/notifications_modal.scss */
.modal-actions .mark-all-btn:active {
  transform: translateY(0);
}

/* line 230, app/assets/stylesheets/notifications_modal.scss */
.notifications-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  background: #000;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* line 238, app/assets/stylesheets/notifications_modal.scss */
.notifications-content::-webkit-scrollbar {
  width: 5px;
}

/* line 242, app/assets/stylesheets/notifications_modal.scss */
.notifications-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

/* line 247, app/assets/stylesheets/notifications_modal.scss */
.notifications-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* line 251, app/assets/stylesheets/notifications_modal.scss */
.notifications-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* line 264, app/assets/stylesheets/notifications_modal.scss */
.notification-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  margin-bottom: 8px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* line 279, app/assets/stylesheets/notifications_modal.scss */
.notification-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* line 293, app/assets/stylesheets/notifications_modal.scss */
.notification-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #ff3d9a, #ff0074);
  border-radius: 0 2px 2px 0;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 306, app/assets/stylesheets/notifications_modal.scss */
.notification-card:hover {
  background: #161616;
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

/* line 311, app/assets/stylesheets/notifications_modal.scss */
.notification-card:hover::before {
  opacity: 1;
}

/* line 315, app/assets/stylesheets/notifications_modal.scss */
.notification-card:hover::after {
  height: 60%;
}

/* line 319, app/assets/stylesheets/notifications_modal.scss */
.notification-card:hover .notification-icon-wrapper {
  transform: scale(1.05);
}

/* line 325, app/assets/stylesheets/notifications_modal.scss */
.notification-card.unread {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, #111111 100%);
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 332, app/assets/stylesheets/notifications_modal.scss */
.notification-card.unread::after {
  height: 40%;
  opacity: 1;
}

/* line 337, app/assets/stylesheets/notifications_modal.scss */
.notification-card.unread .notification-body h4 {
  color: #fff;
}

/* line 341, app/assets/stylesheets/notifications_modal.scss */
.notification-card.unread:hover {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.12) 0%, #161616 100%);
  border-color: rgba(255, 0, 116, 0.35);
}

/* line 348, app/assets/stylesheets/notifications_modal.scss */
.notification-card.unread:hover::after {
  height: 70%;
}

/* line 354, app/assets/stylesheets/notifications_modal.scss */
.notification-card:last-child {
  margin-bottom: 0;
}

/* line 362, app/assets/stylesheets/notifications_modal.scss */
.notification-left {
  flex-shrink: 0;
}

/* line 366, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* line 379, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0.5;
}

/* line 391, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper.notification-success {
  background: linear-gradient(145deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.08) 100%);
  border: 1px solid rgba(40, 167, 69, 0.25);
}

/* line 399, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper.notification-danger {
  background: linear-gradient(145deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.08) 100%);
  border: 1px solid rgba(220, 53, 69, 0.25);
}

/* line 407, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper.notification-primary {
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.08) 100%);
  border: 1px solid rgba(255, 0, 116, 0.25);
}

/* line 415, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper.notification-warning {
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.08) 100%);
  border: 1px solid rgba(255, 193, 7, 0.25);
}

/* line 423, app/assets/stylesheets/notifications_modal.scss */
.notification-icon-wrapper.notification-info {
  background: linear-gradient(145deg, rgba(23, 162, 184, 0.2) 0%, rgba(23, 162, 184, 0.08) 100%);
  border: 1px solid rgba(23, 162, 184, 0.25);
}

/* line 435, app/assets/stylesheets/notifications_modal.scss */
.notification-body {
  flex: 1;
  min-width: 0;
}

/* line 439, app/assets/stylesheets/notifications_modal.scss */
.notification-body h4 {
  margin: 0 0 4px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* line 449, app/assets/stylesheets/notifications_modal.scss */
.notification-body p {
  margin: 0 0 8px 0;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8a8a8a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* line 461, app/assets/stylesheets/notifications_modal.scss */
.notification-body .notification-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #5a5a5a;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* line 471, app/assets/stylesheets/notifications_modal.scss */
.notification-body .notification-time svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* line 482, app/assets/stylesheets/notifications_modal.scss */
.empty-state {
  text-align: center;
  padding: 60px 32px;
}

/* line 486, app/assets/stylesheets/notifications_modal.scss */
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.25;
  filter: grayscale(0.8);
}

/* line 493, app/assets/stylesheets/notifications_modal.scss */
.empty-state h3 {
  margin: 0 0 10px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #f5f5f5;
  letter-spacing: -0.01em;
}

/* line 502, app/assets/stylesheets/notifications_modal.scss */
.empty-state p {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}

/* line 516, app/assets/stylesheets/notifications_modal.scss */
.modal-footer {
  padding: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(0deg, rgba(255, 0, 116, 0.04) 0%, transparent 100%);
}

/* line 524, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ff0074 0%, #d60061 100%);
  border: none;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* line 551, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  transition: left 0.5s ease;
}

/* line 566, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 572, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* line 578, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn:hover::before {
  left: 100%;
}

/* line 582, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn:hover svg {
  transform: translateX(4px);
}

/* line 587, app/assets/stylesheets/notifications_modal.scss */
.modal-footer .view-all-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  /* line 597, app/assets/stylesheets/notifications_modal.scss */
  .notification-modal-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  /* line 605, app/assets/stylesheets/notifications_modal.scss */
  .notification-modal-container.show {
    transform: translate(-50%, -50%) scale(1);
  }
  /* line 610, app/assets/stylesheets/notifications_modal.scss */
  .notifications-modal {
    max-height: 100vh;
  }
  /* line 614, app/assets/stylesheets/notifications_modal.scss */
  .modal-header {
    padding: 20px 20px 16px;
  }
  /* line 617, app/assets/stylesheets/notifications_modal.scss */
  .modal-header::before {
    left: 20px;
    right: 20px;
  }
  /* line 622, app/assets/stylesheets/notifications_modal.scss */
  .modal-header h2 {
    font-size: 17px;
  }
  /* line 627, app/assets/stylesheets/notifications_modal.scss */
  .modal-actions {
    padding: 12px 20px;
  }
  /* line 631, app/assets/stylesheets/notifications_modal.scss */
  .notifications-content {
    padding: 12px 16px;
  }
  /* line 635, app/assets/stylesheets/notifications_modal.scss */
  .notification-card {
    padding: 14px;
    gap: 12px;
    border-radius: 12px;
  }
  /* line 641, app/assets/stylesheets/notifications_modal.scss */
  .notification-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }
  /* line 649, app/assets/stylesheets/notifications_modal.scss */
  .notification-body h4 {
    font-size: 13px;
  }
  /* line 653, app/assets/stylesheets/notifications_modal.scss */
  .notification-body p {
    font-size: 12px;
  }
  /* line 658, app/assets/stylesheets/notifications_modal.scss */
  .modal-footer {
    padding: 16px 20px;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    /* line 658, app/assets/stylesheets/notifications_modal.scss */
    .modal-footer {
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
  /* line 665, app/assets/stylesheets/notifications_modal.scss */
  .modal-footer .view-all-btn {
    padding: 14px 20px;
    border-radius: 10px;
  }
  /* line 671, app/assets/stylesheets/notifications_modal.scss */
  .empty-state {
    padding: 48px 24px;
  }
  /* line 674, app/assets/stylesheets/notifications_modal.scss */
  .empty-state .empty-icon {
    font-size: 40px;
  }
  /* line 678, app/assets/stylesheets/notifications_modal.scss */
  .empty-state h3 {
    font-size: 16px;
  }
  /* line 682, app/assets/stylesheets/notifications_modal.scss */
  .empty-state p {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 692, app/assets/stylesheets/notifications_modal.scss */
  .modal-backdrop,
.notification-modal-container,
.notification-card,
.close-modal,
.close-modal svg,
.mark-all-btn,
.view-all-btn,
.notification-icon-wrapper {
    transition: none;
  }
  /* line 703, app/assets/stylesheets/notifications_modal.scss */
  .modal-header h2::before {
    animation: none;
  }
  /* line 707, app/assets/stylesheets/notifications_modal.scss */
  .view-all-btn::before {
    display: none;
  }
}
/* line 3, app/assets/stylesheets/likes.scss */
.like-button-container {
  display: inline-block;
}

/* line 7, app/assets/stylesheets/likes.scss */
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* line 22, app/assets/stylesheets/likes.scss */
.like-button:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.05);
}

/* line 29, app/assets/stylesheets/likes.scss */
.like-button:active:not(.disabled) {
  transform: scale(0.95);
}

/* line 33, app/assets/stylesheets/likes.scss */
.like-button svg {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

/* line 39, app/assets/stylesheets/likes.scss */
.like-button .like-count {
  font-weight: 600;
}

/* line 43, app/assets/stylesheets/likes.scss */
.like-button.liked {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* line 48, app/assets/stylesheets/likes.scss */
.like-button.liked svg {
  color: #ef4444;
  animation: heartbeat 0.5s ease;
}

/* line 53, app/assets/stylesheets/likes.scss */
.like-button.liked:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* line 59, app/assets/stylesheets/likes.scss */
.like-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* line 63, app/assets/stylesheets/likes.scss */
.like-button.disabled:hover {
  transform: none;
  background: transparent;
}

/* line 70, app/assets/stylesheets/likes.scss */
.like-button.login-required:hover {
  background: rgba(223, 76, 66, 0.1);
  border-color: var(--color-primary-01);
  color: var(--color-primary-01);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* line 97, app/assets/stylesheets/likes.scss */
.content-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 107, app/assets/stylesheets/likes.scss */
.content-stats {
  display: flex;
  align-items: center;
  gap: 30px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* line 114, app/assets/stylesheets/likes.scss */
.content-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* line 119, app/assets/stylesheets/likes.scss */
.content-stats .stat-item svg {
  width: 18px;
  height: 18px;
}

/* line 124, app/assets/stylesheets/likes.scss */
.content-stats .stat-item span {
  font-weight: 500;
}
/* line 2, app/assets/stylesheets/content_preview.scss */
.content-card {
  background: var(--color-gray-02, #282828);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* line 10, app/assets/stylesheets/content_preview.scss */
.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* line 15, app/assets/stylesheets/content_preview.scss */
.content-card.locked {
  position: relative;
}

/* line 21, app/assets/stylesheets/content_preview.scss */
.content-media {
  position: relative;
  width: 100%;
  background: var(--color-gray-01, #1F1F1F);
  overflow: visible;
}

/* line 27, app/assets/stylesheets/content_preview.scss */
.content-media img, .content-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 35, app/assets/stylesheets/content_preview.scss */
.content-card.locked .content-media {
  aspect-ratio: auto !important;
  height: auto;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* line 47, app/assets/stylesheets/content_preview.scss */
.content-card.locked .content-media {
  position: relative;
}

/* line 52, app/assets/stylesheets/content_preview.scss */
.locked-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 500px;
  z-index: 1;
}

/* line 61, app/assets/stylesheets/content_preview.scss */
.locked-preview .blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0c0c0c;
  background-image: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 40%, rgba(255, 0, 116, 0.08) 0%, transparent 50%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  background-size: cover;
  background-position: center;
}

/* line 78, app/assets/stylesheets/content_preview.scss */
.locked-preview .default-blur {
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 40%, rgba(255, 0, 116, 0.08) 0%, transparent 50%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  filter: none !important;
  transform: none;
  animation: lockedPulse 6s ease-in-out infinite;
}

/* line 88, app/assets/stylesheets/content_preview.scss */
.locked-preview .default-blur::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 0, 116, 0.06) 0%, transparent 30%), radial-gradient(circle at 80% 20%, rgba(255, 61, 154, 0.04) 0%, transparent 25%);
  animation: lockedFloat 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lockedPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

@keyframes lockedFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -1%) scale(1.02);
  }
  66% {
    transform: translate(-1%, 2%) scale(0.98);
  }
}

/* line 115, app/assets/stylesheets/content_preview.scss */
.locked-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* line 132, app/assets/stylesheets/content_preview.scss */
.locked-preview:has(.default-blur)::after {
  display: none;
}

/* line 138, app/assets/stylesheets/content_preview.scss */
.unlock-overlay {
  position: absolute;
  top: 39%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* line 153, app/assets/stylesheets/content_preview.scss */
.lock-icon-container {
  margin-bottom: 16px;
  width: 64px;
  height: 64px;
  background: rgba(31, 31, 31, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* line 167, app/assets/stylesheets/content_preview.scss */
.lock-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* line 172, app/assets/stylesheets/content_preview.scss */
.unlock-message {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  text-align: center;
  padding: 0 20px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* line 185, app/assets/stylesheets/content_preview.scss */
.btn-unlock,
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 180px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* line 203, app/assets/stylesheets/content_preview.scss */
.btn-unlock svg,
.btn-subscribe svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* line 210, app/assets/stylesheets/content_preview.scss */
.btn-unlock {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(223, 76, 66, 0.3);
}

/* line 215, app/assets/stylesheets/content_preview.scss */
.btn-unlock:hover {
  background: linear-gradient(135deg, #ff4081 0%, #fd2f77 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(223, 76, 66, 0.4);
}

/* line 221, app/assets/stylesheets/content_preview.scss */
.btn-unlock:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(223, 76, 66, 0.3);
}

/* line 227, app/assets/stylesheets/content_preview.scss */
.btn-subscribe {
  background: var(--color-gray-03, #363636);
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* line 232, app/assets/stylesheets/content_preview.scss */
.btn-subscribe:hover {
  background: var(--color-gray-04, #535353);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* line 238, app/assets/stylesheets/content_preview.scss */
.btn-subscribe:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* line 245, app/assets/stylesheets/content_preview.scss */
.content-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-gray-02, #282828);
}

/* line 254, app/assets/stylesheets/content_preview.scss */
.creator-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 260, app/assets/stylesheets/content_preview.scss */
.creator-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f5f5f5;
  transition: opacity 0.2s;
}

/* line 268, app/assets/stylesheets/content_preview.scss */
.creator-link:hover {
  opacity: 0.8;
}

/* line 273, app/assets/stylesheets/content_preview.scss */
.creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary-01, #DF4C42);
}

/* line 281, app/assets/stylesheets/content_preview.scss */
.creator-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-01, #DF4C42) 0%, var(--color-primary-02, #FF746A) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  border: 2px solid var(--color-primary-01, #DF4C42);
}

/* line 295, app/assets/stylesheets/content_preview.scss */
.creator-username {
  font-weight: 600;
  font-size: 14px;
}

/* line 301, app/assets/stylesheets/content_preview.scss */
.content-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 307, app/assets/stylesheets/content_preview.scss */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  white-space: nowrap;
}

/* line 319, app/assets/stylesheets/content_preview.scss */
.action-btn:hover {
  transform: scale(1.1);
}

/* line 323, app/assets/stylesheets/content_preview.scss */
.action-btn:active {
  transform: scale(0.95);
}

/* line 327, app/assets/stylesheets/content_preview.scss */
.action-btn.liked {
  animation: likeAnimation 0.3s ease;
}

@keyframes likeAnimation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* line 341, app/assets/stylesheets/content_preview.scss */
.likes-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-05, #949494);
}

/* line 348, app/assets/stylesheets/content_preview.scss */
.content-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-01, #DF4C42) 0%, var(--color-primary-02, #FF746A) 100%);
}

/* line 356, app/assets/stylesheets/content_preview.scss */
.content-placeholder .placeholder-icon {
  font-size: 64px;
  opacity: 0.6;
  color: white;
}

@media (max-width: 768px) {
  /* line 365, app/assets/stylesheets/content_preview.scss */
  .content-card {
    margin-bottom: 12px;
    border-radius: 8px;
  }
  /* line 370, app/assets/stylesheets/content_preview.scss */
  .unlock-overlay {
    top: 25%;
  }
  /* line 374, app/assets/stylesheets/content_preview.scss */
  .unlock-message {
    font-size: 14px;
  }
  /* line 378, app/assets/stylesheets/content_preview.scss */
  .btn-unlock,
.btn-subscribe {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 160px;
  }
  /* line 384, app/assets/stylesheets/content_preview.scss */
  .btn-unlock svg,
.btn-subscribe svg {
    width: 16px;
    height: 16px;
  }
  /* line 390, app/assets/stylesheets/content_preview.scss */
  .lock-icon-container {
    width: 56px;
    height: 56px;
  }
  /* line 394, app/assets/stylesheets/content_preview.scss */
  .lock-icon-container svg {
    width: 24px;
    height: 24px;
  }
}

/* line 402, app/assets/stylesheets/content_preview.scss */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

@media (max-width: 768px) {
  /* line 402, app/assets/stylesheets/content_preview.scss */
  .content-grid {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
}

/* line 416, app/assets/stylesheets/content_preview.scss */
.content-feed {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 768px) {
  /* line 416, app/assets/stylesheets/content_preview.scss */
  .content-feed {
    padding: 0;
  }
}
/* ========================================
   INSTAGRAM/ONLYFANS INSPIRED LAYOUT
   ======================================== */
/* Reset del container */
/* line 6, app/assets/stylesheets/social_layout.scss */
.switch-pro-container {
  background: #000 !important;
  padding-top: 0 !important;
  min-height: 100vh;
}

/* Main Layout - 3 Columnas */
/* line 13, app/assets/stylesheets/social_layout.scss */
.social-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 70px);
}

/* ===== SIDEBAR IZQUIERDO ===== */
/* line 24, app/assets/stylesheets/social_layout.scss */
.left-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* line 33, app/assets/stylesheets/social_layout.scss */
.left-sidebar::-webkit-scrollbar {
  width: 6px;
}

/* line 37, app/assets/stylesheets/social_layout.scss */
.left-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* line 42, app/assets/stylesheets/social_layout.scss */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 48, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.2s ease;
}

/* line 61, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* line 65, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  font-weight: 600;
}

/* line 70, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 76, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item .badge {
  margin-left: auto;
  background: #ff4081;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* User Profile Section */
/* line 87, app/assets/stylesheets/social_layout.scss */
.sidebar-user-profile {
  margin-bottom: 12px;
}

/* line 91, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 101, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 105, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 114, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 129, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-info {
  flex: 1;
  min-width: 0;
}

/* line 134, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 144, app/assets/stylesheets/social_layout.scss */
.sidebar-profile-username {
  color: #8e8e8e;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Divider */
/* line 153, app/assets/stylesheets/social_layout.scss */
.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

/* Section grouping in sidebar */
/* line 160, app/assets/stylesheets/social_layout.scss */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 166, app/assets/stylesheets/social_layout.scss */
.sidebar-section-label {
  padding: 6px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Montserrat', sans-serif;
  margin-top: 2px;
}

/* button_to wrapper reset (language selector form) inside the sidebar */
/* line 178, app/assets/stylesheets/social_layout.scss */
.sidebar-section > form,
.sidebar-nav > form {
  margin: 0;
  padding: 0;
  display: block;
}

/* Language selector behaves like a sidebar nav item */
/* line 186, app/assets/stylesheets/social_layout.scss */
.sidebar-section .language-selector-btn,
.sidebar-nav > .language-selector-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  width: 100%;
  color: #f5f5f5;
  background: transparent;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0;
}

/* line 205, app/assets/stylesheets/social_layout.scss */
.sidebar-section .language-selector-btn:hover,
.sidebar-nav > .language-selector-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: #f5f5f5;
}

/* line 211, app/assets/stylesheets/social_layout.scss */
.sidebar-section .language-selector-btn svg,
.sidebar-nav > .language-selector-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Special Button Styles */
/* line 219, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item.sidebar-cta {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  font-weight: 600;
  margin: 8px 0;
}

/* line 225, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item.sidebar-cta:hover {
  background: linear-gradient(135deg, #f50057 0%, #ff4081 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 231, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item.sidebar-login {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

/* line 237, app/assets/stylesheets/social_layout.scss */
.sidebar-nav-item.sidebar-login:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== FEED CENTRAL ===== */
/* line 243, app/assets/stylesheets/social_layout.scss */
.main-feed {
  max-width: 630px;
  margin: 0 auto;
}

/* ===== SIDEBAR DERECHO ===== */
/* line 249, app/assets/stylesheets/social_layout.scss */
.right-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* line 258, app/assets/stylesheets/social_layout.scss */
.right-sidebar::-webkit-scrollbar {
  width: 6px;
}

/* line 262, app/assets/stylesheets/social_layout.scss */
.right-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* Perfil Sugerido */
/* line 268, app/assets/stylesheets/social_layout.scss */
.profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 275, app/assets/stylesheets/social_layout.scss */
.profile-widget-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
}

/* line 283, app/assets/stylesheets/social_layout.scss */
.profile-widget-info {
  flex: 1;
}

/* line 287, app/assets/stylesheets/social_layout.scss */
.profile-widget-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 293, app/assets/stylesheets/social_layout.scss */
.profile-widget-username {
  color: #8e8e8e;
  font-size: 12px;
}

/* Suggestions Section */
/* line 299, app/assets/stylesheets/social_layout.scss */
.suggestions-section {
  margin-bottom: 24px;
}

/* line 303, app/assets/stylesheets/social_layout.scss */
.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* line 310, app/assets/stylesheets/social_layout.scss */
.suggestions-title {
  color: #8e8e8e;
  font-weight: 600;
  font-size: 14px;
}

/* line 316, app/assets/stylesheets/social_layout.scss */
.see-all-btn {
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* line 323, app/assets/stylesheets/social_layout.scss */
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 330, app/assets/stylesheets/social_layout.scss */
.suggestion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 337, app/assets/stylesheets/social_layout.scss */
.suggestion-info {
  flex: 1;
  min-width: 0;
}

/* line 342, app/assets/stylesheets/social_layout.scss */
.suggestion-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: block;
}

/* line 350, app/assets/stylesheets/social_layout.scss */
.suggestion-meta {
  color: #8e8e8e;
  font-size: 12px;
}

/* line 355, app/assets/stylesheets/social_layout.scss */
.suggestion-follow-btn {
  background: none;
  border: none;
  color: #ff0074;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

/* Footer */
/* line 365, app/assets/stylesheets/social_layout.scss */
.sidebar-footer {
  color: #8e8e8e;
  font-size: 11px;
  line-height: 1.6;
}

/* line 371, app/assets/stylesheets/social_layout.scss */
.sidebar-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* line 378, app/assets/stylesheets/social_layout.scss */
.sidebar-footer-link {
  color: #8e8e8e;
  text-decoration: none;
}

/* line 383, app/assets/stylesheets/social_layout.scss */
.sidebar-footer-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
  /* line 389, app/assets/stylesheets/social_layout.scss */
  .switch-pro-container {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* line 394, app/assets/stylesheets/social_layout.scss */
  .social-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  /* line 399, app/assets/stylesheets/social_layout.scss */
  .left-sidebar {
    display: none;
  }
  /* line 403, app/assets/stylesheets/social_layout.scss */
  .right-sidebar {
    position: static;
    width: 100%;
    max-width: 630px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 100px;
    order: 2;
  }
  /* line 413, app/assets/stylesheets/social_layout.scss */
  .main-feed {
    width: 100%;
    max-width: 630px;
    padding-bottom: 20px;
    order: 1;
  }
  /* line 421, app/assets/stylesheets/social_layout.scss */
  .user-conversations-page .main-feed,
.creator-conversations-page .main-feed {
    padding-bottom: 0;
  }
  /* line 426, app/assets/stylesheets/social_layout.scss */
  .user-conversations-page .right-sidebar,
.creator-conversations-page .right-sidebar {
    padding-bottom: 80px;
  }
}

@media (max-width: 768px) {
  /* line 433, app/assets/stylesheets/social_layout.scss */
  .main-feed {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  /* line 439, app/assets/stylesheets/social_layout.scss */
  .right-sidebar {
    max-width: 100%;
    padding: 16px;
    padding-bottom: 100px;
  }
}

/* ===== LANGUAGE SELECTOR ===== */
/* line 447, app/assets/stylesheets/social_layout.scss */
.language-selector-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #b3b3b3;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

/* line 463, app/assets/stylesheets/social_layout.scss */
.language-selector-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 0, 116, 0.3);
  color: #f5f5f5;
}

/* line 469, app/assets/stylesheets/social_layout.scss */
.language-selector-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ========================================
   CONTENT PROTECTION - Anti-download
   ======================================== */
/* Prevent drag and touch-hold save on protected media */
/* line 481, app/assets/stylesheets/social_layout.scss */
[data-controller="content-protection"] {
  /* Prevent text selection on media containers */
}

/* line 482, app/assets/stylesheets/social_layout.scss */
[data-controller="content-protection"] img,
[data-controller="content-protection"] video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* line 493, app/assets/stylesheets/social_layout.scss */
[data-controller="content-protection"] .post-media,
[data-controller="content-protection"] .media-container,
[data-controller="content-protection"] .gallery-container,
[data-controller="content-protection"] .content-media,
[data-controller="content-protection"] .protected-media {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Toast notification */
/* line 506, app/assets/stylesheets/social_layout.scss */
.content-protection-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 0, 116, 0.3);
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 0, 116, 0.1);
}

/* line 529, app/assets/stylesheets/social_layout.scss */
.content-protection-toast svg {
  color: #ff0074;
  flex-shrink: 0;
}

/* line 534, app/assets/stylesheets/social_layout.scss */
.content-protection-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ========================================
   LIVE STREAMS - Estilo Instagram/OnlyFans
   ======================================== */
/* line 5, app/assets/stylesheets/live_streams.scss */
.live-streams-page {
  background-color: #000;
  min-height: 100vh;
}

/* line 11, app/assets/stylesheets/live_streams.scss */
.page-header {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 61, 154, 0.04) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* line 25, app/assets/stylesheets/live_streams.scss */
.page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 36, app/assets/stylesheets/live_streams.scss */
.page-header .page-header-main {
  flex: 1;
  min-width: 0;
}

/* line 42, app/assets/stylesheets/live_streams.scss */
.page-header-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 0, 116, 0.3);
  border-radius: 10px;
  color: #ff3d9a;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s ease;
}

/* line 58, app/assets/stylesheets/live_streams.scss */
.page-header-action svg {
  display: block;
  flex-shrink: 0;
}

/* line 60, app/assets/stylesheets/live_streams.scss */
.page-header-action:hover, .page-header-action:focus-visible {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.3);
  outline: none;
  text-decoration: none;
}

@media (max-width: 600px) {
  /* line 73, app/assets/stylesheets/live_streams.scss */
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  /* line 78, app/assets/stylesheets/live_streams.scss */
  .page-header-action {
    justify-content: center;
    padding: 12px 18px;
    min-height: 44px;
  }
}

/* line 85, app/assets/stylesheets/live_streams.scss */
.page-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 94, app/assets/stylesheets/live_streams.scss */
.page-title i {
  font-size: 24px;
  color: #ff4081;
}

/* line 99, app/assets/stylesheets/live_streams.scss */
.page-title svg {
  width: 24px;
  height: 24px;
  color: #ff4081;
}

/* line 106, app/assets/stylesheets/live_streams.scss */
.page-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* line 114, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.12) 0%, rgba(0, 150, 200, 0.08) 100%);
  border: 1px solid rgba(0, 200, 150, 0.25);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

/* line 127, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #00c896 0%, #0096c8 100%);
  border-radius: 4px 0 0 4px;
}

/* line 138, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

/* line 145, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #00c896 0%, #0096c8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* line 155, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-icon svg {
  color: white;
}

/* line 161, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px 0;
}

/* line 168, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-text p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* line 175, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #00c896 0%, #0096c8 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* line 189, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 200, 150, 0.35);
  color: white;
}

/* line 195, app/assets/stylesheets/live_streams.scss */
.creator-broadcast-cta .cta-button svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* line 114, app/assets/stylesheets/live_streams.scss */
  .creator-broadcast-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* line 205, app/assets/stylesheets/live_streams.scss */
  .creator-broadcast-cta .cta-content {
    flex-direction: column;
  }
  /* line 209, app/assets/stylesheets/live_streams.scss */
  .creator-broadcast-cta .cta-button {
    justify-content: center;
  }
}

/* line 216, app/assets/stylesheets/live_streams.scss */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 223, app/assets/stylesheets/live_streams.scss */
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

/* line 230, app/assets/stylesheets/live_streams.scss */
.live-icon {
  width: 10px;
  height: 10px;
  background: #dc3545;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-live-icon 2s infinite;
}

@keyframes pulse-live-icon {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

/* line 251, app/assets/stylesheets/live_streams.scss */
.live-stream-card {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

/* line 259, app/assets/stylesheets/live_streams.scss */
.live-stream-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 64, 129, 0.5);
}

/* line 267, app/assets/stylesheets/live_streams.scss */
.stream-thumbnail-wrapper {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* line 274, app/assets/stylesheets/live_streams.scss */
.stream-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* line 281, app/assets/stylesheets/live_streams.scss */
.live-stream-card:hover .stream-thumbnail {
  transform: scale(1.05);
}

/* line 286, app/assets/stylesheets/live_streams.scss */
.live-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(220, 53, 69, 0.95);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse-live-badge 2s infinite;
}

@keyframes pulse-live-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* line 311, app/assets/stylesheets/live_streams.scss */
.live-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* line 325, app/assets/stylesheets/live_streams.scss */
.viewers-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

/* line 342, app/assets/stylesheets/live_streams.scss */
.stream-duration {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 359, app/assets/stylesheets/live_streams.scss */
.stream-content {
  padding: 16px;
}

/* line 363, app/assets/stylesheets/live_streams.scss */
.stream-title {
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* line 376, app/assets/stylesheets/live_streams.scss */
.creator-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 383, app/assets/stylesheets/live_streams.scss */
.creator-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* line 389, app/assets/stylesheets/live_streams.scss */
.creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* line 397, app/assets/stylesheets/live_streams.scss */
.creator-avatar .creator-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: white;
}

/* line 410, app/assets/stylesheets/live_streams.scss */
.creator-avatar .live-status-dot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
  z-index: 2;
}

/* line 425, app/assets/stylesheets/live_streams.scss */
.creator-details {
  flex: 1;
  min-width: 0;
}

/* line 430, app/assets/stylesheets/live_streams.scss */
.creator-name {
  font-weight: 600;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 441, app/assets/stylesheets/live_streams.scss */
.creator-username {
  color: #8e8e8e;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 450, app/assets/stylesheets/live_streams.scss */
.privacy-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.15);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 12px;
}

/* line 462, app/assets/stylesheets/live_streams.scss */
.privacy-indicator.tips-only {
  background: rgba(40, 167, 69, 0.15);
  color: #4ade80;
}

/* line 467, app/assets/stylesheets/live_streams.scss */
.privacy-indicator.public {
  background: rgba(64, 169, 255, 0.15);
  color: #4c9aff;
}

/* line 474, app/assets/stylesheets/live_streams.scss */
.stream-action-btn {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

/* line 489, app/assets/stylesheets/live_streams.scss */
.stream-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
  color: white;
}

/* line 495, app/assets/stylesheets/live_streams.scss */
.stream-action-btn:active {
  transform: translateY(0);
}

/* line 500, app/assets/stylesheets/live_streams.scss */
.subscribe-btn {
  background: transparent;
  border: 2px solid #ff4081;
  color: #ff4081;
}

/* line 505, app/assets/stylesheets/live_streams.scss */
.subscribe-btn:hover {
  background: #ff4081;
  color: white;
}

/* line 511, app/assets/stylesheets/live_streams.scss */
.action-helper-text {
  color: #8e8e8e;
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
}

/* line 519, app/assets/stylesheets/live_streams.scss */
.empty-state {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 100px 40px;
  text-align: center;
  margin: 60px auto 0;
  max-width: 700px;
  transition: all 0.3s ease;
}

/* line 529, app/assets/stylesheets/live_streams.scss */
.empty-state:hover {
  border-color: rgba(255, 64, 129, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

/* line 535, app/assets/stylesheets/live_streams.scss */
.empty-state-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 32px;
  background: rgba(255, 64, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

/* line 546, app/assets/stylesheets/live_streams.scss */
.empty-state-icon i {
  font-size: 48px;
  color: #ff4081;
}

/* line 551, app/assets/stylesheets/live_streams.scss */
.empty-state-icon svg {
  width: 48px;
  height: 48px;
  color: #ff4081;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(255, 64, 129, 0);
  }
}

/* line 569, app/assets/stylesheets/live_streams.scss */
.empty-state-title {
  color: #f5f5f5;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

/* line 577, app/assets/stylesheets/live_streams.scss */
.empty-state-message {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* line 587, app/assets/stylesheets/live_streams.scss */
.empty-state-btn {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 10px 22px;
  margin-top: 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}

/* line 603, app/assets/stylesheets/live_streams.scss */
.empty-state-btn i {
  font-size: 18px;
}

/* line 607, app/assets/stylesheets/live_streams.scss */
.empty-state-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
  color: white;
}

/* line 614, app/assets/stylesheets/live_streams.scss */
.empty-state-btn:active {
  transform: translateY(-1px);
}

/* line 620, app/assets/stylesheets/live_streams.scss */
.upcoming-stream-card {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

/* line 627, app/assets/stylesheets/live_streams.scss */
.upcoming-stream-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* line 633, app/assets/stylesheets/live_streams.scss */
.upcoming-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #8e8e8e;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 644, app/assets/stylesheets/live_streams.scss */
.upcoming-date {
  color: #8e8e8e;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* line 654, app/assets/stylesheets/live_streams.scss */
.upcoming-date i {
  font-size: 14px;
}

@media (max-width: 768px) {
  /* line 660, app/assets/stylesheets/live_streams.scss */
  .page-header {
    padding: 20px 16px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  /* line 666, app/assets/stylesheets/live_streams.scss */
  .page-title {
    font-size: 22px;
  }
  /* line 669, app/assets/stylesheets/live_streams.scss */
  .page-title i {
    font-size: 20px;
  }
  /* line 673, app/assets/stylesheets/live_streams.scss */
  .page-title svg {
    width: 20px;
    height: 20px;
  }
  /* line 679, app/assets/stylesheets/live_streams.scss */
  .page-subtitle {
    font-size: 13px;
  }
  /* line 683, app/assets/stylesheets/live_streams.scss */
  .section-title {
    font-size: 18px;
  }
  /* line 687, app/assets/stylesheets/live_streams.scss */
  .stream-thumbnail-wrapper {
    height: 200px;
  }
  /* line 691, app/assets/stylesheets/live_streams.scss */
  .stream-content {
    padding: 12px;
  }
  /* line 695, app/assets/stylesheets/live_streams.scss */
  .empty-state {
    padding: 80px 24px;
  }
  /* line 699, app/assets/stylesheets/live_streams.scss */
  .empty-state-icon {
    width: 80px;
    height: 80px;
  }
  /* line 703, app/assets/stylesheets/live_streams.scss */
  .empty-state-icon i {
    font-size: 36px;
  }
  /* line 707, app/assets/stylesheets/live_streams.scss */
  .empty-state-icon svg {
    width: 36px;
    height: 36px;
  }
  /* line 713, app/assets/stylesheets/live_streams.scss */
  .empty-state-title {
    font-size: 24px;
  }
  /* line 717, app/assets/stylesheets/live_streams.scss */
  .empty-state-message {
    font-size: 14px;
  }
  /* line 721, app/assets/stylesheets/live_streams.scss */
  .empty-state-btn {
    padding: 10px 22px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  /* line 728, app/assets/stylesheets/live_streams.scss */
  .page-header {
    padding: 16px 14px;
  }
  /* line 732, app/assets/stylesheets/live_streams.scss */
  .page-title {
    font-size: 20px;
  }
  /* line 735, app/assets/stylesheets/live_streams.scss */
  .page-title i {
    font-size: 18px;
  }
  /* line 739, app/assets/stylesheets/live_streams.scss */
  .page-title svg {
    width: 18px;
    height: 18px;
  }
  /* line 745, app/assets/stylesheets/live_streams.scss */
  .page-subtitle {
    font-size: 12px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · LIVE STREAMS PUBLIC OVERRIDE (/live_streams + /live_streams/:id)
   -----------------------------------------------------------------
   Override visual de la lista pública de live streams y el viewer.
   Mantiene los selectores legacy de live_streams.scss.

   Cero cambios al HTML/ERB · controllers (live-streams-list,
   webrtc-viewer, stream-chat), ActionCable, modales intactos.

   Carga DESPUÉS de live_streams en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 17, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page {
  background: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER · título + acción broadcast center
   ----------------------------------------------------------------- */
/* line 25, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 36, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, transparent 100%);
}

/* line 47, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 59, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .page-title i, .live-streams-page .page-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55));
}

/* line 65, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .page-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 6px 0 0 !important;
  line-height: 1.45 !important;
}

/* line 74, app/assets/stylesheets/_components.exo-live-streams.scss */
.page-header-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 93, app/assets/stylesheets/_components.exo-live-streams.scss */
.page-header-action svg {
  width: 18px;
  height: 18px;
  color: #ff3d9a;
}

/* line 99, app/assets/stylesheets/_components.exo-live-streams.scss */
.page-header-action:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #ff7eb8 !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------------
   CREATOR BROADCAST CTA · banner para creadores sin stream activo
   ----------------------------------------------------------------- */
/* line 111, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 22px 26px !important;
  margin-bottom: 28px !important;
  background: radial-gradient(ellipse 80% 60% at 0% 50%, rgba(255, 0, 116, 0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(180, 0, 255, 0.08) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(255, 0, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Línea brand top */
}

/* line 130, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
}

/* line 140, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-content {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* line 146, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-icon {
  flex-shrink: 0;
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.22) 0%, rgba(180, 0, 255, 0.14) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 16px !important;
  color: #ff3d9a !important;
}

/* line 157, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-icon svg {
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55));
  animation: exo-broadcast-pulse 2.5s ease-in-out infinite;
}

/* line 163, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-text h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}

/* line 172, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-text p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* line 180, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-button {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.35) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Sheen sweep */
}

/* line 203, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 213, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 216, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-button:hover::after {
  transform: translateX(220%);
}

/* line 219, app/assets/stylesheets/_components.exo-live-streams.scss */
.creator-broadcast-cta .cta-button:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

@keyframes exo-broadcast-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

/* -----------------------------------------------------------------
   SECTION HEADER · "Live now" / "Upcoming"
   ----------------------------------------------------------------- */
/* line 235, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .section-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* line 244, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* line 255, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .live-icon {
  display: inline-block;
  width: 10px !important;
  height: 10px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-radius: 50% !important;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.65);
  animation: exo-live-pulse 1.6s ease-in-out infinite;
}

/* line 265, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .live-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #ff0074;
  border-radius: 50%;
  opacity: 0;
  animation: exo-live-ring 1.6s ease-out infinite;
}

@keyframes exo-live-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

@keyframes exo-live-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* -----------------------------------------------------------------
   LIVE STREAM CARD · main grid item
   ----------------------------------------------------------------- */
/* line 290, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 300, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card:hover {
  border-color: rgba(255, 0, 116, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px -12px rgba(255, 0, 116, 0.3) !important;
}

/* line 307, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-thumbnail-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  /* Gradient overlay para legibilidad de badges */
}

/* line 314, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-thumbnail-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 25%, transparent 65%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* line 327, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 334, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card:hover .stream-thumbnail {
  transform: scale(1.05) !important;
}

/* -----------------------------------------------------------------
   THUMBNAIL BADGES · live, viewers, duration
   ----------------------------------------------------------------- */
/* line 342, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-indicator {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 11px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.45) !important;
}

/* line 362, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #fff !important;
  border-radius: 50% !important;
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite;
}

@keyframes exo-livebadge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* line 375, app/assets/stylesheets/_components.exo-live-streams.scss */
.viewers-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* line 395, app/assets/stylesheets/_components.exo-live-streams.scss */
.viewers-badge i, .viewers-badge svg {
  color: rgba(255, 255, 255, 0.65);
}

/* line 400, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-duration {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
}

/* -----------------------------------------------------------------
   STREAM CONTENT · debajo del thumbnail
   ----------------------------------------------------------------- */
/* line 423, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-content {
  padding: 16px !important;
}

/* line 427, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------
   CREATOR INFO · avatar + name + status
   ----------------------------------------------------------------- */
/* line 446, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* line 453, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-avatar {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

/* line 461, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 0, 116, 0.45);
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.3);
}

/* line 471, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 0, 116, 0.45);
}

/* line 485, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .live-status-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 10px !important;
  height: 10px !important;
  background: #ff0074 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(255, 0, 116, 0.65);
}

/* line 497, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  line-height: 1.2 !important;
}

/* line 505, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-stream-card .creator-username {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.2 !important;
  margin-top: 2px;
}

/* -----------------------------------------------------------------
   PRIVACY INDICATOR
   ----------------------------------------------------------------- */
/* line 517, app/assets/stylesheets/_components.exo-live-streams.scss */
.privacy-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* line 533, app/assets/stylesheets/_components.exo-live-streams.scss */
.privacy-indicator.tips-only {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #4ade80 !important;
}

/* line 539, app/assets/stylesheets/_components.exo-live-streams.scss */
.privacy-indicator svg {
  color: currentColor;
}

/* -----------------------------------------------------------------
   ACTION BUTTONS · watch, subscribe, ppv
   ----------------------------------------------------------------- */
/* line 546, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Sheen sweep */
}

/* line 570, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 580, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.45) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 585, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn:hover::after {
  transform: translateX(220%);
}

/* line 588, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* line 593, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn.subscribe-btn {
  background: linear-gradient(135deg, #b000ff 0%, #ff0074 100%) !important;
  box-shadow: 0 4px 14px rgba(180, 0, 255, 0.35) !important;
}

/* line 597, app/assets/stylesheets/_components.exo-live-streams.scss */
.stream-action-btn.subscribe-btn:hover {
  box-shadow: 0 6px 22px rgba(180, 0, 255, 0.5) !important;
}

/* line 603, app/assets/stylesheets/_components.exo-live-streams.scss */
.action-helper-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 8px !important;
  text-align: center;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 615, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .empty-state {
  text-align: center !important;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
}

/* line 624, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .empty-state-icon {
  display: grid !important;
  place-items: center !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  color: #ff3d9a !important;
}

/* line 635, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .empty-state-icon svg {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.4));
}

/* line 643, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .empty-state-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 652, app/assets/stylesheets/_components.exo-live-streams.scss */
.live-streams-page .empty-state-message {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 32rem;
}

/* -----------------------------------------------------------------
   UPCOMING STREAMS · cards diferenciados
   ----------------------------------------------------------------- */
/* line 665, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 672, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card:hover {
  border-color: rgba(180, 0, 255, 0.35) !important;
}

/* line 676, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card .stream-title {
  margin: 0 !important;
  flex: 1;
}

/* line 681, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card .creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
}

/* line 688, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card .creator-username {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
}

/* line 694, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card .creator-avatar {
  width: 32px !important;
  height: 32px !important;
}

/* line 698, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-stream-card .creator-avatar img {
  border: 2px solid rgba(180, 0, 255, 0.45);
  box-shadow: 0 0 8px rgba(180, 0, 255, 0.25);
}

/* line 705, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(180, 0, 255, 0.12) !important;
  border: 1px solid rgba(180, 0, 255, 0.3) !important;
  border-radius: 999px !important;
  color: #c673ff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  flex-shrink: 0;
}

/* line 721, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 8px 12px !important;
  background: rgba(180, 0, 255, 0.06) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* line 734, app/assets/stylesheets/_components.exo-live-streams.scss */
.upcoming-date i, .upcoming-date svg {
  color: #c673ff;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 744, app/assets/stylesheets/_components.exo-live-streams.scss */
  .live-streams-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 750, app/assets/stylesheets/_components.exo-live-streams.scss */
  .live-streams-page .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
  }
  /* line 757, app/assets/stylesheets/_components.exo-live-streams.scss */
  .live-streams-page .page-title {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
  /* line 761, app/assets/stylesheets/_components.exo-live-streams.scss */
  .creator-broadcast-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  /* line 768, app/assets/stylesheets/_components.exo-live-streams.scss */
  .creator-broadcast-cta .cta-content {
    gap: 14px !important;
  }
  /* line 770, app/assets/stylesheets/_components.exo-live-streams.scss */
  .creator-broadcast-cta .cta-icon {
    width: 48px !important;
    height: 48px !important;
  }
  /* line 775, app/assets/stylesheets/_components.exo-live-streams.scss */
  .creator-broadcast-cta .cta-button {
    width: 100% !important;
    justify-content: center !important;
  }
  /* line 781, app/assets/stylesheets/_components.exo-live-streams.scss */
  .stream-content {
    padding: 14px !important;
  }
  /* line 785, app/assets/stylesheets/_components.exo-live-streams.scss */
  .stream-title {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  /* line 790, app/assets/stylesheets/_components.exo-live-streams.scss */
  .live-stream-card .creator-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  /* line 795, app/assets/stylesheets/_components.exo-live-streams.scss */
  .stream-action-btn {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
  /* line 800, app/assets/stylesheets/_components.exo-live-streams.scss */
  .live-streams-page .empty-state {
    padding: 48px 20px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · LIVE STREAM VIEWER OVERRIDE (/live_streams/:id)
   -----------------------------------------------------------------
   Override visual del viewer público de live streams.
   El show.html.erb tiene ~1455 líneas de inline `<style>` legacy.
   Este override usa specificity scopeada + !important para vencer
   las inline styles que se cargan después del manifest CSS.

   Cero cambios al HTML/ERB · controllers (webrtc-viewer,
   stream-viewer), ActionCable, picker JS intactos.

   Carga al final del manifest application.css.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container {
  background: radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255, 0, 116, 0.1) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 80%, rgba(180, 0, 255, 0.08) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   VIDEO CONTAINER · marco premium del player
   ----------------------------------------------------------------- */
/* line 30, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .video-container {
  background: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 0, 116, 0.1), 0 0 32px -8px rgba(255, 0, 116, 0.18) !important;
}

/* -----------------------------------------------------------------
   LIVE BADGE · pill brand magenta sobre el video
   ----------------------------------------------------------------- */
/* line 44, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .live-badge {
  top: 16px !important;
  left: 16px !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.5) !important;
  animation: none !important;
}

/* line 59, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .live-badge .live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #fff !important;
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite !important;
}

/* -----------------------------------------------------------------
   STREAM OFFLINE · cuando no está en vivo
   ----------------------------------------------------------------- */
/* line 70, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-offline {
  background: radial-gradient(ellipse at center, rgba(255, 0, 116, 0.08) 0%, transparent 70%), linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
}

/* line 75, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-offline i, .stream-view-container .stream-offline svg {
  color: rgba(255, 0, 116, 0.4) !important;
  filter: drop-shadow(0 0 24px rgba(255, 0, 116, 0.3));
}

/* line 80, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-offline h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
}

/* line 86, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-offline p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   STREAM INFO CONTAINER · debajo del video
   ----------------------------------------------------------------- */
/* line 96, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-info-container {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin-top: 18px !important;
  box-shadow: none !important;
}

/* line 105, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2.6vw, 28px) !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  text-shadow: none !important;
  margin: 0 0 18px !important;
  line-height: 1.2 !important;
}

/* -----------------------------------------------------------------
   CREATOR INFO (stream version) · avatar + name
   ----------------------------------------------------------------- */
/* line 120, app/assets/stylesheets/_components.exo-live-viewer.scss */
.creator-avatar-large img,
.creator-avatar-large-placeholder {
  width: 52px !important;
  height: 52px !important;
  border: 2px solid rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.3) !important;
}

/* line 128, app/assets/stylesheets/_components.exo-live-viewer.scss */
.creator-avatar-large-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* line 134, app/assets/stylesheets/_components.exo-live-viewer.scss */
.creator-avatar-large .live-status-indicator {
  width: 14px !important;
  height: 14px !important;
  background: #ff0074 !important;
  border: 2px solid #0a0a0a !important;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.65) !important;
}

/* line 142, app/assets/stylesheets/_components.exo-live-viewer.scss */
.creator-name-stream {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}

/* line 150, app/assets/stylesheets/_components.exo-live-viewer.scss */
.creator-username-stream {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  margin-top: 2px;
}

/* -----------------------------------------------------------------
   STREAM STATS · viewers + tip button
   ----------------------------------------------------------------- */
/* Especificidad reforzada para vencer:
   - creator_live_streams.scss `.stat-value { font-size: 32px }` unscoped
   - creator_profile.scss `.stat-item { flex-direction: column }` (nested
     bajo .creator-profile pero podría leak en SCSS compilado raro)
   - cualquier otro `.stat-*` sin scope que esté regado por la app */
/* line 166, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-stats .stat-item,
.stream-view-container .stream-info-container .stat-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* line 189, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-stats .stat-item i,
.stream-view-container .stream-stats .stat-item svg,
.stream-view-container .stream-info-container .stat-item i,
.stream-view-container .stream-info-container .stat-item svg {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* Bootstrap Icons font no está cargada · pintamos el ojito con SVG inline
   en background para no tocar el HTML. */
/* line 204, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stat-item i.bi-eye-fill {
  background-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/><path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/><path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>") no-repeat center/contain;
}

/* line 210, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-stats .stat-item .stat-value,
.stream-view-container .stream-info-container .stat-item .stat-value {
  display: inline !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* line 226, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 246, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 256, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 259, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button:hover::after {
  transform: translateX(220%);
}

/* line 262, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* line 267, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-button i, .tip-button svg {
  color: #fff !important;
}

/* -----------------------------------------------------------------
   STREAM DESCRIPTION
   ----------------------------------------------------------------- */
/* line 274, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .stream-description {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------------------------
   CHAT CONTAINER · columna derecha
   ----------------------------------------------------------------- */
/* line 288, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-container {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* line 297, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-header {
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 303, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 314, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 325, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-title i, .stream-view-container .chat-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.45));
}

/* -----------------------------------------------------------------
   CHAT MESSAGES · scrollbar premium
   ----------------------------------------------------------------- */
/* line 335, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-messages {
  background: transparent !important;
}

/* line 338, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-messages::-webkit-scrollbar {
  width: 6px !important;
}

/* line 342, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-messages::-webkit-scrollbar-track {
  background: transparent !important;
}

/* line 346, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
}

/* line 350, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.55) !important;
}

/* -----------------------------------------------------------------
   CHAT INPUT · glass + brand focus
   ----------------------------------------------------------------- */
/* line 360, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-input-container {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 365, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 378, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 385, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* -----------------------------------------------------------------
   CHAT ACTIONS · emoji/gif buttons + send
   ----------------------------------------------------------------- */
/* line 394, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 7px 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 412, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-action-btn svg {
  width: 16px;
  height: 16px;
}

/* line 414, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-action-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 421, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-send-btn {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 436, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-send-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 442, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-send-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.5) !important;
}

/* line 446, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-send-btn:hover svg {
  transform: rotate(-12deg) translateX(2px);
}

/* line 449, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-send-btn:active {
  transform: translateY(0) scale(0.92) !important;
  transition-duration: 100ms !important;
}

/* -----------------------------------------------------------------
   PICKER SECTION · emoji + gif overlay
   ----------------------------------------------------------------- */
/* line 459, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section {
  background: rgba(15, 15, 15, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* line 468, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 472, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 50% !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 481, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-close-btn:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  color: #ff7eb8 !important;
}

/* line 487, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-search {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* line 496, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-search:focus {
  outline: none !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 502, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-search::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 507, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .emoji-item {
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 517, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .emoji-item:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  transform: scale(1.18) !important;
}

/* line 523, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 532, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-item:hover {
  transform: scale(1.04) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* line 537, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 545, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-loading {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: center !important;
  padding: 20px !important;
}

/* line 552, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-preview {
  background: rgba(255, 0, 116, 0.06) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 12px !important;
  padding: 8px !important;
}

/* line 559, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-remove-btn {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background 0.2s ease !important;
}

/* line 568, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .gif-remove-btn:hover {
  background: rgba(239, 68, 68, 0.65) !important;
}

/* -----------------------------------------------------------------
   CHAT DISABLED · cuando chat off o stream offline
   ----------------------------------------------------------------- */
/* line 577, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-disabled {
  text-align: center !important;
  padding: 60px 24px !important;
}

/* line 581, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-disabled i, .stream-view-container .chat-disabled svg {
  color: rgba(255, 0, 116, 0.4) !important;
  font-size: 56px !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.3));
}

/* line 587, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-disabled h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
  font-size: 18px !important;
}

/* line 594, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .chat-disabled p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13.5px !important;
}

/* -----------------------------------------------------------------
   TIP MODAL · backdrop + container premium
   ----------------------------------------------------------------- */
/* line 605, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-backdrop {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* line 611, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content {
  background: linear-gradient(180deg, #141014 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden;
  position: relative;
  /* Línea brand top */
}

/* line 623, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
  pointer-events: none;
}

/* line 635, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 20px 24px !important;
}

/* line 639, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-header .modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2vw, 19px) !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 !important;
}

/* line 647, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-header .modal-title i, .tip-modal-content .modal-header .modal-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.45));
}

/* line 653, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-header .btn-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 668, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-header .btn-close:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  color: #fff !important;
}

/* line 675, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-body {
  padding: 22px 24px !important;
}

/* line 679, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* line 691, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-label i, .tip-modal-content .modal-label svg {
  color: #ff3d9a !important;
  font-size: 14px !important;
}

/* line 697, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-amount-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* line 704, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-amount-btn {
  position: relative;
  padding: 12px 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 722, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-amount-btn::before {
  content: none !important;
}

/* line 726, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-amount-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #ff7eb8 !important;
  transform: translateY(-1px) !important;
}

/* line 733, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-amount-btn.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4) !important;
}

/* line 741, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-custom-amount,
.tip-modal-content .tip-message-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 756, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-custom-amount:focus,
.tip-modal-content .tip-message-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 763, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .tip-custom-amount::placeholder,
.tip-modal-content .tip-message-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 768, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 18px 24px !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

/* line 776, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-cancel {
  padding: 11px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 791, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* line 797, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 818, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 828, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 831, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip:hover::after {
  transform: translateX(220%);
}

/* line 834, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* line 839, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-modal-content .btn-send-tip i, .tip-modal-content .btn-send-tip svg {
  color: #fff !important;
}

/* -----------------------------------------------------------------
   TIP NOTIFICATION · overlay cinematográfico cuando un fan envía tip.
   HTML generado por JS en webrtc_broadcaster_controller.js / stream_viewer_controller.js:
     <div class="tip-notification">
       <div class="tip-icon">💰</div>
       <div class="tip-amount">$XX.XX</div>
       <div class="tip-user">De: USER</div>
       <div class="tip-message">"MESSAGE"</div>
     </div>
   El emoji 💰 está hardcoded en JS — lo escondemos con font-size: 0
   y pintamos un diamond brand via ::before SVG mask. Sin tocar JS. */
/* line 854, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification {
  /* Reset el legacy yellow gradient + animación rotation */
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.3) 0%, transparent 65%), linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.45) !important;
  border-radius: 18px !important;
  padding: 28px 36px !important;
  min-width: 260px;
  max-width: 380px;
  text-align: center !important;
  color: #fff !important;
  box-shadow: 0 24px 60px -12px rgba(255, 0, 116, 0.45), 0 0 80px -20px rgba(180, 0, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  isolation: isolate;
  overflow: hidden;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.85) !important;
  opacity: 0;
  z-index: 10000 !important;
  animation: exo-tip-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  /* Línea brand top */
  /* Sheen sweep diagonal sutil */
}

/* line 881, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.85) 50%, transparent) !important;
  pointer-events: none;
}

/* line 893, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -120% !important;
  width: 80% !important;
  height: 200% !important;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
  transform: rotate(15deg);
  animation: exo-tip-sheen 1.2s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none;
}

/* line 906, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification.fade-out {
  animation: exo-tip-exit 0.45s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
}

@keyframes exo-tip-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes exo-tip-exit {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) translateY(-12px);
  }
}

@keyframes exo-tip-sheen {
  to {
    left: 120%;
  }
}

/* Icono · escondemos emoji 💰 hardcoded del JS y pintamos diamond brand */
/* line 938, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification .tip-icon {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 14px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.25) 0%, rgba(180, 0, 255, 0.18) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.45) !important;
  border-radius: 16px !important;
  font-size: 0 !important;
  position: relative;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.3);
  /* Sparkle 4-puntas brand via mask · reemplaza el emoji 💰 */
}

/* line 953, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification .tip-icon::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #ff7eb8 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1l2.6 7.4L22 11l-7.4 2.6L12 21l-2.6-7.4L2 11l7.4-2.6z'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1l2.6 7.4L22 11l-7.4 2.6L12 21l-2.6-7.4L2 11l7.4-2.6z'/></svg>") no-repeat center/contain;
  filter: drop-shadow(0 0 10px rgba(255, 0, 116, 0.75));
}

/* line 967, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification .tip-amount {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(36px, 5vw, 48px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  text-shadow: 0 0 32px rgba(255, 0, 116, 0.65), 0 2px 12px rgba(0, 0, 0, 0.35) !important;
  font-variant-numeric: tabular-nums;
  /* Gradient text brand */
  background: linear-gradient(135deg, #fff 0%, #ffd4e8 50%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 987, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification .tip-user {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* line 998, app/assets/stylesheets/_components.exo-live-viewer.scss */
.tip-notification .tip-message {
  font-family: 'Rubik', sans-serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 14px 0 0 !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-left: 2px solid rgba(255, 0, 116, 0.55) !important;
  border-radius: 10px !important;
  max-width: none !important;
  word-wrap: break-word;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 1020, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container {
    padding: 0 14px 96px !important;
  }
  /* line 1024, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .social-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* line 1030, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .video-container {
    border-radius: 14px !important;
  }
  /* line 1034, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-info-container {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }
  /* line 1039, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  /* line 1045, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-stats {
    width: 100% !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  /* line 1051, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-button {
    width: 100% !important;
    justify-content: center !important;
  }
  /* line 1056, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-modal-content {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh;
  }
  /* line 1061, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-modal-content .tip-amount-buttons {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  /* line 1066, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-modal-content .tip-amount-btn {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }
  /* line 1071, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-modal-content .modal-footer {
    flex-direction: column-reverse !important;
  }
  /* line 1074, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .tip-modal-content .modal-footer .btn-cancel,
.tip-modal-content .modal-footer .btn-send-tip {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =================================================================
   PICKER (emoji + GIF) · open/close + mobile bottom sheet
   -----------------------------------------------------------------
   Mirrors the messaging chat picker pattern (creator_chat.scss):
   hidden by default, .show toggles visibility (set by openPicker
   / closePicker JS in _chat_column.html.erb), and on mobile becomes
   a fixed bottom sheet so the grid stops overflowing the chat column.
   ================================================================= */
/* line 1091, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section {
  display: none !important;
}

/* line 1094, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section.show {
  display: flex !important;
  flex-direction: column;
}

/* line 1100, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .picker-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* line 1106, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .emoji-content,
.stream-view-container .picker-section .gif-content {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* line 1113, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .emoji-content.active,
.stream-view-container .picker-section .gif-content.active {
  display: block;
}

/* line 1118, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
}

/* line 1125, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}

/* line 1131, app/assets/stylesheets/_components.exo-live-viewer.scss */
.stream-view-container .picker-section .gif-grid .gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =================================================================
   MOBILE LAYOUT · YouTube-style (sticky video + chat sheet)
   -----------------------------------------------------------------
   Mobile redesign: video stays pinned at the top while the rest of
   the page scrolls; the chat opens as a bottom sheet triggered by
   a button placed where the chat column used to render. The native
   keyboard provides emoji + GIF input, so the picker is hidden in
   mobile entirely.
   ================================================================= */
@media (max-width: 768px) {
  /* Allow sticky to escape — every scroll-creating ancestor must be
     overflow: visible. The legacy inline CSS sets overflow: hidden
     on main, .row, and the bootstrap cols, which silently kills
     position: sticky. */
  /* line 1152, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container,
.stream-view-container .social-layout,
.stream-view-container .social-layout > main,
.stream-view-container .social-layout > main > .row,
.stream-view-container .col-xl-8,
.stream-view-container .col-lg-7,
.stream-view-container .col-xl-4,
.stream-view-container .col-lg-5 {
    overflow: visible !important;
  }
  /* Trim page length — drop the 100vh floor so the body only extends
     as far as content + bottom-nav clearance, eliminating the empty
     gap below the back button. The min-height also lives on
     .social-layout (in social_layout.scss), which we override here
     since social_layout.scss loads before this file. */
  /* line 1168, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container {
    min-height: 0 !important;
    padding-bottom: 1px !important;
  }
  /* line 1173, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .social-layout {
    min-height: 0 !important;
  }
  /* -----------------------------------------------------------------
     COMPACT STREAM-INFO · single-screen layout (no scroll)
     -----------------------------------------------------------------
     Tight title, small avatar, compact stats row with circular tip
     button (icon only). Removes the "espectadores" label in favour
     of the eye icon + count.
     ----------------------------------------------------------------- */
  /* line 1184, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-info-container {
    padding: 14px 16px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
  }
  /* line 1190, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
  }
  /* line 1197, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-meta {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  /* line 1204, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-info-stream {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* line 1212, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-avatar-large {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
  }
  /* line 1217, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-avatar-large img,
.stream-view-container .creator-avatar-large .creator-avatar-large-placeholder {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  /* line 1225, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-details-stream {
    min-width: 0;
    overflow: hidden;
  }
  /* line 1230, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-name-stream {
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* line 1238, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .creator-username-stream {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  /* line 1243, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-stats {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  /* Eye icon + count only — drop the "espectadores" label */
  /* line 1253, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stat-item .stat-label-text {
    display: none !important;
  }
  /* line 1257, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stat-item {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  /* Circular tip button — icon only */
  /* line 1263, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .tip-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
  }
  /* line 1273, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .tip-button .tip-button-text {
    display: none !important;
  }
  /* line 1277, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .tip-button i,
.stream-view-container .tip-button .tip-button-icon {
    font-size: 18px !important;
    margin: 0 !important;
    color: #fff !important;
  }
  /* line 1284, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stat-item .stat-item-icon {
    color: #ff3d9a !important;
    margin-right: 4px;
  }
  /* line 1289, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .stream-description {
    font-size: 13px !important;
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
    line-height: 1.5 !important;
  }
  /* Trim the trigger and back button so they don't push content off-screen */
  /* line 1297, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-trigger {
    margin-top: 12px;
    padding: 13px 16px;
    font-size: 14px;
  }
  /* line 1303, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .payment-amount-display {
    margin-top: 14px !important;
  }
  /* line 1307, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .payment-amount-display .btn {
    padding: 10px 22px !important;
    font-size: 13px !important;
  }
  /* Sticky video — pin under the app header (~70px). */
  /* line 1313, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .video-container {
    position: sticky !important;
    z-index: 50;
    border-radius: 14px !important;
  }
  /* -----------------------------------------------------------------
     CHAT MOBILE TRIGGER · sits where the chat column would render
     ----------------------------------------------------------------- */
  /* line 1322, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.06) 100%);
    border: 1px solid rgba(255, 0, 116, 0.25);
    border-radius: 14px;
    color: #f5f5f5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  /* line 1339, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-trigger:hover, .stream-view-container .chat-mobile-trigger:active {
    background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%);
    transform: translateY(-1px);
  }
  /* line 1345, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-trigger-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  /* line 1351, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-trigger-main svg {
    color: #ff3d9a;
    filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.45));
  }
  /* line 1356, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-trigger-arrow {
    color: rgba(255, 255, 255, 0.55);
  }
  /* -----------------------------------------------------------------
     CHAT CONTAINER · bottom sheet on mobile
     -----------------------------------------------------------------
     Opaque background so the messages don't bleed through into the
     live video behind the sheet (the desktop chat-container uses
     rgba(255,255,255,0.025) which is virtually transparent).
     Height is 65vh — leaves enough room above for the sticky video.
     ----------------------------------------------------------------- */
  /* line 1368, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 65vh !important;
    max-height: 65vh !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, #141014 0%, #0a0a0a 100%) !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
    visibility: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6) !important;
  }
  /* line 1388, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-container.is-mobile-open {
    transform: translateY(0);
    visibility: visible;
  }
  /* Drag handle bar at the top of the sheet */
  /* line 1394, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-handle {
    display: block !important;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
  }
  /* Close button (X) top-right of the sheet */
  /* line 1408, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-close {
    display: grid !important;
    place-items: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  /* line 1424, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-close:hover {
    background: rgba(255, 0, 116, 0.15);
    color: #fff;
    transform: rotate(90deg);
  }
  /* Header offset so the close-btn doesn't overlap the title */
  /* line 1432, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-container .chat-header {
    padding: 28px 56px 16px 18px !important;
  }
  /* -----------------------------------------------------------------
     CHAT SHEET BACKDROP · transparent — keeps the live stream visible
     behind the sheet (YouTube pattern). Still tap-to-close.
     ----------------------------------------------------------------- */
  /* line 1440, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1099;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.32s ease;
  }
  /* line 1451, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .chat-mobile-backdrop.is-mobile-open {
    visibility: visible;
    /* pointer-events stays none so the user can interact with the
       live video (play/pause/volume) while the chat sheet is open.
       Closing the sheet is done via the X button. */
  }
  /* -----------------------------------------------------------------
     CHAT INTERNAL FLEX · messages grow, input anchors to bottom
     ----------------------------------------------------------------- */
  /* line 1461, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-container > div:has(> .chat-messages) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* line 1468, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-messages {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  /* line 1474, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-input-container {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
  /* -----------------------------------------------------------------
     HIDE PICKER · native keyboard provides emoji + GIF on mobile
     ----------------------------------------------------------------- */
  /* line 1482, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-input-actions .chat-action-btn,
.stream-view-container .picker-section,
.stream-view-container .picker-section.show {
    display: none !important;
  }
}

/* Hide mobile-only widgets on desktop */
@media (min-width: 769px) {
  /* line 1491, app/assets/stylesheets/_components.exo-live-viewer.scss */
  .stream-view-container .chat-mobile-trigger,
.stream-view-container .chat-mobile-close,
.stream-view-container .chat-mobile-handle,
.chat-mobile-backdrop {
    display: none !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR STUDIO OVERRIDE (/creator/live_streams/:id/webrtc_studio)
   -----------------------------------------------------------------
   Override visual del estudio de broadcast WebRTC (lado creator).
   El webrtc_studio.html.erb tiene ~1184 líneas de inline `<style>`
   legacy. Override con specificity scopeada + !important.

   Cero cambios al HTML/ERB · controllers (webrtc-broadcaster),
   ActionCable, picker JS, popout chat intactos.

   Carga al final del manifest application.css.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.1) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   STUDIO HEADER · título + live indicator
   ----------------------------------------------------------------- */
/* line 29, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .studio-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 35, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .studio-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 46, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .studio-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  text-shadow: none !important;
  margin: 0 !important;
}

/* line 56, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .studio-title i, .studio-container .studio-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55));
}

/* line 62, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.2) !important;
}

/* line 78, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-indicator .live-dot {
  width: 8px !important;
  height: 8px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.65);
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite !important;
}

/* -----------------------------------------------------------------
   VIDEO CARD · marco premium del preview
   ----------------------------------------------------------------- */
/* line 91, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .video-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.7), 0 0 32px -8px rgba(255, 0, 116, 0.15) !important;
  overflow: hidden;
}

/* line 102, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .video-container {
  background: #000 !important;
  border-radius: 18px 18px 0 0 !important;
}

/* line 107, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .video-overlay {
  padding: 16px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%) !important;
}

/* -----------------------------------------------------------------
   STATUS BADGE / VIEWER BADGE
   ----------------------------------------------------------------- */
/* line 116, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 13px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* line 133, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .status-badge i, .studio-container .status-badge svg {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 137, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .status-badge.live {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.45) !important;
}

/* line 143, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .status-badge.live i, .studio-container .status-badge.live svg {
  color: #fff !important;
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite;
}

/* line 150, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .viewer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 13px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* line 166, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .viewer-badge i, .studio-container .viewer-badge svg {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Bootstrap Icons no cargado · pintar ojito con SVG mask */
/* line 170, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .viewer-badge i.bi-eye-fill {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  background-color: rgba(255, 255, 255, 0.65) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/><path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/><path d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/></svg>") no-repeat center/contain;
}

/* -----------------------------------------------------------------
   CONTROLS CARD · start/stop broadcast
   ----------------------------------------------------------------- */
/* line 183, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .controls-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: none !important;
}

/* line 191, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .control-buttons {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* line 199, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-broadcast {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  border-radius: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 219, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-broadcast::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 229, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-broadcast:hover::after {
  transform: translateX(220%);
}

/* line 231, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-broadcast:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* line 236, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-broadcast i, .studio-container .btn-broadcast svg {
  width: 20px;
  height: 20px;
  font-size: 18px;
}

/* line 243, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-start {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.4) !important;
}

/* line 248, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-start:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(255, 0, 116, 0.55) !important;
}

/* line 254, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-stop {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
}

/* line 259, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-stop:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5) !important;
}

/* -----------------------------------------------------------------
   LIVE BROADCAST INDICATOR · cuando está transmitiendo
   ----------------------------------------------------------------- */
/* line 269, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-broadcast-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 24px !important;
  background: radial-gradient(ellipse at left center, rgba(255, 0, 116, 0.2) 0%, transparent 60%), rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 0, 116, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* line 284, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-pulse {
  width: 10px !important;
  height: 10px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.75);
  animation: exo-livebadge-pulse 1.2s ease-in-out infinite !important;
}

/* line 293, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #ff7eb8 !important;
}

/* line 302, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .live-duration {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 0, 116, 0.3);
}

/* -----------------------------------------------------------------
   TIP COUNTER · contador grande de tips recibidos
   ----------------------------------------------------------------- */
/* line 317, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tip-counter {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(34, 197, 94, 0.15) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  margin-bottom: 18px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Línea verde top */
}

/* line 330, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tip-counter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.65), transparent);
}

/* line 341, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tip-counter-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 6px !important;
}

/* line 355, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tip-counter-amount {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  letter-spacing: -0.01em !important;
  color: #4ade80 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(34, 197, 94, 0.45);
}

/* -----------------------------------------------------------------
   INFO CARDS · stream info, technical
   ----------------------------------------------------------------- */
/* line 369, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 18px !important;
  overflow: hidden;
  box-shadow: none !important;
}

/* line 378, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card-header {
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 384, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 395, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 406, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card-title i, .studio-container .info-card-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.45));
}

/* line 412, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-card-body {
  padding: 16px 18px !important;
}

/* line 416, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-item {
  padding: 10px 0;
}

/* line 419, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-item + .info-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 424, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-bottom: 4px !important;
}

/* line 434, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .info-value {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  line-height: 1.45;
}

/* -----------------------------------------------------------------
   POPOUT CHAT BUTTON
   ----------------------------------------------------------------- */
/* line 445, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-popout-chat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 464, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-popout-chat:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #ff7eb8 !important;
}

/* line 470, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .btn-popout-chat i, .studio-container .btn-popout-chat svg {
  font-size: 12px;
}

/* -----------------------------------------------------------------
   CHAT CARD · messages + input
   ----------------------------------------------------------------- */
/* line 477, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-card {
  display: flex;
  flex-direction: column;
}

/* line 482, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-area {
  background: rgba(0, 0, 0, 0.2) !important;
  min-height: 220px;
  max-height: 360px;
  overflow: hidden;
}

/* line 489, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-scroll {
  padding: 12px 14px !important;
  height: 100%;
  overflow-y: auto;
}

/* line 494, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-scroll::-webkit-scrollbar {
  width: 6px !important;
}

/* line 495, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

/* line 496, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
}

/* line 500, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-messages-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.55) !important;
}

/* line 504, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 32px 16px !important;
  text-align: center;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 514, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-empty-state i, .studio-container .chat-empty-state svg {
  font-size: 36px !important;
  color: rgba(255, 0, 116, 0.4) !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.25));
}

/* line 520, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-empty-state p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
}

/* line 528, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-message {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-left: 2px solid rgba(255, 0, 116, 0.45);
  border-radius: 0 10px 10px 0 !important;
}

/* line 535, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-message strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: #ff7eb8 !important;
}

/* line 542, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-message .time {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-left: 6px;
}

/* line 549, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-message .content {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: #f5f5f5 !important;
  line-height: 1.4;
  margin-top: 4px;
}

/* line 557, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-message .content img {
  border-radius: 8px;
  max-width: 100%;
}

/* -----------------------------------------------------------------
   CHAT INPUT · misma vibe que el viewer
   ----------------------------------------------------------------- */
/* line 567, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-input-container {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px !important;
}

/* line 573, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  resize: none !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 588, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 595, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 598, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* line 606, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 7px 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 624, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-action-btn svg {
  width: 16px;
  height: 16px;
}

/* line 626, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-action-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 633, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-send-btn {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 648, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-send-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 654, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-send-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.5) !important;
}

/* line 657, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-send-btn:hover svg {
  transform: rotate(-12deg) translateX(2px);
}

/* line 660, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .chat-send-btn:active {
  transform: translateY(0) scale(0.92) !important;
  transition-duration: 100ms !important;
}

/* -----------------------------------------------------------------
   PICKER (emoji + GIF) · misma estética que el viewer
   ----------------------------------------------------------------- */
/* line 670, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-section {
  background: rgba(15, 15, 15, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

/* line 679, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 689, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-close-btn:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  color: #ff7eb8 !important;
}

/* line 695, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-search {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* line 704, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-search:focus {
  outline: none !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 710, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .picker-search::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 713, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .emoji-item {
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 724, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .emoji-item:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  transform: scale(1.18) !important;
}

/* line 730, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .gif-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 739, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .gif-item:hover {
  transform: scale(1.04) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* -----------------------------------------------------------------
   ALERT WEBRTC · información técnica brand-tinted
   ----------------------------------------------------------------- */
/* line 749, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .alert-webrtc {
  background: rgba(255, 0, 116, 0.06) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-left: 3px solid #ff0074 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
}

/* line 757, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .alert-webrtc i, .studio-container .alert-webrtc svg {
  color: #ff3d9a !important;
  margin-right: 6px;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.45));
}

/* line 763, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .alert-webrtc strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #ff7eb8 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}

/* line 772, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tech-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
}

/* line 777, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tech-list li {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.5;
  padding: 4px 0 4px 18px;
  position: relative;
}

/* line 785, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .tech-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 700;
}

/* -----------------------------------------------------------------
   BACK BUTTON
   ----------------------------------------------------------------- */
/* line 799, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .back-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 28px !important;
  padding: 11px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 820, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .back-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  transform: translateX(-2px) !important;
  text-decoration: none !important;
}

/* line 828, app/assets/stylesheets/_components.exo-creator-studio.scss */
.studio-container .back-button i, .studio-container .back-button svg {
  font-size: 14px;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 840, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .social-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* line 846, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .studio-header {
    margin-bottom: 20px !important;
  }
  /* line 849, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .studio-header .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* line 856, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .studio-title {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
  /* line 860, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .video-card {
    border-radius: 14px !important;
  }
  /* line 864, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .controls-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }
  /* line 869, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .control-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
  /* line 874, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .btn-broadcast {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
  }
  /* line 880, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .live-broadcast-indicator {
    width: 100% !important;
    justify-content: center !important;
  }
  /* line 885, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .info-card {
    border-radius: 14px !important;
  }
  /* line 889, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .info-card-header {
    padding: 12px 14px !important;
  }
  /* line 893, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .info-card-body {
    padding: 14px !important;
  }
  /* line 897, app/assets/stylesheets/_components.exo-creator-studio.scss */
  .studio-container .tip-counter {
    padding: 18px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR LIVE STREAMS OVERRIDE
   -----------------------------------------------------------------
   Override visual del lado creator: lista de streams y form nuevo.
   - /creator/live_streams (index)
   - /creator/live_streams/new (new form)

   Cero cambios al HTML/ERB · controllers (live-streams-list,
   infinite-scroll), filters, turbo-frames intactos.

   Carga DESPUÉS de creator_live_streams.scss y
   creator_live_stream_new.scss en el manifest.
   ================================================================= */
/* =================================================================
   PAGE WRAPPERS
   ================================================================= */
/* line 19, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard {
  background: #0a0a0a !important;
}

/* line 23, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page {
  background: #0a0a0a !important;
}

/* =================================================================
   INDEX · DASHBOARD HEADER
   ================================================================= */
/* line 31, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .dashboard-header {
  margin-bottom: 26px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 37, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .dashboard-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 47, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .dashboard-header .header-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

/* line 56, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .dashboard-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 66, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .dashboard-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

/* =================================================================
   PRIMARY CTA · "Nuevo Broadcast" / "Crear primer broadcast"
   ================================================================= */
/* line 78, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.btn-primary-gradient {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 101, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.btn-primary-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 111, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.btn-primary-gradient:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 116, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.btn-primary-gradient:hover::after {
  transform: translateX(220%);
}

/* line 119, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.btn-primary-gradient:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* =================================================================
   FILTERS SECTION · collapsible
   ================================================================= */
/* line 129, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  margin-bottom: 22px !important;
  overflow: hidden;
}

/* line 137, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 149, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-header::-webkit-details-marker {
  display: none !important;
}

/* line 150, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-header::marker {
  display: none !important;
}

/* line 152, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
details[open] .streams-dashboard .filters-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* line 157, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* line 168, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-title svg {
  color: rgba(255, 255, 255, 0.55);
}

/* line 171, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-active-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff0074;
  border-radius: 50%;
  margin-left: 6px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.65);
}

/* line 181, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-toggle-chevron {
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 186, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard details[open] .filters-toggle-chevron {
  transform: rotate(180deg);
}

/* line 190, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-clear-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 11px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 999px !important;
  color: #f87171 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 207, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-clear-filters svg {
  width: 12px;
  height: 12px;
}

/* line 209, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-clear-filters:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 216, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filters-form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  padding: 18px !important;
  align-items: flex-end;
}

/* line 224, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 230, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 239, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-input,
.streams-dashboard .filter-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  width: 100% !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 254, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-input:focus,
.streams-dashboard .filter-select:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 261, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-input::placeholder,
.streams-dashboard .filter-select::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* line 264, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .date-range-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

/* line 270, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-apply-filters {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 18px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 290, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-apply-filters:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.45) !important;
}

/* Filter tags activos */
/* line 298, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 18px 16px !important;
  margin: 0 !important;
}

/* line 306, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
}

/* line 319, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-tag-remove {
  display: grid !important;
  place-items: center !important;
  width: 14px !important;
  height: 14px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

/* line 329, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .filter-tag-remove:hover {
  background: rgba(239, 68, 68, 0.5) !important;
  color: #fff !important;
}

/* =================================================================
   STATS OVERVIEW · 4 stat cards (scopeado para no contaminar)
   ================================================================= */
/* line 336, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

/* line 343, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 353, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 359, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

/* line 366, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  color: #ff3d9a !important;
  position: static !important;
  inset: auto !important;
}

/* line 378, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 384, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-viewers {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
  color: #60a5fa !important;
}

/* line 388, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-viewers svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* line 391, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-earnings {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
  color: #4ade80 !important;
}

/* line 395, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-earnings svg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* line 398, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-scheduled {
  background: rgba(180, 0, 255, 0.1) !important;
  border-color: rgba(180, 0, 255, 0.22) !important;
  color: #c673ff !important;
}

/* line 402, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-icon.icon-scheduled svg {
  filter: drop-shadow(0 0 4px rgba(180, 0, 255, 0.4));
}

/* line 406, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-change.positive {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45);
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite;
}

/* line 422, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* line 437, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stats-overview .stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* =================================================================
   LIVE STREAM BANNER · cuando hay un stream activo
   ================================================================= */
/* line 451, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stream-banner {
  position: relative;
  background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(255, 0, 116, 0.2) 0%, transparent 60%), rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin-bottom: 26px !important;
  box-shadow: 0 12px 40px -16px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* line 465, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stream-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
}

/* line 476, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-banner-content {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 22px !important;
  align-items: center !important;
}

/* line 483, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stream-banner .live-indicator {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* line 489, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-badge-animated {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.45);
}

/* line 505, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-dot-animated {
  width: 7px !important;
  height: 7px !important;
  background: #fff !important;
  border-radius: 50% !important;
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite !important;
}

/* line 513, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stream-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}

/* line 522, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stream-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* line 528, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stat-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
}

/* line 540, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stat-item i, .streams-dashboard .live-stat-item svg {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px;
}

/* line 546, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* line 552, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .live-actions-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* line 558, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 576, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-action i, .streams-dashboard .btn-action svg {
  font-size: 14px;
}

/* line 578, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-action:active {
  transform: scale(0.97) !important;
}

/* line 581, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-studio {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35) !important;
}

/* line 586, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-studio:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 594, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-view {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* line 599, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-view:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 606, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-end {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* line 611, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-end:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* =================================================================
   STREAMS SECTION · upcoming + past
   ================================================================= */
/* line 623, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-section {
  margin-bottom: 28px !important;
}

/* line 627, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-section .section-header {
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
}

/* line 633, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-section .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.2vw, 20px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* line 646, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-section .section-title i, .streams-dashboard .streams-section .section-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* line 652, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .section-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  background: rgba(255, 0, 116, 0.12) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 4px;
}

/* =================================================================
   STREAMS GRID · upcoming stream cards
   ================================================================= */
/* line 670, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}

/* line 676, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 685, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card:hover {
  border-color: rgba(180, 0, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* line 691, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* line 703, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-status.status-scheduled {
  background: rgba(180, 0, 255, 0.12) !important;
  border: 1px solid rgba(180, 0, 255, 0.3) !important;
  color: #c673ff !important;
}

/* line 710, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card .stream-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}

/* line 720, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card .stream-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

/* line 727, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
}

/* line 735, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card .meta-item i, .streams-dashboard .stream-card .meta-item svg {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px;
}

/* line 741, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .stream-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 749, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-action {
  flex: 1;
  min-width: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 771, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-primary {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255, 0, 116, 0.3) !important;
}

/* line 776, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-primary:hover {
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 5px 16px rgba(255, 0, 116, 0.45) !important;
}

/* line 783, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* line 788, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 795, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* line 800, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .btn-card-danger:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* =================================================================
   PAST STREAMS TABLE
   ================================================================= */
/* line 812, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .past-streams-table {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* line 819, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .table-container {
  overflow-x: auto;
}

/* line 823, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table {
  width: 100%;
  border-collapse: collapse;
}

/* line 827, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table th, .streams-dashboard .streams-table td {
  padding: 12px 16px !important;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
}

/* line 836, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table thead th {
  background: rgba(255, 255, 255, 0.02) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 847, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table tbody tr {
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 850, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 851, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .streams-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* =================================================================
   EMPTY STATE
   ================================================================= */
/* line 859, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .empty-state-container {
  text-align: center !important;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
}

/* line 868, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .empty-state-icon {
  display: grid !important;
  place-items: center !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  color: #ff3d9a !important;
  font-size: 36px !important;
}

/* line 881, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .empty-state-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 890, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .empty-state-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 auto 22px !important;
  max-width: 32rem;
}

/* Infinite scroll feedback */
/* line 901, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .infinite-scroll-loading {
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
}

/* line 909, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .loading-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 0, 116, 0.18);
  border-top-color: #ff0074;
  border-radius: 50%;
  margin-bottom: 8px;
  animation: exo-spin 0.8s linear infinite;
}

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

/* line 924, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.streams-dashboard .infinite-scroll-end {
  text-align: center;
  padding: 18px;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =================================================================
   NEW FORM · /creator/live_streams/new
   ================================================================= */
/* line 938, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .page-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 944, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 955, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 975, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-back-link:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff7eb8 !important;
  text-decoration: none !important;
  transform: translateX(-2px) !important;
}

/* line 984, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 993, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .page-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

/* Form layout · main + sidebar */
/* line 1003, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .content-form-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 22px !important;
  align-items: start !important;
}

/* line 1010, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Form sections */
/* line 1018, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

/* line 1025, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-section .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.2vw, 19px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 1036, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-section .section-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 1047, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-section .section-description {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}

/* Form group · label + input */
/* line 1057, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

/* line 1063, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-group:last-child {
  margin-bottom: 0;
}

/* line 1066, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* line 1074, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-label-required::after {
  content: ' *';
  color: #ff3d9a;
}

/* line 1079, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-input,
.new-content-page .form-textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1094, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-input:focus,
.new-content-page .form-textarea:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 1101, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-input::placeholder,
.new-content-page .form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* line 1104, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-textarea {
  resize: vertical;
  min-height: 90px;
}

/* line 1109, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-hint {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 4px 0 0 !important;
}

/* =================================================================
   PRIVACY OPTIONS · radio cards
   ================================================================= */
/* line 1120, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

/* line 1127, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-option {
  display: block;
  cursor: pointer;
  position: relative;
}

/* line 1132, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 1139, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1152, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-option:hover .stream-privacy-card {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 1157, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-option input[type="radio"]:checked + .stream-privacy-card {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.05) 100%) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.3), 0 4px 16px rgba(255, 0, 116, 0.18);
}

/* line 1164, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-icon {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 12px !important;
  color: #ff3d9a !important;
}

/* line 1175, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-icon svg {
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 1178, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-content {
  flex: 1;
  min-width: 0;
}

/* line 1183, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 1191, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
  margin-top: 2px;
}

/* line 1199, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-check {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 1212, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-privacy-option input[type="radio"]:checked + .stream-privacy-card .stream-privacy-check {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.55);
}

/* =================================================================
   STREAM PRICE · campo PPV
   ================================================================= */
/* line 1223, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-field {
  display: flex !important;
  align-items: stretch !important;
  width: 200px !important;
  flex-wrap: nowrap !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* line 1234, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-field:focus-within {
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* Reset legacy absolute positioning · ahora flex siblings reales */
/* line 1241, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-prefix,
.new-content-page .stream-price-suffix {
  position: static !important;
  left: auto !important;
  right: auto !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0;
}

/* line 1260, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-prefix {
  border-right: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 9px 0 0 9px !important;
}

/* line 1265, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-suffix {
  border-left: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 0 9px 9px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

/* Specificity reforzada para vencer el `padding-left/right` legacy con !important */
/* line 1273, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-field .stream-price-input,
.new-content-page input.stream-price-input {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  padding: 12px 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
}

/* line 1288, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-price-field .stream-price-input:focus,
.new-content-page input.stream-price-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =================================================================
   TOGGLE SWITCH (chat / tips enabled)
   ================================================================= */
/* line 1299, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* line 1307, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* line 1308, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-row:first-child {
  padding-top: 0 !important;
}

/* line 1311, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-info {
  flex: 1;
  min-width: 0;
}

/* line 1316, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 1326, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-title svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 1329, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .stream-toggle-desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
  margin: 4px 0 0 !important;
}

/* Patrón legacy probado · input 0×0 absolute + slider con cursor pointer.
   Click en slider → bubble al label → trigger checkbox (browser nativo). */
/* line 1339, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 24px !important;
  flex-shrink: 0;
}

/* line 1347, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  margin: 0 !important;
}

/* line 1355, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.45), 0 0 12px rgba(255, 0, 116, 0.35) !important;
}

/* line 1361, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-switch input:checked + .toggle-slider::before {
  transform: translate(20px, -50%) !important;
}

/* line 1366, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1378, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .toggle-slider::before {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  left: 2px !important;
  top: 50% !important;
  transform: translate(0, -50%) !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =================================================================
   FORM ACTIONS · cancel + submit
   ================================================================= */
/* line 1397, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .form-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-top: 8px !important;
}

/* line 1406, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1424, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 1431, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1452, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 1462, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 1465, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-submit:hover::after {
  transform: translateX(220%);
}

/* line 1468, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .btn-submit:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* =================================================================
   ERROR MESSAGES (form)
   ================================================================= */
/* line 1478, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .error-messages {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
  color: #f87171 !important;
}

/* line 1487, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .error-messages strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f87171 !important;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* line 1496, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .error-messages ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

/* line 1501, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .error-messages ul li {
  position: relative;
  padding-left: 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: rgba(248, 113, 113, 0.85);
  line-height: 1.5;
}

/* line 1509, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .error-messages ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #f87171;
}

/* =================================================================
   TIPS SIDEBAR · sugerencias para crear stream exitoso
   ================================================================= */
/* line 1523, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tips-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  position: sticky;
  top: 86px;
}

/* line 1532, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tips-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #ff7eb8 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 0, 116, 0.2) !important;
  position: relative;
}

/* line 1544, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tips-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 1555, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-item {
  display: flex !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* line 1561, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* line 1562, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-item:first-child {
  padding-top: 0 !important;
}

/* line 1565, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-item .tip-icon {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 10px !important;
  color: #ff3d9a !important;
  margin: 0 !important;
  animation: none !important;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  font-size: 0 !important;
}

/* line 1582, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-item .tip-icon svg, .new-content-page .tip-item .tip-icon::before {
  width: 16px !important;
  height: 16px !important;
  color: #ff3d9a !important;
  fill: currentColor !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
  animation: none !important;
}

/* line 1595, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-content {
  flex: 1;
  min-width: 0;
}

/* line 1600, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-content .tip-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
}

/* line 1609, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
.new-content-page .tip-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 1622, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard,
.new-content-page {
    padding: 16px 16px 110px !important;
  }
  /* line 1627, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .new-content-page .content-form-wrapper {
    grid-template-columns: 1fr !important;
  }
  /* line 1631, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .new-content-page .tips-section {
    position: static !important;
  }
}

@media (max-width: 768px) {
  /* line 1637, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .dashboard-header .header-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  /* line 1643, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .dashboard-header .header-actions {
    width: 100% !important;
  }
  /* line 1646, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .dashboard-header .header-actions .btn-primary-gradient {
    width: 100% !important;
  }
  /* line 1651, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .stats-overview {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 1656, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .stats-overview .stat-card {
    padding: 14px !important;
  }
  /* line 1660, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .live-banner-content {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* line 1665, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .live-actions-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  /* line 1669, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .live-actions-group .btn-action {
    /* SassC no soporta calc(50% - 4px) — `unquote` pasa la expresión
         literal al CSS final para que el browser haga el cálculo. */
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  /* line 1677, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .filters-form {
    grid-template-columns: 1fr !important;
  }
  /* line 1681, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .stream-card-actions {
    flex-direction: column !important;
  }
  /* line 1684, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .stream-card-actions .btn-card-action {
    width: 100% !important;
  }
  /* line 1690, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .streams-dashboard .streams-table th, .streams-dashboard .streams-table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  /* line 1693, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .new-content-page .form-section {
    padding: 18px 16px !important;
  }
  /* line 1697, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .new-content-page .form-actions {
    flex-direction: column-reverse !important;
  }
  /* line 1700, app/assets/stylesheets/_components.exo-creator-live-streams.scss */
  .new-content-page .form-actions .btn-cancel,
.new-content-page .form-actions .btn-submit {
    width: 100% !important;
    justify-content: center !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR STREAM SHOW OVERRIDE
   /creator/live_streams/:id (vista detalle de un stream propio)
   -----------------------------------------------------------------
   Override de creator_live_stream_show.scss (1602 líneas legacy).
   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_live_stream_show en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 14, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.1) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.08) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   DETAIL HEADER · back button
   ----------------------------------------------------------------- */
/* line 25, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-header {
  margin-bottom: 22px !important;
}

/* line 29, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 48, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-back i, .stream-details-page .btn-back svg {
  font-size: 13px;
}

/* line 50, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-back:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff7eb8 !important;
  text-decoration: none !important;
  transform: translateX(-2px) !important;
}

/* -----------------------------------------------------------------
   STREAM INFO CARD · header + title + description + action
   ----------------------------------------------------------------- */
/* line 63, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  margin-bottom: 22px !important;
  position: relative;
  overflow: hidden;
}

/* line 72, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
}

/* line 83, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap;
  margin-bottom: 22px !important;
}

/* line 92, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-left {
  flex: 1;
  min-width: 0;
}

/* line 94, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-indicator {
  margin-bottom: 14px !important;
}

/* line 98, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* line 110, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-badge i, .stream-details-page .status-badge svg {
  font-size: 11px;
}

/* line 112, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-badge.status-live {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.45) !important;
}

/* line 118, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-badge.status-scheduled {
  background: rgba(180, 0, 255, 0.12) !important;
  border: 1px solid rgba(180, 0, 255, 0.35) !important;
  color: #c673ff !important;
}

/* line 124, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-badge.status-ended {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 131, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .status-live .status-dot {
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
  animation: exo-livebadge-pulse 1.4s ease-in-out infinite !important;
}

/* line 139, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-card .stream-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  text-shadow: none !important;
}

/* line 150, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-card .stream-description {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* line 158, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-info-right {
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   ACTION BUTTONS · end stream / edit
   ----------------------------------------------------------------- */
/* line 166, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 188, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 198, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 203, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary:hover::after {
  transform: translateX(220%);
}

/* line 206, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary.btn-end-stream {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35) !important;
}

/* line 210, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-action-primary.btn-end-stream:hover {
  box-shadow: 0 8px 28px rgba(239, 68, 68, 0.5) !important;
}

/* -----------------------------------------------------------------
   STREAM METADATA · grid de info chips
   ----------------------------------------------------------------- */
/* line 220, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-metadata {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 228, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .metadata-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

/* line 237, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .metadata-item i, .stream-details-page .metadata-item svg {
  flex-shrink: 0;
  color: #ff3d9a !important;
  font-size: 16px !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 245, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .metadata-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px;
  min-width: 0;
}

/* line 252, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .metadata-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 261, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .metadata-value {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #f5f5f5 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------
   DETAIL STATS GRID · 4 cards (viewers, peak, earnings, messages)
   ================================================================= */
/* line 275, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

/* line 282, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 294, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 300, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  color: #ff3d9a !important;
}

/* line 311, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 317, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-viewers {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
  color: #60a5fa !important;
}

/* line 321, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-viewers svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* line 324, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-max-viewers {
  background: rgba(180, 0, 255, 0.1) !important;
  border-color: rgba(180, 0, 255, 0.22) !important;
  color: #c673ff !important;
}

/* line 328, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-max-viewers svg {
  filter: drop-shadow(0 0 4px rgba(180, 0, 255, 0.4));
}

/* line 331, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-earnings {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
  color: #4ade80 !important;
}

/* line 335, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-earnings svg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* line 338, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stat-icon-wrapper.icon-messages {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.22) !important;
  color: #ff3d9a !important;
}

/* line 345, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stat-card .stat-data {
  min-width: 0;
}

/* line 347, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stat-card .stat-number {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* line 360, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-stat-card .stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   DETAIL CONTENT GRID · 2 cols (viewers + chat)
   ================================================================= */
/* line 374, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

/* line 381, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .detail-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* line 388, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .section-header-detail {
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 394, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .section-header-detail::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 405, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .section-title-detail {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* line 416, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .section-title-detail svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 422, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .count-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  background: rgba(255, 0, 116, 0.12) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  margin-left: auto;
}

/* -----------------------------------------------------------------
   VIEWERS LIST
   ----------------------------------------------------------------- */
/* line 440, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewers-list {
  max-height: 420px;
  overflow-y: auto;
}

/* line 444, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewers-list::-webkit-scrollbar {
  width: 6px;
}

/* line 445, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewers-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 446, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewers-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 450, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewers-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.55);
}

/* line 454, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 462, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-item:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 463, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-item:last-child {
  border-bottom: none !important;
}

/* line 466, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-avatar {
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden;
}

/* line 473, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 0, 116, 0.3);
}

/* line 482, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .avatar-placeholder-small {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 50% !important;
}

/* line 495, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-info {
  flex: 1;
  min-width: 0;
}

/* line 500, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  margin-bottom: 2px;
}

/* line 508, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 516, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-meta i, .stream-details-page .viewer-meta svg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 519, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* line 532, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-badge i, .stream-details-page .viewer-badge svg {
  font-size: 10px;
}

/* line 534, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .viewer-badge.subscriber-badge {
  background: linear-gradient(135deg, rgba(180, 0, 255, 0.18) 0%, rgba(255, 0, 116, 0.1) 100%) !important;
  border: 1px solid rgba(180, 0, 255, 0.4) !important;
  color: #c673ff !important;
}

/* -----------------------------------------------------------------
   CHAT MESSAGES LIST
   ----------------------------------------------------------------- */
/* line 545, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-messages-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px 0;
}

/* line 550, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-messages-list::-webkit-scrollbar {
  width: 6px;
}

/* line 551, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-messages-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 552, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-messages-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 556, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-messages-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.55);
}

/* line 560, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-message-item {
  display: flex !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 566, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .chat-message-item:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 569, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-avatar {
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden;
}

/* line 576, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* line 584, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-content {
  flex: 1;
  min-width: 0;
}

/* line 589, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 2px;
}

/* line 596, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-username {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: #ff7eb8 !important;
}

/* line 603, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 609, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  line-height: 1.4;
  word-wrap: break-word;
}

/* line 617, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .message-gif {
  max-width: 200px;
  border-radius: 10px;
  margin-top: 4px;
}

/* -----------------------------------------------------------------
   EMPTY STATES
   ----------------------------------------------------------------- */
/* line 627, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .empty-state-small {
  text-align: center !important;
  padding: 36px 20px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 632, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .empty-state-small i, .stream-details-page .empty-state-small svg {
  display: block;
  font-size: 36px !important;
  margin: 0 auto 10px !important;
  color: rgba(255, 0, 116, 0.4) !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.25));
}

/* line 640, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .empty-state-small p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   STREAM SETTINGS CARD
   ----------------------------------------------------------------- */
/* line 652, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .stream-settings-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 22px !important;
  overflow: hidden;
}

/* line 660, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  padding: 18px !important;
}

/* line 667, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
}

/* line 677, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-icon {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 10px !important;
  color: #ff3d9a !important;
}

/* line 689, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* line 695, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 704, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* line 709, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-value.enabled {
  color: #4ade80 !important;
}

/* line 710, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .setting-value.disabled {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* -----------------------------------------------------------------
   DANGER ZONE · delete broadcast
   ================================================================= */
/* line 717, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone {
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin-bottom: 22px !important;
  overflow: hidden;
}

/* line 727, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* line 731, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-header h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f87171 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* line 743, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-header h3 i, .stream-details-page .danger-zone-header h3 svg {
  color: #f87171 !important;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

/* line 750, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px !important;
  flex-wrap: wrap;
}

/* line 759, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-info {
  flex: 1;
  min-width: 0;
}

/* line 763, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-info strong {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #fca5a5 !important;
  margin-bottom: 4px;
}

/* line 772, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .danger-zone-info p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(248, 113, 113, 0.65) !important;
  line-height: 1.4;
  margin: 0;
}

/* line 781, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  border-radius: 10px !important;
  color: #f87171 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 799, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-danger i, .stream-details-page .btn-danger svg {
  font-size: 13px;
}

/* line 801, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
.stream-details-page .btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 814, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 820, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .stream-info-card {
    padding: 20px !important;
  }
  /* line 824, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .stream-info-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  /* line 831, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .stream-info-right .btn-action-primary {
    width: 100% !important;
    justify-content: center !important;
  }
  /* line 837, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .stream-metadata {
    grid-template-columns: 1fr !important;
  }
  /* line 841, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .detail-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 846, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .detail-stat-card {
    padding: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left;
  }
  /* line 853, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .detail-content-grid {
    grid-template-columns: 1fr !important;
  }
  /* line 857, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .danger-zone-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* line 861, app/assets/stylesheets/_components.exo-creator-stream-show.scss */
  .stream-details-page .danger-zone-content .btn-danger {
    width: 100% !important;
    justify-content: center !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CONTENT SHOW OVERRIDE
   /@:user/content/:id (vista detalle de un post premium/PPV)
   -----------------------------------------------------------------
   El show.html.erb tiene ~1800 líneas de inline `<style>` legacy.
   Override con specificity scopeada + !important para vencer las
   inline styles que se cargan después del manifest.

   Cero cambios al HTML/ERB.
   Carga al final del manifest application.css.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 17, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.06) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   POST NAV BAR · sticky top con back + title + options
   ----------------------------------------------------------------- */
/* line 28, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-nav-bar {
  background: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 18px !important;
  position: relative;
}

/* line 36, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-nav-bar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 30%;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
}

/* line 47, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-nav-back,
.content-show-page .post-options-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 57, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-nav-back:hover,
.content-show-page .post-options-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff7eb8 !important;
}

/* line 64, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-nav-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
}

/* -----------------------------------------------------------------
   OPTIONS DROPDOWN
   ----------------------------------------------------------------- */
/* line 77, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-options-dropdown {
  background: rgba(15, 15, 15, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 0, 116, 0.05) !important;
  padding: 6px !important;
}

/* line 89, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 108, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item svg {
  color: rgba(255, 255, 255, 0.55);
}

/* line 110, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff7eb8 !important;
}

/* line 114, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item:hover svg {
  color: #ff7eb8;
}

/* line 117, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item.post-option-danger {
  color: #f87171 !important;
}

/* line 119, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item.post-option-danger svg {
  color: #f87171;
}

/* line 121, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-option-item.post-option-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
}

/* -----------------------------------------------------------------
   POST CONTAINER · main card
   ----------------------------------------------------------------- */
/* line 132, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-container {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  margin: 18px 0 !important;
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 0, 116, 0.04) !important;
}

/* -----------------------------------------------------------------
   POST CREATOR HEADER · avatar + name + date
   ----------------------------------------------------------------- */
/* line 147, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-creator-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* line 156, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .creator-avatar-link {
  flex-shrink: 0;
  text-decoration: none !important;
}

/* line 161, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-creator-header .creator-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 0, 116, 0.4) !important;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.25);
}

/* line 170, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .creator-avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* line 180, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-creator-header .creator-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* line 188, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .creator-name-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

/* line 195, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-creator-header .creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
}

/* line 203, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-creator-header .creator-username {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 209, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   POST CAPTION
   ----------------------------------------------------------------- */
/* line 221, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-caption {
  padding: 4px 20px 14px !important;
}

/* line 225, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .caption-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* -----------------------------------------------------------------
   POST MEDIA · gallery, video, single image
   ----------------------------------------------------------------- */
/* line 239, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-media {
  background: #000 !important;
  position: relative;
}

/* line 244, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .media-video,
.content-show-page .media-image {
  width: 100% !important;
  display: block !important;
  max-height: 80vh;
  object-fit: contain;
}

/* line 252, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .single-image-wrap {
  display: block;
  cursor: zoom-in;
}

/* -----------------------------------------------------------------
   GALLERY SLIDER
   ----------------------------------------------------------------- */
/* line 261, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-slider {
  position: relative;
}

/* line 265, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-viewport {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* line 271, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-slides {
  display: flex !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 276, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  background: #000;
  cursor: zoom-in;
}

/* line 285, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 40px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 305, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-nav svg {
  width: 22px;
  height: 22px;
}

/* line 307, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-nav:hover {
  background: rgba(255, 0, 116, 0.55) !important;
  transform: translateY(-50%) scale(1.08);
}

/* line 312, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-nav.gallery-prev {
  left: 14px;
}

/* line 313, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-nav.gallery-next {
  right: 14px;
}

/* line 316, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-dots {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%);
  display: flex !important;
  gap: 5px !important;
  z-index: 5;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
}

/* line 331, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-dot {
  width: 7px !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 343, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-dot.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  width: 22px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
}

/* line 351, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumbstrip {
  display: flex !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  overflow-x: auto;
}

/* line 358, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumbstrip::-webkit-scrollbar {
  height: 4px;
}

/* line 359, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumbstrip::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.4);
  border-radius: 999px;
}

/* line 362, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumb {
  flex-shrink: 0;
  position: relative;
  width: 56px !important;
  height: 56px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 0 !important;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 375, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumb.active {
  border-color: #ff0074 !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.3), 0 0 12px rgba(255, 0, 116, 0.4);
}

/* line 380, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumb .thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* line 387, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumb .thumb-video-icon {
  display: grid !important;
  place-items: center !important;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.12) 100%);
  color: #ff7eb8;
}

/* line 395, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .gallery-thumb .thumb-video-icon svg {
  width: 24px;
  height: 24px;
}

/* -----------------------------------------------------------------
   POST ACTIONS BAR · likes/comments/tip
   ----------------------------------------------------------------- */
/* line 403, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* line 411, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .actions-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* line 417, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 436, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* line 438, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 444, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn:active {
  transform: scale(0.96) !important;
  transition-duration: 100ms !important;
}

/* line 449, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn.tip-trigger {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
}

/* line 455, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .action-icon-btn.tip-trigger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------
   POST STATS · likes / comments / views
   ----------------------------------------------------------------- */
/* line 467, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-stats {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 18px 14px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 477, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .stat {
  font-weight: 500 !important;
}

/* line 481, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .stat-dot {
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 14px;
}

/* -----------------------------------------------------------------
   COMMENTS SECTION
   ----------------------------------------------------------------- */
/* line 490, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .post-comments-section {
  padding: 16px 20px 22px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

/* line 496, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .login-to-comment {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 507, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .login-link {
  color: #ff7eb8 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* line 512, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .login-link:hover {
  color: #ff3d9a !important;
  text-decoration: underline !important;
}

/* line 518, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .comments-list {
  margin-top: 14px !important;
}

/* -----------------------------------------------------------------
   MORE FROM CREATOR · grid de related content
   ----------------------------------------------------------------- */
/* line 526, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-from-creator {
  margin-top: 22px !important;
}

/* line 530, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.4vw, 19px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 16px !important;
  padding-left: 4px;
  position: relative;
}

/* line 540, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-title::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.55);
}

/* line 554, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

/* line 560, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  text-decoration: none !important;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 570, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-item img,
.content-show-page .more-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 580, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-item:hover img, .content-show-page .more-item:hover video {
  transform: scale(1.05);
}

/* line 586, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-placeholder {
  display: grid !important;
  place-items: center !important;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(180, 0, 255, 0.04) 100%);
  color: #ff7eb8;
}

/* line 595, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-locked-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(0.6);
  transform: scale(1.15);
}

/* line 604, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-locked-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle at center, rgba(255, 0, 116, 0.18) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
}

/* line 612, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-locked-overlay svg {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.65));
}

/* line 619, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-item-locked {
  cursor: pointer;
}

/* line 622, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-item-locked:hover .more-locked-bg {
  filter: blur(12px) brightness(0.8);
}

/* line 627, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page .more-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* =================================================================
   TIP MODAL · /content/:id (compartido con otros tip flows)
   ================================================================= */
/* line 646, app/assets/stylesheets/_components.exo-content-show.scss */
.content-show-page ~ * .tip-modal-backdrop,
.tip-modal-backdrop[data-profile-tip-target] {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

/* line 653, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-content {
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* line 664, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
  pointer-events: none;
}

/* line 676, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-hero {
  text-align: center;
  padding: 26px 24px 18px !important;
}

/* line 681, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-hero-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 12px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.22) 0%, rgba(180, 0, 255, 0.14) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 16px !important;
  color: #ff3d9a !important;
}

/* line 692, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-hero-icon svg {
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55));
}

/* line 695, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-modal-hero-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 6px !important;
}

/* line 705, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.6vw, 22px) !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 !important;
}

/* line 714, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-title-name {
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 721, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-body {
  padding: 18px 24px 8px !important;
}

/* line 725, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-section {
  margin-bottom: 16px;
}

/* line 728, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-section:last-child {
  margin-bottom: 0;
}

/* line 731, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 10px !important;
}

/* line 743, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-label svg {
  color: #ff3d9a;
}

/* line 746, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-section-optional {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: lowercase !important;
}

/* line 756, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-amount-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* line 763, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-amount-btn {
  padding: 12px 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 779, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-amount-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #ff7eb8 !important;
  transform: translateY(-1px) !important;
}

/* line 786, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-amount-btn.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4) !important;
}

/* line 794, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-wrapper {
  display: flex !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

/* line 802, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-wrapper:focus-within {
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 808, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-prefix,
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-suffix {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* line 820, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-prefix {
  border-right: 1px solid rgba(255, 0, 116, 0.2);
}

/* line 824, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount-suffix {
  border-left: 1px solid rgba(255, 0, 116, 0.2);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* line 830, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 12px 8px !important;
}

/* line 842, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-custom-amount:focus {
  outline: none;
}

/* line 845, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-message-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 860, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-message-input:focus {
  outline: none !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 866, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .tip-message-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* line 869, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .modal-footer {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 24px 22px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 876, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-cancel {
  flex-shrink: 0;
  padding: 11px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
}

/* line 888, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* line 894, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-send-tip {
  flex: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 917, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-send-tip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 927, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-send-tip:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 930, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-send-tip:hover::after {
  transform: translateX(220%);
}

/* line 934, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, color 0.2s !important;
}

/* line 950, app/assets/stylesheets/_components.exo-content-show.scss */
.tip-modal-container[data-profile-tip-target] .btn-close:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  color: #fff !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 961, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page {
    padding: 0 0 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 967, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .post-container {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 12px 0 !important;
  }
  /* line 974, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .post-creator-header {
    padding: 14px 16px !important;
  }
  /* line 978, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .post-caption {
    padding: 4px 16px 12px !important;
  }
  /* line 982, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .gallery-nav {
    width: 36px !important;
    height: 36px !important;
  }
  /* line 986, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .gallery-nav.gallery-prev {
    left: 10px;
  }
  /* line 987, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .gallery-nav.gallery-next {
    right: 10px;
  }
  /* line 990, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .more-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  /* line 995, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .post-actions-bar {
    padding: 10px 14px !important;
  }
  /* line 999, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .action-icon-btn {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  /* line 1003, app/assets/stylesheets/_components.exo-content-show.scss */
  .content-show-page .action-icon-btn svg {
    width: 16px;
    height: 16px;
  }
  /* line 1006, app/assets/stylesheets/_components.exo-content-show.scss */
  .tip-modal-container[data-profile-tip-target] .tip-modal-content {
    border-radius: 18px 18px 0 0 !important;
  }
  /* line 1010, app/assets/stylesheets/_components.exo-content-show.scss */
  .tip-modal-container[data-profile-tip-target] .modal-footer {
    flex-direction: column-reverse !important;
  }
  /* line 1013, app/assets/stylesheets/_components.exo-content-show.scss */
  .tip-modal-container[data-profile-tip-target] .modal-footer .btn-cancel,
.tip-modal-container[data-profile-tip-target] .modal-footer .btn-send-tip {
    width: 100% !important;
    justify-content: center !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR CONTENTS OVERRIDE
   - /creator/contents (index)
   - /creator/contents/new (form)
   - /creator/contents/:id/edit (form)
   -----------------------------------------------------------------
   Override del flow de publicación de contenido. La vista NEW comparte
   `.new-content-page` wrapper con creator/live_streams/new, así que
   muchas clases (form-section, form-actions, toggle-switch, etc.) ya
   tienen estilo brand vía `_components.exo-creator-live-streams.scss`.
   Aquí cubrimos las clases content-specific.

   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_contents_index.scss y creator_content_new.scss.
   ================================================================= */
/* =================================================================
   INDEX PAGE · /creator/contents
   ================================================================= */
/* line 22, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.06) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER · title + new content button
   ----------------------------------------------------------------- */
/* line 33, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-bottom: 26px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 44, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 55, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 65, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 87, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn svg {
  width: 18px;
  height: 18px;
}

/* line 89, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 99, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn:hover:not(.disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* line 104, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn:hover:not(.disabled)::after {
  transform: translateX(220%);
}

/* line 107, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .new-content-btn.disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* -----------------------------------------------------------------
   VERIFICATION BANNER · creator no verificada
   ----------------------------------------------------------------- */
/* line 119, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner {
  background: rgba(234, 179, 8, 0.06) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  border-left: 3px solid #fbbf24 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 24px !important;
}

/* line 127, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #fbbf24 !important;
  margin: 0 0 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 137, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner h3 i {
  color: #fbbf24;
}

/* line 140, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}

/* line 148, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner .cta-button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #0a0a0a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 164, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .verification-banner .cta-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.5) !important;
  color: #0a0a0a !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------------
   CONTENT STATS · 4 stats cards (scopeado)
   ----------------------------------------------------------------- */
/* line 177, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

/* line 184, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats .stat-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 195, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats .stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 200, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats .stat-card.stat-card--sales {
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(34, 197, 94, 0.12) 0%, transparent 60%), rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
}

/* line 208, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats .stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* line 221, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-stats .stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* line 231, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .stat-revenue {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
}

/* line 241, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .stat-revenue-note {
  display: block;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 2px;
}

/* -----------------------------------------------------------------
   SEARCH BAR
   ----------------------------------------------------------------- */
/* line 255, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-bar {
  margin-bottom: 14px;
}

/* line 259, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-form {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* line 268, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-form:focus-within {
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 274, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  pointer-events: none;
  z-index: 1;
}

/* line 287, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-input {
  width: 100% !important;
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 12px 44px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
}

/* line 297, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-input:focus {
  outline: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* line 304, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 307, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-clear {
  display: grid !important;
  place-items: center !important;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* line 319, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-clear:hover {
  background: rgba(239, 68, 68, 0.45) !important;
  color: #fff !important;
}

/* line 325, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-search-spinner {
  display: none;
  margin-right: 12px;
  color: #ff7eb8;
  animation: exo-spin 0.8s linear infinite;
}

/* -----------------------------------------------------------------
   FILTERS · filter buttons row
   ----------------------------------------------------------------- */
/* line 336, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

/* line 343, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 362, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .filter-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f5 !important;
  text-decoration: none !important;
}

/* line 368, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .filter-btn.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35) !important;
  text-decoration: none !important;
}

/* line 376, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .filter-btn.filter-btn--clips.active {
  background: linear-gradient(135deg, #b000ff 0%, #ff0074 100%) !important;
  box-shadow: 0 4px 12px rgba(180, 0, 255, 0.4) !important;
}

/* line 381, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .filter-btn.filter-btn--sales.active {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
}

/* -----------------------------------------------------------------
   CONTENTS GRID
   ----------------------------------------------------------------- */
/* line 391, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .contents-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

/* line 397, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .contents-grid.clips-only {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}

/* -----------------------------------------------------------------
   CONTENT CARD · individual item in grid
   ----------------------------------------------------------------- */
/* line 405, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 414, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-card:hover {
  border-color: rgba(255, 0, 116, 0.35) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px -10px rgba(255, 0, 116, 0.25) !important;
}

/* line 420, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-card.is-pinned {
  border-color: rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.15) !important;
}

/* line 426, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-preview {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  text-decoration: none !important;
}

/* line 434, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-preview img,
.contents-page .content-preview video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 443, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-preview:hover img, .contents-page .content-preview:hover video {
  transform: scale(1.05);
}

/* line 447, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .is-clip .content-preview {
  aspect-ratio: 9 / 16;
}

/* line 451, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-preview-placeholder {
  display: grid !important;
  place-items: center !important;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(180, 0, 255, 0.04) 100%);
}

/* line 458, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-preview-placeholder svg {
  width: 36px;
  height: 36px;
  fill: rgba(255, 0, 116, 0.45);
}

/* line 465, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-type-badge {
  position: absolute !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  left: 8px !important;
  padding: 3px 9px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  border-radius: 999px !important;
}

/* line 484, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .pinned-indicator {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45) !important;
}

/* line 501, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .gallery-count-badge {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: 8px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* line 520, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .gallery-count-badge svg {
  color: #fff;
}

/* line 523, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-status {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 8px !important;
  left: 8px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* line 540, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-status.content-status--published {
  background: rgba(34, 197, 94, 0.18) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

/* line 546, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-status.content-status--scheduled {
  background: rgba(180, 0, 255, 0.18) !important;
  border: 1px solid rgba(180, 0, 255, 0.4) !important;
  color: #c673ff !important;
}

/* line 552, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-status.content-status--draft {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 559, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-info {
  padding: 14px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* line 566, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* line 573, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-title {
  flex: 1;
  min-width: 0;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 590, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 600, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* line 605, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .meta-item svg {
  width: 12px;
  height: 12px;
  fill: rgba(255, 255, 255, 0.4);
}

/* line 612, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .meta-sep {
  color: rgba(255, 255, 255, 0.2);
}

/* line 616, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-free {
  color: #4ade80 !important;
  font-weight: 700;
}

/* line 621, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-price {
  color: #ff7eb8 !important;
  font-weight: 700;
}

/* line 626, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-subscribers {
  color: rgba(255, 255, 255, 0.55) !important;
  font-style: italic;
}

/* line 631, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .meta-item--sales .sales-count {
  color: #4ade80 !important;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px;
}

/* line 638, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .meta-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* -----------------------------------------------------------------
   CONTENT MENU · 3-dot menu trigger + dropdown
   ----------------------------------------------------------------- */
/* line 648, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .content-menu {
  position: relative;
  flex-shrink: 0;
}

/* line 653, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .menu-trigger {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 667, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .menu-trigger svg {
  width: 16px;
  height: 16px;
}

/* line 669, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .menu-trigger:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff7eb8 !important;
}

/* line 676, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-menu,
.polls-dashboard-section .dropdown-menu {
  background: rgba(15, 15, 15, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7) !important;
  padding: 6px !important;
  min-width: 160px;
}

/* line 688, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item,
.polls-dashboard-section .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 704, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item svg,
.polls-dashboard-section .dropdown-item svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* line 710, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item:hover,
.polls-dashboard-section .dropdown-item:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff7eb8 !important;
  text-decoration: none !important;
}

/* line 715, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item:hover svg,
.polls-dashboard-section .dropdown-item:hover svg {
  color: #ff7eb8;
}

/* line 718, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item.dropdown-item-danger,
.polls-dashboard-section .dropdown-item.dropdown-item-danger {
  color: #f87171 !important;
}

/* line 720, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item.dropdown-item-danger svg,
.polls-dashboard-section .dropdown-item.dropdown-item-danger svg {
  color: #f87171;
}

/* line 722, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .dropdown-item.dropdown-item-danger:hover,
.polls-dashboard-section .dropdown-item.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 733, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .empty-contents {
  text-align: center !important;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
}

/* line 742, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .empty-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  fill: #ff3d9a !important;
}

/* line 753, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 762, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .empty-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 auto 22px !important;
  max-width: 32rem;
}

/* =================================================================
   POLLS DASHBOARD SECTION (en index)
   ================================================================= */
/* line 776, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 22px !important;
  overflow: hidden;
}

/* line 784, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 794, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-header::-webkit-details-marker {
  display: none !important;
}

/* line 796, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-header:hover {
  background: rgba(255, 0, 116, 0.04) !important;
}

/* line 801, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* line 806, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-title h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 815, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.45));
}

/* line 821, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  background: rgba(255, 0, 116, 0.12) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* line 834, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-chevron-toggle {
  color: rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 839, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page details[open] .polls-dashboard-chevron-toggle {
  transform: rotate(180deg);
}

/* line 843, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 851, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px !important;
}

/* line 857, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card.polls-dashboard-card--active {
  border-color: rgba(255, 0, 116, 0.3) !important;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 0, 116, 0.08) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
}

/* line 865, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

/* line 872, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* line 883, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-status.polls-dashboard-card-status--open {
  background: rgba(34, 197, 94, 0.18) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

/* line 889, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-status.polls-dashboard-card-status--closed {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 895, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 12px !important;
  line-height: 1.35;
}

/* line 905, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* line 912, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-bar {
  position: relative;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* line 922, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.18) 0%, rgba(255, 0, 116, 0.3) 100%);
  border-right: 1px solid rgba(255, 0, 116, 0.55);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 930, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-text {
  position: relative;
  padding-left: 12px;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: #f5f5f5 !important;
  z-index: 1;
}

/* line 939, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-pct {
  position: relative;
  margin-left: auto;
  padding-right: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #ff7eb8 !important;
  z-index: 1;
}

/* line 950, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 960, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-closed {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 964, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-closed-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 18px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: color 0.2s !important;
}

/* line 979, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-closed-toggle::-webkit-details-marker {
  display: none !important;
}

/* line 981, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-closed-toggle:hover {
  color: #ff7eb8 !important;
}

/* line 984, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 988, app/assets/stylesheets/_components.exo-creator-contents.scss */
.contents-page .polls-dashboard-closed[open] .polls-dashboard-chevron {
  transform: rotate(180deg);
}

/* =================================================================
   NEW/EDIT FORM · /creator/contents/new + /creator/contents/:id/edit
   El wrapper `.new-content-page` ya hereda muchas reglas del override
   de `_components.exo-creator-live-streams.scss`. Aquí cubrimos las
   classes content-specific.
   ================================================================= */
/* Page-header · padding-top para que el título respire del header sticky.
   Sin línea horizontal `::after` (el bar vertical del `.page-title:before`
   legacy ya da el accent brand). */
/* line 1003, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .page-header {
  padding-top: 15px !important;
}

/* line 1007, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .page-header::after {
  display: none !important;
}

/* Page title · bar vertical brand alineado con la altura real del texto.
   El legacy fija height: 36px que se ve desproporcionado cuando el font
   se reduce en mobile. Usar `1em` lo hace responsive al font-size. */
/* line 1014, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .page-title {
  align-items: center !important;
  line-height: 1.1 !important;
}

/* line 1019, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .page-title::before {
  height: 1em !important;
  align-self: center !important;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%) !important;
}

/* Content type selector (Photo/Video, Library, Clip) · radio cards */
/* line 1027, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .content-type-selector {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* line 1033, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .content-type-selector.content-type-selector--three-options {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* line 1038, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-option {
  display: block;
  cursor: pointer;
  position: relative;
}

/* line 1043, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 1050, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  text-align: center;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1065, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-option:hover .type-label {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 1070, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-option input[type="radio"]:checked + .type-label {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.05) 100%) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.3), 0 4px 16px rgba(255, 0, 116, 0.18);
}

/* line 1077, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-icon-group {
  display: inline-flex;
  gap: 6px;
}

/* line 1082, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-icon {
  width: 28px !important;
  height: 28px !important;
  fill: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 1089, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 1097, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .type-desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4;
}

/* Access type selector (subscribers / free / paid) · 3 cols compactas. */
/* line 1106, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-type-selector {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

/* line 1113, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-option {
  display: block;
  cursor: pointer;
  position: relative;
}

/* line 1118, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 1125, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  text-align: center;
  height: 100%;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1141, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-option:hover .access-label {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 1146, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-option input[type="radio"]:checked + .access-label {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.05) 100%) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.3), 0 4px 16px rgba(255, 0, 116, 0.18);
}

/* line 1153, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 6px;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 10px !important;
  fill: #ff3d9a !important;
  margin-bottom: 2px;
}

/* line 1164, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  display: block;
  line-height: 1.2;
}

/* line 1174, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .access-desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.35;
  display: block;
}

/* Upload area (drag & drop file) */
/* line 1184, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 2px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 1200, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-area:hover {
  background: rgba(255, 0, 116, 0.04) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
}

/* line 1206, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-icon {
  width: 48px !important;
  height: 48px !important;
  fill: #ff3d9a !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.4));
  margin-bottom: 4px;
}

/* line 1214, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 1222, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .drag-text {
  display: inline;
}

/* line 1223, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .tap-text {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  /* line 1226, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .drag-text {
    display: none;
  }
  /* line 1227, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .tap-text {
    display: inline;
  }
}

/* line 1230, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-subtext {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* line 1237, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .upload-input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
}

/* Preview container (post-upload preview) */
/* line 1248, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .preview-container {
  position: relative;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 0, 116, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

/* line 1256, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .preview-container img,
.new-content-page .preview-container video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #000;
}

/* line 1266, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .preview-remove {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  background: rgba(239, 68, 68, 0.85) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

/* line 1286, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .preview-remove:hover {
  background: #ef4444 !important;
}

/* Gallery preview (multiple files) */
/* line 1291, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .gallery-preview-container {
  margin-top: 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* line 1299, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .gallery-preview-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(255, 0, 116, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 1308, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .gallery-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ff7eb8 !important;
}

/* line 1315, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .btn-clear-gallery {
  padding: 5px 11px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}

/* line 1329, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .btn-clear-gallery:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fff !important;
}

/* line 1335, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .gallery-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  padding: 14px !important;
}

/* Form help text */
/* line 1344, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .form-help-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

/* Schedule toggle / draft button styles inherit from creator-live-streams */
/* line 1354, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .btn-save-draft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s, color 0.25s !important;
}

/* line 1370, app/assets/stylesheets/_components.exo-creator-contents.scss */
.new-content-page .btn-save-draft:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 1381, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page,
.new-content-page {
    padding: 16px 16px 110px !important;
    overflow-x: hidden !important;
    /* prevenir scroll horizontal por overflow interno */
  }
  /* Children que pueden contener texto largo · permitir shrinking */
  /* line 1388, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-main,
.new-content-page .form-section,
.new-content-page .access-option,
.new-content-page .access-label,
.new-content-page .type-option,
.new-content-page .type-label,
.new-content-page .upload-area {
    min-width: 0 !important;
  }
  /* Word-wrap en textos largos · `break-word` (NO `anywhere`) para no
     romper palabras mid-character. Si una palabra sigue sin caber se trunca
     vía text-overflow ellipsis donde lo aplico. */
  /* line 1401, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-text,
.new-content-page .upload-subtext,
.new-content-page .form-help-text {
    overflow-wrap: break-word !important;
    word-break: normal;
  }
}

@media (max-width: 768px) {
  /* Reducir espacio entre form sections (default 18px → 10px) y padding
     interno (default 22-24px → 16px). Mobile importa, hay que minimizar scroll. */
  /* line 1412, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-main {
    gap: 10px !important;
  }
  /* line 1416, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-section {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  /* line 1421, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-section .section-title {
    font-size: 15px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  /* line 1427, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-section .section-description {
    margin-bottom: 12px !important;
    font-size: 12.5px !important;
  }
  /* Upload area · más compacta en mobile */
  /* line 1433, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-area {
    padding: 22px 14px !important;
    gap: 6px !important;
  }
  /* line 1438, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-icon {
    width: 38px !important;
    height: 38px !important;
  }
  /* line 1443, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-text {
    font-size: 13px !important;
  }
  /* line 1447, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-subtext {
    font-size: 11px !important;
  }
  /* Form actions · normal flow al final del form (sticky probaba mal,
     se solapaba con scheduling section). Mejor scroll natural hasta abajo. */
  /* line 1453, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .form-actions {
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  /* line 1459, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* line 1463, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .page-header .new-content-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* line 1466, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .content-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 1471, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .contents-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* line 1476, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .contents-grid.clips-only {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 1481, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .content-info {
    padding: 12px !important;
  }
  /* line 1485, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .content-title {
    font-size: 12.5px !important;
  }
  /* line 1489, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .contents-page .content-meta {
    font-size: 10.5px !important;
  }
  /* Content type selector · 2+1 layout en mobile.
     Photo/Video y Library en row 1 (2 cols equal), Clip en row 2 spanning
     ambos cols (full width). El 3er option (Clip) es contenido distinto
     visualmente, merece su propia row. */
  /* line 1497, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .content-type-selector,
.new-content-page .content-type-selector.content-type-selector--three-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* line 1504, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .content-type-selector--three-options .type-option:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  /* line 1508, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .type-label {
    padding: 16px 12px !important;
    gap: 6px !important;
  }
  /* line 1513, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .type-icon {
    width: 28px !important;
    height: 28px !important;
  }
  /* line 1518, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .type-icon-group {
    gap: 4px;
  }
  /* line 1522, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .type-name {
    font-size: 12.5px !important;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
  }
  /* line 1529, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .type-desc {
    font-size: 11px !important;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  /* Access Configuration · STACKED vertical en mobile (3 cards full-width).
     Layout interno de cada card: icono | (nombre + desc stacked).
     Cards "tight" (gap 6px) — pegadas pero distinguibles. */
  /* line 1538, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .access-type-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  /* line 1544, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .access-label {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    text-align: left !important;
    padding: 12px 14px !important;
    gap: 2px 12px !important;
    height: auto !important;
  }
  /* line 1555, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .access-icon {
    width: 36px !important;
    height: 36px !important;
    grid-row: span 2 !important;
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }
  /* line 1563, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .access-name {
    font-size: 13.5px !important;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    align-self: end;
  }
  /* line 1572, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .access-desc {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.55) !important;
    align-self: start;
  }
  /* line 1580, app/assets/stylesheets/_components.exo-creator-contents.scss */
  .new-content-page .upload-area {
    padding: 28px 18px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR PAYOUTS OVERRIDE (/creator/payouts)
   -----------------------------------------------------------------
   Donde la creadora gestiona su dinero · alta importancia.
   Override de creator_payouts.scss (1282 líneas legacy).
   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_payouts en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER · brand magenta primary (consistente con resto de la app),
   verde solo para indicadores funcionales (status paid, net amount).
   ----------------------------------------------------------------- */
/* line 15, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.06) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .page-header {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 32, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 43, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 53, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .page-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

/* -----------------------------------------------------------------
   COMMISSION BANNER · destaca % de la creadora
   ----------------------------------------------------------------- */
/* line 65, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  margin-bottom: 22px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 75, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner.commission-banner--featured {
  background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(255, 0, 116, 0.16) 0%, transparent 60%), rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  box-shadow: 0 8px 32px -16px rgba(255, 0, 116, 0.3);
  position: relative;
  overflow: hidden;
}

/* line 84, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner.commission-banner--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
}

/* line 96, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-icon {
  font-size: 0 !important;
  /* esconder emoji 💎 */
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.22) 0%, rgba(180, 0, 255, 0.14) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 16px !important;
  position: relative;
  /* Diamante brand (sparkle 4-puntas) reemplazando el emoji */
}

/* line 109, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-icon::before {
  content: '✦';
  font-size: 28px !important;
  color: #ff7eb8 !important;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 0, 116, 0.65);
}

/* line 118, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-content {
  flex: 1;
  min-width: 0;
}

/* line 120, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.4vw, 20px) !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* line 132, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45) !important;
}

/* line 147, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .commission-banner-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   PAYOUTS INFO BANNER · explainer de pagos automáticos
   ----------------------------------------------------------------- */
/* line 159, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-info-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 22px !important;
  background: rgba(59, 130, 246, 0.06) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  border-left: 3px solid #60a5fa !important;
  border-radius: 12px !important;
}

/* line 171, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .banner-icon {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  border-radius: 10px !important;
  color: #60a5fa !important;
}

/* line 183, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .banner-content {
  flex: 1;
  min-width: 0;
}

/* line 185, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .banner-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #93c5fd !important;
  margin: 0 0 4px !important;
}

/* line 194, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .banner-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   CURRENT PERIOD CARD · destacada (es la info más importante)
   ----------------------------------------------------------------- */
/* line 206, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .current-period-card {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.1) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  position: relative;
  overflow: hidden;
}

/* line 217, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .current-period-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.55), transparent);
}

/* line 228, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 239, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-label h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 8px 0 0 !important;
}

/* line 248, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(255, 0, 116, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* line 263, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-payment-date {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  text-align: right;
}

/* line 270, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payment-date-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 279, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payment-date-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 287, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-body {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap;
}

/* line 295, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-balance {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}

/* line 301, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-balance-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 310, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-balance-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 5vw, 42px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  /* Gradient brand consistente con resto del design system (tip notification, etc.) */
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 325, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-status-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end;
  gap: 6px;
}

/* line 332, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .eligibility-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

/* line 343, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .eligibility-badge svg {
  flex-shrink: 0;
}

/* line 345, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .eligibility-badge.eligibility-badge--eligible {
  background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%) !important;
  color: #052e16 !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
}

/* line 351, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .eligibility-badge.eligibility-badge--not-eligible {
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  color: #fbbf24 !important;
}

/* line 358, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .rollover-info {
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
  text-align: right;
  font-style: italic;
}

/* -----------------------------------------------------------------
   PAYOUTS STATS · 3 stat cards
   ----------------------------------------------------------------- */
/* line 371, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 26px !important;
}

/* line 378, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 388, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 393, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-card.stat-card--balance {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.1) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 401, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-icon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 14px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 12px !important;
}

/* line 411, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-icon svg {
  width: 22px;
  height: 22px;
  fill: #ff3d9a;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 419, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 4px !important;
}

/* line 429, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-stats .stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* -----------------------------------------------------------------
   PAYOUTS SECTION · history + table
   ----------------------------------------------------------------- */
/* line 446, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-section {
  margin-bottom: 26px !important;
}

/* line 450, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-section .section-header {
  margin-bottom: 14px !important;
}

/* line 454, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-section .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.4vw, 20px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* -----------------------------------------------------------------
   PAYOUTS TABLE
   ----------------------------------------------------------------- */
/* line 469, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}

/* line 478, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-table thead.table-header {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 482, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-table th {
  padding: 14px 16px !important;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 494, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
}

/* line 502, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .table-row {
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 505, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .table-row:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 506, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .table-row:last-child td {
  border-bottom: none !important;
}

/* -----------------------------------------------------------------
   TABLE CELLS · period tag, amount breakdown, status, etc.
   ----------------------------------------------------------------- */
/* line 513, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* line 525, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .period-tag.period-tag--legacy {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* line 532, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-amount-breakdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* line 538, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-gross {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

/* line 546, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-fee {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: #f87171 !important;
}

/* line 552, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-net {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #4ade80 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* line 561, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* line 572, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-status--pending, .payouts-page .payout-status--requested {
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

/* line 579, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-status--processing, .payouts-page .payout-status--approved {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* line 586, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-status--paid, .payouts-page .payout-status--completed {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

/* line 593, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-status--rejected, .payouts-page .payout-status--failed {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* line 601, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-date {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-variant-numeric: tabular-nums;
}

/* line 607, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-date.payout-date--paid {
  font-size: 11.5px !important;
  color: #4ade80 !important;
  margin-top: 2px;
}

/* line 614, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payout-reference {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: help;
}

/* line 624, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .rejection-reason {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: #f87171 !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* line 633, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .no-reference {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 641, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .empty-payouts {
  text-align: center !important;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
}

/* line 650, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .empty-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  fill: #ff3d9a !important;
}

/* line 661, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 670, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .empty-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 32rem;
}

/* -----------------------------------------------------------------
   PAYOUTS INFO SECTION · "How it works" 3 steps
   ----------------------------------------------------------------- */
/* line 683, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-info-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-top: 26px !important;
}

/* line 690, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-info-section h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 701, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .payouts-info-section h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 713, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

/* line 719, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
}

/* line 729, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-number {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 50% !important;
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* line 744, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-content {
  flex: 1;
  min-width: 0;
}

/* line 748, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-content strong {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px;
}

/* line 758, app/assets/stylesheets/_components.exo-creator-payouts.scss */
.payouts-page .info-content p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 772, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 778, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .commission-banner {
    flex-direction: row !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  /* line 784, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .commission-banner-icon {
    width: 44px !important;
    height: 44px !important;
  }
  /* line 788, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .commission-banner-icon::before {
    font-size: 22px !important;
  }
  /* line 791, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .commission-banner-text {
    font-size: 12px !important;
  }
  /* line 795, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .current-period-card {
    padding: 18px !important;
  }
  /* line 799, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .period-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }
  /* line 807, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .period-payment-date {
    text-align: left;
  }
  /* line 811, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .period-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  /* line 817, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .period-status-indicator {
    align-items: flex-start;
    width: 100%;
  }
  /* line 822, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .rollover-info {
    text-align: left;
  }
  /* line 824, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* line 829, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-stats .stat-card {
    padding: 16px !important;
  }
  /* Tabla responsive · convertir filas a cards en mobile (data-label trick) */
  /* line 834, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table thead {
    display: none !important;
  }
  /* line 836, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table,
.payouts-page .payouts-table tbody,
.payouts-page .payouts-table tr,
.payouts-page .payouts-table td {
    display: block !important;
    width: 100% !important;
  }
  /* line 844, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  /* line 850, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table tr.table-row {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  /* line 858, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table td {
    padding: 6px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* line 866, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payouts-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }
  /* line 878, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .payout-amount-breakdown {
    align-items: flex-end;
    text-align: right;
  }
  /* line 883, app/assets/stylesheets/_components.exo-creator-payouts.scss */
  .payouts-page .info-grid {
    grid-template-columns: 1fr !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR PROFILE EDIT OVERRIDE (/creator/profile/edit)
   -----------------------------------------------------------------
   Complementa `_components.exo-creator-settings.scss` (que ya cubre
   page chrome, sidebar, account-card básico). Aquí cubro las clases
   específicas de los partials: payment, subscription, images, etc.

   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_profile_edit.scss en el manifest.
   ================================================================= */
/* =================================================================
   PAYMENT SECTION · payment_section.html.erb
   ================================================================= */
/* line 17, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

/* line 24, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-option {
  display: block;
  cursor: pointer;
  position: relative;
}

/* line 29, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 36, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  text-align: center;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 52, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-option:hover .payment-method-card {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 57, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-option input[type="radio"]:checked + .payment-method-card {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.12) 0%, rgba(180, 0, 255, 0.06) 100%) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.3), 0 4px 16px rgba(255, 0, 116, 0.2);
}

/* line 64, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 12px !important;
  color: #ff3d9a !important;
  font-size: 22px !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  /* Paxum icon · estilo neutro */
}

/* line 77, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-icon i, .creator-settings-page .payment-method-icon svg {
  font-size: 22px;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 80, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-icon.paxum-icon {
  background: rgba(180, 0, 255, 0.1) !important;
  border-color: rgba(180, 0, 255, 0.22) !important;
  color: #c673ff !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
}

/* line 89, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
}

/* line 97, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.35 !important;
}

/* line 104, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-checkmark {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45);
}

/* line 122, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-method-option input[type="radio"]:checked + .payment-method-card .payment-method-checkmark {
  opacity: 1;
  transform: scale(1);
}

/* -----------------------------------------------------------------
   PAYMENT INFO CARDS (success / warning)
   ----------------------------------------------------------------- */
/* line 131, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  margin-top: 14px !important;
}

/* line 139, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card.payment-info-card--success {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-left: 3px solid #4ade80 !important;
}

/* line 145, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card.payment-info-card--warning {
  background: rgba(251, 191, 36, 0.08) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-left: 3px solid #fbbf24 !important;
}

/* line 152, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card__icon {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 2px;
}

/* line 157, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.payment-info-card--success .creator-settings-page .payment-info-card__icon {
  color: #4ade80 !important;
}

/* line 158, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.payment-info-card--warning .creator-settings-page .payment-info-card__icon {
  color: #fbbf24 !important;
}

/* line 161, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card__content {
  flex: 1;
  min-width: 0;
}

/* line 165, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card__content strong {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-bottom: 4px;
}

/* line 172, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.payment-info-card--success .creator-settings-page .payment-info-card__content strong {
  color: #4ade80 !important;
}

/* line 173, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.payment-info-card--warning .creator-settings-page .payment-info-card__content strong {
  color: #fbbf24 !important;
}

/* line 176, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card__content p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 0 4px !important;
}

/* line 183, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-card__content p:last-child {
  margin-bottom: 0 !important;
}

/* line 187, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .payment-info-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  color: #ff7eb8 !important;
}

/* =================================================================
   SUBSCRIPTION SECTION
   ================================================================= */
/* line 202, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .price-preview-card {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 0, 116, 0.1) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-top: 16px !important;
}

/* line 212, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .preview-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 12px !important;
}

/* line 222, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .preview-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* line 228, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .preview-item {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 10px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* line 240, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .preview-item strong {
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* line 247, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .preview-item small {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11.5px !important;
  margin-left: 4px;
}

/* -----------------------------------------------------------------
   CHARACTER COUNTER (welcome message, bio, etc.)
   ----------------------------------------------------------------- */
/* line 258, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .character-counter {
  display: inline-block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   CONTENT TAGS GRID (categorías de contenido)
   ----------------------------------------------------------------- */
/* line 271, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tags-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px;
}

/* line 278, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer;
}

/* line 283, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tag-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 289, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tag-chip .tag-label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 306, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tag-chip:hover .tag-label {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 312, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .content-tag-chip input[type="checkbox"]:checked + .tag-label {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.3) !important;
}

/* =================================================================
   IMAGES SECTION · upload-button + requirements-title
   ================================================================= */
/* line 326, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .upload-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 344, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .upload-button i, .creator-settings-page .upload-button svg {
  font-size: 14px;
}

/* line 346, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .upload-button:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 353, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .requirements-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 14px 0 8px !important;
}

/* =================================================================
   ACCOUNT SECTION · info-box, item-label/value, label-badge
   ================================================================= */
/* line 368, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .info-box-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 378, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .info-box-title i, .creator-settings-page .info-box-title svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 384, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .info-box-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* line 392, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .item-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 403, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .item-label i, .creator-settings-page .item-label svg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* line 406, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .item-value {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #f5f5f5 !important;
}

/* line 412, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .item-value.highlight {
  color: #ff7eb8 !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* line 419, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .label-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* line 428, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .label-text i, .creator-settings-page .label-text svg {
  color: #ff3d9a;
  font-size: 13px;
}

/* line 431, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .label-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  background: rgba(255, 0, 116, 0.12) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-left: 6px;
}

/* =================================================================
   PRIVACY SECTION · warning-box
   ================================================================= */
/* line 452, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: rgba(251, 191, 36, 0.06) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-left: 3px solid #fbbf24 !important;
  border-radius: 12px !important;
  margin: 14px 0;
}

/* line 464, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(251, 191, 36, 0.14) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 10px !important;
  color: #fbbf24 !important;
  font-size: 18px;
}

/* Bootstrap Icons font no está cargada · pintamos los iconos via SVG mask
   (mismo patrón que el live viewer / mailers). Cada `<i class="bi bi-*">`
   se renderiza como un cuadrito vacío sin esto. */
/* line 480, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-shield-exclamation,
.creator-settings-page .warning-box-icon i.bi-calculator,
.creator-settings-page .warning-box-icon i.bi-exclamation-triangle-fill,
.creator-settings-page .warning-box-icon i.bi-exclamation-triangle,
.creator-settings-page .warning-box-icon i.bi-clock-history,
.creator-settings-page .warning-box-icon i.bi-lock-fill,
.creator-settings-page .warning-box-icon i.bi-info-circle-fill,
.creator-settings-page .warning-box-icon i.bi-info-circle {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: #fbbf24 !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* line 500, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-shield-exclamation {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z'/><path d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z'/><path d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z'/></svg>");
}

/* line 505, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-calculator {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z'/><path d='M4 2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2zm0 5h1.5v1H4V7zm0 2.5h1.5v1H4v-1zm0 2.5h1.5v1H4v-1zm2.5-5H8v1H6.5V7zm0 2.5H8v1H6.5v-1zm0 2.5H8v1H6.5v-1zM9 7h1.5v1H9V7zm0 2.5h1.5v1H9v-1zM9 12h1.5v1H9v-1z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z'/><path d='M4 2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2zm0 5h1.5v1H4V7zm0 2.5h1.5v1H4v-1zm0 2.5h1.5v1H4v-1zm2.5-5H8v1H6.5V7zm0 2.5H8v1H6.5v-1zm0 2.5H8v1H6.5v-1zM9 7h1.5v1H9V7zm0 2.5h1.5v1H9v-1zM9 12h1.5v1H9v-1z'/></svg>");
}

/* line 510, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-exclamation-triangle-fill,
.creator-settings-page .warning-box-icon i.bi-exclamation-triangle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>");
}

/* line 516, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-clock-history {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z'/><path d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z'/><path d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z'/><path d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z'/><path d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z'/></svg>");
}

/* line 521, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-lock-fill {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>");
}

/* line 526, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-icon i.bi-info-circle-fill,
.creator-settings-page .warning-box-icon i.bi-info-circle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/></svg>");
}

/* line 532, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-content {
  flex: 1;
  min-width: 0;
}

/* line 537, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #fbbf24 !important;
  margin: 0 0 4px !important;
}

/* line 545, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
.creator-settings-page .warning-box-text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* line 558, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* line 563, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .payment-method-card {
    padding: 14px 10px !important;
  }
  /* line 567, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .payment-method-icon {
    width: 36px !important;
    height: 36px !important;
  }
  /* line 572, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .payment-method-name {
    font-size: 12px !important;
  }
  /* line 576, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .payment-method-desc {
    display: none !important;
  }
  /* line 580, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .price-preview-card {
    padding: 14px !important;
  }
  /* line 584, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .content-tags-grid {
    gap: 6px !important;
  }
  /* line 588, app/assets/stylesheets/_components.exo-creator-profile-edit.scss */
  .creator-settings-page .content-tag-chip .tag-label {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · REELS OVERRIDE (/reels)
   -----------------------------------------------------------------
   Override CONSERVADOR · solo polish brand (colores, fonts, animations).
   El legacy reels.scss ya tiene el layout correcto:
   - object-fit: contain (preserva watermark)
   - reel-actions bottom: 140px (sobre nav)
   - reel-overlay positioning correcto
   NO tocamos esos. Solo brand-aligning.
   ================================================================= */
/* -----------------------------------------------------------------
   ACTION BUTTONS · liked state · solo el corazón cambia a brand magenta
   (patrón TikTok/IG · button bg se queda igual, el icon es el indicador).
   ----------------------------------------------------------------- */
/* line 17, app/assets/stylesheets/_components.exo-reels.scss */
.reel-action-btn.reel-action-liked {
  /* NO cambiar background ni box-shadow · mantiene el glass del legacy */
}

/* line 19, app/assets/stylesheets/_components.exo-reels.scss */
.reel-action-btn.reel-action-liked svg {
  fill: #ff0074 !important;
  color: #ff0074 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.65)) !important;
  animation: exo-reel-like-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes exo-reel-like-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

/* -----------------------------------------------------------------
   SUBSCRIBE BUTTON · sheen sweep brand
   ----------------------------------------------------------------- */
/* line 37, app/assets/stylesheets/_components.exo-reels.scss */
.reel-subscribe-btn {
  position: relative;
  overflow: hidden;
}

/* line 41, app/assets/stylesheets/_components.exo-reels.scss */
.reel-subscribe-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 51, app/assets/stylesheets/_components.exo-reels.scss */
.reel-subscribe-btn:hover::after {
  transform: translateX(220%);
}

/* -----------------------------------------------------------------
   USERNAME · Montserrat brand consistente
   ----------------------------------------------------------------- */
/* line 58, app/assets/stylesheets/_components.exo-reels.scss */
.reel-username {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
}

/* -----------------------------------------------------------------
   ACTION COUNTS · JetBrains Mono
   ----------------------------------------------------------------- */
/* line 70, app/assets/stylesheets/_components.exo-reels.scss */
.reel-action-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   COMMENTS BOTTOM SHEET · slide-up panel premium
   ================================================================= */
/* line 80, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s !important;
}

/* line 91, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-sheet.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s !important;
}

/* line 99, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* line 107, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-panel {
  /* Hereda position/dimensions del legacy: height fijo (no max-height),
     bottom: 80px en mobile (para clear el bottom-nav). Solo polish brand. */
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border-top: 1px solid rgba(255, 0, 116, 0.25) !important;
  box-shadow: 0 -16px 60px -8px rgba(0, 0, 0, 0.7), 0 0 80px -20px rgba(255, 0, 116, 0.3) !important;
  position: relative;
  /* Brand line top */
  /* Drag handle visual */
}

/* line 119, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
  pointer-events: none;
}

/* line 131, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-panel::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  pointer-events: none;
}

/* Header · title + close */
/* line 147, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 22px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0;
}

/* line 156, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 164, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-title span {
  margin-left: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-variant-numeric: tabular-nums;
}

/* line 174, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-close {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 186, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-close svg {
  width: 18px !important;
  height: 18px !important;
}

/* line 188, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-close:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  color: #fff !important;
}

/* Comments list · scrollable */
/* line 196, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px !important;
}

/* line 201, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-list::-webkit-scrollbar {
  width: 6px;
}

/* line 202, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 203, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 206, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.55);
}

/* line 210, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-loading {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: center;
  padding: 24px 0;
  font-style: italic;
}

/* Comments form · input + send */
/* line 221, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-form {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0;
}

/* line 231, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 246, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 253, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 256, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-send {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 272, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-send svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 278, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-send:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.55) !important;
}

/* line 281, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-send:hover svg {
  transform: rotate(-12deg) translateX(2px);
}

/* line 284, app/assets/stylesheets/_components.exo-reels.scss */
.reel-comments-send:active {
  transform: translateY(0) scale(0.92) !important;
  transition-duration: 100ms !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · SEARCH OVERRIDE (/search)
   -----------------------------------------------------------------
   Vista discovery: hero search input + empty state (recientes, tags
   populares, creadoras trending) + results (creators grid + content
   grid + no-results state).

   Cero cambios al HTML/ERB.
   Carga DESPUÉS de search.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 16, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page {
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), transparent !important;
  min-height: 100%;
}

/* =================================================================
   HERO SEARCH BOX · large input centered, mainattractor
   ================================================================= */
/* line 27, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-container {
  margin: 12px 0 26px !important;
}

/* line 31, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-box {
  margin: 0 !important;
}

/* Wrapper · keep legacy `position: relative` (icon + clear son absolute) */
/* line 36, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input-wrapper {
  position: relative;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 41, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input-wrapper:focus-within {
  box-shadow: 0 8px 32px -8px rgba(255, 0, 116, 0.3) !important;
}

/* Icon absolute · matchea legacy left:18px */
/* line 47, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  pointer-events: none;
  z-index: 1;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 60, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input-wrapper:focus-within .search-hero-icon {
  color: #ff7eb8 !important;
}

/* Input · padding-left/right reserva espacio para icon (52px) y clear (52px) */
/* line 65, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input {
  width: 100% !important;
  height: 56px !important;
  padding: 0 56px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 81, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 88, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Clear button absolute · matchea legacy right side */
/* line 92, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 111, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-clear svg {
  width: 16px !important;
  height: 16px !important;
}

/* line 113, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-clear:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fff !important;
}

/* line 119, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-hero-clear[hidden] {
  display: none !important;
}

/* =================================================================
   EMPTY STATE · 3 modules (recent, tags, trending creators)
   ================================================================= */
/* line 127, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-modules {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* line 133, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

/* line 140, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 150, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 161, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* line 172, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-section-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 178, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 11px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 999px !important;
  color: #f87171 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s !important;
}

/* line 194, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fff !important;
}

/* line 199, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-clear-btn[hidden] {
  display: none !important;
}

/* line 202, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-empty-hint {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-style: italic;
  margin: 0 !important;
  padding: 8px 0 !important;
  text-align: center;
}

/* -----------------------------------------------------------------
   RECENT SEARCHES LIST · pills clickeables
   ----------------------------------------------------------------- */
/* line 216, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-searches-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* line 221, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-searches-list:empty + .search-empty-hint {
  display: block;
}

/* Recent search chip · pill con texto + X remove button al lado.
   JS construye: <div.recent-search-chip>
                   <a.recent-search-link>QUERY</a>
                   <button.recent-search-remove><svg>X</svg></button>
                 </div> */
/* line 229, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-chip {
  display: inline-flex !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 240, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-chip:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 246, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-link {
  padding: 7px 4px 7px 14px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 257, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-link:hover {
  color: #ff7eb8 !important;
  text-decoration: none !important;
}

/* line 263, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  padding: 0 8px 0 4px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 276, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-remove svg {
  width: 12px !important;
  height: 12px !important;
  display: block;
}

/* line 282, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .recent-search-remove:hover {
  color: #f87171 !important;
}

/* -----------------------------------------------------------------
   POPULAR TAGS · pills brand
   ----------------------------------------------------------------- */
/* line 291, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .popular-tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* line 297, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .popular-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.05) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 315, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .popular-tag-pill:hover {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.12) 100%) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* line 325, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .popular-tag-name::before {
  content: '#';
  color: rgba(255, 255, 255, 0.4);
  margin-right: 1px;
}

/* line 332, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .popular-tag-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: rgba(255, 0, 116, 0.18);
  border-radius: 999px;
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   TRENDING CREATORS · avatar chips horizontales
   ----------------------------------------------------------------- */
/* line 349, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creators-list {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* line 355, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creators-list::-webkit-scrollbar {
  height: 4px;
}

/* line 356, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creators-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 362, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-chip {
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 371, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-chip:hover {
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* line 375, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-chip:hover .trending-creator-avatar {
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.45);
}

/* line 381, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid rgba(255, 0, 116, 0.45);
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.25);
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 390, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* line 398, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
}

/* line 410, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .trending-creator-username {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =================================================================
   SEARCH RESULTS · header + sections
   ================================================================= */
/* line 426, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-header {
  margin: 6px 0 22px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 432, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 443, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

/* line 453, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-query {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 460, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-subtitle {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   RESULTS SECTIONS · creators grid + content grid
   ----------------------------------------------------------------- */
/* line 474, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .results-section {
  margin-bottom: 28px !important;
}

/* line 478, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .results-section .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 16px !important;
  padding-left: 12px;
  position: relative;
}

/* line 488, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .results-section .section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
}

/* -----------------------------------------------------------------
   CREATORS GRID · result cards
   ----------------------------------------------------------------- */
/* line 506, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .creators-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

/* line 512, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .creator-result-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  text-align: center;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 527, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .creator-result-card:hover {
  border-color: rgba(255, 0, 116, 0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px -10px rgba(255, 0, 116, 0.3) !important;
  text-decoration: none !important;
}

/* line 535, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 0, 116, 0.45);
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.25);
}

/* line 544, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  width: 80px !important;
  height: 80px !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 0, 116, 0.45);
}

/* line 558, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-info {
  width: 100%;
  min-width: 0;
}

/* line 563, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 2px !important;
}

/* line 574, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-name svg {
  fill: #ff0074 !important;
  filter: drop-shadow(0 0 3px rgba(255, 0, 116, 0.55));
}

/* line 580, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-username {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 6px !important;
}

/* line 587, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .result-bio {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------
   SEARCH PAGINATION
   ----------------------------------------------------------------- */
/* line 604, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-pagination {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* =================================================================
   NO RESULTS STATE
   ================================================================= */
/* line 615, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .no-results {
  text-align: center !important;
  padding: 56px 24px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
}

/* line 623, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .no-results-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 18px !important;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  fill: #ff3d9a !important;
}

/* line 634, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .no-results-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 643, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .no-results-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 22px !important;
}

/* line 651, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-suggestions {
  text-align: left;
  max-width: 360px;
  margin: 0 auto;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* line 660, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-suggestions p {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 8px !important;
}

/* line 668, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 674, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-suggestions li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.5;
}

/* line 683, app/assets/stylesheets/_components.exo-search.scss */
.search-results-page .search-suggestions li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: #ff3d9a;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 700, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* Mantener el padding-left/right que reserva espacio para icon (absolute)
     y clear button. NO usar padding lateral pequeño porque el icon es
     absolute y se solaparía con el texto. */
  /* line 709, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .search-hero-input {
    height: 50px !important;
    padding: 0 52px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
  /* line 716, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .search-hero-icon {
    width: 20px !important;
    height: 20px !important;
    left: 16px !important;
  }
  /* line 722, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .search-hero-clear {
    width: 32px !important;
    height: 32px !important;
    right: 8px !important;
  }
  /* line 727, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .search-hero-clear svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* line 730, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .search-empty-section {
    padding: 16px !important;
  }
  /* line 734, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .creators-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 739, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .creator-result-card {
    padding: 14px 10px !important;
    gap: 10px !important;
  }
  /* line 744, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .result-avatar,
.search-results-page .result-avatar-placeholder {
    width: 64px !important;
    height: 64px !important;
  }
  /* line 750, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .result-avatar-placeholder {
    font-size: 26px !important;
  }
  /* line 754, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .result-name {
    font-size: 13.5px !important;
  }
  /* line 758, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .result-bio {
    font-size: 11.5px !important;
    -webkit-line-clamp: 2;
  }
  /* line 763, app/assets/stylesheets/_components.exo-search.scss */
  .search-results-page .trending-creator-avatar {
    width: 56px !important;
    height: 56px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR INSIGHTS OVERRIDE (/creator/insights)
   -----------------------------------------------------------------
   Analytics dashboard de la creadora · stats grid, charts (donut +
   trend), top content + top fans rankings.

   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_insights.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 15, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.06) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER · title + subtitle + period toggle
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-header {
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 32, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 43, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 53, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 6px 0 14px !important;
}

/* -----------------------------------------------------------------
   PERIOD TOGGLE · 7d / 30d
   ----------------------------------------------------------------- */
/* line 65, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-period-toggle {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

/* line 74, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-period-toggle .period-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 16px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 91, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-period-toggle .period-pill:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}

/* line 97, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-period-toggle .period-pill.is-active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35) !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------------
   SECTION TITLES
   ----------------------------------------------------------------- */
/* line 109, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 26px 0 14px !important;
  padding-left: 12px;
  position: relative;
}

/* line 119, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-page-wrapper .insights-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
}

/* =================================================================
   STATS GRID · 4 KPI cards
   ================================================================= */
/* line 138, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

/* line 145, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 155, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 161, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-icon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 14px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 12px !important;
}

/* line 171, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-icon svg {
  width: 22px;
  height: 22px;
  fill: #ff3d9a;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 179, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 6px !important;
}

/* line 189, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
  font-variant-numeric: tabular-nums;
  /* Subtle gradient brand para los números importantes */
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 205, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-sub {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
}

/* line 212, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-delta {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* line 225, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-delta.up {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  color: #4ade80 !important;
}

/* line 231, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-stats-grid .insight-card-delta.down {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

/* =================================================================
   CHARTS SECTION · donut + trend
   ================================================================= */
/* line 243, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-charts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 26px !important;
}

/* line 250, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 22px !important;
}

/* line 257, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: relative;
}

/* line 272, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 283, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-wrapper {
  position: relative;
  width: 100%;
  min-height: 220px;
}

/* line 288, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-wrapper.donut-wrapper {
  max-width: 280px;
  margin: 0 auto;
}

/* line 293, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-wrapper canvas {
  max-width: 100%;
}

/* Empty chart state */
/* line 300, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 36px 20px !important;
  text-align: center;
  min-height: 220px;
}

/* line 310, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-empty-state svg {
  color: rgba(255, 0, 116, 0.4) !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.3));
}

/* line 316, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

/* line 324, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insight-chart-card .chart-empty-body {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 280px;
}

/* =================================================================
   RANKINGS · top content + top fans
   ================================================================= */
/* line 338, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-rankings {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 16px !important;
}

/* line 344, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 22px !important;
}

/* line 351, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 362, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 373, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-empty {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: center !important;
  padding: 24px 0 !important;
  font-style: italic;
  margin: 0 !important;
}

/* line 383, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* line 392, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 404, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row:hover {
  background: rgba(255, 0, 116, 0.04) !important;
  border-color: rgba(255, 0, 116, 0.2) !important;
}

/* Ranking · thumb (content image) or avatar (fan) */
/* line 412, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-thumb {
  flex-shrink: 0;
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

/* line 420, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* line 428, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-thumb-fallback {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.12) 100%) !important;
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* line 440, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-avatar {
  flex-shrink: 0;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid rgba(255, 0, 116, 0.4);
}

/* line 448, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* line 456, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-info {
  flex: 1;
  min-width: 0;
}

/* line 461, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 473, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 483, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-badge {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 8px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* line 499, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-ranking-row .ranking-value {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #ff7eb8 !important;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   EMPTY STATE · no snapshot yet
   ================================================================= */
/* line 513, app/assets/stylesheets/_components.exo-creator-insights.scss */
.insights-empty-state {
  text-align: center !important;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 24px 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 531, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-page-wrapper {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 537, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 542, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid .insight-card {
    padding: 14px !important;
  }
  /* line 546, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid .insight-card-value {
    font-size: 20px !important;
  }
  /* line 550, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid .insight-card-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 10px !important;
  }
  /* line 555, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid .insight-card-icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 558, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-stats-grid .insight-card-delta {
    top: 12px !important;
    right: 12px !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
  }
  /* line 565, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-charts,
.insights-rankings {
    grid-template-columns: 1fr !important;
  }
  /* line 570, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insight-chart-card,
.insights-ranking-card {
    padding: 16px !important;
  }
  /* line 575, app/assets/stylesheets/_components.exo-creator-insights.scss */
  .insights-period-toggle .period-pill {
    padding: 6px 12px !important;
    font-size: 10.5px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR REFERRALS OVERRIDE (/creator/referrals)
   -----------------------------------------------------------------
   Programa de referidos · stats, link compartible, how it works,
   tabla de creators referidos + tabla de commission history.

   Cero cambios al HTML/ERB.
   Carga DESPUÉS de creator_referrals.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 15, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page {
  background: radial-gradient(ellipse 60% 40% at 15% 15%, rgba(255, 0, 116, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 85%, rgba(180, 0, 255, 0.06) 0%, transparent 55%), #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .page-header {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 32, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 43, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 53, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .page-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

/* =================================================================
   STATS GRID · 4 cards (scopeado para no contaminar)
   ================================================================= */
/* line 66, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

/* line 73, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Highlight (total referrals) · brand */
  /* Earnings · verde semantic */
}

/* line 83, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* line 89, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card.stat-card--highlight {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.12) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
}

/* line 97, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card.stat-card--earnings {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* line 103, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card.stat-card--earnings .stat-icon {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* line 107, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card.stat-card--earnings .stat-icon svg {
  fill: #4ade80 !important;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* line 110, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-card.stat-card--earnings .stat-value {
  color: #4ade80 !important;
}

/* line 114, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-icon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 14px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 12px !important;
}

/* line 124, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-icon svg {
  width: 22px;
  height: 22px;
  fill: #ff3d9a;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 132, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 6px !important;
}

/* line 142, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-stats .stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* =================================================================
   REFERRAL LINK CARD · destacada (es la acción principal)
   ================================================================= */
/* line 160, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-link-card {
  background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(255, 0, 116, 0.14) 0%, transparent 65%), rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  position: relative;
  overflow: hidden;
}

/* line 171, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.65), transparent);
}

/* line 182, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

/* line 189, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-card-icon {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.22) 0%, rgba(180, 0, 255, 0.14) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 14px !important;
  color: #ff3d9a !important;
}

/* line 200, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-card-icon svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.45));
}

/* line 203, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}

/* line 212, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-card-description {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* Link input + copy button */
/* line 222, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-input-group {
  display: flex !important;
  align-items: stretch !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* line 231, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  padding: 12px 16px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* line 242, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-input:focus {
  outline: none !important;
}

/* line 245, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 18px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 264, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-copy-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* line 266, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-copy-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 276, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-copy-btn:hover {
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.45);
}

/* line 278, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .link-copy-btn:hover::after {
  transform: translateX(220%);
}

/* =================================================================
   HOW IT WORKS · 3 numbered steps
   ================================================================= */
/* line 287, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-info-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 18px !important;
}

/* line 294, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-info-section h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 305, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-info-section h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 317, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

/* line 323, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
}

/* line 333, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-number {
  flex-shrink: 0;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 50% !important;
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* line 348, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-content {
  flex: 1;
  min-width: 0;
}

/* line 352, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-content strong {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px;
}

/* line 362, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-content p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* =================================================================
   INFO PILLS · datos clave del programa
   ================================================================= */
/* line 376, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-info-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 26px !important;
}

/* line 383, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .info-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: rgba(255, 0, 116, 0.08) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* =================================================================
   REFERRALS SECTION · table of referred creators / commissions
   ================================================================= */
/* line 401, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-section {
  margin-bottom: 26px !important;
}

/* line 405, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-section .section-header {
  margin-bottom: 14px !important;
}

/* line 409, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-section .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 2.4vw, 20px) !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding-left: 12px;
  position: relative;
}

/* line 419, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-section .section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
}

/* -----------------------------------------------------------------
   REFERRALS TABLE
   ----------------------------------------------------------------- */
/* line 437, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}

/* line 446, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table thead.table-header {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 450, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table th {
  padding: 14px 16px !important;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 462, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
}

/* line 470, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .table-row {
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 473, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .table-row:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* line 474, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .table-row:last-child td {
  border-bottom: none !important;
}

/* Creator cell · avatar + name + username */
/* line 479, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .creator-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* line 485, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table .creator-avatar {
  flex-shrink: 0;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid rgba(255, 0, 116, 0.4);
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

/* line 495, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table .creator-avatar.creator-avatar--small {
  width: 30px !important;
  height: 30px !important;
}

/* line 500, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table .creator-avatar .avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* line 507, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referrals-table .creator-avatar .avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* line 520, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .creator-cell .creator-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* line 531, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 539, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .creator-cell .creator-username {
  font-family: 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Status badges · active/expired */
/* line 547, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referral-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* line 558, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referral-status.referral-status--active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

/* line 564, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referral-status.referral-status--expired {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Date / amount cells */
/* line 573, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referral-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-variant-numeric: tabular-nums;
}

/* line 580, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .referral-earnings,
.referrals-page .commission-earned {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #4ade80 !important;
  font-variant-numeric: tabular-nums;
}

/* line 589, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .commission-gross {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-variant-numeric: tabular-nums;
}

/* line 596, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .payment-type-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Commission status badges */
/* line 612, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .commission-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* line 623, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .commission-status--pending {
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

/* line 629, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .commission-status--credited, .referrals-page .commission-status--paid {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

/* line 636, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .commission-status--reversed, .referrals-page .commission-status--cancelled {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* =================================================================
   EMPTY STATES
   ================================================================= */
/* line 649, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .empty-state {
  text-align: center !important;
  padding: 56px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
}

/* line 657, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .empty-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 18px !important;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 22px !important;
  fill: #ff3d9a !important;
}

/* line 668, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 677, app/assets/stylesheets/_components.exo-creator-referrals.scss */
.referrals-page .empty-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 32rem;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 691, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 697, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* line 702, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-stats .stat-card {
    padding: 14px !important;
  }
  /* line 706, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-link-card {
    padding: 18px !important;
  }
  /* line 710, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-card-header {
    gap: 12px !important;
  }
  /* line 714, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-card-icon {
    width: 40px !important;
    height: 40px !important;
  }
  /* line 718, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-card-icon svg {
    width: 20px;
    height: 20px;
  }
  /* line 721, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-input-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* line 726, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-input {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  /* line 730, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .link-copy-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }
  /* line 736, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .info-grid {
    grid-template-columns: 1fr !important;
  }
  /* line 740, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-info-section {
    padding: 18px !important;
  }
  /* Tabla responsive · cards en mobile */
  /* line 745, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table thead {
    display: none !important;
  }
  /* line 747, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table,
.referrals-page .referrals-table tbody,
.referrals-page .referrals-table tr,
.referrals-page .referrals-table td {
    display: block !important;
    width: 100% !important;
  }
  /* line 755, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  /* line 761, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table tr.table-row {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  /* line 769, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table td {
    padding: 6px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    /* Creator cell se ve mejor sin justify-between · solo izquierda */
  }
  /* line 777, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }
  /* line 789, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table td:has(.creator-cell) {
    justify-content: flex-start !important;
  }
  /* line 792, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .referrals-table td:has(.creator-cell)::before {
    display: none !important;
  }
  /* line 798, app/assets/stylesheets/_components.exo-creator-referrals.scss */
  .referrals-page .empty-state {
    padding: 48px 20px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MASS MESSAGES OVERRIDE (/creator/mass_messages)
   -----------------------------------------------------------------
   Index, new, show. Brand-aligned polish sobre legacy mass_messages.scss.
   Usa namespace .mm-* del legacy. Solo override visual, no toca JS.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE HEADER · brand line accent + tipografía Montserrat
   ----------------------------------------------------------------- */
/* line 12, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header {
  position: relative !important;
  padding: 28px 24px !important;
  margin-bottom: 24px !important;
  background: radial-gradient(circle at 0% 0%, rgba(255, 0, 116, 0.1), transparent 55%), radial-gradient(circle at 100% 100%, rgba(176, 0, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(20, 16, 26, 0.85) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* line 24, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.55), transparent);
  pointer-events: none;
}

/* line 35, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header__info {
  flex: 1;
}

/* line 37, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 48, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* line 59, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-header__subtitle {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  line-height: 1.5;
}

/* -----------------------------------------------------------------
   BUTTONS · primary brand sheen + ghost glass
   ----------------------------------------------------------------- */
/* line 72, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 84, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
}

/* line 92, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 102, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.55) !important;
}

/* line 105, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--primary:hover::after {
  transform: translateX(220%);
}

/* line 108, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--primary:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* line 111, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* line 116, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--ghost:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #fff !important;
}

/* line 123, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-btn--full {
  width: 100%;
  justify-content: center !important;
}

/* -----------------------------------------------------------------
   LIST · glass cards con hover lift + brand line top
   ----------------------------------------------------------------- */
/* line 130, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-list {
  display: grid;
  gap: 14px !important;
}

/* line 132, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.75) 0%, rgba(10, 10, 10, 0.75) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 145, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.3), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 158, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(255, 0, 116, 0.3) !important;
}

/* line 164, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card:hover::before {
  opacity: 1;
}

/* line 167, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px !important;
}

/* line 175, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__date {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* line 184, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__content {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 14px !important;
}

/* line 192, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* line 199, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__stat, .mm-card__audience {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  letter-spacing: 0.02em;
}

/* line 214, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__stat svg, .mm-card__audience svg {
  opacity: 0.75;
}

/* line 217, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-card__ppv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff0074 !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.35) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
}

/* -----------------------------------------------------------------
   BADGES · status color-coded semántico
   ----------------------------------------------------------------- */
/* line 238, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}

/* line 251, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* line 261, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--draft {
  color: #c9c9c9 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* line 267, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--processing {
  color: #ffb84d !important;
  background: rgba(255, 184, 77, 0.1) !important;
  border-color: rgba(255, 184, 77, 0.35) !important;
}

/* line 272, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--processing::before {
  animation: exo-mm-pulse 1.4s ease-in-out infinite;
}

/* line 275, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--completed {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}

/* line 281, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--failed {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* line 287, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--cancelled {
  color: #8e8e8e !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* line 293, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-badge--lg {
  font-size: 12px !important;
  padding: 7px 14px !important;
}

@keyframes exo-mm-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

/* -----------------------------------------------------------------
   EMPTY STATE · brand glow centered
   ----------------------------------------------------------------- */
/* line 308, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-empty {
  position: relative;
  text-align: center;
  padding: 60px 24px !important;
  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 116, 0.06), transparent 60%), rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
}

/* line 318, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-empty svg {
  color: rgba(255, 0, 116, 0.65) !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.4));
  margin-bottom: 14px !important;
}

/* line 324, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-empty p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
}

/* =================================================================
   FORM (new) · cards glass + radio cards brand
   ================================================================= */
/* line 337, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form {
  display: grid;
  gap: 18px !important;
}

/* line 339, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.8) 0%, rgba(10, 10, 10, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  overflow: hidden;
}

/* line 348, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.4), transparent);
  pointer-events: none;
}

/* line 359, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-card__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 370, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-card__title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.45);
}

/* line 381, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-card__desc {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: -6px 0 14px !important;
  line-height: 1.5;
}

/* -----------------------------------------------------------------
   FIELDS · textarea, select, input
   ----------------------------------------------------------------- */
/* line 394, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field {
  display: grid;
  gap: 8px;
}

/* line 398, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 407, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__textarea, .mm-field__input, .mm-field__select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 424, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__textarea:focus, .mm-field__input:focus, .mm-field__select:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 431, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__textarea::placeholder, .mm-field__input::placeholder, .mm-field__select::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 434, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__textarea {
  resize: vertical;
  min-height: 100px;
}

/* line 436, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__input--small {
  max-width: 140px;
}

/* line 438, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-field__select {
  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' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff0074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

/* -----------------------------------------------------------------
   RADIO GROUP · cards seleccionables brand
   ----------------------------------------------------------------- */
/* line 454, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio-group {
  display: grid;
  gap: 10px;
}

/* line 459, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 474, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

/* line 488, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio__input:checked {
  border-color: #ff0074;
  background: radial-gradient(circle, #ff0074 38%, transparent 42%);
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18);
}

/* line 495, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* line 503, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio__label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  color: #f5f5f5 !important;
}

/* line 511, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio__hint {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.4 !important;
}

/* line 518, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio:hover {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 523, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-radio:has(input:checked) {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 24px -8px rgba(255, 0, 116, 0.4) !important;
}

/* line 530, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-months-field {
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(255, 0, 116, 0.05);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 12px;
  display: grid;
  gap: 6px;
}

/* -----------------------------------------------------------------
   ATTACHMENT PANEL · animación slide-in
   ----------------------------------------------------------------- */
/* line 544, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-attachment-panel {
  margin-top: 14px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 0, 116, 0.2) !important;
  border-radius: 14px !important;
  animation: exo-mm-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes exo-mm-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------
   PPV PREVIEW · thumb + info card
   ----------------------------------------------------------------- */
/* line 562, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview {
  display: flex !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.8), rgba(10, 10, 10, 0.8)) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 32px -16px rgba(255, 0, 116, 0.4);
}

/* line 572, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__thumb {
  position: relative;
  flex-shrink: 0;
  width: 110px !important;
  height: 110px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* line 581, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* line 588, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 0, 116, 0.65);
  background: rgba(255, 0, 116, 0.05);
}

/* line 597, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__price {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45);
  font-variant-numeric: tabular-nums;
}

/* line 612, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__type-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 3px 6px;
  border-radius: 6px;
}

/* line 628, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__info {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

/* line 637, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  line-height: 1.35 !important;
}

/* line 645, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-ppv-preview__status {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   UPLOAD AREA · dashed brand + preview
   ----------------------------------------------------------------- */
/* line 658, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area {
  position: relative;
  text-align: center;
  padding: 32px 20px !important;
  background: rgba(255, 0, 116, 0.04) !important;
  border: 1px dashed rgba(255, 0, 116, 0.35) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

/* line 668, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area__icon {
  width: 36px !important;
  height: 36px !important;
  color: rgba(255, 0, 116, 0.7) !important;
  margin-bottom: 10px !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.35));
}

/* line 676, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area__text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  margin: 0 0 4px !important;
}

/* line 684, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area__hint {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* line 691, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area__input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

/* line 700, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-area--dragover, .mm-upload-area:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.65) !important;
}

/* line 707, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 116, 0.3);
  box-shadow: 0 0 24px -8px rgba(255, 0, 116, 0.3);
}

/* line 714, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-preview img {
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  display: block;
}

/* line 721, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-preview__remove {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
}

/* line 737, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-upload-preview__remove:hover {
  background: rgba(255, 0, 116, 0.85) !important;
  transform: scale(1.05) !important;
}

/* -----------------------------------------------------------------
   FORM ACTIONS · submit + cancel
   ----------------------------------------------------------------- */
/* line 748, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-form-actions {
  display: grid !important;
  gap: 10px !important;
  padding-top: 8px;
}

/* =================================================================
   SHOW · detail cards + progress + stats
   ================================================================= */
/* line 759, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.8) 0%, rgba(10, 10, 10, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}

/* line 769, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.35), transparent);
  pointer-events: none;
}

/* line 780, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-card__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 14px !important;
}

/* line 791, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-status {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

/* Progress bar · brand gradient with shimmer */
/* line 798, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-progress {
  width: 100%;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative;
}

/* line 806, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.5);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

/* line 815, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: exo-mm-shimmer 1.6s linear infinite;
}

/* line 824, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-progress__text {
  text-align: center;
  margin-top: 10px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-variant-numeric: tabular-nums;
}

@keyframes exo-mm-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Stats · 3 col grid */
/* line 840, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

/* line 846, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-stat {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
}

/* line 856, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-stat__value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #f5f5f5 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* line 865, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-stat__label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Preview (message in detail) */
/* line 876, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
}

/* line 882, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview__text {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  white-space: pre-wrap;
}

/* line 891, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview__image {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* line 897, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview__image img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

/* line 905, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview__ppv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.3);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ff0074;
}

/* line 919, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-preview__ppv svg {
  color: #ff0074;
}

/* line 923, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 931, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-row:last-child {
  border-bottom: none !important;
}

/* line 933, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-row span:first-child {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 942, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-detail-row span:last-child {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #f5f5f5 !important;
  text-align: right;
}

/* -----------------------------------------------------------------
   PAGINATION · brand pills
   ----------------------------------------------------------------- */
/* line 955, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px !important;
}

/* line 960, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-pagination .pagy.nav {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* line 966, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-pagination a, .mm-pagination span {
  min-width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

/* line 981, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-pagination a:hover, .mm-pagination span:hover {
  background: rgba(255, 0, 116, 0.1);
  border-color: rgba(255, 0, 116, 0.35);
}

/* line 987, app/assets/stylesheets/_components.exo-mass-messages.scss */
.mm-pagination .current,
.mm-pagination [aria-current] {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.4) !important;
}

/* =================================================================
   RESPONSIVE · mobile-first refinements
   ================================================================= */
@media (max-width: 768px) {
  /* line 1002, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-header {
    padding: 22px 18px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  /* line 1008, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-header .mm-btn {
    width: 100%;
    justify-content: center !important;
  }
  /* line 1011, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-card {
    padding: 16px 14px !important;
  }
  /* line 1014, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-card__footer {
    gap: 6px;
  }
  /* line 1015, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-card__stat, .mm-card__audience, .mm-card__ppv {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  /* line 1020, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-form-card {
    padding: 18px 16px !important;
  }
  /* line 1022, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-detail-card {
    padding: 18px 16px !important;
  }
  /* line 1024, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  /* line 1029, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-stat {
    padding: 12px 6px !important;
  }
  /* line 1032, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-stat__value {
    font-size: 18px !important;
  }
  /* line 1033, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-stat__label {
    font-size: 9px !important;
  }
  /* line 1036, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-ppv-preview {
    flex-direction: column !important;
  }
  /* line 1039, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-ppv-preview__thumb {
    width: 100% !important;
    height: 180px !important;
  }
  /* line 1045, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* line 1050, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-detail-row span:last-child {
    text-align: left;
  }
}

@media (max-width: 480px) {
  /* line 1055, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-header__title {
    font-size: 20px !important;
  }
  /* line 1056, app/assets/stylesheets/_components.exo-mass-messages.scss */
  .mm-form-card__title,
.mm-detail-card__title {
    font-size: 14px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CONTENT COMMENTS OVERRIDE
   -----------------------------------------------------------------
   Comentarios en posts (content_show, feed, profile_content_card).
   Brand-aligning sobre legacy (#ff4081 → #ff0074, Montserrat fonts).
   No toca estructura · solo polish visual.
   ================================================================= */
/* -----------------------------------------------------------------
   SECTION WRAPPER · glass card brand line accent
   ----------------------------------------------------------------- */
/* line 13, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-section {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
}

/* line 19, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.55) 50%, transparent 100%) !important;
}

/* -----------------------------------------------------------------
   HEADER · toggle clickable + section title
   ----------------------------------------------------------------- */
/* line 28, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header {
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 18px 22px !important;
}

/* line 33, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header:hover {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* line 36, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header:hover .toggle-comments-btn {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 39, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header:hover .toggle-comments-btn svg {
  color: #ff0074 !important;
}

/* line 43, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #f5f5f5 !important;
}

/* line 51, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .section-title svg {
  fill: #ff0074 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.5)) !important;
}

/* line 56, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .section-title span {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: #ff0074 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* line 65, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .toggle-comments-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 72, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .toggle-comments-btn:hover, .comments-header .toggle-comments-btn.expanded {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
}

/* line 76, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-header .toggle-comments-btn:hover svg, .comments-header .toggle-comments-btn.expanded svg {
  color: #ff0074 !important;
}

/* -----------------------------------------------------------------
   LOGIN PROMPT · glass card brand CTA
   ----------------------------------------------------------------- */
/* line 85, app/assets/stylesheets/_components.exo-content-comments.scss */
.login-prompt {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 0, 116, 0.2) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  text-align: center;
}

/* line 92, app/assets/stylesheets/_components.exo-content-comments.scss */
.login-prompt p, .login-prompt h3 {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 97, app/assets/stylesheets/_components.exo-content-comments.scss */
.login-prompt a {
  color: #ff0074 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

/* line 104, app/assets/stylesheets/_components.exo-content-comments.scss */
.login-prompt a:hover {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4) !important;
}

/* =================================================================
   COMMENT FORM · emoji bar + textarea + submit
   ================================================================= */
/* line 113, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin-bottom: 22px !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

/* line 121, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container:focus-within {
  border-color: rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.12) !important;
}

/* line 127, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -----------------------------------------------------------------
   EMOJI BAR ROW · trigger + quick emojis horizontales
   ----------------------------------------------------------------- */
/* line 133, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 139, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-picker-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* line 141, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-trigger-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, transform 0.2s !important;
}

/* line 153, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-trigger-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff0074 !important;
  transform: scale(1.05) !important;
}

/* line 160, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
}

/* line 168, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar::-webkit-scrollbar {
  height: 4px;
}

/* line 169, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar::-webkit-scrollbar-track {
  background: transparent;
}

/* line 170, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 173, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.18s !important;
}

/* line 186, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  transform: scale(1.2) !important;
}

/* -----------------------------------------------------------------
   EMOJI PICKER DROPDOWN · panel
   ----------------------------------------------------------------- */
/* line 196, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-picker-dropdown {
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 100;
  width: 320px !important;
  max-height: 360px !important;
  background: linear-gradient(180deg, #14101a, #0a0a0a) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 32px -12px rgba(255, 0, 116, 0.3) !important;
  overflow: hidden !important;
}

/* line 212, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-picker-content {
  padding: 8px;
}

/* line 214, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-categories-bar {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
  scrollbar-width: none;
}

/* line 221, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-categories-bar::-webkit-scrollbar {
  display: none;
}

/* line 224, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-category-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}

/* line 237, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-category-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
}

/* line 238, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-category-btn.active {
  background: rgba(255, 0, 116, 0.18) !important;
  box-shadow: inset 0 -2px 0 #ff0074;
}

/* line 244, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}

/* line 252, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-grid::-webkit-scrollbar {
  width: 4px;
}

/* line 253, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 256, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-item {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.15s !important;
}

/* line 268, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-item:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  transform: scale(1.2) !important;
}

/* -----------------------------------------------------------------
   FORM CONTENT · avatar + input row
   ----------------------------------------------------------------- */
/* line 278, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container .form-content {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

/* line 284, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container .user-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* line 289, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container .user-avatar .avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* line 297, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-form-container .user-avatar .avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.35);
}

/* line 312, app/assets/stylesheets/_components.exo-content-comments.scss */
.input-row {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.2s, background 0.2s;
}

/* line 323, app/assets/stylesheets/_components.exo-content-comments.scss */
.input-row:focus-within {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 0, 116, 0.45);
}

/* line 329, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-textarea {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 9px 0 !important;
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: none !important;
  max-height: 120px;
}

/* line 343, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 346, app/assets/stylesheets/_components.exo-content-comments.scss */
.submit-btn-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(255, 0, 116, 0.4) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s !important;
}

/* line 360, app/assets/stylesheets/_components.exo-content-comments.scss */
.submit-btn-icon svg {
  width: 18px !important;
  height: 18px !important;
  transition: transform 0.22s !important;
}

/* line 366, app/assets/stylesheets/_components.exo-content-comments.scss */
.submit-btn-icon:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(255, 0, 116, 0.55) !important;
}

/* line 369, app/assets/stylesheets/_components.exo-content-comments.scss */
.submit-btn-icon:hover svg {
  transform: rotate(-12deg) translateX(1px);
}

/* line 372, app/assets/stylesheets/_components.exo-content-comments.scss */
.submit-btn-icon:active {
  transform: scale(0.92) !important;
  transition-duration: 100ms !important;
}

/* =================================================================
   COMMENTS LIST · cards + replies
   ================================================================= */
/* line 383, app/assets/stylesheets/_components.exo-content-comments.scss */
.comments-list {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
}

/* line 389, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  transition: background 0.15s !important;
}

/* line 397, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-card:hover {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* line 401, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-card.reply-indent {
  margin-left: 46px;
  margin-top: 0;
  padding-left: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative;
}

/* line 409, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-card.reply-indent::before {
  display: none;
}

/* -----------------------------------------------------------------
   COMMENT HEADER · avatar + meta + options
   ----------------------------------------------------------------- */
/* line 417, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}

/* line 424, app/assets/stylesheets/_components.exo-content-comments.scss */
.user-avatar-small {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

/* line 429, app/assets/stylesheets/_components.exo-content-comments.scss */
.user-avatar-small .avatar-img-small {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* line 437, app/assets/stylesheets/_components.exo-content-comments.scss */
.user-avatar-small .avatar-placeholder-small {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.3);
}

/* line 452, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* line 460, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-author {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  color: #f5f5f5 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 470, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-author .creator-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(255, 0, 116, 0.35) !important;
}

/* line 484, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-timestamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 492, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-options {
  flex-shrink: 0;
  margin-left: auto;
}

/* line 496, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-options .delete-btn,
.comment-options form button {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s !important;
}

/* line 506, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-options .delete-btn svg,
.comment-options form button svg {
  width: 14px !important;
  height: 14px !important;
}

/* line 508, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-options .delete-btn:hover,
.comment-options form button:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

/* line 514, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-options form {
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   COMMENT CONTENT · texto del comentario
   ----------------------------------------------------------------- */
/* line 521, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-content {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 4px 48px !important;
  word-wrap: break-word;
}

/* line 529, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-content p {
  margin: 0 !important;
}

/* line 531, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-content:empty,
.comment-content p:empty {
  display: none;
}

/* -----------------------------------------------------------------
   ACTIONS · like + reply buttons
   ----------------------------------------------------------------- */
/* line 539, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  margin-left: 48px;
}

/* line 546, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .action-btn,
.comment-actions form button {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, transform 0.18s !important;
}

/* line 562, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .action-btn span,
.comment-actions form button span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* line 567, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .action-btn svg,
.comment-actions form button svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.18s, fill 0.2s !important;
}

/* line 573, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .action-btn:hover,
.comment-actions form button:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f5f5f5 !important;
}

/* line 580, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .like-btn:hover svg {
  transform: scale(1.18);
  fill: #ff0074 !important;
}

/* line 582, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .like-btn.liked {
  color: #ff0074 !important;
}

/* line 584, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .like-btn.liked svg {
  fill: #ff0074 !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.55));
  animation: exo-cmt-like-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* line 589, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .like-btn.liked .like-count {
  color: #ff0074 !important;
  font-weight: 700 !important;
}

@keyframes exo-cmt-like-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.45);
  }
  100% {
    transform: scale(1);
  }
}

/* line 599, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .reply-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 606, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .reply-btn:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  color: #ff0074 !important;
}

/* line 609, app/assets/stylesheets/_components.exo-content-comments.scss */
.comment-actions .reply-btn:hover svg {
  color: #ff0074;
}

/* -----------------------------------------------------------------
   REPLY FORM · variant compacto
   ----------------------------------------------------------------- */
/* line 617, app/assets/stylesheets/_components.exo-content-comments.scss */
.reply-form-wrapper {
  margin-top: 6px;
  padding-left: 48px;
}

/* line 622, app/assets/stylesheets/_components.exo-content-comments.scss */
.reply-form-container {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 0, 116, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}

/* line 629, app/assets/stylesheets/_components.exo-content-comments.scss */
.reply-form-container:focus-within {
  border-color: rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.12) !important;
}

/* line 635, app/assets/stylesheets/_components.exo-content-comments.scss */
.reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 637, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar-reply {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* line 644, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar-reply::-webkit-scrollbar {
  height: 3px;
}

/* line 645, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-bar-reply::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3);
  border-radius: 999px;
}

/* line 648, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-btn-small {
  flex-shrink: 0;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.18s !important;
}

/* line 661, app/assets/stylesheets/_components.exo-content-comments.scss */
.quick-emoji-btn-small:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  transform: scale(1.18) !important;
}

/* line 667, app/assets/stylesheets/_components.exo-content-comments.scss */
.emoji-picker-dropdown-reply {
  position: absolute;
  bottom: 40px;
  left: 0;
  z-index: 100;
  width: 280px !important;
  max-height: 320px !important;
  background: linear-gradient(180deg, #14101a, #0a0a0a) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.65), 0 0 28px -12px rgba(255, 0, 116, 0.3) !important;
  overflow: hidden !important;
}

/* -----------------------------------------------------------------
   REPLIES CONTAINER · indent + tree visual line
   ----------------------------------------------------------------- */
/* line 688, app/assets/stylesheets/_components.exo-content-comments.scss */
.replies-container:not(:empty) {
  margin-top: 2px;
  position: relative;
}

/* line 692, app/assets/stylesheets/_components.exo-content-comments.scss */
.replies-container:not(:empty)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 0, 116, 0.2), transparent);
}

/* =================================================================
   RESPONSIVE · mobile-first refinements
   ================================================================= */
@media (max-width: 768px) {
  /* line 710, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comments-header {
    padding: 14px 16px !important;
  }
  /* line 712, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comments-header .section-title {
    font-size: 12px !important;
  }
  /* line 715, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comments-section [data-comments-toggle-target="container"] {
    padding: 16px !important;
  }
  /* line 719, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-form-container {
    padding: 10px !important;
  }
  /* line 721, app/assets/stylesheets/_components.exo-content-comments.scss */
  .emoji-trigger-btn {
    width: 34px;
    height: 34px;
  }
  /* line 723, app/assets/stylesheets/_components.exo-content-comments.scss */
  .quick-emoji-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
  /* line 725, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-form-container .user-avatar {
    width: 36px;
    height: 36px;
  }
  /* line 727, app/assets/stylesheets/_components.exo-content-comments.scss */
  .input-row {
    padding: 3px 3px 3px 12px;
  }
  /* line 729, app/assets/stylesheets/_components.exo-content-comments.scss */
  .submit-btn-icon {
    width: 32px !important;
    height: 32px !important;
  }
  /* line 729, app/assets/stylesheets/_components.exo-content-comments.scss */
  .submit-btn-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* line 731, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-card {
    padding: 8px 4px !important;
  }
  /* line 733, app/assets/stylesheets/_components.exo-content-comments.scss */
  .user-avatar-small {
    width: 34px;
    height: 34px;
  }
  /* line 735, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-author {
    font-size: 13.5px !important;
  }
  /* line 737, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-content {
    font-size: 13.5px !important;
    margin-left: 44px !important;
  }
  /* line 739, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-actions {
    margin-left: 44px;
  }
  /* line 741, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-card.reply-indent {
    margin-left: 36px;
  }
  /* line 743, app/assets/stylesheets/_components.exo-content-comments.scss */
  .reply-form-wrapper {
    padding-left: 44px;
  }
  /* line 745, app/assets/stylesheets/_components.exo-content-comments.scss */
  .emoji-picker-dropdown {
    width: calc(100vw - 60px) !important;
    max-width: 320px;
    left: -8px;
  }
}

@media (max-width: 480px) {
  /* line 749, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comments-header {
    padding: 12px 14px !important;
  }
  /* line 750, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comments-section [data-comments-toggle-target="container"] {
    padding: 12px !important;
  }
  /* line 752, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-card.reply-indent {
    margin-left: 14px;
  }
  /* line 754, app/assets/stylesheets/_components.exo-content-comments.scss */
  .comment-card.reply-indent::before {
    display: none;
  }
  /* line 757, app/assets/stylesheets/_components.exo-content-comments.scss */
  .reply-form-wrapper {
    padding-left: 0;
  }
  /* line 759, app/assets/stylesheets/_components.exo-content-comments.scss */
  .emoji-picker-dropdown,
.emoji-picker-dropdown-reply {
    width: calc(100vw - 40px) !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · PROFILE CONTENT CARD OVERRIDE
   -----------------------------------------------------------------
   Card de contenido en perfil del creador (/@:username) y feed.
   Soporta dos modos: grid (.content-grid) y list (.content-grid.list-view).
   Override CONSERVADOR · NO toca:
   - aspect-ratio / position / z-index / display toggles list↔grid
   - dimensiones críticas (lock-icon-container, btn min-widths)
   - JS hooks (like-button, liked, comment-button)
   Solo: brand colors (#ff4081/#f50057 → #ff0074/#b000ff/#ff3d9a),
   tipografía Montserrat/JetBrains Mono, pulido cromático.
   ================================================================= */
/* -----------------------------------------------------------------
   GALLERY BADGE COUNT · brand magenta gradient
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.gallery-badge-count {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.3);
}

/* line 26, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.gallery-type-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
}

/* -----------------------------------------------------------------
   HOVER OVERLAY · brand glow corner
   ----------------------------------------------------------------- */
/* line 39, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.hover-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.1), transparent 60%), rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(2px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 47, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.hover-overlay svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.55));
}

/* line 51, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.hover-overlay span {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* =================================================================
   LIST VIEW · header, caption, footer
   ================================================================= */
/* Avatar placeholder · brand magenta→purple */
/* line 64, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-creator-avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  border: 2px solid rgba(255, 0, 116, 0.25) !important;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.3);
}

/* line 72, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-creator-avatar {
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.22s, transform 0.22s !important;
}

/* line 76, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-creator-avatar:hover {
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* line 81, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 87, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-creator-username,
.list-post-time,
.list-post-timestamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 97, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-view-caption {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* -----------------------------------------------------------------
   ACTIONS BAR · refined neutral + brand accents
   ----------------------------------------------------------------- */
/* line 108, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-action-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s !important;
}

/* line 118, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-action-btn:hover {
  color: #f5f5f5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* line 123, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-action-btn span {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* Like button - brand magenta on hover/liked */
/* line 130, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 135, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button span,
.list-actions .like-button .like-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* line 141, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button:hover {
  color: #ff0074 !important;
  background: rgba(255, 0, 116, 0.08) !important;
}

/* line 146, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button.liked {
  color: #ff0074 !important;
}

/* line 149, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button.liked svg {
  filter: drop-shadow(0 0 5px rgba(255, 0, 116, 0.55));
}

/* line 153, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .like-button.liked:hover {
  color: #ff3d9a !important;
  background: rgba(255, 0, 116, 0.12) !important;
}

/* Comment button · neutralizar el cyan, brand subtle */
/* line 161, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .comment-button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 166, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .comment-button .comment-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* line 171, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .comment-button:hover {
  color: #b000ff !important;
  background: rgba(176, 0, 255, 0.08) !important;
}

/* line 175, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-actions .comment-button:hover svg {
  transform: scale(1.15);
  fill: #b000ff !important;
  filter: drop-shadow(0 0 5px rgba(176, 0, 255, 0.45));
}

/* Tip button · brand magenta solid CTA pill */
/* line 184, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-action-btn.send-tip-btn {
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  color: #ff0074 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* line 194, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.list-action-btn.send-tip-btn:hover {
  background: rgba(255, 0, 116, 0.18) !important;
  border-color: rgba(255, 0, 116, 0.5) !important;
  color: #ff3d9a !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.3) !important;
}

/* =================================================================
   LOCKED STATE · brand-aligned overlay + CTAs
   ================================================================= */
/* Unlock message · Montserrat heading */
/* line 208, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.unlock-message {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #f5f5f5 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 0, 116, 0.2) !important;
}

/* Lock icon container · brand glass */
/* line 219, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.lock-icon-container {
  background: rgba(20, 16, 26, 0.85) !important;
  border: 2px solid rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.6), 0 0 24px -8px rgba(255, 0, 116, 0.45) !important;
}

/* line 226, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.lock-icon-container svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.55));
}

/* Grid view · keep border-width 1px from legacy */
/* line 232, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.content-grid:not(.list-view) .lock-icon-container {
  border-width: 1px !important;
}

/* -----------------------------------------------------------------
   UNLOCK / SUBSCRIBE BUTTONS · sheen sweep brand
   ----------------------------------------------------------------- */
/* line 240, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock,
.btn-subscribe {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 253, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock::after,
.btn-subscribe::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 263, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock:hover::after,
.btn-subscribe:hover::after {
  transform: translateX(220%);
}

/* line 265, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock span,
.btn-subscribe span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* line 273, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
}

/* line 278, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 116, 0.5) !important;
}

/* line 284, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-unlock:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.35) !important;
}

/* line 290, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-subscribe {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f5f5f5 !important;
  backdrop-filter: blur(10px);
}

/* line 296, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-subscribe:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* line 303, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.btn-subscribe:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Grid view · keep compact border-radius from legacy */
/* line 309, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.content-grid:not(.list-view) .btn-unlock,
.content-grid:not(.list-view) .btn-subscribe {
  border-radius: 8px !important;
}

/* =================================================================
   POLL CARD · brand polish (used in profile content grid)
   ================================================================= */
/* line 319, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.poll-profile-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.85) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* line 327, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.poll-profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
  pointer-events: none;
}

/* line 340, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.poll-profile-placeholder svg {
  fill: #ff0074 !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.45));
}

/* line 346, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.poll-profile-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.005em !important;
}

/* line 353, app/assets/stylesheets/_components.exo-profile-content-card.scss */
.poll-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff0074 !important;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · POLLS OVERRIDE
   -----------------------------------------------------------------
   Partial compartido (shared/_poll_content.html.erb) renderizado en:
   - feed (switch_pro/feed/_feed_post.html.erb)
   - perfil (creators/show.html.erb, _profile_content_card.html.erb)
   - content_show
   - creator/polls/new (form)
   - creator dashboard (polls section)
   Override CONSERVADOR · NO toca:
   - layout (display, position, z-index, grid-template-columns)
   - JS hooks (data-poll-vote-target, data-action, .poll-result-voted)
   - estados que controla JS (.poll-result-winner)
   Solo polish brand: #ff4081 → #ff0074 en form, JetBrains Mono en
   counts/timers, glass brand en locked, sheen en CTAs.
   ================================================================= */
/* =================================================================
   FORM (creator/polls/_form.html.erb)
   ================================================================= */
/* Remove option · brand magenta hover (era Material #ff4081) */
/* line 25, app/assets/stylesheets/_components.exo-polls.scss */
.poll-remove-option-btn:hover {
  color: #ff0074 !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  background: rgba(255, 0, 116, 0.1) !important;
}

/* Add option · brand magenta hover */
/* line 33, app/assets/stylesheets/_components.exo-polls.scss */
.poll-add-option-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* line 38, app/assets/stylesheets/_components.exo-polls.scss */
.poll-add-option-btn:hover {
  color: #ff0074 !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  background: rgba(255, 0, 116, 0.08) !important;
  box-shadow: 0 0 24px -8px rgba(255, 0, 116, 0.3) !important;
}

/* Access toggle · brand */
/* line 48, app/assets/stylesheets/_components.exo-polls.scss */
.poll-access-toggle:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 52, app/assets/stylesheets/_components.exo-polls.scss */
.poll-access-toggle:has(.poll-form-checkbox:checked) {
  border-color: rgba(255, 0, 116, 0.45) !important;
  background: rgba(255, 0, 116, 0.08) !important;
}

/* line 58, app/assets/stylesheets/_components.exo-polls.scss */
.poll-form-checkbox {
  accent-color: #ff0074 !important;
}

/* line 62, app/assets/stylesheets/_components.exo-polls.scss */
.poll-access-label {
  font-family: 'Rubik', sans-serif !important;
}

/* line 65, app/assets/stylesheets/_components.exo-polls.scss */
.poll-access-label svg {
  color: #ff0074 !important;
}

/* Form select · brand chevron */
/* line 69, app/assets/stylesheets/_components.exo-polls.scss */
.poll-form-select {
  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='%23ff0074' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* =================================================================
   FEED DISPLAY · poll-content (shared partial)
   ================================================================= */
/* Question caption · Montserrat (era Rubik) */
/* line 79, app/assets/stylesheets/_components.exo-polls.scss */
.post-caption-top.poll-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* -----------------------------------------------------------------
   VOTING STATE · option buttons (clickable)
   ----------------------------------------------------------------- */
/* line 89, app/assets/stylesheets/_components.exo-polls.scss */
.poll-option-btn {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 100, app/assets/stylesheets/_components.exo-polls.scss */
.poll-option-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 0, 116, 0.1), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 110, app/assets/stylesheets/_components.exo-polls.scss */
.poll-option-btn:hover:not(:disabled) {
  border-color: rgba(255, 0, 116, 0.55) !important;
  background: rgba(255, 0, 116, 0.08) !important;
  color: #fff !important;
  box-shadow: 0 0 20px -8px rgba(255, 0, 116, 0.4);
}

/* line 116, app/assets/stylesheets/_components.exo-polls.scss */
.poll-option-btn:hover:not(:disabled)::after {
  transform: translateX(220%);
}

/* -----------------------------------------------------------------
   RESULTS STATE · bars + percentage
   ----------------------------------------------------------------- */
/* Bar gradient · más cinematic (legacy ya brand, solo aumentamos contraste) */
/* line 126, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-bar {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.22) 0%, rgba(255, 61, 154, 0.1) 100%) !important;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 133, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-voted .poll-result-bar {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.35) 0%, rgba(176, 0, 255, 0.15) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 116, 0.2);
}

/* line 140, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-winner .poll-result-bar {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, rgba(255, 61, 154, 0.18) 100%) !important;
}

/* Result text · keep Rubik */
/* line 147, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-text {
  font-family: 'Rubik', sans-serif !important;
}

/* line 150, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-voted .poll-result-text {
  font-weight: 600 !important;
  color: #fff !important;
}

/* line 156, app/assets/stylesheets/_components.exo-polls.scss */
.poll-check {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.55));
  font-weight: 800 !important;
}

/* Percentage · JetBrains Mono tabular */
/* line 163, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-percentage {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* line 170, app/assets/stylesheets/_components.exo-polls.scss */
.poll-result-voted .poll-result-percentage {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.3);
}

/* -----------------------------------------------------------------
   FOOTER · timer + total votes
   ----------------------------------------------------------------- */
/* line 179, app/assets/stylesheets/_components.exo-polls.scss */
.poll-footer {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* line 183, app/assets/stylesheets/_components.exo-polls.scss */
.poll-total-votes,
.poll-timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 193, app/assets/stylesheets/_components.exo-polls.scss */
.poll-timer.poll-timer-closed {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* -----------------------------------------------------------------
   LOCKED STATE · brand glass card
   ----------------------------------------------------------------- */
/* line 201, app/assets/stylesheets/_components.exo-polls.scss */
.poll-locked {
  background: radial-gradient(circle at 50% 30%, rgba(255, 0, 116, 0.06), transparent 60%), linear-gradient(180deg, rgba(20, 16, 26, 0.85), rgba(10, 10, 10, 0.85)) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
}

/* line 210, app/assets/stylesheets/_components.exo-polls.scss */
.poll-locked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
  pointer-events: none;
}

/* line 222, app/assets/stylesheets/_components.exo-polls.scss */
.poll-locked-icon {
  color: rgba(255, 0, 116, 0.65) !important;
  filter: drop-shadow(0 0 14px rgba(255, 0, 116, 0.4));
}

/* line 227, app/assets/stylesheets/_components.exo-polls.scss */
.poll-locked-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* =================================================================
   CREATOR DASHBOARD · polls section
   ================================================================= */
/* line 237, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-section {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* line 245, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
  pointer-events: none;
}

/* line 257, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-title h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* line 265, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-title h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.45);
}

/* Count badge · keep green semantic (active polls counter) */
/* line 277, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* New poll CTA · sheen sweep brand */
/* line 286, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-new-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 297, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-new-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 307, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-new-btn:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.55) !important;
}

/* line 311, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-new-btn:hover::after {
  transform: translateX(220%);
}

/* line 314, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-new-btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* -----------------------------------------------------------------
   DASHBOARD CARD · brand polish + hover lift
   ----------------------------------------------------------------- */
/* line 324, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card {
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 330, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card--active {
  border-color: rgba(255, 0, 116, 0.18) !important;
}

/* line 333, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card--active:hover {
  border-color: rgba(255, 0, 116, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 0 24px -10px rgba(255, 0, 116, 0.3) !important;
}

/* line 343, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* line 349, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-fill {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.35) 0%, rgba(176, 0, 255, 0.12) 100%) !important;
}

/* line 355, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-text {
  font-family: 'Rubik', sans-serif !important;
}

/* line 359, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* line 365, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-footer {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Status badge · keep green for OPEN (semantic), brand polish for CLOSED */
/* line 375, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-status {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* line 380, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-status--open {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

/* line 386, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-card-status--closed {
  color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Closed polls collapsible · brand subtle */
/* line 395, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-closed-toggle {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45) !important;
  transition: color 0.22s !important;
}

/* line 404, app/assets/stylesheets/_components.exo-polls.scss */
.polls-dashboard-closed-toggle:hover {
  color: #ff0074 !important;
}

/* =================================================================
   PROFILE · active polls section + poll cards
   ================================================================= */
/* Header · gradient brand text */
/* line 415, app/assets/stylesheets/_components.exo-polls.scss */
.my-active-polls-header h3,
.profile-active-polls-header span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ff0074, #b000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  letter-spacing: 0.06em !important;
}

/* Profile poll card · glass + brand hover */
/* line 429, app/assets/stylesheets/_components.exo-polls.scss */
.profile-poll-card {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.5) 0%, rgba(10, 10, 10, 0.5) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 437, app/assets/stylesheets/_components.exo-polls.scss */
.profile-poll-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 0 32px -16px rgba(255, 0, 116, 0.4) !important;
}

/* line 443, app/assets/stylesheets/_components.exo-polls.scss */
.profile-poll-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* Poll card placeholder (in profile content grid) */
/* line 451, app/assets/stylesheets/_components.exo-polls.scss */
.poll-profile-placeholder {
  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 116, 0.12), transparent 70%), linear-gradient(135deg, rgba(255, 0, 116, 0.06) 0%, rgba(176, 0, 255, 0.04) 100%) !important;
}

/* line 456, app/assets/stylesheets/_components.exo-polls.scss */
.poll-profile-placeholder svg {
  fill: #ff0074 !important;
  filter: drop-shadow(0 0 10px rgba(255, 0, 116, 0.45));
}

/* line 462, app/assets/stylesheets/_components.exo-polls.scss */
.poll-profile-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* =================================================================
   LEGACY DASHBOARD PREVIEW · brand polish (kept for compat)
   ================================================================= */
/* line 473, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview {
  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 116, 0.08), transparent 50%), linear-gradient(160deg, #14101a 0%, #0c0c0c 50%, #0d0a10 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.12) !important;
}

/* line 480, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-question span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

/* line 485, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-fill {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.35) 0%, rgba(176, 0, 255, 0.12) 100%) !important;
}

/* line 491, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* line 497, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 505, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-status {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.08em !important;
}

/* line 509, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-status--open {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
}

/* line 514, app/assets/stylesheets/_components.exo-polls.scss */
.poll-dashboard-preview-status--closed {
  color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR PROFILE MODALS OVERRIDE
   -----------------------------------------------------------------
   Tip modal + Unsubscribe modal + cancelled badge + toasts.
   Override CONSERVADOR · NO toca:
   - position/transform/z-index (modales fixed centrados)
   - Show/hide states (.show / .visible toggles JS)
   - Animaciones existentes (spin, slideDown, tip-hero-pulse)
   - Layout (display/flex/grid)
   - Dimensiones críticas (widths, padding strategic)
   Solo polish: #ff4081/#f50057 → brand #ff0074/#ff3d9a/#b000ff,
   #dc3545 (Bootstrap red) → #ef4444 (clean modern), #28a745 verde →
   #4ade80, #ffc107 ámbar → #fbbf24, JetBrains Mono en amounts.
   ================================================================= */
/* =================================================================
   TIP MODAL · brand polish (más usado en la plataforma)
   ================================================================= */
/* line 21, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* line 27, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content {
  background: radial-gradient(ellipse 140% 100% at 0% 0%, rgba(255, 0, 116, 0.1), transparent 55%), radial-gradient(ellipse 100% 80% at 100% 100%, rgba(176, 0, 255, 0.06), transparent 55%), linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 22px !important;
  box-shadow: 0 32px 64px -8px rgba(0, 0, 0, 0.75), 0 0 48px -8px rgba(255, 0, 116, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Brand line top */
/* line 41, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.55), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Subtle magenta glow corner · brand */
/* line 54, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content::before {
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 70%) !important;
}

/* Close button · brand hover */
/* line 60, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content .btn-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 68, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content .btn-close:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
}

/* Hero icon · brand→purple gradient */
/* line 77, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-hero-icon {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  animation: exo-tip-hero-pulse 2.8s ease-in-out infinite !important;
}

@keyframes exo-tip-hero-pulse {
  0%, 100% {
    box-shadow: 0 10px 28px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 12px 40px rgba(255, 0, 116, 0.6), 0 0 60px rgba(176, 0, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* Hero label · Montserrat tracked */
/* line 101, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-hero-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}

/* Modal title · Montserrat 800 */
/* line 109, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content .modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 115, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.modal-title-name {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Section labels · brand magenta svg */
/* line 125, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.modal-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* line 131, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.modal-label svg {
  color: #ff0074 !important;
}

/* line 134, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-section-optional {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* -----------------------------------------------------------------
   AMOUNT BUTTONS · JetBrains Mono tabular + brand active state
   ----------------------------------------------------------------- */
/* line 144, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-amount-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 157, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-amount-btn:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
}

/* line 162, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-amount-btn.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* -----------------------------------------------------------------
   CUSTOM AMOUNT INPUT · brand focus ring
   ----------------------------------------------------------------- */
/* line 176, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-custom-amount-wrapper {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 184, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-custom-amount-wrapper:focus-within {
  background: rgba(255, 0, 116, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.15) !important;
}

/* line 191, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-custom-amount-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  color: rgba(255, 0, 116, 0.85) !important;
}

/* line 197, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-custom-amount {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* line 204, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-custom-amount-suffix {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* -----------------------------------------------------------------
   MESSAGE TEXTAREA · brand focus ring
   ----------------------------------------------------------------- */
/* line 215, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-message-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: 'Rubik', sans-serif !important;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 224, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-message-input:focus {
  background: rgba(255, 0, 116, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.15) !important;
}

/* -----------------------------------------------------------------
   FOOTER · cancel + send tip
   ----------------------------------------------------------------- */
/* line 235, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.tip-modal-content .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* line 239, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-cancel {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: background 0.18s, color 0.18s !important;
}

/* line 247, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* line 253, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-send-tip {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.4) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 266, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-send-tip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 276, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-send-tip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(255, 0, 116, 0.55) !important;
  filter: none !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
}

/* line 281, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-send-tip:hover::after {
  transform: translateX(220%);
}

/* line 284, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.btn-send-tip:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* =================================================================
   UNSUBSCRIBE MODAL · destructive flow polished
   ================================================================= */
/* line 295, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* line 301, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-content {
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 64px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Header · brand noir charcoal con destructive accent sutil */
/* line 313, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-header {
  background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.1), transparent 55%), linear-gradient(180deg, #14101a 0%, #0d0a0f 100%) !important;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  /* Brand line top */
  /* Bottom subtle line */
}

/* line 321, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.55), transparent);
  pointer-events: none;
}

/* line 333, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.2), transparent);
}

/* line 344, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  /* Destructive accent · icon en SVG/i tag toma color del título */
}

/* line 351, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-title svg, .unsubscribe-modal-title i {
  color: #ef4444 !important;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55));
}

/* line 357, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s !important;
}

/* line 364, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fff !important;
  transform: rotate(90deg);
}

/* Subscription info card · glass */
/* line 374, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.subscription-info-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 380, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.subscription-info-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* line 384, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.subscription-info-row.highlight {
  background: rgba(251, 191, 36, 0.08) !important;
  border-top: 1px solid rgba(251, 191, 36, 0.15);
}

/* line 389, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.info-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 398, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.info-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* line 404, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.time-remaining {
  color: #fbbf24 !important;
}

/* Warning · clean red con respiración + icon badge */
/* line 410, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-warning {
  background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.12), transparent 65%), rgba(239, 68, 68, 0.05) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 14px !important;
  padding: 18px 22px 20px !important;
  gap: 14px !important;
  align-items: flex-start;
  /* Icon como badge circular con bg para presencia visual */
}

/* line 421, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-warning svg {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  padding: 6px;
  box-sizing: content-box;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  margin-top: 1px;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4));
}

/* line 436, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.warning-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 10px !important;
}

/* line 445, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.warning-text strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.01em !important;
  color: #ef4444 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: block !important;
}

/* line 456, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.warning-text p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 !important;
}

/* Reason form */
/* line 466, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.reason-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* line 475, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.reason-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
  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='%23ff0074' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

/* line 484, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.reason-select:focus {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* line 489, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.reason-select option {
  background: #14101a !important;
}

/* line 492, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.other-reason-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
}

/* line 498, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.other-reason-input:focus {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* line 503, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.other-reason-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Footer */
/* line 508, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-modal-footer {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* line 513, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-cancel {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

/* line 523, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-cancel:hover {
  background: rgba(74, 222, 128, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
  color: #4ade80 !important;
}

/* line 530, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-confirm {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s !important;
}

/* line 546, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-confirm::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 556, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-confirm:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 562, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-confirm:hover::after {
  transform: translateX(220%);
}

/* line 565, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-btn-confirm:disabled {
  opacity: 0.5 !important;
  transform: none !important;
}

/* =================================================================
   CANCELLED INFO · subtle warm amber badge
   ================================================================= */
/* line 576, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.cancelled-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: rgba(251, 191, 36, 0.1) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 5px 11px !important;
}

/* Unsubscribe trigger · subtle hover red */
/* line 590, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-trigger {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s, color 0.2s !important;
}

/* line 597, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-trigger:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

/* =================================================================
   TOAST · success/error variants polished
   ================================================================= */
/* line 608, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-toast {
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* line 617, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-toast-success {
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(74, 222, 128, 0.3) !important;
}

/* line 624, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-toast-error {
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(239, 68, 68, 0.3) !important;
}

/* line 631, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-toast-success .toast-icon {
  background: rgba(74, 222, 128, 0.18) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

/* line 637, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.unsubscribe-toast-error .toast-icon {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* line 643, app/assets/stylesheets/_components.exo-creator-profile-modals.scss */
.toast-message {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · NOTIFICATIONS MODAL OVERRIDE
   -----------------------------------------------------------------
   Dropdown del header (notifications/_modal.html.erb).
   Override CONSERVADOR · NO toca:
   - position/z-index/transform (modal centering)
   - Show/hide states (.show toggles JS)
   - Animations (pulse-dot, transitions)
   - Layout flex
   Solo polish: Bootstrap palette → modern (#4ade80/#ef4444/#fbbf24/#0ea5e9),
   JetBrains Mono en timestamps, sheen sweep en mark-all, brand noir
   gradient en container, brand glow en empty state.
   ================================================================= */
/* -----------------------------------------------------------------
   BACKDROP · más sutil
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* -----------------------------------------------------------------
   CONTAINER · brand noir gradient
   ----------------------------------------------------------------- */
/* line 29, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-modal-container {
  background: radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 0, 116, 0.06), transparent 60%), linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 32px 64px -12px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(255, 0, 116, 0.2) !important;
}

/* -----------------------------------------------------------------
   HEADER · brand line top accent reforzado
   ----------------------------------------------------------------- */
/* line 44, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-header {
  background: radial-gradient(circle at 0% 0%, rgba(255, 0, 116, 0.08), transparent 55%), linear-gradient(180deg, rgba(255, 0, 116, 0.06) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 50, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-header h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  /* Brand dot · más glow */
}

/* line 56, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-header h2::before {
  box-shadow: 0 0 12px #ff0074, 0 0 24px rgba(255, 0, 116, 0.55) !important;
}

/* line 63, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-header .close-modal {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* line 67, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-header .close-modal:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------
   MARK-ALL · sheen sweep brand
   ----------------------------------------------------------------- */
/* line 79, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-actions {
  background: transparent !important;
}

/* line 82, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-actions .mark-all-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: rgba(255, 0, 116, 0.06) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  color: #ff3d9a !important;
}

/* line 94, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-actions .mark-all-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 0, 116, 0.18), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 104, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-actions .mark-all-btn:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(255, 0, 116, 0.4);
}

/* line 109, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-actions .mark-all-btn:hover::after {
  transform: translateX(220%);
}

/* -----------------------------------------------------------------
   NOTIFICATIONS LIST · cleaner bg
   ----------------------------------------------------------------- */
/* line 118, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notifications-content {
  background: transparent !important;
}

/* line 121, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notifications-content::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.25) !important;
}

/* line 124, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notifications-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.5) !important;
}

/* -----------------------------------------------------------------
   NOTIFICATION CARD · refined glass
   ----------------------------------------------------------------- */
/* line 132, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 136, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* line 141, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-card.unread {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
  border-color: rgba(255, 0, 116, 0.22) !important;
}

/* line 147, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-card.unread:hover {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
}

/* -----------------------------------------------------------------
   ICON WRAPPER · modernize Bootstrap palette → brand modern
   ----------------------------------------------------------------- */
/* Success: #28a745 (Bootstrap) → #4ade80 (modern green) */
/* line 162, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-icon-wrapper.notification-success {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.08) 100%) !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
  color: #4ade80;
}

/* Danger: #dc3545 → #ef4444 (clean red) */
/* line 171, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-icon-wrapper.notification-danger {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.08) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444;
}

/* Primary: brand magenta refined */
/* line 180, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-icon-wrapper.notification-primary {
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.22) 0%, rgba(176, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.35) !important;
  color: #ff3d9a;
  box-shadow: 0 0 16px -4px rgba(255, 0, 116, 0.35);
}

/* Warning: #ffc107 → #fbbf24 (warmer amber) */
/* line 190, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-icon-wrapper.notification-warning {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24;
}

/* Info: #17a2b8 → #0ea5e9 (cleaner cyan) */
/* line 199, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-icon-wrapper.notification-info {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0.08) 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  color: #0ea5e9;
}

/* -----------------------------------------------------------------
   NOTIFICATION BODY · timestamp en JetBrains Mono
   ----------------------------------------------------------------- */
/* line 212, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-body h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* line 218, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-body p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 223, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-body .notification-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 231, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.notification-body .notification-time svg {
  opacity: 0.55 !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE · brand glow
   ----------------------------------------------------------------- */
/* line 242, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.empty-state .empty-icon {
  opacity: 1 !important;
  filter: none !important;
}

/* line 246, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.empty-state .empty-icon svg {
  color: rgba(255, 0, 116, 0.55) !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.4));
}

/* line 253, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.empty-state h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* line 259, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.empty-state p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* -----------------------------------------------------------------
   FOOTER · view-all CTA brand
   ----------------------------------------------------------------- */
/* line 269, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-footer {
  background: linear-gradient(0deg, rgba(255, 0, 116, 0.05) 0%, transparent 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 275, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-footer .view-all-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 4px 18px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* line 286, app/assets/stylesheets/_components.exo-notifications-modal.scss */
.modal-footer .view-all-btn:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 8px 26px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · STORIES VIEWER OVERRIDE
   -----------------------------------------------------------------
   Stories modal fullscreen viewer (Instagram-style).
   Override CONSERVADOR · NO toca:
   - position/z-index (modal fullscreen)
   - display none/flex (.active toggle JS)
   - Animations (slideUp, spin, heartBeat)
   - Nav touch zones (.story-nav-left/right)
   - Layout flex
   Solo polish: #ff4081 → brand #ff0074, brand ring en avatar,
   Montserrat names, JetBrains Mono counts/time, brand glow loader.
   ================================================================= */
/* -----------------------------------------------------------------
   OVERLAY · brand noir feel
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-stories.scss */
.stories-modal-overlay {
  background: rgba(0, 0, 0, 0.92) !important;
  backdrop-filter: blur(14px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(110%) !important;
}

/* line 25, app/assets/stylesheets/_components.exo-stories.scss */
.stories-modal-content {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px -10px rgba(0, 0, 0, 0.85), 0 0 80px -20px rgba(255, 0, 116, 0.3) !important;
}

@media (max-width: 768px) {
  /* line 25, app/assets/stylesheets/_components.exo-stories.scss */
  .stories-modal-content {
    border-radius: 0;
  }
}

/* -----------------------------------------------------------------
   PROGRESS BARS · cleaner brand glow active
   ----------------------------------------------------------------- */
/* line 41, app/assets/stylesheets/_components.exo-stories.scss */
.story-progress-bar {
  background: rgba(255, 255, 255, 0.22) !important;
  height: 2.5px !important;
}

/* line 46, app/assets/stylesheets/_components.exo-stories.scss */
.story-progress-fill.active {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

/* -----------------------------------------------------------------
   HEADER · brand ring on avatar + Montserrat name
   ----------------------------------------------------------------- */
/* line 55, app/assets/stylesheets/_components.exo-stories.scss */
.story-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%) !important;
}

/* line 62, app/assets/stylesheets/_components.exo-stories.scss */
.story-creator-avatar {
  border: 2px solid transparent !important;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) border-box !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 16px -4px rgba(255, 0, 116, 0.55);
}

/* line 72, app/assets/stylesheets/_components.exo-stories.scss */
.story-creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important;
}

/* line 79, app/assets/stylesheets/_components.exo-stories.scss */
.story-timestamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
}

/* Close button · glass brand hover */
/* line 91, app/assets/stylesheets/_components.exo-stories.scss */
.story-close-btn {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 101, app/assets/stylesheets/_components.exo-stories.scss */
.story-close-btn:hover {
  background: rgba(255, 0, 116, 0.2) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  transform: scale(1.08) rotate(90deg) !important;
}

/* -----------------------------------------------------------------
   CAPTION · Rubik con mejor legibilidad
   ----------------------------------------------------------------- */
/* line 112, app/assets/stylesheets/_components.exo-stories.scss */
.story-caption {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}

/* -----------------------------------------------------------------
   VIEWS · JetBrains Mono brand chip
   ----------------------------------------------------------------- */
/* line 128, app/assets/stylesheets/_components.exo-stories.scss */
.story-views {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
}

/* line 139, app/assets/stylesheets/_components.exo-stories.scss */
.story-views svg {
  color: rgba(255, 255, 255, 0.75);
}

/* -----------------------------------------------------------------
   LOADING · brand magenta spinner
   ----------------------------------------------------------------- */
/* line 148, app/assets/stylesheets/_components.exo-stories.scss */
.story-loading {
  border: 3px solid rgba(255, 255, 255, 0.18) !important;
  border-top-color: #ff0074 !important;
  box-shadow: 0 0 24px -4px rgba(255, 0, 116, 0.5);
}

/* -----------------------------------------------------------------
   LIKE BUTTON · brand magenta + sheen sweep
   ----------------------------------------------------------------- */
/* line 158, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* line 169, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 179, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
}

/* line 182, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn:hover::after {
  transform: translateX(220%);
}

/* line 185, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn .heart-filled {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.6));
}

/* line 190, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn.liked {
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.25), rgba(0, 0, 0, 0.65)) !important;
  border-color: rgba(255, 0, 116, 0.7) !important;
  box-shadow: 0 0 24px -4px rgba(255, 0, 116, 0.5);
  color: #fff !important;
}

/* line 198, app/assets/stylesheets/_components.exo-stories.scss */
.story-like-btn .likes-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR PROMOTIONS OVERRIDE
   -----------------------------------------------------------------
   /creator/promotions (index, new, edit, _form).
   Override CONSERVADOR · NO toca:
   - layout grids (col counts, gaps)
   - position/transitions critical
   - JS hooks (form preview live update)
   - Breakpoints existentes
   Solo polish: Material #ff4081/#f50057 → brand #ff0074/#ff3d9a/#b000ff,
   Bootstrap palette → modern (#4ade80/#fbbf24/#ef4444/#0ea5e9/#9ca3af),
   JetBrains Mono en codes/numbers/timestamps, Montserrat headings.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE HEADER · brand bar
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promotions-page {
  background: transparent !important;
}

/* line 22, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promotions-page .page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 27, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promotions-page .page-title::before {
  background: linear-gradient(180deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* line 33, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promotions-page .page-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   NEW PROMOTION CTA · sheen sweep brand
   ----------------------------------------------------------------- */
/* line 43, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-new-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 60, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-new-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 70, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-new-btn:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 76, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-new-btn:hover::after {
  transform: translateX(220%);
}

/* -----------------------------------------------------------------
   LIMIT NOTICE · one-alive-promotion gate (glass + brand line)
   ----------------------------------------------------------------- */
/* line 84, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-limit-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 0, 116, 0.1), transparent 70%), linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 14px !important;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* line 105, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-limit-notice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #ff0074 0%, #b000ff 100%);
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* line 114, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-limit-notice svg {
  flex-shrink: 0;
  color: #ff3d9a;
  margin-top: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* =================================================================
   STATS GRID · glass cards + brand glow hover
   ================================================================= */
/* line 127, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-card {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* line 133, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5), 0 0 32px -12px rgba(255, 0, 116, 0.3) !important;
}

/* Stat icons · modern palette */
/* line 144, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-icon--active {
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3);
  color: #ff0074 !important;
  box-shadow: 0 0 16px -4px rgba(255, 0, 116, 0.4);
}

/* line 153, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-icon--uses {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.08) 100%) !important;
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80 !important;
}

/* line 161, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-icon--discount {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24 !important;
}

/* line 170, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}

/* line 178, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-stat-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* =================================================================
   PROMO LIST · glass cards
   ================================================================= */
/* line 191, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-card {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* line 197, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5), 0 0 24px -10px rgba(255, 0, 116, 0.25) !important;
}

/* line 205, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Code badge · brand pill prominente */
/* line 210, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-code-badge {
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.18) 0%, rgba(176, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 16px -4px rgba(255, 0, 116, 0.35);
}

/* line 217, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-code-badge i {
  color: #ff0074 !important;
}

/* line 220, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-code-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
}

/* Status badges · color-coded modern + dot pulse */
/* line 229, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

/* line 239, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* line 249, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status--active {
  background: rgba(74, 222, 128, 0.1) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.3);
}

/* line 254, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status--active::before {
  animation: exo-promo-pulse 1.6s ease-in-out infinite;
}

/* line 257, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status--expired {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

/* line 263, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status--depleted {
  background: rgba(251, 191, 36, 0.1) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.3);
}

/* line 269, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-status--disabled {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3);
}

@keyframes exo-promo-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

/* -----------------------------------------------------------------
   CARD BODY · detail rows
   ----------------------------------------------------------------- */
/* line 285, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-card-body {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* line 288, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-detail-row:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

/* line 293, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-detail-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 301, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-detail-value {
  font-family: 'Rubik', sans-serif !important;
  color: #f5f5f5 !important;
}

/* line 305, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-detail-value i {
  color: #ff0074 !important;
}

/* "New only" badge · brand cyan modernized */
/* line 309, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-badge-new-only {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.1) !important;
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 999px !important;
}

/* -----------------------------------------------------------------
   CARD ACTIONS · icon buttons brand hover
   ----------------------------------------------------------------- */
/* line 325, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-card-actions {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* line 330, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 10px !important;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 341, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-action-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #ff0074 !important;
  transform: translateY(-2px) !important;
}

/* line 348, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

/* =================================================================
   EMPTY STATE · brand glow icon
   ================================================================= */
/* line 360, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-empty-state {
  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 116, 0.06), transparent 60%), rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 0, 116, 0.2) !important;
  border-radius: 18px !important;
}

/* line 367, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-empty-state h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* line 373, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-empty-state p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 379, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-empty-icon {
  opacity: 1 !important;
  color: rgba(255, 0, 116, 0.55) !important;
}

/* line 383, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-empty-icon svg {
  filter: drop-shadow(0 0 20px rgba(255, 0, 116, 0.4));
}

/* =================================================================
   FORM (new/edit) · code input + preview
   ================================================================= */
/* line 393, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-code-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Type icon · brand stroke */
/* line 402, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-type-grid .type-icon {
  stroke: #ff0074 !important;
}

/* line 406, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-type-grid .type-option input[type="radio"]:checked + .type-label .type-icon {
  stroke: #fff !important;
}

/* Live preview · glass card brand line top */
/* line 413, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview {
  position: relative;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.06), transparent 70%), rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 0, 116, 0.15) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* line 422, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
  pointer-events: none;
}

/* line 434, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 441, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview-row {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* line 445, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview-row--discount {
  color: #4ade80 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* line 451, app/assets/stylesheets/_components.exo-creator-promotions.scss */
.promo-preview-row--total {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: #ff0074 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 0 12px rgba(255, 0, 116, 0.35);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MOBILE NAVIGATION OVERRIDE
   -----------------------------------------------------------------
   Bottom nav móvil + header actions (mobile_navigation.scss).
   El panel hamburger ya está cubierto por _components.exo-hamburger-menu.
   Override CONSERVADOR · NO toca:
   - position fixed/transform/z-index
   - display none/flex (breakpoint <1024px)
   - safe-area-inset (notch handling)
   - SVG fill/stroke comportamiento (currentColor inheritance)
   - Animaciones (badgePulse)
   Solo polish: Material #ff4081/#f50057 → brand #ff0074/#ff3d9a/#b000ff,
   purple/blue avatar fallback → brand gradient, Montserrat labels,
   active indicator brand line, glass background con blur.
   ================================================================= */
/* -----------------------------------------------------------------
   BOTTOM NAV BAR · glass blur + brand line top
   ----------------------------------------------------------------- */
/* line 21, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.92) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.02) inset !important;
  position: fixed !important;
  /* Brand line top accent */
}

/* line 33, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.45), transparent);
  pointer-events: none;
}

/* -----------------------------------------------------------------
   NAV ITEM · active indicator brand
   ----------------------------------------------------------------- */
/* line 49, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item {
  position: relative;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Active indicator: brand dot bajo el icono */
}

/* line 57, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074, #b000ff);
  box-shadow: 0 0 6px rgba(255, 0, 116, 0.65);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* line 72, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item.active {
  color: #ff0074 !important;
}

/* line 75, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item.active::after {
  transform: translateX(-50%) scale(1);
}

/* line 77, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item.active svg {
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55)) !important;
}

/* Label · Montserrat tracked */
/* line 85, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item > span.mobile-nav-label,
.mobile-nav-item > span:last-of-type:not(.mobile-nav-badge) {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* -----------------------------------------------------------------
   BADGE MENSAJES · brand magenta gradient
   ----------------------------------------------------------------- */
/* line 96, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: 2px solid #0a0a0a !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.55) !important;
  animation: exo-mobile-nav-badge-pulse 2s ease-in-out infinite !important;
}

@keyframes exo-mobile-nav-badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(255, 0, 116, 0.5);
  }
  50% {
    box-shadow: 0 2px 16px rgba(255, 0, 116, 0.85);
  }
}

/* -----------------------------------------------------------------
   AVATAR · brand gradient placeholder
   ----------------------------------------------------------------- */
/* line 115, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-avatar {
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  transition: border-color 0.22s, box-shadow 0.22s !important;
}

/* line 120, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item.active .mobile-nav-avatar {
  border-color: #ff0074 !important;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.55);
}

/* line 125, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* line 132, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
.mobile-nav-item.active .mobile-nav-avatar-placeholder {
  border-color: #ff0074 !important;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.55);
}

/* =================================================================
   MOBILE HEADER ACTIONS · brand polish
   ================================================================= */
@media (max-width: 1024px) {
  /* line 143, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
  .mobile-header-icon {
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 10px !important;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s !important;
  }
  /* line 151, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
  .mobile-header-icon:hover {
    background: rgba(255, 0, 116, 0.1) !important;
    color: #ff0074 !important;
  }
  /* line 157, app/assets/stylesheets/_components.exo-mobile-navigation.scss */
  .mobile-header-badge {
    background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid #0a0a0a !important;
    box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45);
    border-radius: 999px !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · PAGINATION OVERRIDE
   -----------------------------------------------------------------
   Pagy/Kaminari nav global (.pagination-wrapper).
   Override CONSERVADOR · NO toca:
   - layout (display flex, gaps, dimensiones)
   - chevron mask SVGs (currentColor inheritance)
   - breakpoints responsive
   - hide first/last en mobile
   Solo polish: Material #ff4081/#f50057 → brand #ff0074/#ff3d9a,
   JetBrains Mono en page numbers, brand glow current state.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE LINKS · cleaner glass + JetBrains Mono numbers
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination {
  /* Prev/Next/First/Last labels · Montserrat (no son números) */
  /* Gap (ellipsis) · más sutil */
}

/* line 19, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a,
.pagination-wrapper .pagination span,
.pagination-wrapper .pagination .page a,
.pagination-wrapper .pagination .page span {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s !important;
}

/* line 37, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a:hover,
.pagination-wrapper .pagination span:hover,
.pagination-wrapper .pagination .page a:hover,
.pagination-wrapper .pagination .page span:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #fff !important;
}

/* line 43, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a.current,
.pagination-wrapper .pagination span.current,
.pagination-wrapper .pagination .page a.current,
.pagination-wrapper .pagination .page span.current {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 51, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a.current:hover,
.pagination-wrapper .pagination span.current:hover,
.pagination-wrapper .pagination .page a.current:hover,
.pagination-wrapper .pagination .page span.current:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
}

/* line 56, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a.disabled,
.pagination-wrapper .pagination span.disabled,
.pagination-wrapper .pagination .page a.disabled,
.pagination-wrapper .pagination .page span.disabled {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.25) !important;
  opacity: 0.6 !important;
}

/* line 62, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination a.disabled:hover,
.pagination-wrapper .pagination span.disabled:hover,
.pagination-wrapper .pagination .page a.disabled:hover,
.pagination-wrapper .pagination .page span.disabled:hover {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.25) !important;
}

/* line 71, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination .first a,
.pagination-wrapper .pagination .first span,
.pagination-wrapper .pagination .prev a,
.pagination-wrapper .pagination .prev span,
.pagination-wrapper .pagination .next a,
.pagination-wrapper .pagination .next span,
.pagination-wrapper .pagination .last a,
.pagination-wrapper .pagination .last span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* line 87, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper .pagination .gap span {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* -----------------------------------------------------------------
   PAGY NAV · mismo treatment
   ----------------------------------------------------------------- */
/* line 100, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .page {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s !important;
}

/* line 114, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .page:hover:not(.active):not(.disabled) {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #fff !important;
}

/* line 120, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .page.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 129, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .page.disabled {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.25) !important;
  opacity: 0.6 !important;
}

/* line 136, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .page.prev, .pagination-wrapper nav.pagy-nav .page.next {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* line 146, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper nav.pagy-nav .gap {
  color: rgba(255, 255, 255, 0.3) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* -----------------------------------------------------------------
   INFO TEXT · "Mostrando 1-10 de 50"
   ----------------------------------------------------------------- */
/* line 156, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-info {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-variant-numeric: tabular-nums;
}

/* line 165, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-info strong {
  color: #ff0074 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.35);
}

/* -----------------------------------------------------------------
   WITH-BACKGROUND VARIANT · brand glass
   ----------------------------------------------------------------- */
/* line 176, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper.with-background {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  position: relative;
}

/* line 183, app/assets/stylesheets/_components.exo-pagination.scss */
.pagination-wrapper.with-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.4), transparent);
  pointer-events: none;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · DEVISE AUTH PAGES OVERRIDE
   -----------------------------------------------------------------
   Standalone Devise pages (/users/sign_in, /users/sign_up, /users/password/new).
   Diferentes de _components.exo-auth-modals que cubre los modales popup.
   Override CONSERVADOR · NO toca:
   - layout (display flex, flex-direction)
   - position fixed (.enter__close, .toggle-password-btn)
   - dimensiones críticas
   - breakpoints
   Solo polish: Material #ff4081/#f50057 → brand #ff0074/#ff3d9a/#b000ff,
   glass card noir gradient, sheen sweep en CTAs, brand line accents,
   focus ring brand, link hover brand.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER · brand noir background
   ----------------------------------------------------------------- */
/* line 20, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter_login {
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 0, 116, 0.08), transparent 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(176, 0, 255, 0.06), transparent 55%), #050308 !important;
}

/* -----------------------------------------------------------------
   LOGO · drop-shadow brand glow
   ----------------------------------------------------------------- */
/* line 31, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__logo {
  filter: drop-shadow(0 0 24px rgba(255, 0, 116, 0.4)) drop-shadow(0 0 48px rgba(176, 0, 255, 0.2));
}

/* -----------------------------------------------------------------
   CARD · glass premium con brand line top
   ----------------------------------------------------------------- */
/* line 39, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__wrapper {
  position: relative;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 0, 116, 0.06), transparent 60%), linear-gradient(180deg, rgba(20, 16, 26, 0.85) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 22px !important;
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.75), 0 0 80px -20px rgba(255, 0, 116, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  /* Brand line top accent */
}

/* line 52, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.55), transparent);
  pointer-events: none;
}

/* -----------------------------------------------------------------
   DIVIDER (header section) · Montserrat
   ----------------------------------------------------------------- */
/* line 69, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__divider h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 75, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__divider p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   INPUT GROUPS · labels uppercase tracked
   ----------------------------------------------------------------- */
/* line 85, app/assets/stylesheets/_components.exo-auth-pages.scss */
.input-group {
  position: relative;
}

/* line 88, app/assets/stylesheets/_components.exo-auth-pages.scss */
.input-group label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 96, app/assets/stylesheets/_components.exo-auth-pages.scss */
.input-group em {
  font-family: 'Rubik', sans-serif !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 400 !important;
  text-transform: lowercase;
}

/* -----------------------------------------------------------------
   TEXTFIELD · brand focus ring
   ----------------------------------------------------------------- */
/* line 109, app/assets/stylesheets/_components.exo-auth-pages.scss */
.textfield {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
  color: #f5f5f5 !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 120, app/assets/stylesheets/_components.exo-auth-pages.scss */
.textfield:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* line 124, app/assets/stylesheets/_components.exo-auth-pages.scss */
.textfield:focus {
  background: rgba(255, 0, 116, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 130, app/assets/stylesheets/_components.exo-auth-pages.scss */
.textfield::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Toggle password · brand hover */
/* line 135, app/assets/stylesheets/_components.exo-auth-pages.scss */
.toggle-password-btn {
  color: rgba(255, 255, 255, 0.45) !important;
  transition: color 0.2s, transform 0.18s !important;
}

/* line 139, app/assets/stylesheets/_components.exo-auth-pages.scss */
.toggle-password-btn:hover {
  color: #ff0074 !important;
  transform: translateY(-50%) scale(1.08) !important;
}

/* =================================================================
   BUTTONS · brand sheen sweep
   ================================================================= */
/* line 150, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}

/* line 161, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--primary {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 172, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 182, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--primary:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 188, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--primary:hover::after {
  transform: translateX(220%);
}

/* line 192, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.22s, border-color 0.22s, color 0.22s !important;
}

/* line 198, app/assets/stylesheets/_components.exo-auth-pages.scss */
.btn--secondary:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
}

/* =================================================================
   FLASH MESSAGES · brand polish modern palette
   ================================================================= */
/* line 210, app/assets/stylesheets/_components.exo-auth-pages.scss */
.flash-message {
  font-family: 'Rubik', sans-serif !important;
  border-radius: 12px !important;
}

/* line 215, app/assets/stylesheets/_components.exo-auth-pages.scss */
.flash-alert,
.flash-error {
  background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.1), transparent 60%), rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* line 222, app/assets/stylesheets/_components.exo-auth-pages.scss */
.flash-alert p,
.flash-error p {
  color: #fca5a5 !important;
}

/* line 225, app/assets/stylesheets/_components.exo-auth-pages.scss */
.flash-notice,
.flash-success {
  background: radial-gradient(circle at 0% 0%, rgba(74, 222, 128, 0.1), transparent 60%), rgba(74, 222, 128, 0.06) !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

/* line 232, app/assets/stylesheets/_components.exo-auth-pages.scss */
.flash-notice p,
.flash-success p {
  color: #86efac !important;
}

/* Error explanation block */
/* line 237, app/assets/stylesheets/_components.exo-auth-pages.scss */
#error_explanation {
  background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.1), transparent 60%), rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 12px !important;
}

/* line 244, app/assets/stylesheets/_components.exo-auth-pages.scss */
#error_explanation h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #ef4444 !important;
  letter-spacing: 0.02em;
}

/* line 251, app/assets/stylesheets/_components.exo-auth-pages.scss */
#error_explanation li {
  font-family: 'Rubik', sans-serif !important;
  color: #fca5a5 !important;
}

/* =================================================================
   LINKS · brand magenta hover purple
   ================================================================= */
/* line 262, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter_login a:not(.btn):not(.enter__logo) {
  color: #ff0074 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}

/* line 268, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter_login a:not(.btn):not(.enter__logo):hover {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* Forgot password link · pill subtle */
/* line 276, app/assets/stylesheets/_components.exo-auth-pages.scss */
.forgot-password-link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

/* Remember me */
/* line 286, app/assets/stylesheets/_components.exo-auth-pages.scss */
.remember-me input[type="checkbox"] {
  accent-color: #ff0074 !important;
}

/* line 290, app/assets/stylesheets/_components.exo-auth-pages.scss */
.remember-me label {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* =================================================================
   CLOSE BUTTON · glass brand hover
   ================================================================= */
/* line 301, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__close {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s !important;
}

/* line 313, app/assets/stylesheets/_components.exo-auth-pages.scss */
.enter__close:hover {
  background: rgba(255, 0, 116, 0.15) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
  transform: scale(1.08) rotate(90deg);
}

/* =================================================================
   DEVISE LINKS · footer
   ================================================================= */
/* line 326, app/assets/stylesheets/_components.exo-auth-pages.scss */
.devise-links {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 329, app/assets/stylesheets/_components.exo-auth-pages.scss */
.devise-links a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: #ff0074 !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}

/* line 335, app/assets/stylesheets/_components.exo-auth-pages.scss */
.devise-links a:hover {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CONTENT PREVIEW OVERRIDE
   -----------------------------------------------------------------
   Override mínimo focalizado sobre selectores BARE del legacy
   content_preview.scss que aún están vivos en:
   - user/dashboard/library.html.erb
   - user/dashboard/favorites.html.erb
   - switch_pro/feed/_feed_post.html.erb
   - creators/_profile_content_card.html.erb (cubierto en su override)
   - shared/_content_card.html.erb (tiene estilos inline ya brand-aligned)

   Solo brand-aligning de colores Material/coral legacy variables
   (#DF4C42 / #FF746A / #ff4081 / #f50057) → brand (#ff0074 / #ff3d9a / #b000ff).
   NO toca position/layout/dimensiones críticas.
   ================================================================= */
/* -----------------------------------------------------------------
   CREATOR AVATAR PLACEHOLDER · brand gradient
   (era var(--color-primary-01) #DF4C42 coral legacy)
   ----------------------------------------------------------------- */
/* line 22, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  border: 2px solid rgba(255, 0, 116, 0.3) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.35);
}

/* line 30, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-avatar {
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.22s !important;
}

/* line 34, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-avatar:hover {
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* line 39, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-username {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 45, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-link {
  transition: opacity 0.2s, color 0.2s !important;
}

/* line 48, app/assets/stylesheets/_components.exo-content-preview.scss */
.creator-link:hover {
  opacity: 1 !important;
  color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   CONTENT FOOTER · cleaner border + bg
   ----------------------------------------------------------------- */
/* line 58, app/assets/stylesheets/_components.exo-content-preview.scss */
.content-footer {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* -----------------------------------------------------------------
   ACTION BUTTONS · brand polish
   (usado en feed posts, library, favorites)
   ----------------------------------------------------------------- */
/* line 68, app/assets/stylesheets/_components.exo-content-preview.scss */
.action-btn {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 72, app/assets/stylesheets/_components.exo-content-preview.scss */
.action-btn:hover {
  transform: scale(1.12) !important;
  color: #ff0074 !important;
}

/* line 77, app/assets/stylesheets/_components.exo-content-preview.scss */
.action-btn.liked {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.55));
}

/* line 83, app/assets/stylesheets/_components.exo-content-preview.scss */
.likes-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   LOCKED STATE · brand polish (legacy selectors)
   ----------------------------------------------------------------- */
/* line 94, app/assets/stylesheets/_components.exo-content-preview.scss */
.lock-icon-container {
  background: rgba(20, 16, 26, 0.85) !important;
  border: 2px solid rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.6), 0 0 24px -8px rgba(255, 0, 116, 0.45);
}

/* line 101, app/assets/stylesheets/_components.exo-content-preview.scss */
.lock-icon-container svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.55));
}

/* line 104, app/assets/stylesheets/_components.exo-content-preview.scss */
.unlock-message {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 0, 116, 0.2) !important;
}

/* line 113, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-unlock {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35) !important;
}

/* line 124, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-unlock::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 134, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-unlock:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 116, 0.5) !important;
}

/* line 138, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-unlock:hover::after {
  transform: translateX(220%);
}

/* line 142, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-subscribe {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
}

/* line 151, app/assets/stylesheets/_components.exo-content-preview.scss */
.btn-subscribe:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* -----------------------------------------------------------------
   CONTENT PLACEHOLDER · brand gradient (era coral legacy)
   ----------------------------------------------------------------- */
/* line 163, app/assets/stylesheets/_components.exo-content-preview.scss */
.content-placeholder {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(176, 0, 255, 0.1) 100%) !important;
}

/* line 168, app/assets/stylesheets/_components.exo-content-preview.scss */
.content-placeholder .placeholder-icon {
  color: rgba(255, 0, 116, 0.65) !important;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   LOCKED PREVIEW · brand glow refinement
   (legacy, ya casi todo cubierto por _components.exo-profile-content-card)
   ----------------------------------------------------------------- */
/* line 180, app/assets/stylesheets/_components.exo-content-preview.scss */
.locked-preview .blur-bg {
  background-color: #0a0a0a !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · INFO MODAL OVERRIDE
   -----------------------------------------------------------------
   Modal de help/glossary reusable (.info-modal__*).
   Override MÍNIMO · NO toca:
   - position fixed/inset/z-index
   - .is-open toggle (JS handles)
   - animations (infoModalSlideIn, infoModalShimmer, infoModalSlideUp)
   - layout flex/dimensiones (max-width 460px, padding strategic)
   - bottom sheet pattern mobile
   Solo polish: bg #1a1a1a/#0d0d0d → brand noir #14101a/#0a0a0a,
   accent line top con purple, tip text #ff9cc6 → brand cleaner,
   JetBrains Mono opcional en metadata.
   ================================================================= */
/* -----------------------------------------------------------------
   SHELL · backdrop refinement
   ----------------------------------------------------------------- */
/* line 20, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal {
  background: rgba(5, 3, 8, 0.78) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* -----------------------------------------------------------------
   CARD · brand noir charcoal con purple accent
   ----------------------------------------------------------------- */
/* line 30, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__card {
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 0, 116, 0.06), transparent 65%), linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 32px 64px -10px rgba(0, 0, 0, 0.7), 0 0 80px -20px rgba(255, 0, 116, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  /* Top accent line · brand magenta + purple shimmer */
  /* Radial corner · purple touch */
}

/* line 41, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__card::before {
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #b000ff, #ff3d9a, #ff0074) !important;
  background-size: 200% 100% !important;
  height: 2px !important;
}

/* line 48, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__card::after {
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 50%), radial-gradient(circle, rgba(176, 0, 255, 0.06) 30%, transparent 70%) !important;
}

/* -----------------------------------------------------------------
   HEADER · brand line bottom subtle
   ----------------------------------------------------------------- */
/* line 59, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 63, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 68, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__title::before {
  background: linear-gradient(180deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* Close button · brand glass hover */
/* line 76, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__close {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.25s !important;
}

/* line 86, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__close:hover, .info-modal__close:focus-visible {
  background: rgba(255, 0, 116, 0.15) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.05);
}

/* -----------------------------------------------------------------
   SECTIONS · glass card + brand hover lift
   ----------------------------------------------------------------- */
/* line 99, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__section {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.45) 0%, rgba(10, 10, 10, 0.45) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* line 104, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__section:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 0 24px -10px rgba(255, 0, 116, 0.25) !important;
}

/* line 113, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__icon {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.4), 0 0 24px -8px rgba(176, 0, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 121, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 127, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__section-body {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* -----------------------------------------------------------------
   TIP CALLOUT · brand cleaner
   ----------------------------------------------------------------- */
/* line 138, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__section-tip {
  background: radial-gradient(circle at 0% 0%, rgba(255, 0, 116, 0.1), transparent 60%), rgba(255, 0, 116, 0.05) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: #ffafd0 !important;
  line-height: 1.55;
}

/* line 150, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__tip-icon {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.55));
}

/* -----------------------------------------------------------------
   TRIGGER · brand pulse glow refinement
   ----------------------------------------------------------------- */
/* line 159, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__trigger {
  background: rgba(255, 0, 116, 0.06) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  color: #ff3d9a !important;
}

/* line 164, app/assets/stylesheets/_components.exo-info-modal.scss */
.info-modal__trigger:hover, .info-modal__trigger:focus-visible {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.45) !important;
  transform: scale(1.1);
}

/* -----------------------------------------------------------------
   MOBILE BOTTOM SHEET · drag handle brand
   ----------------------------------------------------------------- */
@media (max-width: 600px) {
  /* line 178, app/assets/stylesheets/_components.exo-info-modal.scss */
  .info-modal__card::before {
    /* Drag handle override · brand color */
    background: rgba(255, 255, 255, 0.3) !important;
    background-size: auto !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · GEO-BLOCKED OVERRIDE
   -----------------------------------------------------------------
   Two surfaces:
   - Geo-blocked page (.geo-blocked-*): visitor sees when region-restricted
   - Privacy settings tab (.geo-block-*): creator selects blocked countries
   Override CONSERVADOR · NO toca:
   - Layout (display flex, grid, position absolute en search icon, tooltip)
   - JS hooks (.geo-block-item--hidden toggle, &--blocked state)
   - Animations (geo-fade-up)
   - SVG map structure
   Solo polish: brand noir charcoal en cards, sheen sweep CTA, modern
   destructive en pill remove hover (#dc3545 → #ef4444), brand glass en
   tooltip, Montserrat tipografía consistente.
   ================================================================= */
/* =================================================================
   GEO-BLOCKED PAGE · visitor view
   ================================================================= */
/* line 22, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-container {
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255, 0, 116, 0.06), transparent 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(176, 0, 255, 0.04), transparent 55%) !important;
}

/* Icon · brand glow */
/* line 30, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-icon {
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.12), transparent 70%), rgba(255, 0, 116, 0.04) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  box-shadow: 0 0 32px -8px rgba(255, 0, 116, 0.45), inset 0 0 24px rgba(255, 0, 116, 0.1) !important;
  color: #ff0074 !important;
}

/* line 40, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-icon svg {
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.55));
}

/* Title · Montserrat 800 brand */
/* line 45, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 51, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-message {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Info card · brand noir glass */
/* line 58, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-card {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* line 64, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-card__icon {
  color: rgba(255, 0, 116, 0.65) !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* line 69, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-card__text p {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* CTA button · sheen sweep brand */
/* line 79, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 98, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 108, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-btn:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 114, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-blocked-btn:hover::after {
  transform: translateX(220%);
}

/* =================================================================
   PRIVACY SETTINGS TAB · creator UI to manage blocked countries
   ================================================================= */
/* Search input · brand focus ring */
/* line 125, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-search__icon {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 129, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-search__input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

/* line 139, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-search__input:focus {
  background: rgba(255, 0, 116, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.15) !important;
}

/* line 145, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-search__input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Selected pills · destructive modern hover */
/* line 151, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-pill {
  background: rgba(255, 0, 116, 0.08) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #ff3d9a !important;
}

/* line 159, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-pill:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* Count + clear */
/* line 168, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-count {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
  /* Tabular numbers if there's a count badge inside */
}

/* line 177, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-count span:has(+ .geo-block-clear),
.geo-block-count span:not(.geo-block-clear) {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* line 184, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-clear {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: #ff3d9a !important;
  border-radius: 6px !important;
  transition: background 0.2s, color 0.2s !important;
}

/* line 194, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-clear:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff0074 !important;
}

/* Country list · glass card */
/* line 202, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-list {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 207, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-list::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.25) !important;
}

/* line 210, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.5) !important;
}

/* Country item · brand hover */
/* line 216, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-item {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  transition: background 0.18s !important;
}

/* line 220, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-item:hover {
  background: rgba(255, 0, 116, 0.05) !important;
}

/* line 224, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-item__name {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* line 229, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-item__code {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Empty search state */
/* line 240, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-block-empty-search {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* =================================================================
   INTERACTIVE WORLD MAP
   ================================================================= */
/* line 250, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-container {
  background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255, 0, 116, 0.05), transparent 65%), rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 258, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-country {
  fill: rgba(255, 255, 255, 0.06) !important;
  stroke: rgba(255, 255, 255, 0.12) !important;
}

/* line 262, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-country:hover {
  fill: rgba(255, 255, 255, 0.18) !important;
  stroke: rgba(255, 255, 255, 0.3) !important;
}

/* line 267, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-country--blocked {
  fill: rgba(255, 0, 116, 0.4) !important;
  stroke: rgba(255, 0, 116, 0.6) !important;
}

/* line 271, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-country--blocked:hover {
  fill: rgba(255, 0, 116, 0.55) !important;
  stroke: rgba(255, 0, 116, 0.8) !important;
}

/* Tooltip · brand glass */
/* line 280, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-tooltip {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.92), rgba(10, 10, 10, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.65);
}

/* line 293, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-tooltip--blocked {
  color: #ff3d9a !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.65), 0 0 16px -6px rgba(255, 0, 116, 0.45);
}

/* line 303, app/assets/stylesheets/_components.exo-geo-blocked.scss */
.geo-map-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MESSAGES (CONVERSATIONS LIST) OVERRIDE
   -----------------------------------------------------------------
   Lista de DMs (creator + user conversations index).
   Ya existe _components.exo-messaging.scss para el chat individual,
   este cubre la lista (.messages-page, .conversations-container).
   Override CONSERVADOR · NO toca:
   - Layout (display flex, position absolute online indicator)
   - Animation (slideIn keyframes)
   - JS hooks (.unread state, real-time updates)
   - Breakpoints
   Solo polish: Material #ff4081/#f50057 → brand magenta,
   Bootstrap #28a745 → modern #4ade80, purple-blue empty state →
   brand purple, JetBrains Mono timestamps, brand line accent.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE WRAPPER
   ----------------------------------------------------------------- */
/* line 21, app/assets/stylesheets/_components.exo-messages.scss */
.messages-page {
  background-color: transparent !important;
}

/* -----------------------------------------------------------------
   HEADER · brand line accent
   ----------------------------------------------------------------- */
/* line 29, app/assets/stylesheets/_components.exo-messages.scss */
.messages-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 33, app/assets/stylesheets/_components.exo-messages.scss */
.messages-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074, #b000ff);
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
}

/* line 45, app/assets/stylesheets/_components.exo-messages.scss */
.messages-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 53, app/assets/stylesheets/_components.exo-messages.scss */
.messages-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* line 64, app/assets/stylesheets/_components.exo-messages.scss */
.messages-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   CONVERSATIONS CONTAINER · glass noir
   ----------------------------------------------------------------- */
/* line 73, app/assets/stylesheets/_components.exo-messages.scss */
.conversations-container {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* -----------------------------------------------------------------
   CONVERSATION ITEM · brand hover left bar accent
   ----------------------------------------------------------------- */
/* line 84, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  position: relative;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Brand line left accent · sale en hover/unread */
}

/* line 92, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* line 107, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item:hover {
  background: rgba(255, 0, 116, 0.04) !important;
  padding-left: 18px !important;
}

/* line 111, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* line 114, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item.unread {
  background: rgba(255, 0, 116, 0.05) !important;
}

/* line 117, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item.unread::before {
  transform: translateY(-50%) scaleY(1);
}

/* line 119, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item.unread .conversation-name {
  color: #fff !important;
  font-weight: 700 !important;
}

/* line 124, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item.unread .message-preview {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
}

/* line 129, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item.unread:hover {
  background: rgba(255, 0, 116, 0.09) !important;
}

/* -----------------------------------------------------------------
   AVATAR · brand ring + placeholder gradient
   ----------------------------------------------------------------- */
/* line 138, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-avatar .avatar-img {
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.22s, transform 0.22s !important;
}

/* line 143, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-avatar .avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35);
}

/* line 152, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-item:hover .conversation-avatar .avatar-img {
  border-color: rgba(255, 0, 116, 0.4) !important;
}

/* Online indicator · modern green */
/* line 158, app/assets/stylesheets/_components.exo-messages.scss */
.online-indicator {
  background: #4ade80 !important;
  border: 3px solid #0a0a0a !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 12px rgba(74, 222, 128, 0.7) !important;
  animation: exo-online-pulse 2.4s ease-in-out infinite;
}

@keyframes exo-online-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 12px rgba(74, 222, 128, 0.7);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 18px #4ade80;
  }
}

/* -----------------------------------------------------------------
   CONVERSATION INFO · Montserrat name + JetBrains Mono time
   ----------------------------------------------------------------- */
/* line 184, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* line 190, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Message preview */
/* line 202, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-preview .message-preview {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 206, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-preview .message-preview svg {
  color: rgba(255, 0, 116, 0.65);
}

/* line 208, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-preview .message-preview.empty {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* line 213, app/assets/stylesheets/_components.exo-messages.scss */
.conversation-preview .you-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   UNREAD BADGE · brand magenta gradient + pulse
   ----------------------------------------------------------------- */
/* line 224, app/assets/stylesheets/_components.exo-messages.scss */
.unread-badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  border-radius: 999px !important;
  border: 2px solid #0a0a0a !important;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.55) !important;
  animation: exo-unread-pulse 2s ease-in-out infinite;
}

@keyframes exo-unread-pulse {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(255, 0, 116, 0.5);
  }
  50% {
    box-shadow: 0 2px 18px rgba(255, 0, 116, 0.85);
  }
}

/* =================================================================
   EMPTY STATE · brand glow (era purple-blue mix)
   ================================================================= */
/* line 245, app/assets/stylesheets/_components.exo-messages.scss */
.messages-empty-state {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.08), transparent 60%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(176, 0, 255, 0.06), transparent 55%), rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 0, 116, 0.22) !important;
  border-radius: 18px !important;
}

/* line 254, app/assets/stylesheets/_components.exo-messages.scss */
.empty-icon {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.4), 0 0 40px -8px rgba(176, 0, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 262, app/assets/stylesheets/_components.exo-messages.scss */
.empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 268, app/assets/stylesheets/_components.exo-messages.scss */
.empty-message {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* CTA explore · sheen sweep brand */
/* line 275, app/assets/stylesheets/_components.exo-messages.scss */
.btn-explore {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 293, app/assets/stylesheets/_components.exo-messages.scss */
.btn-explore::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 303, app/assets/stylesheets/_components.exo-messages.scss */
.btn-explore:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 309, app/assets/stylesheets/_components.exo-messages.scss */
.btn-explore:hover::after {
  transform: translateX(220%);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · TOASTS OVERRIDE (3 files unificados)
   -----------------------------------------------------------------
   Cubre upload_progress.scss + upload_toast.scss + toast_notifications.scss.
   Override CONSERVADOR · NO toca:
   - position fixed / z-index / transform (animations)
   - Show/hide states (--visible, --exit)
   - Animations (flashToastIn/Out, flashToastProgress, upload-stripes, processing-spin)
   - Layout flex
   Solo polish: Material #4caf50/#f44336/#ff9800/#dc3545 → modern
   #4ade80/#ef4444/#fbbf24, brand noir backgrounds, JetBrains Mono en
   percentages/numerics.
   ================================================================= */
/* =================================================================
   DIRECT UPLOAD PROGRESS · upload_progress.scss
   ================================================================= */
/* line 20, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-progress-area {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.55) 0%, rgba(10, 10, 10, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 27, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-total__label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* line 35, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-total__text {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* line 39, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-total__percent {
  color: #ff0074 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* Progress bar */
/* line 50, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-progress-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
}

/* line 55, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-progress-bar__fill {
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #b000ff) !important;
  background-size: 200% 100%, 30px 30px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45);
}

/* line 62, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-progress-bar__fill--complete {
  background: linear-gradient(90deg, #4ade80, #22c55e) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.45) !important;
}

/* File row */
/* line 69, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-file {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

/* line 73, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-file__name {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* line 78, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-file__percent {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Complete state */
/* line 87, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload--complete .direct-upload-file__percent {
  color: #4ade80 !important;
}

/* line 91, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload--complete .direct-upload-progress-bar__fill {
  background: linear-gradient(90deg, #4ade80, #22c55e) !important;
}

/* Error state · modern red */
/* line 97, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload--error .direct-upload-progress-bar__fill {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
}

/* line 102, app/assets/stylesheets/_components.exo-toasts.scss */
.direct-upload-error {
  color: #fca5a5 !important;
  background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.12), transparent 60%), rgba(239, 68, 68, 0.05) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 10px !important;
  font-family: 'Rubik', sans-serif !important;
}

/* =================================================================
   PROCESSING BADGE · upload_progress.scss (videos en encoding)
   ================================================================= */
/* line 117, app/assets/stylesheets/_components.exo-toasts.scss */
.processing-badge {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}

/* line 126, app/assets/stylesheets/_components.exo-toasts.scss */
.processing-badge--processing {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

/* line 132, app/assets/stylesheets/_components.exo-toasts.scss */
.processing-badge--failed {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* line 138, app/assets/stylesheets/_components.exo-toasts.scss */
.processing-spinner {
  border: 2px solid rgba(251, 191, 36, 0.25) !important;
  border-top-color: #fbbf24 !important;
}

/* =================================================================
   UPLOAD TOAST · upload_toast.scss (persistent FAB-style toast)
   ================================================================= */
/* line 148, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast {
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 32px -10px rgba(255, 0, 116, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  /* SUCCESS · modern green */
  /* ERROR · modern red */
}

/* line 159, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--success {
  border-color: rgba(74, 222, 128, 0.4) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(74, 222, 128, 0.3) !important;
}

/* line 165, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--success .upload-toast__icon {
  color: #4ade80 !important;
}

/* line 167, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--success .upload-toast__progress-fill {
  background: linear-gradient(90deg, #4ade80, #22c55e) !important;
}

/* line 173, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--error {
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(239, 68, 68, 0.3) !important;
}

/* line 179, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--error .upload-toast__icon {
  color: #ef4444 !important;
}

/* line 181, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast--error .upload-toast__progress-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

/* line 186, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__icon {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* line 191, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__status {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 197, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__filename {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.02em;
}

/* line 203, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__percent {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: #ff0074 !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* line 211, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__close {
  color: rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  transition: background 0.2s, color 0.2s !important;
}

/* line 216, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__close:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff0074 !important;
}

/* line 222, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__progress {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
}

/* line 227, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__progress-fill {
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #b000ff) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* line 233, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__link a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: #ff0074 !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}

/* line 242, app/assets/stylesheets/_components.exo-toasts.scss */
.upload-toast__link a:hover {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* =================================================================
   FLASH TOAST · toast_notifications.scss (notice/alert top-level)
   ================================================================= */
/* line 254, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast {
  background: linear-gradient(180deg, #14101a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  font-family: 'Rubik', sans-serif !important;
}

/* line 266, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--notice .flash-toast__icon {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 0 18px rgba(255, 0, 116, 0.45) !important;
}

/* line 271, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--notice .flash-toast__progress {
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #b000ff) !important;
}

/* Alert · modern red (era Bootstrap #dc3545/#ff6b6b) */
/* line 277, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--alert {
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(239, 68, 68, 0.25) !important;
}

/* line 283, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--alert .flash-toast__icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45) !important;
}

/* line 288, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--alert .flash-toast__progress {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

/* Success variant (if used) */
/* line 294, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--success {
  border-color: rgba(74, 222, 128, 0.3) !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(74, 222, 128, 0.25) !important;
}

/* line 300, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--success .flash-toast__icon {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.45) !important;
}

/* line 305, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast--success .flash-toast__progress {
  background: linear-gradient(90deg, #4ade80, #22c55e) !important;
}

/* line 310, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast__text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* line 315, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast__close {
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color 0.2s, transform 0.18s !important;
}

/* line 319, app/assets/stylesheets/_components.exo-toasts.scss */
.flash-toast__close:hover {
  color: #fff !important;
  transform: rotate(90deg);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · SOCIAL LAYOUT OVERRIDE
   -----------------------------------------------------------------
   Estructura base de todas las vistas autenticadas:
   .social-layout (3 cols 240/1fr/320), .left-sidebar, .right-sidebar,
   .main-feed.
   Override ULTRA CONSERVADOR · NO toca bajo ninguna circunstancia:
   - .social-layout grid-template-columns/gap/max-width/padding
   - .left-sidebar/.right-sidebar position sticky/top/max-height
   - .main-feed max-width 630px
   - mobile breakpoints (<1024 sidebar hide, order 1/2)
   - display: none toggles
   - overflow-y/scrollbar-width
   Solo polish: Material #ff4081/#f50057 → brand magenta/purple,
   active nav state con brand glow, sidebar items con Montserrat,
   typography refinement, scrollbar brand.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BG · brand noir background sutil
   ----------------------------------------------------------------- */
/* line 23, app/assets/stylesheets/_components.exo-social-layout.scss */
.switch-pro-container {
  background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255, 0, 116, 0.04), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(176, 0, 255, 0.03), transparent 55%), #050308 !important;
}

/* -----------------------------------------------------------------
   LEFT SIDEBAR · brand scrollbar
   ----------------------------------------------------------------- */
/* line 34, app/assets/stylesheets/_components.exo-social-layout.scss */
.left-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.2) !important;
}

/* line 37, app/assets/stylesheets/_components.exo-social-layout.scss */
.left-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.4) !important;
}

/* line 40, app/assets/stylesheets/_components.exo-social-layout.scss */
.right-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.2) !important;
}

/* line 43, app/assets/stylesheets/_components.exo-social-layout.scss */
.right-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.4) !important;
}

/* -----------------------------------------------------------------
   SIDEBAR NAV ITEMS · Montserrat + brand active
   ----------------------------------------------------------------- */
/* line 50, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  position: relative;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Brand line left accent · sale en hover/active */
}

/* line 61, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #ff0074, #b000ff);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* line 76, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item:hover {
  background: rgba(255, 0, 116, 0.06) !important;
  color: #fff !important;
}

/* line 81, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(176, 0, 255, 0.08) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding-left: 20px !important;
}

/* line 88, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* line 90, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.active svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.5));
}

/* Badge en nav item · brand gradient pill */
/* line 99, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item .badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.45);
}

/* -----------------------------------------------------------------
   PROFILE LINK · brand ring avatar
   ----------------------------------------------------------------- */
/* line 113, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-profile-link:hover {
  background: rgba(255, 0, 116, 0.06) !important;
}

/* line 116, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-profile-avatar {
  border: 2px solid transparent !important;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) border-box !important;
  box-shadow: 0 0 12px -2px rgba(255, 0, 116, 0.45);
}

/* line 124, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-profile-avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  border: 2px solid rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.35);
}

/* line 132, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-profile-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 138, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-profile-username {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* -----------------------------------------------------------------
   SECTION LABEL · brand line top accent
   ----------------------------------------------------------------- */
/* line 150, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-divider {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* line 154, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-section-label {
  position: relative;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  /* Brand dot before label */
}

/* line 162, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-section-label::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff0074;
  box-shadow: 0 0 6px rgba(255, 0, 116, 0.65);
  margin-right: 8px;
  vertical-align: middle;
}

/* -----------------------------------------------------------------
   LANGUAGE SELECTOR (sidebar variant)
   ----------------------------------------------------------------- */
/* line 179, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-section .language-selector-btn,
.sidebar-nav > .language-selector-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

/* line 184, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-section .language-selector-btn:hover,
.sidebar-nav > .language-selector-btn:hover {
  background: rgba(255, 0, 116, 0.06) !important;
}

/* -----------------------------------------------------------------
   SPECIAL CTAs · sidebar (Become Creator, Login)
   ----------------------------------------------------------------- */
/* line 193, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  /* Reset hover left line · CTA usa background completo */
}

/* line 205, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-cta::before {
  display: none;
}

/* line 207, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 217, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-cta:hover {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 0, 116, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 223, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-cta:hover::after {
  transform: translateX(220%);
}

/* line 227, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-login {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* line 233, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-login::before {
  display: none;
}

/* line 235, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-nav-item.sidebar-login:hover {
  background: rgba(255, 0, 116, 0.08) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  color: #fff !important;
}

/* =================================================================
   RIGHT SIDEBAR · widgets
   ================================================================= */
/* Profile widget avatar · brand ring */
/* line 248, app/assets/stylesheets/_components.exo-social-layout.scss */
.profile-widget-avatar {
  border: 2px solid transparent !important;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) border-box !important;
  box-shadow: 0 0 14px -2px rgba(255, 0, 116, 0.45);
}

/* line 256, app/assets/stylesheets/_components.exo-social-layout.scss */
.profile-widget-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}

/* line 262, app/assets/stylesheets/_components.exo-social-layout.scss */
.profile-widget-username {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}

/* Suggestions section */
/* line 270, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestions-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* line 281, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestions-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff0074;
  box-shadow: 0 0 6px rgba(255, 0, 116, 0.65);
}

/* line 292, app/assets/stylesheets/_components.exo-social-layout.scss */
.see-all-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: #ff3d9a !important;
  transition: color 0.2s !important;
}

/* line 301, app/assets/stylesheets/_components.exo-social-layout.scss */
.see-all-btn:hover {
  color: #ff0074 !important;
}

/* line 304, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestion-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* line 310, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestion-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 317, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestion-follow-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: #ff0074 !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}

/* line 326, app/assets/stylesheets/_components.exo-social-layout.scss */
.suggestion-follow-btn:hover {
  color: #ff3d9a !important;
  text-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* -----------------------------------------------------------------
   SIDEBAR FOOTER · links
   ----------------------------------------------------------------- */
/* line 336, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-footer {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 341, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-footer-link {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.2s !important;
}

/* line 345, app/assets/stylesheets/_components.exo-social-layout.scss */
.sidebar-footer-link:hover {
  color: #ff3d9a !important;
  text-decoration: none;
}

/* =================================================================
   LANGUAGE SELECTOR (standalone, no sidebar)
   ================================================================= */
/* line 356, app/assets/stylesheets/_components.exo-social-layout.scss */
.language-selector-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}

/* line 361, app/assets/stylesheets/_components.exo-social-layout.scss */
.language-selector-btn:hover {
  background: rgba(255, 0, 116, 0.06) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* =================================================================
   CONTENT PROTECTION TOAST · brand polish
   ================================================================= */
/* line 372, app/assets/stylesheets/_components.exo-social-layout.scss */
.content-protection-toast {
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.95), rgba(10, 10, 10, 0.95)) !important;
  border: 1px solid rgba(255, 0, 116, 0.35) !important;
  border-radius: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 0 0 24px -8px rgba(255, 0, 116, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* line 386, app/assets/stylesheets/_components.exo-social-layout.scss */
.content-protection-toast svg {
  color: #ff0074 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.55));
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · STATIC FOOTER OVERRIDE (landing + static pages)
   -----------------------------------------------------------------
   Footer del layout static.html.erb (.static-footer-*).
   Override CONSERVADOR · NO toca:
   - Layout (display grid 2fr 1fr 1fr 1fr, gap 48px, max-width)
   - Breakpoints existentes
   - Logo image dimensions
   Solo agrega motion noir cinematic + brand polish:
   - Brand line top shimmer animado
   - Background con orb brand flotante decorativo
   - Logo breath animation
   - Stagger reveal columns al cargar
   - Links underline slide brand al hover
   - Title hover gradient text
   - Bottom dot pulse + social icons brand glow
   - Respeta prefers-reduced-motion
   ================================================================= */
/* =================================================================
   FOOTER WRAPPER · brand bg + shimmer + orb
   ================================================================= */
/* line 25, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer {
  position: relative !important;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 40% at 0% 100%, rgba(255, 0, 116, 0.06), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 0%, rgba(176, 0, 255, 0.04), transparent 55%), rgba(10, 10, 10, 0.55) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  /* Brand shimmer line top */
  /* Orb brand flotante decorative */
}

/* line 35, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.55) 30%, rgba(176, 0, 255, 0.65) 50%, rgba(255, 0, 116, 0.55) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: exo-footer-shimmer 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* line 55, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.15) 0%, rgba(176, 0, 255, 0.08) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(50px);
  animation: exo-footer-orb-float 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes exo-footer-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes exo-footer-orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.95;
  }
  33% {
    transform: translate(-25px, -35px) scale(1.06);
    opacity: 0.8;
  }
  66% {
    transform: translate(20px, -18px) scale(0.94);
    opacity: 0.9;
  }
}

/* Content above decorative layers */
/* line 97, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-content {
  position: relative;
  z-index: 1;
}

/* =================================================================
   GRID · stagger reveal
   ================================================================= */
/* line 107, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > * {
  opacity: 0;
  transform: translateY(20px);
  animation: exo-footer-col-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* line 113, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > *:nth-child(1) {
  animation-delay: 0.0s;
}

/* line 114, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > *:nth-child(2) {
  animation-delay: 0.12s;
}

/* line 115, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > *:nth-child(3) {
  animation-delay: 0.24s;
}

/* line 116, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > *:nth-child(4) {
  animation-delay: 0.36s;
}

@keyframes exo-footer-col-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------
   BRAND LOGO · breath animation
   ----------------------------------------------------------------- */
/* line 129, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-logo {
  display: inline-block !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* line 133, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-logo img {
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.4)) drop-shadow(0 0 32px rgba(176, 0, 255, 0.2)) !important;
  animation: exo-footer-logo-breath 4s ease-in-out infinite;
}

/* line 140, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-logo:hover {
  transform: scale(1.05);
}

/* line 143, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-logo:hover img {
  filter: drop-shadow(0 0 24px rgba(255, 0, 116, 0.65)) drop-shadow(0 0 48px rgba(176, 0, 255, 0.4)) !important;
}

@keyframes exo-footer-logo-breath {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.4)) drop-shadow(0 0 32px rgba(176, 0, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(255, 0, 116, 0.6)) drop-shadow(0 0 52px rgba(176, 0, 255, 0.35));
  }
}

/* Brand description · refined typography */
/* line 166, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-desc {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.7 !important;
}

/* =================================================================
   COLUMN TITLES · gradient text shift al hover
   ================================================================= */
/* line 177, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > div {
  position: relative;
}

/* line 181, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
  -webkit-background-clip: text;
  background-clip: text;
  /* Brand dot before title */
}

/* line 197, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 0, 116, 0.65);
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.65);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0;
}

/* Hover en la columna (NOT en el title directo, para que afecte cuando hover en links) */
/* line 214, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > div:hover .static-footer-title {
  background: linear-gradient(135deg, #ff0074, #b000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* line 221, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-grid > div:hover .static-footer-title::before {
  background: #ff0074;
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.85), 0 0 24px rgba(176, 0, 255, 0.55);
}

/* =================================================================
   LINKS · underline brand slide-in al hover
   ================================================================= */
/* line 236, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* line 242, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links li {
  position: relative;
}

/* line 246, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links a {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 2px 0 !important;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Underline brand slide-in */
}

/* line 257, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #ff0074, #b000ff);
  box-shadow: 0 0 6px rgba(255, 0, 116, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 272, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links a:hover {
  color: #ff3d9a !important;
}

/* line 275, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-links a:hover::after {
  transform: scaleX(1);
}

/* =================================================================
   BOTTOM ROW · dot pulse + social icons brand
   ================================================================= */
/* line 286, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  opacity: 0;
  animation: exo-footer-col-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* line 294, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-legal {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Dot pulse brand antes del copyright */
}

/* line 307, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-legal::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074, #b000ff);
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
  animation: exo-footer-bottom-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes exo-footer-bottom-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 0, 116, 0.55);
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    box-shadow: 0 0 16px rgba(255, 0, 116, 0.85), 0 0 24px rgba(176, 0, 255, 0.45);
    transform: scale(1.2);
  }
}

/* -----------------------------------------------------------------
   SOCIAL ICONS · brand glass + hover rotate + brand glow
   ----------------------------------------------------------------- */
/* line 340, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social {
  gap: 10px !important;
}

/* line 344, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  width: 38px !important;
  height: 38px !important;
  position: relative;
  overflow: hidden;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Sheen sweep brand */
}

/* line 361, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 0, 116, 0.3), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 373, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a svg {
  position: relative;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* line 379, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a:hover {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18), rgba(176, 0, 255, 0.12)) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 116, 0.3), 0 0 24px -6px rgba(176, 0, 255, 0.4) !important;
}

/* line 388, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a:hover::before {
  transform: translateX(220%);
}

/* line 392, app/assets/stylesheets/_components.exo-landing-footer.scss */
.static-footer-social a:hover svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.65));
}

/* =================================================================
   ACCESSIBILITY · respeta reduced motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* line 406, app/assets/stylesheets/_components.exo-landing-footer.scss */
  .static-footer::before, .static-footer::after {
    animation: none !important;
  }
  /* line 410, app/assets/stylesheets/_components.exo-landing-footer.scss */
  .static-footer-grid > *,
.static-footer-bottom {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* line 417, app/assets/stylesheets/_components.exo-landing-footer.scss */
  .static-footer-logo img,
.static-footer-legal::before {
    animation: none !important;
  }
}

/* =================================================================
   MOBILE TWEAKS
   ================================================================= */
@media (max-width: 768px) {
  /* line 429, app/assets/stylesheets/_components.exo-landing-footer.scss */
  .static-footer::after {
    bottom: -180px;
    right: -180px;
    width: 320px;
    height: 320px;
  }
  /* line 436, app/assets/stylesheets/_components.exo-landing-footer.scss */
  .static-footer-bottom {
    text-align: left !important;
    align-items: flex-start !important;
  }
}
/* ========================================
   MESSAGES - Estilo Instagram/WhatsApp
   ======================================== */
/* line 5, app/assets/stylesheets/messages.scss */
.messages-page {
  background-color: #000;
  min-height: 100vh;
}

/* line 11, app/assets/stylesheets/messages.scss */
.messages-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 17, app/assets/stylesheets/messages.scss */
.messages-title {
  color: #f5f5f5;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* line 24, app/assets/stylesheets/messages.scss */
.messages-subtitle {
  color: #8e8e8e;
  font-size: 14px;
  font-weight: 400;
}

/* line 31, app/assets/stylesheets/messages.scss */
.conversations-container {
  background: #1a1a1a;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* line 39, app/assets/stylesheets/messages.scss */
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

/* line 50, app/assets/stylesheets/messages.scss */
.conversation-item:last-child {
  border-bottom: none;
}

/* line 54, app/assets/stylesheets/messages.scss */
.conversation-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 58, app/assets/stylesheets/messages.scss */
.conversation-item.unread {
  background: rgba(255, 64, 129, 0.03);
}

/* line 61, app/assets/stylesheets/messages.scss */
.conversation-item.unread .conversation-name {
  font-weight: 700;
}

/* line 65, app/assets/stylesheets/messages.scss */
.conversation-item.unread .message-preview {
  font-weight: 600;
  color: #f5f5f5;
}

/* line 73, app/assets/stylesheets/messages.scss */
.conversation-avatar {
  position: relative;
  flex-shrink: 0;
}

/* line 77, app/assets/stylesheets/messages.scss */
.conversation-avatar .avatar-img,
.conversation-avatar .avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 85, app/assets/stylesheets/messages.scss */
.conversation-avatar .avatar-placeholder {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: white;
}

/* line 97, app/assets/stylesheets/messages.scss */
.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #28a745;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

/* line 110, app/assets/stylesheets/messages.scss */
.conversation-info {
  flex: 1;
  min-width: 0;
}

/* line 115, app/assets/stylesheets/messages.scss */
.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

/* line 122, app/assets/stylesheets/messages.scss */
.conversation-name {
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding-right: 12px;
}

/* line 134, app/assets/stylesheets/messages.scss */
.conversation-time {
  color: #8e8e8e;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* line 144, app/assets/stylesheets/messages.scss */
.conversation-preview .message-preview {
  color: #8e8e8e;
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 155, app/assets/stylesheets/messages.scss */
.conversation-preview .message-preview svg {
  flex-shrink: 0;
}

/* line 159, app/assets/stylesheets/messages.scss */
.conversation-preview .message-preview.empty {
  font-style: italic;
  opacity: 0.7;
}

/* line 165, app/assets/stylesheets/messages.scss */
.conversation-preview .you-label {
  font-weight: 600;
  color: #8e8e8e;
}

/* line 172, app/assets/stylesheets/messages.scss */
.unread-badge {
  background: #ff4081;
  color: white;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.4);
}

/* line 189, app/assets/stylesheets/messages.scss */
.messages-empty-state {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(220, 53, 69, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  padding: 80px 40px;
  text-align: center;
  margin: 40px 0;
}

/* line 198, app/assets/stylesheets/messages.scss */
.empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 209, app/assets/stylesheets/messages.scss */
.empty-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

/* line 216, app/assets/stylesheets/messages.scss */
.empty-title {
  color: #f5f5f5;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* line 223, app/assets/stylesheets/messages.scss */
.empty-message {
  color: #a78bfa;
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* line 230, app/assets/stylesheets/messages.scss */
.btn-explore {
  display: inline-block;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 241, app/assets/stylesheets/messages.scss */
.btn-explore:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
  color: white;
}

/* line 247, app/assets/stylesheets/messages.scss */
.btn-explore:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  /* line 254, app/assets/stylesheets/messages.scss */
  .messages-title {
    font-size: 20px;
  }
  /* line 258, app/assets/stylesheets/messages.scss */
  .conversation-item {
    padding: 12px;
  }
  /* line 263, app/assets/stylesheets/messages.scss */
  .conversation-avatar .avatar-img,
.conversation-avatar .avatar-placeholder {
    width: 48px;
    height: 48px;
  }
  /* line 269, app/assets/stylesheets/messages.scss */
  .conversation-avatar .avatar-placeholder {
    font-size: 18px;
  }
  /* line 274, app/assets/stylesheets/messages.scss */
  .online-indicator {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
  /* line 280, app/assets/stylesheets/messages.scss */
  .conversation-name {
    font-size: 14px;
  }
  /* line 284, app/assets/stylesheets/messages.scss */
  .conversation-time {
    font-size: 11px;
  }
  /* line 288, app/assets/stylesheets/messages.scss */
  .message-preview {
    font-size: 13px;
  }
  /* line 292, app/assets/stylesheets/messages.scss */
  .messages-empty-state {
    padding: 60px 24px;
  }
  /* line 296, app/assets/stylesheets/messages.scss */
  .empty-icon {
    width: 64px;
    height: 64px;
  }
  /* line 300, app/assets/stylesheets/messages.scss */
  .empty-icon svg {
    width: 32px;
    height: 32px;
  }
  /* line 306, app/assets/stylesheets/messages.scss */
  .empty-title {
    font-size: 20px;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* line 323, app/assets/stylesheets/messages.scss */
.conversation-item {
  animation: slideIn 0.3s ease;
}

/* line 329, app/assets/stylesheets/messages.scss */
.conversation-avatar .avatar-img,
.conversation-avatar .avatar-placeholder {
  transition: transform 0.2s ease;
}

/* line 337, app/assets/stylesheets/messages.scss */
.conversation-item:hover .conversation-avatar .avatar-img,
.conversation-item:hover .conversation-avatar .avatar-placeholder {
  transform: scale(1.05);
}
/* ========================================
   NOTIFICATIONS PAGE - Estilo Instagram
   ======================================== */
/* line 5, app/assets/stylesheets/notifications_page.scss */
.notifications-page {
  background-color: #000;
  min-height: auto;
}

/* line 11, app/assets/stylesheets/notifications_page.scss */
.notifications-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 20, app/assets/stylesheets/notifications_page.scss */
.notifications-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

/* line 27, app/assets/stylesheets/notifications_page.scss */
.header-actions {
  display: flex;
  gap: 10px;
}

/* line 32, app/assets/stylesheets/notifications_page.scss */
.mark-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 64, 129, 0.1);
  border: none;
  border-radius: 8px;
  color: #ff4081;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 47, app/assets/stylesheets/notifications_page.scss */
.mark-all-btn svg {
  width: 16px;
  height: 16px;
}

/* line 52, app/assets/stylesheets/notifications_page.scss */
.mark-all-btn:hover {
  background: rgba(255, 64, 129, 0.2);
}

/* line 58, app/assets/stylesheets/notifications_page.scss */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 65, app/assets/stylesheets/notifications_page.scss */
.notification-item {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

/* line 77, app/assets/stylesheets/notifications_page.scss */
.notification-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* line 83, app/assets/stylesheets/notifications_page.scss */
.notification-item.unread {
  background: rgba(255, 64, 129, 0.05);
  border-left: 4px solid;
  border-left-color: #ff4081;
}

/* line 88, app/assets/stylesheets/notifications_page.scss */
.notification-item.unread .notification-title {
  font-weight: 700;
}

/* line 94, app/assets/stylesheets/notifications_page.scss */
.notification-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

/* line 105, app/assets/stylesheets/notifications_page.scss */
.notification-icon.notification-success {
  background: rgba(40, 167, 69, 0.1);
}

/* line 109, app/assets/stylesheets/notifications_page.scss */
.notification-icon.notification-danger {
  background: rgba(220, 53, 69, 0.1);
}

/* line 113, app/assets/stylesheets/notifications_page.scss */
.notification-icon.notification-primary {
  background: rgba(255, 64, 129, 0.1);
}

/* line 117, app/assets/stylesheets/notifications_page.scss */
.notification-icon.notification-warning {
  background: rgba(255, 193, 7, 0.1);
}

/* line 121, app/assets/stylesheets/notifications_page.scss */
.notification-icon.notification-info {
  background: rgba(23, 162, 184, 0.1);
}

/* line 126, app/assets/stylesheets/notifications_page.scss */
.notification-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* line 132, app/assets/stylesheets/notifications_page.scss */
.notification-title {
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.4;
}

/* line 140, app/assets/stylesheets/notifications_page.scss */
.notification-message {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 149, app/assets/stylesheets/notifications_page.scss */
.notification-preview {
  color: #666;
  font-size: 13px;
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 160, app/assets/stylesheets/notifications_page.scss */
.notification-time {
  color: #666;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 167, app/assets/stylesheets/notifications_page.scss */
.notification-time svg {
  width: 12px;
  height: 12px;
}

/* line 173, app/assets/stylesheets/notifications_page.scss */
.notification-actions {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* line 179, app/assets/stylesheets/notifications_page.scss */
.mark-read-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
}

/* line 191, app/assets/stylesheets/notifications_page.scss */
.mark-read-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* line 197, app/assets/stylesheets/notifications_page.scss */
.notification-item:hover .mark-read-btn {
  opacity: 1;
}

/* line 202, app/assets/stylesheets/notifications_page.scss */
.empty-notifications {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(220, 53, 69, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  text-align: center;
  padding: 80px 40px;
  margin: 40px 0;
}

/* line 211, app/assets/stylesheets/notifications_page.scss */
.empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 224, app/assets/stylesheets/notifications_page.scss */
.empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 12px;
}

/* line 231, app/assets/stylesheets/notifications_page.scss */
.empty-message {
  color: #a78bfa;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  /* line 239, app/assets/stylesheets/notifications_page.scss */
  .notifications-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    min-height: auto;
    overflow: visible;
    min-width: 0;
  }
  /* line 247, app/assets/stylesheets/notifications_page.scss */
  .notifications-page ~ .right-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  /* line 253, app/assets/stylesheets/notifications_page.scss */
  .notifications-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* line 259, app/assets/stylesheets/notifications_page.scss */
  .notifications-page-title {
    font-size: 20px;
  }
  /* line 263, app/assets/stylesheets/notifications_page.scss */
  .notification-item {
    padding: 12px;
    gap: 12px;
  }
  /* line 268, app/assets/stylesheets/notifications_page.scss */
  .notification-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  /* line 274, app/assets/stylesheets/notifications_page.scss */
  .notification-title {
    font-size: 14px;
  }
  /* line 278, app/assets/stylesheets/notifications_page.scss */
  .notification-message {
    font-size: 13px;
  }
  /* line 282, app/assets/stylesheets/notifications_page.scss */
  .notification-preview {
    font-size: 12px;
  }
  /* line 286, app/assets/stylesheets/notifications_page.scss */
  .mark-read-btn {
    opacity: 1;
  }
  /* line 290, app/assets/stylesheets/notifications_page.scss */
  .empty-notifications {
    padding: 60px 24px;
  }
  /* line 294, app/assets/stylesheets/notifications_page.scss */
  .empty-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }
  /* line 300, app/assets/stylesheets/notifications_page.scss */
  .empty-title {
    font-size: 20px;
  }
  /* line 304, app/assets/stylesheets/notifications_page.scss */
  .pagination-container {
    padding-bottom: 20px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · NOTIFICATIONS OVERRIDE (/notifications)
   -----------------------------------------------------------------
   Override visual de la página de notificaciones del fan + creator.
   Mantiene los selectores legacy de notifications.scss,
   notifications_page.scss y notifications_modal.scss.

   Cero cambios al HTML/ERB · controllers, mark-as-read flow,
   ActionCable real-time intactos.

   Carga DESPUÉS de notifications* en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page {
  background: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER (title + actions)
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
  /* Línea brand sutil */
}

/* line 38, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.35) 0%, transparent 100%);
}

/* line 49, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Si tiene icono SVG/i adelante, le damos brand */
}

/* line 62, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-title i, .notifications-page-title svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* Scoped a .notifications-page-header para no contaminar otras
   `.header-actions` (header global, creator_live_streams, etc) */
/* line 70, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-header .header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* Mark all as read button */
}

/* line 77, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-header .header-actions > button,
.notifications-page-header .header-actions > a,
.notifications-page-header .header-actions > form button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 99, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page-header .header-actions > button:hover,
.notifications-page-header .header-actions > a:hover,
.notifications-page-header .header-actions > form button:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
}

/* -----------------------------------------------------------------
   NOTIFICATIONS LIST
   -----------------------------------------------------------------
   El legacy notifications.scss aplica max-height:360px+overflow-y:auto
   a `.notifications-list` (pensado para el dropdown popup del header).
   En la página completa esa restricción esconde notifs · la quitamos. */
/* line 114, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .notifications-list,
.notifications-list#notifications {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  overflow: visible !important;
  max-height: none !important;
  isolation: isolate;
  display: block !important;
}

/* -----------------------------------------------------------------
   NOTIFICATION ITEM
   ----------------------------------------------------------------- */
/* line 129, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: transparent !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  cursor: pointer;
  position: relative;
}

/* line 141, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item:last-child {
  border-bottom: none !important;
}

/* line 145, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

/* line 149, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item:active {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: scale(0.998);
  transition-duration: 100ms !important;
}

/* Unread state · tinte brand sutil + border-left magenta como única señal.
   Removed: dot indicator (redundante con border-left + botón ✓ a la derecha). */
/* line 158, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item.unread {
  background: linear-gradient(95deg, rgba(255, 0, 116, 0.06) 0%, transparent 60%) !important;
  box-shadow: inset 3px 0 0 #ff0074 !important;
}

/* line 162, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item.unread:hover {
  background: linear-gradient(95deg, rgba(255, 0, 116, 0.1) 0%, rgba(255, 255, 255, 0.02) 60%) !important;
}

/* -----------------------------------------------------------------
   NOTIFICATION ICON · variantes por categoría
   ----------------------------------------------------------------- */
/* line 171, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon {
  display: grid !important;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  border-radius: 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  color: #ff3d9a !important;
  font-size: 18px !important;
  /* Variantes por color (notification.color del backend) */
}

/* line 183, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon i, .notification-icon svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 191, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-pink, .notification-icon.notification-magenta {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.2) !important;
  color: #ff3d9a !important;
}

/* line 197, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-pink i, .notification-icon.notification-pink svg, .notification-icon.notification-magenta i, .notification-icon.notification-magenta svg {
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 200, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-purple, .notification-icon.notification-violet {
  background: rgba(180, 0, 255, 0.1) !important;
  border-color: rgba(180, 0, 255, 0.22) !important;
  color: #c673ff !important;
}

/* line 206, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-purple i, .notification-icon.notification-purple svg, .notification-icon.notification-violet i, .notification-icon.notification-violet svg {
  filter: drop-shadow(0 0 4px rgba(180, 0, 255, 0.4));
}

/* line 209, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-green, .notification-icon.notification-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
  color: #4ade80 !important;
}

/* line 215, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-green i, .notification-icon.notification-green svg, .notification-icon.notification-success i, .notification-icon.notification-success svg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* line 218, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-blue, .notification-icon.notification-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
  color: #60a5fa !important;
}

/* line 224, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-blue i, .notification-icon.notification-blue svg, .notification-icon.notification-info i, .notification-icon.notification-info svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* line 227, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-amber, .notification-icon.notification-yellow, .notification-icon.notification-warning {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.22) !important;
  color: #fbbf24 !important;
}

/* line 234, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-amber i, .notification-icon.notification-amber svg, .notification-icon.notification-yellow i, .notification-icon.notification-yellow svg, .notification-icon.notification-warning i, .notification-icon.notification-warning svg {
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.4));
}

/* line 237, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-red, .notification-icon.notification-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
  color: #f87171 !important;
}

/* line 243, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-icon.notification-red i, .notification-icon.notification-red svg, .notification-icon.notification-danger i, .notification-icon.notification-danger svg {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
}

/* -----------------------------------------------------------------
   NOTIFICATION CONTENT (title + message + time)
   ----------------------------------------------------------------- */
/* line 251, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-content {
  flex: 1;
  min-width: 0;
}

/* line 256, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
}

/* line 266, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item.unread .notification-title {
  color: #fff !important;
}

/* line 270, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-message,
.notification-preview {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
  /* Truncar a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 286, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-item.unread .notification-message,
.notification-item.unread .notification-preview {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* line 291, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-time {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}

/* -----------------------------------------------------------------
   NOTIFICATION ACTIONS (mark as read button)
   ----------------------------------------------------------------- */
/* line 302, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-actions {
  flex-shrink: 0;
  align-self: center;
}

/* line 306, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-actions > form {
  margin: 0;
}

/* line 308, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-actions .mark-read-btn {
  display: grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 326, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-actions .mark-read-btn:hover {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
  transform: scale(1.08);
}

/* line 333, app/assets/stylesheets/_components.exo-notifications.scss */
.notification-actions .mark-read-btn:active {
  transform: scale(0.92);
  transition-duration: 100ms !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 344, app/assets/stylesheets/_components.exo-notifications.scss */
.empty-notifications {
  text-align: center;
  padding: 64px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
}

/* line 352, app/assets/stylesheets/_components.exo-notifications.scss */
.empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.25) !important;
  border-radius: 18px !important;
  color: #ff3d9a !important;
  font-size: 32px !important;
}

/* line 364, app/assets/stylesheets/_components.exo-notifications.scss */
.empty-icon i, .empty-icon svg {
  width: 32px;
  height: 32px;
  font-size: 32px;
  filter: drop-shadow(0 0 12px rgba(255, 0, 116, 0.45));
}

/* line 372, app/assets/stylesheets/_components.exo-notifications.scss */
.empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 8px !important;
}

/* line 381, app/assets/stylesheets/_components.exo-notifications.scss */
.empty-message {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------------
   PAGINATION (notifications page)
   ----------------------------------------------------------------- */
/* line 396, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagination-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  margin-top: 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* line 408, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* line 420, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagination-info {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-align: center;
}

/* Pagy items · sobrescribe legacy padding/sizing */
/* line 429, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagination-wrapper a,
.notifications-page .pagination-wrapper span,
.notifications-page nav.pagy-nav a,
.notifications-page nav.pagy-nav span,
.notifications-page nav.pagy a,
.notifications-page nav.pagy span,
.notifications-page .pagy-nav a,
.notifications-page .pagy-nav span,
.notifications-page .pagy a,
.notifications-page .pagy span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 464, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagination-wrapper a:hover,
.notifications-page .pagy-nav a:hover,
.notifications-page .pagy a:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
  transform: translateY(-1px);
}

/* line 473, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagy-nav .current,
.notifications-page .pagination-wrapper .current,
.notifications-page .pagy .current,
.notifications-page .pagination-wrapper a.current,
.notifications-page .pagination-wrapper span.current {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35) !important;
}

/* line 484, app/assets/stylesheets/_components.exo-notifications.scss */
.notifications-page .pagy-nav .disabled,
.notifications-page .pagination-wrapper .disabled,
.notifications-page .pagy .disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* Page wrapper · padding-bottom para bottom nav fijo (~80px) +
     padding-top para no chocar con header sticky.
     `<main class="main-feed notifications-page">` es el mismo elemento. */
  /* line 500, app/assets/stylesheets/_components.exo-notifications.scss */
  main.main-feed.notifications-page,
.notifications-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* Header en columna · alineado a la izquierda (legacy intent).
     Sin el flex-start, mi `align-items: center` del base + el column del
     legacy mobile centra todo horizontalmente — feo en mobile. */
  /* line 510, app/assets/stylesheets/_components.exo-notifications.scss */
  .notifications-page-header {
    align-items: flex-start !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  /* line 517, app/assets/stylesheets/_components.exo-notifications.scss */
  .notifications-page-title {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
  /* line 522, app/assets/stylesheets/_components.exo-notifications.scss */
  .notifications-page-header .header-actions > button,
.notifications-page-header .header-actions > a,
.notifications-page-header .header-actions > form button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  /* List */
  /* line 531, app/assets/stylesheets/_components.exo-notifications.scss */
  .notifications-list {
    border-radius: 14px !important;
  }
  /* line 535, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-item {
    padding: 14px !important;
    gap: 12px;
  }
  /* line 540, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  /* line 545, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-icon i, .notification-icon svg {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
  }
  /* line 548, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-title {
    font-size: 13.5px !important;
  }
  /* line 552, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-message,
.notification-preview {
    font-size: 13px !important;
  }
  /* line 557, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-time {
    font-size: 10.5px !important;
  }
  /* Mark as read button más pequeño */
  /* line 562, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-actions {
    margin-right: 0;
  }
  /* line 565, app/assets/stylesheets/_components.exo-notifications.scss */
  .notification-actions .mark-read-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  /* Empty state */
  /* line 573, app/assets/stylesheets/_components.exo-notifications.scss */
  .empty-notifications {
    padding: 48px 20px !important;
    border-radius: 14px !important;
  }
  /* line 578, app/assets/stylesheets/_components.exo-notifications.scss */
  .empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px !important;
  }
  /* line 583, app/assets/stylesheets/_components.exo-notifications.scss */
  .empty-icon i, .empty-icon svg {
    width: 26px;
    height: 26px;
    font-size: 26px;
  }
  /* line 586, app/assets/stylesheets/_components.exo-notifications.scss */
  .empty-title {
    font-size: 18px !important;
  }
  /* Pagination más compacta */
  /* line 591, app/assets/stylesheets/_components.exo-notifications.scss */
  .pagination-container,
.pagination-wrapper {
    padding: 14px 16px;
    flex-direction: column;
    gap: 12px;
  }
  /* line 598, app/assets/stylesheets/_components.exo-notifications.scss */
  .pagination-container .pagy-nav a, .pagination-container .pagy-nav span,
.pagination-wrapper .pagy-nav a,
.pagination-wrapper .pagy-nav span {
    min-width: 32px;
    height: 32px;
    font-size: 12px !important;
  }
  /* line 606, app/assets/stylesheets/_components.exo-notifications.scss */
  .pagination-info {
    font-size: 11px !important;
  }
}
@charset "UTF-8";
/* ========================================
   SETTINGS PAGE — Unified Design System
   ======================================== */
/* line 5, app/assets/stylesheets/settings.scss */
.settings-page {
  background-color: #000;
  min-height: 100vh;
}

/* ---- Page Header ---- */
/* line 12, app/assets/stylesheets/settings.scss */
.stg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding: 24px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

/* line 24, app/assets/stylesheets/settings.scss */
.stg-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.3), transparent);
}

/* line 35, app/assets/stylesheets/settings.scss */
.stg-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.15);
  flex-shrink: 0;
}

/* line 46, app/assets/stylesheets/settings.scss */
.stg-header__icon svg {
  color: #ff0074;
}

/* line 51, app/assets/stylesheets/settings.scss */
.stg-header__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 2px;
  letter-spacing: -0.02em;
}

/* line 60, app/assets/stylesheets/settings.scss */
.stg-header__subtitle {
  font-family: 'Rubik', sans-serif;
  color: #8e8e8e;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

/* ---- Alert Banners ---- */
/* line 70, app/assets/stylesheets/settings.scss */
.stg-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* line 81, app/assets/stylesheets/settings.scss */
.stg-alert > svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* line 86, app/assets/stylesheets/settings.scss */
.stg-alert strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* line 92, app/assets/stylesheets/settings.scss */
.stg-alert p {
  margin: 0;
}

/* line 96, app/assets/stylesheets/settings.scss */
.stg-alert--success {
  background: rgba(40, 167, 69, 0.08);
  border: 1px solid rgba(40, 167, 69, 0.2);
  color: #28a745;
}

/* line 101, app/assets/stylesheets/settings.scss */
.stg-alert--success svg {
  color: #28a745;
}

/* line 102, app/assets/stylesheets/settings.scss */
.stg-alert--success p {
  color: #28a745;
  font-weight: 500;
}

/* line 105, app/assets/stylesheets/settings.scss */
.stg-alert--error {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

/* line 110, app/assets/stylesheets/settings.scss */
.stg-alert--error svg {
  color: #dc3545;
}

/* line 111, app/assets/stylesheets/settings.scss */
.stg-alert--error strong {
  color: #dc3545;
}

/* line 114, app/assets/stylesheets/settings.scss */
.stg-alert--warning {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

/* line 119, app/assets/stylesheets/settings.scss */
.stg-alert--warning svg {
  color: #ffc107;
}

/* line 120, app/assets/stylesheets/settings.scss */
.stg-alert--warning strong {
  color: #ffc107;
}

/* line 121, app/assets/stylesheets/settings.scss */
.stg-alert--warning p {
  color: #ccc;
}

/* line 124, app/assets/stylesheets/settings.scss */
.stg-alert__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

/* line 129, app/assets/stylesheets/settings.scss */
.stg-alert__list li {
  font-size: 13px;
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}

/* line 135, app/assets/stylesheets/settings.scss */
.stg-alert__list li::before {
  content: '\2022';
  position: absolute;
  left: 4px;
}

/* ---- Card Sections ---- */
/* line 146, app/assets/stylesheets/settings.scss */
.stg-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

/* line 154, app/assets/stylesheets/settings.scss */
.stg-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* line 158, app/assets/stylesheets/settings.scss */
.stg-card--danger {
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.15);
}

/* line 162, app/assets/stylesheets/settings.scss */
.stg-card--danger:hover {
  border-color: rgba(220, 53, 69, 0.25);
}

/* line 168, app/assets/stylesheets/settings.scss */
.stg-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

/* line 175, app/assets/stylesheets/settings.scss */
.stg-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin-top: 1px;
}

/* line 187, app/assets/stylesheets/settings.scss */
.stg-card__icon svg {
  color: #8e8e8e;
}

/* line 189, app/assets/stylesheets/settings.scss */
.stg-card__icon--accent {
  background: rgba(255, 0, 116, 0.08);
  border-color: rgba(255, 0, 116, 0.12);
}

/* line 193, app/assets/stylesheets/settings.scss */
.stg-card__icon--accent svg {
  color: #ff0074;
}

/* line 196, app/assets/stylesheets/settings.scss */
.stg-card__icon--danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.15);
}

/* line 200, app/assets/stylesheets/settings.scss */
.stg-card__icon--danger svg {
  color: #dc3545;
}

/* line 204, app/assets/stylesheets/settings.scss */
.stg-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}

/* line 212, app/assets/stylesheets/settings.scss */
.stg-card__title--danger {
  color: #dc3545;
}

/* line 217, app/assets/stylesheets/settings.scss */
.stg-card__desc {
  font-family: 'Rubik', sans-serif;
  color: #8e8e8e;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

/* line 225, app/assets/stylesheets/settings.scss */
.stg-card__body-text {
  font-family: 'Rubik', sans-serif;
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* line 233, app/assets/stylesheets/settings.scss */
.stg-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Inline Notices ---- */
/* line 243, app/assets/stylesheets/settings.scss */
.stg-inline-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-family: 'Rubik', sans-serif;
}

/* line 252, app/assets/stylesheets/settings.scss */
.stg-inline-notice > svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 257, app/assets/stylesheets/settings.scss */
.stg-inline-notice strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* line 264, app/assets/stylesheets/settings.scss */
.stg-inline-notice p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* line 270, app/assets/stylesheets/settings.scss */
.stg-inline-notice__muted {
  color: #8e8e8e !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* line 276, app/assets/stylesheets/settings.scss */
.stg-inline-notice--info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 280, app/assets/stylesheets/settings.scss */
.stg-inline-notice--info svg {
  color: #8e8e8e;
}

/* line 281, app/assets/stylesheets/settings.scss */
.stg-inline-notice--info strong {
  color: #ccc;
}

/* line 282, app/assets/stylesheets/settings.scss */
.stg-inline-notice--info span {
  color: #8e8e8e;
  font-size: 13px;
}

/* line 285, app/assets/stylesheets/settings.scss */
.stg-inline-notice--warning {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.15);
}

/* line 289, app/assets/stylesheets/settings.scss */
.stg-inline-notice--warning svg {
  color: #ffc107;
}

/* line 290, app/assets/stylesheets/settings.scss */
.stg-inline-notice--warning strong {
  color: #ffc107;
}

/* line 291, app/assets/stylesheets/settings.scss */
.stg-inline-notice--warning p {
  color: #ccc;
}

/* ---- Form Fields ---- */
/* line 297, app/assets/stylesheets/settings.scss */
.stg-field {
  margin-bottom: 20px;
}

/* line 300, app/assets/stylesheets/settings.scss */
.stg-field:last-child {
  margin-bottom: 0;
}

/* line 305, app/assets/stylesheets/settings.scss */
.stg-field__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* line 311, app/assets/stylesheets/settings.scss */
.stg-field__label-row .stg-field__label {
  margin-bottom: 0;
}

/* line 316, app/assets/stylesheets/settings.scss */
.stg-field__label {
  display: block;
  font-family: 'Rubik', sans-serif;
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* line 324, app/assets/stylesheets/settings.scss */
.stg-field__label--danger {
  color: #ff4d4d;
}

/* line 329, app/assets/stylesheets/settings.scss */
.stg-field__hint {
  display: block;
  font-family: 'Rubik', sans-serif;
  color: #666;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

/* line 337, app/assets/stylesheets/settings.scss */
.stg-field__hint--warning {
  color: #ffc107;
}

/* line 342, app/assets/stylesheets/settings.scss */
.stg-field__input-wrap {
  position: relative;
}

/* line 345, app/assets/stylesheets/settings.scss */
.stg-field__input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #555;
  pointer-events: none;
}

/* line 356, app/assets/stylesheets/settings.scss */
.stg-field__input-wrap .stg-field__input {
  padding-left: 42px;
}

/* line 361, app/assets/stylesheets/settings.scss */
.stg-field__input {
  width: 100%;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* line 373, app/assets/stylesheets/settings.scss */
.stg-field__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.1);
}

/* line 380, app/assets/stylesheets/settings.scss */
.stg-field__input::placeholder {
  color: #555;
}

/* line 384, app/assets/stylesheets/settings.scss */
.stg-field__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Badge ---- */
/* line 392, app/assets/stylesheets/settings.scss */
.stg-badge {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* line 402, app/assets/stylesheets/settings.scss */
.stg-badge--warning {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* ---- Status Indicators ---- */
/* line 410, app/assets/stylesheets/settings.scss */
.stg-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
}

/* line 419, app/assets/stylesheets/settings.scss */
.stg-status--processing {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* line 425, app/assets/stylesheets/settings.scss */
.stg-status--success {
  background: rgba(40, 167, 69, 0.06);
  border: 1px solid rgba(40, 167, 69, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* line 435, app/assets/stylesheets/settings.scss */
.stg-status__spinner {
  animation: stg-spin 1.2s linear infinite;
}

/* line 439, app/assets/stylesheets/settings.scss */
.stg-status__info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 444, app/assets/stylesheets/settings.scss */
.stg-status__info svg {
  color: #28a745;
  flex-shrink: 0;
}

/* line 449, app/assets/stylesheets/settings.scss */
.stg-status__info strong {
  display: block;
  color: #28a745;
  font-size: 14px;
  font-weight: 600;
}

/* line 456, app/assets/stylesheets/settings.scss */
.stg-status__info span {
  display: block;
  color: #8e8e8e;
  font-size: 12px;
}

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

/* ---- Consequences List ---- */
/* line 470, app/assets/stylesheets/settings.scss */
.stg-consequences {
  list-style: none;
  padding: 16px 18px;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 0, 0, 0.04);
  border: 1px solid rgba(255, 0, 0, 0.1);
  border-radius: 10px;
}

/* line 481, app/assets/stylesheets/settings.scss */
.stg-consequences li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
}

/* line 490, app/assets/stylesheets/settings.scss */
.stg-consequences li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ff4d4d;
}

/* line 497, app/assets/stylesheets/settings.scss */
.stg-consequences__warning {
  color: #ffc107 !important;
}

/* line 500, app/assets/stylesheets/settings.scss */
.stg-consequences__warning svg {
  color: #ffc107 !important;
}

/* ---- Buttons ---- */
/* line 508, app/assets/stylesheets/settings.scss */
.stg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

/* line 522, app/assets/stylesheets/settings.scss */
.stg-btn--primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.2);
}

/* line 528, app/assets/stylesheets/settings.scss */
.stg-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35);
}

/* line 533, app/assets/stylesheets/settings.scss */
.stg-btn--primary:active {
  transform: translateY(0);
}

/* line 536, app/assets/stylesheets/settings.scss */
.stg-btn--ghost {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.04);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 542, app/assets/stylesheets/settings.scss */
.stg-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f5f5f5;
}

/* line 549, app/assets/stylesheets/settings.scss */
.stg-btn--danger {
  padding: 12px 24px;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* line 555, app/assets/stylesheets/settings.scss */
.stg-btn--danger:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.35);
}

/* line 561, app/assets/stylesheets/settings.scss */
.stg-btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}

/* line 566, app/assets/stylesheets/settings.scss */
.stg-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  /* line 576, app/assets/stylesheets/settings.scss */
  .stg-header {
    padding: 20px 18px;
    gap: 14px;
  }
  /* line 581, app/assets/stylesheets/settings.scss */
  .stg-header__title {
    font-size: 20px;
  }
  /* line 585, app/assets/stylesheets/settings.scss */
  .stg-card {
    padding: 22px 18px;
    border-radius: 12px;
  }
  /* line 590, app/assets/stylesheets/settings.scss */
  .stg-card__actions {
    flex-direction: column;
  }
  /* line 593, app/assets/stylesheets/settings.scss */
  .stg-card__actions .stg-btn {
    width: 100%;
  }
  /* line 598, app/assets/stylesheets/settings.scss */
  .stg-status--success {
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 602, app/assets/stylesheets/settings.scss */
  .stg-status--success .stg-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* line 609, app/assets/stylesheets/settings.scss */
  .stg-header {
    padding: 16px 14px;
    gap: 12px;
  }
  /* line 614, app/assets/stylesheets/settings.scss */
  .stg-header__icon {
    width: 38px;
    height: 38px;
  }
  /* line 619, app/assets/stylesheets/settings.scss */
  .stg-header__title {
    font-size: 18px;
  }
  /* line 623, app/assets/stylesheets/settings.scss */
  .stg-card {
    padding: 20px 16px;
  }
  /* line 627, app/assets/stylesheets/settings.scss */
  .stg-card__header {
    gap: 12px;
  }
  /* line 631, app/assets/stylesheets/settings.scss */
  .stg-consequences {
    padding: 14px 14px;
  }
}

/* ========================================
   DELETE ACCOUNT MODAL
   ======================================== */
/* line 640, app/assets/stylesheets/settings.scss */
.dam-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 20px;
}

/* line 655, app/assets/stylesheets/settings.scss */
.dam-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* line 659, app/assets/stylesheets/settings.scss */
.dam-overlay.is-visible .dam-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* line 666, app/assets/stylesheets/settings.scss */
.dam-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #141414;
  border: 1px solid rgba(255, 77, 77, 0.2);
  border-radius: 16px;
  padding: 36px 32px 28px;
  text-align: center;
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  overflow: hidden;
}

/* line 681, app/assets/stylesheets/settings.scss */
.dam-glow {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff4d4d, transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.8;
}

/* line 693, app/assets/stylesheets/settings.scss */
.dam-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 77, 77, 0.1);
  border: 1px solid rgba(255, 77, 77, 0.15);
  margin-bottom: 20px;
}

/* line 705, app/assets/stylesheets/settings.scss */
.dam-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

/* line 714, app/assets/stylesheets/settings.scss */
.dam-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #8e8e8e;
  margin: 0 0 28px;
  line-height: 1.55;
}

/* line 722, app/assets/stylesheets/settings.scss */
.dam-confirm-field {
  text-align: left;
  margin-bottom: 24px;
}

/* line 727, app/assets/stylesheets/settings.scss */
.dam-confirm-label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

/* line 734, app/assets/stylesheets/settings.scss */
.dam-confirm-label strong {
  color: #ff4d4d;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* line 741, app/assets/stylesheets/settings.scss */
.dam-confirm-input {
  width: 100%;
  padding: 12px 16px;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* line 755, app/assets/stylesheets/settings.scss */
.dam-confirm-input::placeholder {
  color: #555;
  letter-spacing: 0;
}

/* line 760, app/assets/stylesheets/settings.scss */
.dam-confirm-input:focus {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.12);
}

/* line 766, app/assets/stylesheets/settings.scss */
.dam-actions {
  display: flex;
  gap: 12px;
}

/* line 771, app/assets/stylesheets/settings.scss */
.dam-btn-cancel {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 10px;
  color: #ccc;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* line 784, app/assets/stylesheets/settings.scss */
.dam-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #555;
}

/* line 790, app/assets/stylesheets/settings.scss */
.dam-btn-delete {
  flex: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  color: #555;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.25s ease;
}

/* line 807, app/assets/stylesheets/settings.scss */
.dam-btn-delete .dam-btn-label {
  display: none;
}

/* line 811, app/assets/stylesheets/settings.scss */
.dam-btn-delete .dam-btn-label-disabled {
  display: inline;
  font-weight: 400;
  font-size: 12px;
}

/* line 817, app/assets/stylesheets/settings.scss */
.dam-btn-delete.is-active {
  background: #ff4d4d;
  border-color: #ff4d4d;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 77, 77, 0.3);
}

/* line 824, app/assets/stylesheets/settings.scss */
.dam-btn-delete.is-active .dam-btn-label {
  display: inline;
}

/* line 825, app/assets/stylesheets/settings.scss */
.dam-btn-delete.is-active .dam-btn-label-disabled {
  display: none;
}

/* line 827, app/assets/stylesheets/settings.scss */
.dam-btn-delete.is-active:hover {
  background: #ff3333;
  box-shadow: 0 4px 24px rgba(255, 77, 77, 0.45);
  transform: translateY(-1px);
}

/* line 833, app/assets/stylesheets/settings.scss */
.dam-btn-delete.is-active:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  /* line 840, app/assets/stylesheets/settings.scss */
  .dam-container {
    padding: 28px 20px 22px;
  }
  /* line 844, app/assets/stylesheets/settings.scss */
  .dam-actions {
    flex-direction: column-reverse;
  }
  /* line 848, app/assets/stylesheets/settings.scss */
  .dam-btn-delete,
.dam-btn-cancel {
    flex: none;
  }
}

/* ========================================
   LEGACY GLOBAL CLASSES
   Used by other views (creator, panel, etc.)
   ======================================== */
/* line 859, app/assets/stylesheets/settings.scss */
.form-group {
  margin-bottom: 20px;
}

/* line 861, app/assets/stylesheets/settings.scss */
.form-group:last-child {
  margin-bottom: 0;
}

/* line 864, app/assets/stylesheets/settings.scss */
.form-label {
  display: block;
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* line 872, app/assets/stylesheets/settings.scss */
.form-hint {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

/* line 880, app/assets/stylesheets/settings.scss */
.form-input,
.form-select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f5f5f5;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
}

/* line 892, app/assets/stylesheets/settings.scss */
.form-input:focus,
.form-select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.1);
}

/* line 899, app/assets/stylesheets/settings.scss */
.form-input::placeholder,
.form-select::placeholder {
  color: #666;
}

/* line 900, app/assets/stylesheets/settings.scss */
.form-input:disabled,
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* line 903, app/assets/stylesheets/settings.scss */
.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23f5f5f5' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* line 912, app/assets/stylesheets/settings.scss */
.field-with-icon {
  position: relative;
}

/* line 915, app/assets/stylesheets/settings.scss */
.field-with-icon svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #666;
  pointer-events: none;
}

/* line 926, app/assets/stylesheets/settings.scss */
.field-with-icon .form-input {
  padding-left: 44px;
}

/* line 929, app/assets/stylesheets/settings.scss */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 937, app/assets/stylesheets/settings.scss */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 953, app/assets/stylesheets/settings.scss */
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.4);
}

/* line 958, app/assets/stylesheets/settings.scss */
.btn-primary:active {
  transform: translateY(0);
}

/* line 959, app/assets/stylesheets/settings.scss */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* line 962, app/assets/stylesheets/settings.scss */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 978, app/assets/stylesheets/settings.scss */
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* line 984, app/assets/stylesheets/settings.scss */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 1000, app/assets/stylesheets/settings.scss */
.btn-danger:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.5);
}

/* line 1006, app/assets/stylesheets/settings.scss */
.info-box {
  background: rgba(23, 162, 184, 0.1);
  border: 1px solid rgba(23, 162, 184, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* line 1015, app/assets/stylesheets/settings.scss */
.info-box svg {
  width: 20px;
  height: 20px;
  color: #17a2b8;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 1024, app/assets/stylesheets/settings.scss */
.info-text {
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.5;
}

/* ========================================
   TWO-FACTOR AUTHENTICATION
   ======================================== */
/* line 1034, app/assets/stylesheets/settings.scss */
.tfa-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* line 1042, app/assets/stylesheets/settings.scss */
.tfa-status--enabled {
  background: rgba(40, 167, 69, 0.06);
  border: 1px solid rgba(40, 167, 69, 0.15);
}

/* line 1047, app/assets/stylesheets/settings.scss */
.tfa-status--disabled {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 1052, app/assets/stylesheets/settings.scss */
.tfa-status__icon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* line 1060, app/assets/stylesheets/settings.scss */
.tfa-status--enabled .tfa-status__icon {
  color: #28a745;
}

/* line 1062, app/assets/stylesheets/settings.scss */
.tfa-status--enabled .tfa-status__icon svg {
  color: #28a745;
}

/* line 1065, app/assets/stylesheets/settings.scss */
.tfa-status--disabled .tfa-status__icon {
  color: #8e8e8e;
}

/* line 1067, app/assets/stylesheets/settings.scss */
.tfa-status--disabled .tfa-status__icon svg {
  color: #666;
}

/* line 1071, app/assets/stylesheets/settings.scss */
.tfa-status__date {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
}

/* line 1078, app/assets/stylesheets/settings.scss */
.tfa-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

/* line 1085, app/assets/stylesheets/settings.scss */
.tfa-action-card {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

/* line 1091, app/assets/stylesheets/settings.scss */
.tfa-action-card--danger {
  border-color: rgba(220, 53, 69, 0.15);
  background: rgba(220, 53, 69, 0.03);
}

/* line 1096, app/assets/stylesheets/settings.scss */
.tfa-action-card__title {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 0 0 4px;
}

/* line 1104, app/assets/stylesheets/settings.scss */
.tfa-action-card__desc {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  margin: 0 0 14px;
  line-height: 1.4;
}

/* line 1113, app/assets/stylesheets/settings.scss */
.tfa-inline-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* line 1118, app/assets/stylesheets/settings.scss */
.tfa-inline-form .stg-field {
  flex: 1;
  margin-bottom: 0;
}

/* line 1124, app/assets/stylesheets/settings.scss */
.tfa-back {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Setup Steps */
/* line 1131, app/assets/stylesheets/settings.scss */
.tfa-setup-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

/* line 1137, app/assets/stylesheets/settings.scss */
.tfa-setup-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.2);
  color: #ff0074;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 1155, app/assets/stylesheets/settings.scss */
.tfa-setup-step__content h3 {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 0 0 3px;
}

/* line 1164, app/assets/stylesheets/settings.scss */
.tfa-setup-step__hint {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  margin: 0;
  line-height: 1.4;
}

/* QR Code */
/* line 1174, app/assets/stylesheets/settings.scss */
.tfa-qr-container {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

/* line 1180, app/assets/stylesheets/settings.scss */
.tfa-qr-code {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  display: inline-flex;
}

/* line 1186, app/assets/stylesheets/settings.scss */
.tfa-qr-code svg {
  width: 200px;
  height: 200px;
}

/* Manual Key */
/* line 1193, app/assets/stylesheets/settings.scss */
.tfa-manual-key {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 28px;
}

/* line 1203, app/assets/stylesheets/settings.scss */
.tfa-manual-key code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #f5f5f5;
  letter-spacing: 2px;
  word-break: break-all;
}

/* line 1213, app/assets/stylesheets/settings.scss */
.tfa-copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: #8e8e8e;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 1225, app/assets/stylesheets/settings.scss */
.tfa-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

/* Code Input */
/* line 1232, app/assets/stylesheets/settings.scss */
.tfa-code-input {
  font-family: 'Rubik', sans-serif;
  letter-spacing: 4px;
}

/* line 1236, app/assets/stylesheets/settings.scss */
.tfa-code-input--large {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* line 1250, app/assets/stylesheets/settings.scss */
.tfa-code-input--large:focus {
  outline: none;
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.1);
}

/* line 1256, app/assets/stylesheets/settings.scss */
.tfa-code-input--large::placeholder {
  color: #333;
  letter-spacing: 10px;
}

/* line 1263, app/assets/stylesheets/settings.scss */
.tfa-code-field {
  margin-bottom: 16px;
}

/* line 1267, app/assets/stylesheets/settings.scss */
.tfa-verify-form {
  margin-bottom: 0;
}

/* Backup Codes */
/* line 1272, app/assets/stylesheets/settings.scss */
.tfa-backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

/* line 1279, app/assets/stylesheets/settings.scss */
.tfa-backup-code {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}

/* line 1286, app/assets/stylesheets/settings.scss */
.tfa-backup-code code {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  color: #f5f5f5;
  letter-spacing: 2px;
  font-weight: 600;
}

/* line 1295, app/assets/stylesheets/settings.scss */
.tfa-backup-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

/* Full width button */
/* line 1302, app/assets/stylesheets/settings.scss */
.stg-btn--full {
  width: 100%;
}

@media (max-width: 480px) {
  /* line 1307, app/assets/stylesheets/settings.scss */
  .tfa-backup-codes {
    grid-template-columns: 1fr;
  }
  /* line 1311, app/assets/stylesheets/settings.scss */
  .tfa-inline-form {
    flex-direction: column;
  }
  /* line 1315, app/assets/stylesheets/settings.scss */
  .tfa-backup-actions {
    flex-direction: column;
  }
  /* line 1319, app/assets/stylesheets/settings.scss */
  .tfa-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  /* line 1325, app/assets/stylesheets/settings.scss */
  .tfa-qr-code svg {
    width: 160px;
    height: 160px;
  }
}

/* ========================================
   2FA REMINDER MODAL
   ======================================== */
/* line 1335, app/assets/stylesheets/settings.scss */
.tfa-reminder-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  animation: tfa-reminder-fadein 0.3s ease;
  transition: opacity 0.3s ease;
}

@keyframes tfa-reminder-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* line 1355, app/assets/stylesheets/settings.scss */
.tfa-reminder-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #141414;
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 16px;
  padding: 36px 32px 28px;
  text-align: center;
  animation: tfa-reminder-slidein 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tfa-reminder-slidein {
  from {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* line 1372, app/assets/stylesheets/settings.scss */
.tfa-reminder-glow {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff0074, transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.8;
}

/* line 1384, app/assets/stylesheets/settings.scss */
.tfa-reminder-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 1399, app/assets/stylesheets/settings.scss */
.tfa-reminder-close:hover {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.1);
}

/* line 1405, app/assets/stylesheets/settings.scss */
.tfa-reminder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.15);
  margin-bottom: 20px;
}

/* line 1416, app/assets/stylesheets/settings.scss */
.tfa-reminder-icon svg {
  color: #ff0074;
}

/* line 1419, app/assets/stylesheets/settings.scss */
.tfa-reminder-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

/* line 1428, app/assets/stylesheets/settings.scss */
.tfa-reminder-text {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #8e8e8e;
  margin: 0 0 28px;
  line-height: 1.6;
}

/* line 1436, app/assets/stylesheets/settings.scss */
.tfa-reminder-actions {
  display: flex;
  gap: 12px;
}

/* line 1441, app/assets/stylesheets/settings.scss */
.tfa-reminder-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

/* line 1457, app/assets/stylesheets/settings.scss */
.tfa-reminder-btn--primary {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.2);
}

/* line 1462, app/assets/stylesheets/settings.scss */
.tfa-reminder-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35);
  color: #fff;
}

/* line 1469, app/assets/stylesheets/settings.scss */
.tfa-reminder-btn--ghost {
  background: transparent;
  color: #8e8e8e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1474, app/assets/stylesheets/settings.scss */
.tfa-reminder-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
}

@media (max-width: 480px) {
  /* line 1482, app/assets/stylesheets/settings.scss */
  .tfa-reminder-modal {
    padding: 28px 20px 22px;
  }
  /* line 1486, app/assets/stylesheets/settings.scss */
  .tfa-reminder-actions {
    flex-direction: column;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR SETTINGS OVERRIDE
   -----------------------------------------------------------------
   Override visual de /creator/profile/edit (la vista más extensa
   del lado creador). Mantiene los selectores legacy de
   settings.scss (1489 líneas con 3 sistemas de botones paralelos).

   Cero cambios al HTML/ERB · forms, JS, lógica de update intacta.
   Carga DESPUÉS de settings.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 16, app/assets/stylesheets/_components.exo-creator-settings.scss */
.creator-settings-page {
  background: #0a0a0a !important;
}

/* line 20, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-container {
  background: transparent !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER
   ----------------------------------------------------------------- */
/* line 28, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-page-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 34, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, transparent 100%);
}

/* line 45, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
}

/* line 55, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-page-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 15px !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   SETTINGS NAV (sidebar lateral en desktop / horizontal mobile)
   ----------------------------------------------------------------- */
/* line 66, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  position: sticky;
  top: 90px;
}

/* line 75, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-title {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 8px 12px 10px !important;
}

/* line 85, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 100, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item i, .settings-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}

/* line 108, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* line 112, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item:hover i, .settings-nav-item:hover svg {
  opacity: 1;
}

/* line 115, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item.active {
  background: linear-gradient(95deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #ff0074, 0 0 20px rgba(255, 0, 116, 0.1);
}

/* line 121, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-nav-item.active i, .settings-nav-item.active svg {
  color: #ff3d9a !important;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.5));
}

/* -----------------------------------------------------------------
   SETTINGS SECTIONS (cards de cada sección)
   ----------------------------------------------------------------- */
/* line 133, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* line 144, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section-header {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
}

/* line 150, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 60%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.35) 0%, transparent 100%);
}

/* line 161, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 172, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section-title i, .settings-section-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
  font-size: 22px;
}

/* line 179, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section-subtitle,
.settings-section-desc {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   FORM GROUPS · labels + inputs
   ----------------------------------------------------------------- */
/* line 192, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-form-group {
  margin-bottom: 22px !important;
}

/* line 196, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-form-label {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* line 207, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-form-hint {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* Inputs/textareas/selects dentro de settings */
/* line 216, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section input[type="text"],
.settings-section input[type="email"],
.settings-section input[type="password"],
.settings-section input[type="url"],
.settings-section input[type="tel"],
.settings-section input[type="number"],
.settings-section textarea,
.settings-section select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  padding: 12px 14px !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 236, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section input[type="text"]::placeholder,
.settings-section input[type="email"]::placeholder,
.settings-section input[type="password"]::placeholder,
.settings-section input[type="url"]::placeholder,
.settings-section input[type="tel"]::placeholder,
.settings-section input[type="number"]::placeholder,
.settings-section textarea::placeholder,
.settings-section select::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* line 240, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section input[type="text"]:hover:not(:focus),
.settings-section input[type="email"]:hover:not(:focus),
.settings-section input[type="password"]:hover:not(:focus),
.settings-section input[type="url"]:hover:not(:focus),
.settings-section input[type="tel"]:hover:not(:focus),
.settings-section input[type="number"]:hover:not(:focus),
.settings-section textarea:hover:not(:focus),
.settings-section select:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* line 245, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section input[type="text"]:focus,
.settings-section input[type="email"]:focus,
.settings-section input[type="password"]:focus,
.settings-section input[type="url"]:focus,
.settings-section input[type="tel"]:focus,
.settings-section input[type="number"]:focus,
.settings-section textarea:focus,
.settings-section select:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* line 253, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.55;
}

/* -----------------------------------------------------------------
   FORM ACTIONS (botones save/cancel)
   ----------------------------------------------------------------- */
/* line 263, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------------------------
   STG-BTN · unificación con sistema brand
   ----------------------------------------------------------------- */
/* line 276, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Sheen sweep */
}

/* line 303, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 313, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(255, 0, 116, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 319, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn:hover::after {
  transform: translateX(120%);
}

/* line 321, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* line 323, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* line 329, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn i, .stg-btn svg {
  width: 16px;
  height: 16px;
}

/* Variante danger (eliminar cuenta, etc) */
/* line 333, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn--danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* line 337, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn--danger:hover {
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Variante secondary/cancel · ghost neutral */
/* line 343, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn--cancel,
.stg-btn--secondary,
.stg-btn--ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

/* line 351, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn--cancel::after,
.stg-btn--secondary::after,
.stg-btn--ghost::after {
  display: none;
}

/* line 353, app/assets/stylesheets/_components.exo-creator-settings.scss */
.stg-btn--cancel:hover,
.stg-btn--secondary:hover,
.stg-btn--ghost:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------
   ACCOUNT CARDS (account section, danger zone)
   ----------------------------------------------------------------- */
/* line 365, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card {
  background: #0a0a0a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 372, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card:hover {
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 377, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

/* line 384, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
}

/* line 393, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card__desc {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Variante danger (delete account) · tinte rojo */
/* line 402, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card--danger {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

/* line 406, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card--danger .account-card__title {
  color: #fca5a5 !important;
}

/* line 410, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-card--danger:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

/* -----------------------------------------------------------------
   ACCOUNT TYPE OPTIONS (radio-like cards, ej. selección de tipo de cuenta)
   ----------------------------------------------------------------- */
/* line 419, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

/* line 425, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-option {
  position: relative;
}

/* line 428, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-option input[type="radio"],
.account-type-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 436, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 458, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-label i, .account-type-label svg {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}

/* line 464, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-label:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #fff !important;
}

/* Estado active/checked */
/* line 473, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-option input:checked + .account-type-label,
.account-type-option.active .account-type-label,
.account-type-label.active {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border-color: rgba(255, 0, 116, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(255, 0, 116, 0.18);
}

/* line 481, app/assets/stylesheets/_components.exo-creator-settings.scss */
.account-type-option input:checked + .account-type-label i, .account-type-option input:checked + .account-type-label svg,
.account-type-option.active .account-type-label i,
.account-type-option.active .account-type-label svg,
.account-type-label.active i,
.account-type-label.active svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   INPUT WRAPPERS CON PREFIJOS · price + geo-block search
   -----------------------------------------------------------------
   Casos donde un icono/símbolo está absolute al inicio del input y
   necesita padding-left mayor para no sobreponerse al valor/placeholder.
   ----------------------------------------------------------------- */
/* Subscription Price · "USD $" prefix */
/* line 496, app/assets/stylesheets/_components.exo-creator-settings.scss */
.price-input-wrapper {
  position: relative;
}

/* line 499, app/assets/stylesheets/_components.exo-creator-settings.scss */
.price-input-wrapper .currency-symbol {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 2;
  background: transparent !important;
  padding: 0 !important;
}

/* line 515, app/assets/stylesheets/_components.exo-creator-settings.scss */
.price-input-wrapper .settings-form-input.price-input,
.price-input-wrapper .settings-section input.price-input {
  padding-left: 64px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Geo-block country search · icono lupa prefix */
/* line 527, app/assets/stylesheets/_components.exo-creator-settings.scss */
.geo-block-search {
  position: relative;
  /* Cuando focus, el icono se ilumina brand */
}

/* line 530, app/assets/stylesheets/_components.exo-creator-settings.scss */
.geo-block-search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.45) !important;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 542, app/assets/stylesheets/_components.exo-creator-settings.scss */
.geo-block-search__icon i, .geo-block-search__icon svg {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* line 550, app/assets/stylesheets/_components.exo-creator-settings.scss */
.geo-block-search:focus-within .geo-block-search__icon {
  color: #ff3d9a !important;
}

/* Override del padding-left con especificidad alta para vencer el selector general
   `.settings-section input[type="text"]` que pisa el padding shorthand */
/* line 557, app/assets/stylesheets/_components.exo-creator-settings.scss */
.settings-section input.geo-block-search__input,
.settings-section input.geo-block-search__input[type="text"],
input.geo-block-search__input[type="text"],
.geo-block-search input.geo-block-search__input {
  padding-left: 42px !important;
}

/* -----------------------------------------------------------------
   ALERTS
   ----------------------------------------------------------------- */
/* line 568, app/assets/stylesheets/_components.exo-creator-settings.scss */
.alert-success {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #4ade80 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* line 582, app/assets/stylesheets/_components.exo-creator-settings.scss */
.alert-danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #fca5a5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* Padding-bottom para bottom nav */
  /* line 602, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-content,
.creator-settings-page .main-feed {
    padding-bottom: 100px !important;
  }
  /* Page header más compacto */
  /* line 608, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-page-header {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }
  /* line 613, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-page-title {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
  /* Settings nav · sticky off en mobile */
  /* line 618, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-nav {
    position: static !important;
    padding: 10px !important;
    border-radius: 14px !important;
    margin-bottom: 16px;
  }
  /* line 625, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-nav-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  /* line 629, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-nav-item i, .settings-nav-item svg {
    width: 16px;
    height: 16px;
  }
  /* Sections más compactas */
  /* line 633, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-section {
    padding: 18px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
  /* line 639, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-section-header {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  /* line 644, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-section-title {
    font-size: 17px !important;
  }
  /* line 648, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-section-subtitle,
.settings-section-desc {
    font-size: 13px !important;
  }
  /* Form groups más compactos */
  /* line 654, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-form-group {
    margin-bottom: 18px !important;
  }
  /* line 658, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-form-label {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  /* line 663, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-section input,
.settings-section textarea,
.settings-section select {
    font-size: 14px !important;
    padding: 11px 13px !important;
  }
  /* Form actions stack vertical en mobile */
  /* line 671, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-form-actions {
    flex-direction: column;
    gap: 10px;
  }
  /* line 675, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .settings-form-actions .stg-btn {
    width: 100%;
  }
  /* Botones más compactos */
  /* line 681, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .stg-btn {
    padding: 12px 20px !important;
    font-size: 13.5px !important;
  }
  /* Account cards */
  /* line 687, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  /* line 692, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-card__title {
    font-size: 14.5px !important;
  }
  /* line 696, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-card__desc {
    font-size: 13px !important;
  }
  /* Account type options · 2 columnas en mobile */
  /* line 701, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-type-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  /* line 706, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-type-label {
    padding: 14px 10px !important;
    font-size: 12.5px !important;
  }
  /* line 710, app/assets/stylesheets/_components.exo-creator-settings.scss */
  .account-type-label i, .account-type-label svg {
    font-size: 20px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · USER SETTINGS OVERRIDE (/users/edit)
   -----------------------------------------------------------------
   Cubre los selectores `stg-*`, `tfa-*`, `dam-*` del legacy
   settings.scss (1489 líneas). Comparte sistema con creator
   settings, pero esta vista tiene secciones únicas:
   - Email/password change
   - Two-factor auth status
   - Delete account modal con confirmation

   Cero cambios al HTML/ERB · forms Devise, JS de DAM intactos.
   Carga DESPUÉS de settings.scss.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-user-settings.scss */
.settings-page {
  background: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   HEADER (stg-header)
   ----------------------------------------------------------------- */
/* line 27, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #14121a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Línea brand top */
  /* Radial glow brand sutil */
}

/* line 41, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

/* line 53, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 50%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 66, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header__icon {
  display: grid !important;
  place-items: center;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 12px !important;
  color: #ff3d9a !important;
}

/* line 77, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header__icon i, .stg-header__icon svg {
  width: 22px;
  height: 22px;
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* line 85, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  line-height: 1.1 !important;
  margin: 0 0 6px !important;
}

/* line 95, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-header__subtitle {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   CARDS (stg-card)
   ----------------------------------------------------------------- */
/* line 107, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 118, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* line 123, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

/* line 130, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__icon {
  display: grid !important;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* line 141, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__icon i, .stg-card__icon svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* line 148, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__icon--accent {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff3d9a !important;
}

/* line 153, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__icon--accent i, .stg-card__icon--accent svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* line 158, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__icon--danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* line 164, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 4px !important;
}

/* line 173, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__title--danger {
  color: #fca5a5 !important;
}

/* line 177, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__desc {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* line 185, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__body-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* line 192, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Variante danger (zona peligrosa: delete account) */
/* line 202, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card--danger {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, #111 60%) !important;
}

/* line 206, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-card--danger:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

/* -----------------------------------------------------------------
   FIELDS (stg-field)
   ----------------------------------------------------------------- */
/* line 215, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field {
  margin-bottom: 18px;
}

/* line 219, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* line 226, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__label {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  display: inline-block;
  margin: 0 !important;
}

/* line 237, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__label--danger {
  color: #fca5a5 !important;
}

/* line 241, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__hint {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* line 249, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__hint--warning {
  color: #fbbf24 !important;
}

/* line 253, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__input-wrap {
  position: relative;
  /* SVG icono prefix · absolute al inicio del wrapper */
  /* Cuando el input dentro tiene focus, el icono se ilumina brand */
}

/* line 257, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__input-wrap > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 2;
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 271, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__input-wrap:focus-within > svg {
  color: #ff3d9a;
}

/* Inputs dentro de stg-field · estilos generales primero */
/* line 277, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field input[type="text"],
.stg-field input[type="email"],
.stg-field input[type="password"],
.stg-field input[type="tel"],
.stg-field input[type="number"],
.stg-field textarea,
.stg-field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  padding: 12px 14px !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 297, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field input[type="text"]::placeholder,
.stg-field input[type="email"]::placeholder,
.stg-field input[type="password"]::placeholder,
.stg-field input[type="tel"]::placeholder,
.stg-field input[type="number"]::placeholder,
.stg-field textarea::placeholder,
.stg-field select::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* line 301, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field input[type="text"]:hover:not(:focus),
.stg-field input[type="email"]:hover:not(:focus),
.stg-field input[type="password"]:hover:not(:focus),
.stg-field input[type="tel"]:hover:not(:focus),
.stg-field input[type="number"]:hover:not(:focus),
.stg-field textarea:hover:not(:focus),
.stg-field select:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* line 306, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field input[type="text"]:focus,
.stg-field input[type="email"]:focus,
.stg-field input[type="password"]:focus,
.stg-field input[type="tel"]:focus,
.stg-field input[type="number"]:focus,
.stg-field textarea:focus,
.stg-field select:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* Padding-left mayor cuando hay icono SVG · DESPUÉS del general para vencer
   el shorthand padding por orden de cascade (misma especificidad).
   Esto sobrescribe solo padding-left, dejando top/right/bottom como 12px/14px. */
/* line 318, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-field__input-wrap .stg-field__input,
.stg-field__input-wrap input.stg-field__input,
.stg-field input.stg-field__input,
.stg-field__input-wrap input[type="text"],
.stg-field__input-wrap input[type="email"],
.stg-field__input-wrap input[type="password"],
.stg-field__input-wrap input[type="tel"],
.stg-field__input-wrap input[type="number"] {
  padding-left: 44px !important;
}

/* -----------------------------------------------------------------
   ALERTS (stg-alert)
   ----------------------------------------------------------------- */
/* line 333, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* line 345, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert--success {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

/* line 351, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert--error {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* line 357, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert--warning {
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  color: #fbbf24 !important;
}

/* line 363, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert__list {
  margin: 0 !important;
  padding-left: 20px !important;
}

/* line 367, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-alert__list li {
  margin-bottom: 4px;
}

/* -----------------------------------------------------------------
   STATUS (stg-status · processing/success spinner)
   ----------------------------------------------------------------- */
/* line 376, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* line 388, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-status--processing {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

/* line 394, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-status--success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

/* line 400, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-status__info {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
}

/* line 405, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-status__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: exo-stg-spin 720ms linear infinite;
}

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

/* -----------------------------------------------------------------
   INLINE NOTICES (stg-inline-notice)
   ----------------------------------------------------------------- */
/* line 422, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice {
  padding: 12px 14px;
  border-radius: 10px;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* line 433, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice--info {
  background: rgba(59, 130, 246, 0.06) !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* line 438, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice--info i, .stg-inline-notice--info svg {
  color: #60a5fa;
}

/* line 441, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice--warning {
  background: rgba(234, 179, 8, 0.06) !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* line 446, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice--warning i, .stg-inline-notice--warning svg {
  color: #fbbf24;
}

/* line 449, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-inline-notice__muted {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12.5px !important;
}

/* -----------------------------------------------------------------
   BADGES (stg-badge)
   ----------------------------------------------------------------- */
/* line 458, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

/* line 473, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-badge--warning {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
  color: #fbbf24 !important;
}

/* -----------------------------------------------------------------
   CONSEQUENCES (lista de impactos en delete account)
   ----------------------------------------------------------------- */
/* line 483, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
}

/* line 490, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences ul, .stg-consequences ol {
  margin: 0;
  padding-left: 22px;
}

/* line 495, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences li {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 6px;
}

/* line 502, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences li:last-child {
  margin-bottom: 0;
}

/* line 504, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences li strong {
  color: #fca5a5;
  font-weight: 600;
}

/* line 511, app/assets/stylesheets/_components.exo-user-settings.scss */
.stg-consequences__warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------
   TWO-FACTOR AUTH STATUS (tfa-status)
   ----------------------------------------------------------------- */
/* line 529, app/assets/stylesheets/_components.exo-user-settings.scss */
.tfa-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* line 543, app/assets/stylesheets/_components.exo-user-settings.scss */
.tfa-status--enabled {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

/* line 549, app/assets/stylesheets/_components.exo-user-settings.scss */
.tfa-status__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 556, app/assets/stylesheets/_components.exo-user-settings.scss */
.tfa-status__icon i, .tfa-status__icon svg {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* line 563, app/assets/stylesheets/_components.exo-user-settings.scss */
.tfa-status--enabled .tfa-status__icon {
  color: #22c55e;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* -----------------------------------------------------------------
   DELETE ACCOUNT MODAL (DAM)
   ----------------------------------------------------------------- */
/* line 572, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 3, 8, 0.78) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* line 585, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-container {
  position: relative;
  background: linear-gradient(180deg, #14121a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 80px rgba(239, 68, 68, 0.12) !important;
  overflow: hidden;
  isolation: isolate;
  /* Línea danger top */
}

/* line 598, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.6) 50%, transparent 100%);
  pointer-events: none;
}

/* line 610, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 621, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-icon {
  display: grid !important;
  place-items: center;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  border-radius: 16px !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.25);
}

/* line 633, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-icon i, .dam-icon svg {
  width: 28px;
  height: 28px;
  font-size: 28px;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

/* line 641, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-title {
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 0 8px !important;
}

/* line 651, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-subtitle {
  text-align: center !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 24px !important;
}

/* line 660, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-confirm-field {
  margin-bottom: 24px;
}

/* line 664, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-confirm-label {
  display: block;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px;
}

/* line 675, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-confirm-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 14.5px !important;
  letter-spacing: 0.08em !important;
  padding: 12px 14px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* line 687, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-confirm-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.08em;
}

/* line 692, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-confirm-input:focus {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444, 0 0 24px rgba(239, 68, 68, 0.2) !important;
}

/* line 699, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 706, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-actions > * {
  flex: 1;
}

/* line 709, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-cancel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

/* line 727, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

/* line 734, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, opacity 0.25s ease !important;
}

/* line 752, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.45) !important;
}

/* line 757, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete:active {
  transform: translateY(0) scale(0.98) !important;
}

/* line 759, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* line 766, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-label-disabled {
  display: none;
}

/* line 770, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete:disabled .dam-btn-label {
  display: none;
}

/* line 774, app/assets/stylesheets/_components.exo-user-settings.scss */
.dam-btn-delete:disabled .dam-btn-label-disabled {
  display: inline;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* Padding-bottom para bottom nav */
  /* line 784, app/assets/stylesheets/_components.exo-user-settings.scss */
  .settings-page .main-feed {
    padding-bottom: 100px !important;
  }
  /* Header más compacto */
  /* line 789, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-header {
    padding: 18px 18px !important;
    margin-bottom: 16px !important;
    gap: 12px;
  }
  /* line 795, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-header__icon {
    width: 40px !important;
    height: 40px !important;
  }
  /* line 799, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-header__icon i, .stg-header__icon svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
  }
  /* line 802, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-header__title {
    font-size: clamp(20px, 5vw, 24px) !important;
  }
  /* line 806, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-header__subtitle {
    font-size: 13px !important;
  }
  /* Cards más compactas */
  /* line 811, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }
  /* line 816, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__icon {
    width: 36px !important;
    height: 36px !important;
  }
  /* line 821, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__title {
    font-size: 15px !important;
  }
  /* line 825, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__desc {
    font-size: 13px !important;
  }
  /* line 829, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__body-text {
    font-size: 13.5px !important;
  }
  /* Card actions stack vertical */
  /* line 834, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__actions {
    flex-direction: column;
  }
  /* line 837, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__actions > * {
    width: 100%;
  }
  /* line 839, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-card__actions .stg-btn {
    width: 100%;
  }
  /* Field más compacto */
  /* line 843, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-field {
    margin-bottom: 14px;
  }
  /* line 845, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-field__label {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  /* line 850, app/assets/stylesheets/_components.exo-user-settings.scss */
  .stg-field input,
.stg-field textarea,
.stg-field select {
    font-size: 14px !important;
    padding: 11px 13px !important;
  }
  /* DAM modal más compacto */
  /* line 858, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-container {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
  /* line 863, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-icon {
    width: 56px !important;
    height: 56px !important;
  }
  /* line 867, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-icon i, .dam-icon svg {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
  }
  /* line 870, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-title {
    font-size: 19px !important;
  }
  /* line 874, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-subtitle {
    font-size: 13px !important;
  }
  /* line 878, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-actions {
    flex-direction: column;
  }
  /* line 881, app/assets/stylesheets/_components.exo-user-settings.scss */
  .dam-actions > * {
    flex: 1;
    width: 100%;
  }
}
@charset "UTF-8";
/* ========================================
   BECOME CREATOR PAGE - Estilo Instagram
   ======================================== */
/* line 5, app/assets/stylesheets/become_creator.scss */
.become-creator-page {
  background-color: #000;
  min-height: auto;
  padding-bottom: 40px;
}

/* line 12, app/assets/stylesheets/become_creator.scss */
.creator-hero {
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.15) 0%, rgba(245, 0, 87, 0.1) 100%);
  border: 1px solid rgba(255, 64, 129, 0.25);
  backdrop-filter: blur(10px);
  padding: 60px 40px;
  border-radius: 16px;
  margin-bottom: 40px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(255, 64, 129, 0.15);
  position: relative;
  overflow: hidden;
}

/* line 24, app/assets/stylesheets/become_creator.scss */
.creator-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff4081, transparent);
}

/* line 35, app/assets/stylesheets/become_creator.scss */
.creator-hero-title {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* line 43, app/assets/stylesheets/become_creator.scss */
.creator-hero-subtitle {
  color: #d0d0d0;
  font-size: 18px;
  margin-bottom: 40px;
  line-height: 1.5;
}

/* line 51, app/assets/stylesheets/become_creator.scss */
.creator-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* line 58, app/assets/stylesheets/become_creator.scss */
.benefit-item {
  text-align: center;
  color: #fff;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}

/* line 67, app/assets/stylesheets/become_creator.scss */
.benefit-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 64, 129, 0.3);
  transform: translateY(-4px);
}

/* line 74, app/assets/stylesheets/become_creator.scss */
.benefit-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.2) 0%, rgba(245, 0, 87, 0.15) 100%);
  border: 1px solid rgba(255, 64, 129, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* line 86, app/assets/stylesheets/become_creator.scss */
.benefit-icon svg {
  width: 32px;
  height: 32px;
  fill: #ff4081;
}

/* line 93, app/assets/stylesheets/become_creator.scss */
.benefit-item:hover .benefit-icon {
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.3) 0%, rgba(245, 0, 87, 0.25) 100%);
  border-color: #ff4081;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 64, 129, 0.3);
}

/* line 100, app/assets/stylesheets/become_creator.scss */
.benefit-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}

/* line 107, app/assets/stylesheets/become_creator.scss */
.benefit-description {
  font-size: 14px;
  color: #a0a0a0;
}

/* line 113, app/assets/stylesheets/become_creator.scss */
.creator-form-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  transition: all 0.3s;
}

/* line 121, app/assets/stylesheets/become_creator.scss */
.creator-form-section:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

/* line 127, app/assets/stylesheets/become_creator.scss */
.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 64, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 138, app/assets/stylesheets/become_creator.scss */
.section-title svg {
  width: 24px;
  height: 24px;
  color: #ff4081;
}

/* line 145, app/assets/stylesheets/become_creator.scss */
.section-description {
  color: #8e8e8e;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* line 153, app/assets/stylesheets/become_creator.scss */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* line 159, app/assets/stylesheets/become_creator.scss */
.form-grid-full {
  grid-column: 1 / -1;
}

/* line 164, app/assets/stylesheets/become_creator.scss */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 169, app/assets/stylesheets/become_creator.scss */
.input-group label {
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 600;
}

/* line 175, app/assets/stylesheets/become_creator.scss */
.input-group .textfield,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f5f5f5;
  font-size: 14px;
  transition: all 0.2s;
}

/* line 187, app/assets/stylesheets/become_creator.scss */
.input-group .textfield:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: #ff4081;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 194, app/assets/stylesheets/become_creator.scss */
.input-group .textfield::placeholder,
.input-group textarea::placeholder,
.input-group select::placeholder {
  color: #666;
}

/* line 199, app/assets/stylesheets/become_creator.scss */
.input-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* line 207, app/assets/stylesheets/become_creator.scss */
.input-group select option {
  background: #1a1a1a;
  color: #f5f5f5;
  padding: 8px;
}

/* line 213, app/assets/stylesheets/become_creator.scss */
.input-group select:invalid, .input-group select[value=""] {
  color: #666;
}

/* line 219, app/assets/stylesheets/become_creator.scss */
.input-group textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* line 226, app/assets/stylesheets/become_creator.scss */
.input-hint {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

/* line 234, app/assets/stylesheets/become_creator.scss */
.bio-input-wrapper {
  position: relative;
  overflow: visible;
}

/* line 239, app/assets/stylesheets/become_creator.scss */
.bio-textarea {
  padding-right: 50px !important;
}

/* line 243, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 100;
}

/* line 249, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 262, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-trigger-btn:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.1);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 268, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-trigger-btn svg {
  width: 18px;
  height: 18px;
}

/* line 274, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-picker-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  width: 320px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow: visible;
}

/* line 288, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-picker-content {
  display: flex;
  flex-direction: column;
}

/* line 293, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
  max-height: 220px;
  overflow-y: auto;
}

/* line 301, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 305, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

/* line 309, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 315, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

/* line 329, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-item:hover {
  background: rgba(255, 64, 129, 0.2);
  transform: scale(1.2);
}

/* line 335, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-categories-bar {
  display: flex;
  justify-content: space-around;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 343, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
  padding: 0;
}

/* line 358, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-category-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* line 363, app/assets/stylesheets/become_creator.scss */
.bio-emoji-picker .emoji-category-btn.active {
  opacity: 1;
  background: rgba(255, 64, 129, 0.2);
}

/* line 371, app/assets/stylesheets/become_creator.scss */
.username-input-group {
  position: relative;
}

/* line 375, app/assets/stylesheets/become_creator.scss */
.username-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-weight: 600;
  font-size: 16px;
  pointer-events: none;
}

/* line 386, app/assets/stylesheets/become_creator.scss */
.username-input {
  padding-left: 35px !important;
}

/* line 391, app/assets/stylesheets/become_creator.scss */
.social-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 397, app/assets/stylesheets/become_creator.scss */
.social-prefix {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e8e;
  pointer-events: none;
  z-index: 1;
}

/* line 407, app/assets/stylesheets/become_creator.scss */
.social-prefix svg {
  transition: color 0.2s ease;
}

/* line 412, app/assets/stylesheets/become_creator.scss */
.social-input {
  padding-left: 44px !important;
}

/* line 415, app/assets/stylesheets/become_creator.scss */
.social-input:focus + .social-prefix, .social-input:focus ~ .social-prefix {
  color: #ff4081;
}

/* line 421, app/assets/stylesheets/become_creator.scss */
.input-group:has(.social-input:focus) .social-prefix {
  color: #ff4081;
}

/* line 424, app/assets/stylesheets/become_creator.scss */
.input-group:has(.social-input:focus) .social-prefix svg {
  fill: #ff4081;
}

/* line 430, app/assets/stylesheets/become_creator.scss */
.file-input-wrapper {
  position: relative;
}

/* line 433, app/assets/stylesheets/become_creator.scss */
.file-input-wrapper input[type="file"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* line 440, app/assets/stylesheets/become_creator.scss */
.file-input-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #8e8e8e;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-size: 14px;
}

/* line 455, app/assets/stylesheets/become_creator.scss */
.file-input-label svg {
  fill: currentColor;
}

/* line 459, app/assets/stylesheets/become_creator.scss */
.file-input-label:hover {
  background: rgba(255, 64, 129, 0.1);
  border-color: #ff4081;
  color: #ff4081;
}

/* line 467, app/assets/stylesheets/become_creator.scss */
.image-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  /* line 467, app/assets/stylesheets/become_creator.scss */
  .image-upload-grid {
    grid-template-columns: 1fr;
  }
}

/* line 478, app/assets/stylesheets/become_creator.scss */
.image-upload-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s;
}

/* line 485, app/assets/stylesheets/become_creator.scss */
.image-upload-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 490, app/assets/stylesheets/become_creator.scss */
.image-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* line 497, app/assets/stylesheets/become_creator.scss */
.upload-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #f5f5f5;
}

/* line 505, app/assets/stylesheets/become_creator.scss */
.upload-title svg {
  fill: #ff4081;
}

/* line 510, app/assets/stylesheets/become_creator.scss */
.upload-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 518, app/assets/stylesheets/become_creator.scss */
.upload-badge.required {
  background: rgba(255, 64, 129, 0.15);
  color: #ff4081;
  border: 1px solid rgba(255, 64, 129, 0.3);
}

/* line 524, app/assets/stylesheets/become_creator.scss */
.upload-badge.optional {
  background: rgba(255, 255, 255, 0.05);
  color: #8e8e8e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 531, app/assets/stylesheets/become_creator.scss */
.image-preview-box {
  width: 100%;
  height: 150px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

/* line 544, app/assets/stylesheets/become_creator.scss */
.image-preview-box.cover-preview {
  height: 100px;
}

/* line 548, app/assets/stylesheets/become_creator.scss */
.image-preview-box.has-image {
  border-style: solid;
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 552, app/assets/stylesheets/become_creator.scss */
.image-preview-box.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 560, app/assets/stylesheets/become_creator.scss */
.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #666;
}

/* line 567, app/assets/stylesheets/become_creator.scss */
.preview-placeholder svg {
  fill: #444;
}

/* line 571, app/assets/stylesheets/become_creator.scss */
.preview-placeholder span {
  font-size: 13px;
}

/* line 576, app/assets/stylesheets/become_creator.scss */
.image-requirements {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 582, app/assets/stylesheets/become_creator.scss */
.requirements-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8e8e8e;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 593, app/assets/stylesheets/become_creator.scss */
.requirements-header svg {
  fill: #8e8e8e;
}

/* line 598, app/assets/stylesheets/become_creator.scss */
.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 603, app/assets/stylesheets/become_creator.scss */
.requirements-list li {
  font-size: 12px;
  color: #666;
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

/* line 610, app/assets/stylesheets/become_creator.scss */
.requirements-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: #ff4081;
}

/* line 620, app/assets/stylesheets/become_creator.scss */
.image-tips-box {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 193, 7, 0.05);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: 12px;
}

/* line 629, app/assets/stylesheets/become_creator.scss */
.tips-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 193, 7, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 639, app/assets/stylesheets/become_creator.scss */
.tips-icon svg {
  fill: #ffc107;
}

/* line 644, app/assets/stylesheets/become_creator.scss */
.tips-content {
  flex: 1;
}

/* line 648, app/assets/stylesheets/become_creator.scss */
.tips-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffc107;
  margin-bottom: 6px;
}

/* line 655, app/assets/stylesheets/become_creator.scss */
.tips-text {
  font-size: 13px;
  color: #8e8e8e;
  line-height: 1.5;
}

/* line 662, app/assets/stylesheets/become_creator.scss */
.content-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* line 669, app/assets/stylesheets/become_creator.scss */
.content-tag-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* line 675, app/assets/stylesheets/become_creator.scss */
.content-tag-chip input[type="checkbox"] {
  display: none;
}

/* line 679, app/assets/stylesheets/become_creator.scss */
.content-tag-chip .tag-label {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #a0a0a0;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* line 692, app/assets/stylesheets/become_creator.scss */
.content-tag-chip:hover .tag-label {
  background: rgba(255, 64, 129, 0.08);
  border-color: rgba(255, 64, 129, 0.25);
  color: #d0d0d0;
}

/* line 698, app/assets/stylesheets/become_creator.scss */
.content-tag-chip input[type="checkbox"]:checked + .tag-label {
  background: rgba(255, 64, 129, 0.15);
  border-color: #ff4081;
  color: #ff4081;
  font-weight: 600;
}

/* line 707, app/assets/stylesheets/become_creator.scss */
.terms-box {
  background: rgba(255, 193, 7, 0.05);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

/* line 715, app/assets/stylesheets/become_creator.scss */
.terms-title {
  color: #ffc107;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 724, app/assets/stylesheets/become_creator.scss */
.terms-title svg {
  width: 20px;
  height: 20px;
}

/* line 730, app/assets/stylesheets/become_creator.scss */
.terms-text {
  color: #8e8e8e;
  line-height: 1.7;
  font-size: 14px;
}

/* line 735, app/assets/stylesheets/become_creator.scss */
.terms-text strong {
  color: #ff4081;
  font-weight: 600;
}

/* line 742, app/assets/stylesheets/become_creator.scss */
.error-messages {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

/* line 750, app/assets/stylesheets/become_creator.scss */
.error-title {
  color: #dc3545;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}

/* line 757, app/assets/stylesheets/become_creator.scss */
.error-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 762, app/assets/stylesheets/become_creator.scss */
.error-list li {
  color: #dc3545;
  font-size: 14px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

/* line 770, app/assets/stylesheets/become_creator.scss */
.error-list li::before {
  content: '•';
  position: absolute;
  left: 8px;
}

/* line 776, app/assets/stylesheets/become_creator.scss */
.error-list li:last-child {
  margin-bottom: 0;
}

/* line 783, app/assets/stylesheets/become_creator.scss */
.creator-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* line 791, app/assets/stylesheets/become_creator.scss */
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 806, app/assets/stylesheets/become_creator.scss */
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* line 812, app/assets/stylesheets/become_creator.scss */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 827, app/assets/stylesheets/become_creator.scss */
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.4);
}

/* line 832, app/assets/stylesheets/become_creator.scss */
.btn-submit:active {
  transform: translateY(0);
}

/* ========================================
   WIZARD — Mobile Step-by-Step
   Only active below 1024px via .wizard-active
   ======================================== */
/* line 843, app/assets/stylesheets/become_creator.scss */
.wz-topbar {
  display: none;
}

/* line 848, app/assets/stylesheets/become_creator.scss */
.wz-bottom-nav {
  display: none;
}

/* line 854, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-topbar {
  display: block;
  position: sticky;
  top: 70px;
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}

/* line 868, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
}

/* line 875, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-topbar-left {
  flex-shrink: 0;
}

/* line 879, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-step-counter {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.3px;
}

/* line 885, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-step-counter strong {
  color: #ff0074;
  font-weight: 700;
  font-size: 13px;
}

/* line 892, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-topbar-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* line 898, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-step-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 908, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-topbar-right {
  flex-shrink: 0;
}

/* line 912, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* line 918, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 928, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-dot.wz-dot--active {
  background: #ff0074;
  width: 20px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.4);
}

/* line 935, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-dot.wz-dot--done {
  background: rgba(255, 0, 116, 0.4);
}

/* line 941, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
}

/* line 946, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff0074, #ff3d9a);
  border-radius: 0 3px 3px 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.3);
}

/* line 955, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* line 972, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 48px;
}

/* line 987, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* line 994, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn--back {
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #999;
  flex-shrink: 0;
}

/* line 1000, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn--back:hover, .wizard-active .wz-btn--back:active {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

/* line 1006, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn--next {
  padding: 12px 28px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  flex: 1;
  max-width: 260px;
  margin-left: auto;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.25);
}

/* line 1015, app/assets/stylesheets/become_creator.scss */
.wizard-active .wz-btn--next:hover, .wizard-active .wz-btn--next:active {
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.35);
  transform: translateY(-1px);
}

/* line 1022, app/assets/stylesheets/become_creator.scss */
.wizard-active [data-wizard-anim="enter-right"] {
  animation: wzSlideRight 0.35s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* line 1026, app/assets/stylesheets/become_creator.scss */
.wizard-active [data-wizard-anim="enter-left"] {
  animation: wzSlideLeft 0.35s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* line 1031, app/assets/stylesheets/become_creator.scss */
.wizard-active .creator-hero {
  display: none;
}

/* line 1037, app/assets/stylesheets/become_creator.scss */
.wizard-active .creator-form-actions {
  flex-direction: column;
  gap: 10px;
}

/* line 1041, app/assets/stylesheets/become_creator.scss */
.wizard-active .creator-form-actions .btn-cancel {
  display: none;
}

/* line 1045, app/assets/stylesheets/become_creator.scss */
.wizard-active .creator-form-actions .btn-submit {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  border-radius: 10px;
}

/* line 1054, app/assets/stylesheets/become_creator.scss */
.wizard-active .become-creator-page {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px)) !important;
}

/* line 1060, app/assets/stylesheets/become_creator.scss */
.wz-field-error {
  border-color: #ff4081 !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.15) !important;
  animation: wzPulseError 0.4s ease;
}

/* line 1066, app/assets/stylesheets/become_creator.scss */
.wz-error-msg {
  display: block;
  color: #ff4081;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  font-family: 'Rubik', sans-serif;
  animation: wzFadeIn 0.25s ease;
}

@keyframes wzFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 1082, app/assets/stylesheets/become_creator.scss */
.wz-shake {
  animation: wzShake 0.5s ease;
}

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

@keyframes wzSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wzPulseError {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

@keyframes wzShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* line 1122, app/assets/stylesheets/become_creator.scss */
body.wizard-mode .mobile-bottom-nav {
  display: none !important;
}

@keyframes bc-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  /* line 1140, app/assets/stylesheets/become_creator.scss */
  .become-creator-page {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px)) !important;
    min-height: auto !important;
    overflow-y: visible !important;
  }
  /* line 1146, app/assets/stylesheets/become_creator.scss */
  .social-layout-two-col {
    grid-template-columns: 1fr;
    padding: 16px;
    padding-bottom: 16px;
    overflow: visible !important;
  }
  /* line 1153, app/assets/stylesheets/become_creator.scss */
  .creator-hero {
    padding: 36px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: bc-fadeUp 0.5s ease both;
  }
  /* line 1160, app/assets/stylesheets/become_creator.scss */
  .creator-hero-title {
    font-size: 30px;
  }
  /* line 1164, app/assets/stylesheets/become_creator.scss */
  .creator-hero-subtitle {
    font-size: 15px;
    margin-bottom: 28px;
  }
  /* line 1169, app/assets/stylesheets/become_creator.scss */
  .creator-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 28px;
  }
  /* line 1175, app/assets/stylesheets/become_creator.scss */
  .creator-form-section {
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: bc-fadeUp 0.5s ease both;
  }
  /* line 1181, app/assets/stylesheets/become_creator.scss */
  .creator-form-section:nth-child(1) {
    animation-delay: 0.05s;
  }
  /* line 1182, app/assets/stylesheets/become_creator.scss */
  .creator-form-section:nth-child(2) {
    animation-delay: 0.1s;
  }
  /* line 1183, app/assets/stylesheets/become_creator.scss */
  .creator-form-section:nth-child(3) {
    animation-delay: 0.15s;
  }
  /* line 1184, app/assets/stylesheets/become_creator.scss */
  .creator-form-section:nth-child(4) {
    animation-delay: 0.2s;
  }
  /* line 1187, app/assets/stylesheets/become_creator.scss */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* line 1192, app/assets/stylesheets/become_creator.scss */
  .section-title {
    font-size: 19px;
    margin-bottom: 20px;
  }
  /* line 1197, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions {
    flex-direction: column-reverse;
    margin-top: 24px;
    margin-bottom: 40px;
  }
  /* line 1202, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions .btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
  }
  /* line 1210, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions .btn-cancel {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  /* line 1220, app/assets/stylesheets/become_creator.scss */
  .social-layout-two-col {
    padding: 12px;
  }
  /* line 1224, app/assets/stylesheets/become_creator.scss */
  .creator-hero {
    padding: 28px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(255, 64, 129, 0.12);
  }
  /* line 1231, app/assets/stylesheets/become_creator.scss */
  .creator-hero-title {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  /* line 1237, app/assets/stylesheets/become_creator.scss */
  .creator-hero-subtitle {
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.5;
  }
  /* line 1243, app/assets/stylesheets/become_creator.scss */
  .creator-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 22px;
  }
  /* line 1249, app/assets/stylesheets/become_creator.scss */
  .benefit-item {
    padding: 14px 10px;
    border-radius: 10px;
  }
  /* line 1254, app/assets/stylesheets/become_creator.scss */
  .benefit-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }
  /* line 1259, app/assets/stylesheets/become_creator.scss */
  .benefit-icon svg {
    width: 22px;
    height: 22px;
  }
  /* line 1265, app/assets/stylesheets/become_creator.scss */
  .benefit-title {
    font-size: 13px;
    margin-bottom: 4px;
  }
  /* line 1270, app/assets/stylesheets/become_creator.scss */
  .benefit-description {
    font-size: 11px;
    line-height: 1.4;
  }
  /* line 1275, app/assets/stylesheets/become_creator.scss */
  .creator-form-section {
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  /* line 1281, app/assets/stylesheets/become_creator.scss */
  .section-title {
    font-size: 17px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    gap: 8px;
  }
  /* line 1287, app/assets/stylesheets/become_creator.scss */
  .section-title svg {
    width: 20px;
    height: 20px;
  }
  /* line 1293, app/assets/stylesheets/become_creator.scss */
  .section-description {
    font-size: 13px;
    margin-bottom: 16px;
  }
  /* line 1298, app/assets/stylesheets/become_creator.scss */
  .input-group {
    gap: 6px;
  }
  /* line 1301, app/assets/stylesheets/become_creator.scss */
  .input-group label {
    font-size: 13px;
  }
  /* line 1305, app/assets/stylesheets/become_creator.scss */
  .input-group .textfield,
.input-group textarea,
.input-group select {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    min-height: 46px;
  }
  /* line 1314, app/assets/stylesheets/become_creator.scss */
  .input-group textarea {
    min-height: 90px;
    font-size: 16px;
  }
  /* line 1320, app/assets/stylesheets/become_creator.scss */
  .input-hint {
    font-size: 12px;
  }
  /* line 1325, app/assets/stylesheets/become_creator.scss */
  .image-upload-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* line 1330, app/assets/stylesheets/become_creator.scss */
  .image-upload-card {
    padding: 16px;
    border-radius: 10px;
  }
  /* line 1335, app/assets/stylesheets/become_creator.scss */
  .image-preview-box {
    height: 120px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  /* line 1340, app/assets/stylesheets/become_creator.scss */
  .image-preview-box.cover-preview {
    height: 80px;
  }
  /* line 1345, app/assets/stylesheets/become_creator.scss */
  .image-requirements {
    margin-top: 12px;
    padding-top: 12px;
  }
  /* line 1350, app/assets/stylesheets/become_creator.scss */
  .requirements-list li {
    font-size: 11px;
    padding: 3px 0;
  }
  /* line 1355, app/assets/stylesheets/become_creator.scss */
  .file-input-label {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
    min-height: 46px;
  }
  /* line 1362, app/assets/stylesheets/become_creator.scss */
  .image-tips-box {
    padding: 16px;
    gap: 12px;
    border-radius: 10px;
  }
  /* line 1368, app/assets/stylesheets/become_creator.scss */
  .tips-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  /* line 1374, app/assets/stylesheets/become_creator.scss */
  .tips-title {
    font-size: 13px;
    margin-bottom: 4px;
  }
  /* line 1379, app/assets/stylesheets/become_creator.scss */
  .tips-text {
    font-size: 12px;
  }
  /* line 1383, app/assets/stylesheets/become_creator.scss */
  .terms-box {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 10px;
  }
  /* line 1389, app/assets/stylesheets/become_creator.scss */
  .terms-title {
    font-size: 14px;
    margin-bottom: 8px;
    gap: 6px;
  }
  /* line 1394, app/assets/stylesheets/become_creator.scss */
  .terms-title svg {
    width: 18px;
    height: 18px;
  }
  /* line 1400, app/assets/stylesheets/become_creator.scss */
  .terms-text {
    font-size: 13px;
    line-height: 1.6;
  }
  /* line 1405, app/assets/stylesheets/become_creator.scss */
  .error-messages {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
  }
  /* line 1411, app/assets/stylesheets/become_creator.scss */
  .error-title {
    font-size: 14px;
    margin-bottom: 8px;
  }
  /* line 1416, app/assets/stylesheets/become_creator.scss */
  .error-list li {
    font-size: 13px;
    line-height: 1.5;
  }
  /* line 1421, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions {
    margin-top: 20px;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  /* line 1428, app/assets/stylesheets/become_creator.scss */
  .social-layout-two-col {
    padding: 8px;
  }
  /* line 1432, app/assets/stylesheets/become_creator.scss */
  .creator-hero {
    padding: 22px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
  }
  /* line 1438, app/assets/stylesheets/become_creator.scss */
  .creator-hero-title {
    font-size: 21px;
    margin-bottom: 8px;
  }
  /* line 1443, app/assets/stylesheets/become_creator.scss */
  .creator-hero-subtitle {
    font-size: 13px;
    margin-bottom: 18px;
  }
  /* line 1448, app/assets/stylesheets/become_creator.scss */
  .creator-benefits {
    gap: 8px;
    margin-top: 18px;
  }
  /* line 1453, app/assets/stylesheets/become_creator.scss */
  .benefit-item {
    padding: 12px 8px;
    border-radius: 8px;
  }
  /* line 1458, app/assets/stylesheets/become_creator.scss */
  .benefit-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
  }
  /* line 1463, app/assets/stylesheets/become_creator.scss */
  .benefit-icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 1469, app/assets/stylesheets/become_creator.scss */
  .benefit-title {
    font-size: 12px;
    margin-bottom: 3px;
  }
  /* line 1474, app/assets/stylesheets/become_creator.scss */
  .benefit-description {
    font-size: 10.5px;
    line-height: 1.35;
  }
  /* line 1480, app/assets/stylesheets/become_creator.scss */
  .bio-emoji-picker .emoji-picker-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    margin-top: 0;
  }
  /* line 1492, app/assets/stylesheets/become_creator.scss */
  .creator-form-section {
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  /* line 1498, app/assets/stylesheets/become_creator.scss */
  .section-title {
    font-size: 16px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    gap: 8px;
  }
  /* line 1504, app/assets/stylesheets/become_creator.scss */
  .section-title svg {
    width: 18px;
    height: 18px;
  }
  /* line 1510, app/assets/stylesheets/become_creator.scss */
  .section-description {
    font-size: 12px;
    margin-bottom: 14px;
  }
  /* line 1515, app/assets/stylesheets/become_creator.scss */
  .input-group {
    gap: 5px;
  }
  /* line 1518, app/assets/stylesheets/become_creator.scss */
  .input-group label {
    font-size: 12px;
  }
  /* line 1522, app/assets/stylesheets/become_creator.scss */
  .input-group .textfield,
.input-group textarea,
.input-group select {
    padding: 11px 12px;
    font-size: 16px;
    border-radius: 8px;
    min-height: 44px;
  }
  /* line 1531, app/assets/stylesheets/become_creator.scss */
  .input-group textarea {
    min-height: 80px;
  }
  /* line 1536, app/assets/stylesheets/become_creator.scss */
  .input-hint {
    font-size: 11px;
  }
  /* line 1540, app/assets/stylesheets/become_creator.scss */
  .username-prefix {
    font-size: 14px;
    left: 12px;
  }
  /* line 1545, app/assets/stylesheets/become_creator.scss */
  .username-input {
    padding-left: 30px !important;
  }
  /* line 1549, app/assets/stylesheets/become_creator.scss */
  .image-upload-card {
    padding: 14px;
  }
  /* line 1553, app/assets/stylesheets/become_creator.scss */
  .image-preview-box {
    height: 110px;
  }
  /* line 1556, app/assets/stylesheets/become_creator.scss */
  .image-preview-box.cover-preview {
    height: 70px;
  }
  /* line 1562, app/assets/stylesheets/become_creator.scss */
  .preview-placeholder svg {
    width: 36px;
    height: 36px;
  }
  /* line 1567, app/assets/stylesheets/become_creator.scss */
  .preview-placeholder span {
    font-size: 12px;
  }
  /* line 1572, app/assets/stylesheets/become_creator.scss */
  .image-requirements {
    margin-top: 10px;
    padding-top: 10px;
  }
  /* line 1577, app/assets/stylesheets/become_creator.scss */
  .file-input-label {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
    min-height: 44px;
  }
  /* line 1584, app/assets/stylesheets/become_creator.scss */
  .image-tips-box {
    padding: 12px;
    gap: 10px;
  }
  /* line 1589, app/assets/stylesheets/become_creator.scss */
  .tips-icon {
    width: 32px;
    height: 32px;
  }
  /* line 1593, app/assets/stylesheets/become_creator.scss */
  .tips-icon svg {
    width: 16px;
    height: 16px;
  }
  /* line 1599, app/assets/stylesheets/become_creator.scss */
  .tips-title {
    font-size: 12px;
  }
  /* line 1603, app/assets/stylesheets/become_creator.scss */
  .tips-text {
    font-size: 11px;
  }
  /* line 1607, app/assets/stylesheets/become_creator.scss */
  .terms-box {
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 14px;
  }
  /* line 1613, app/assets/stylesheets/become_creator.scss */
  .terms-title {
    font-size: 13px;
    margin-bottom: 6px;
  }
  /* line 1617, app/assets/stylesheets/become_creator.scss */
  .terms-title svg {
    width: 16px;
    height: 16px;
  }
  /* line 1623, app/assets/stylesheets/become_creator.scss */
  .terms-text {
    font-size: 12px;
    line-height: 1.5;
  }
  /* line 1628, app/assets/stylesheets/become_creator.scss */
  .error-messages {
    padding: 14px;
    border-radius: 8px;
  }
  /* line 1633, app/assets/stylesheets/become_creator.scss */
  .error-title {
    font-size: 13px;
    margin-bottom: 8px;
  }
  /* line 1638, app/assets/stylesheets/become_creator.scss */
  .error-list li {
    font-size: 12px;
    padding-left: 16px;
  }
  /* line 1642, app/assets/stylesheets/become_creator.scss */
  .error-list li::before {
    left: 6px;
  }
  /* line 1647, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions {
    margin-top: 18px;
    gap: 8px;
  }
  /* line 1651, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions .btn-submit {
    padding: 15px;
    font-size: 15px;
  }
  /* line 1656, app/assets/stylesheets/become_creator.scss */
  .creator-form-actions .btn-cancel {
    padding: 12px;
    font-size: 13px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · BECOME CREATOR OVERRIDE (/become-creator)
   -----------------------------------------------------------------
   Override visual del wizard de registro de creator.
   Mantiene los selectores legacy de become_creator.scss.

   Cero cambios al HTML/ERB · controllers (creator-wizard,
   creator-terms-modal, emoji-picker), forms, validation flow intactos.

   Legacy usa #ff4081 (coral) · alineamos todo a #ff0074/#ff3d9a brand.
   Carga DESPUÉS de become_creator en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE · warm-charcoal en lugar de negro puro
   ----------------------------------------------------------------- */
/* line 18, app/assets/stylesheets/_components.exo-become-creator.scss */
.become-creator-page {
  background-color: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   HERO SECTION · cinematográfico noir con brand glow
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 0, 116, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(180, 0, 255, 0.14) 0%, transparent 55%), linear-gradient(135deg, rgba(255, 0, 116, 0.05) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.18) !important;
  border-radius: 20px !important;
  padding: 64px 40px !important;
  margin-bottom: 36px !important;
  box-shadow: 0 20px 60px -20px rgba(255, 0, 116, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  /* Glow ambiental al fondo */
}

/* line 39, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-hero::before {
  background: linear-gradient(90deg, transparent, #ff0074 50%, #b000ff 75%, transparent) !important;
  height: 1px !important;
  opacity: 0.85;
}

/* line 46, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(255, 0, 116, 0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

/* line 60, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-hero-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 5.2vw, 52px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 18px !important;
  position: relative;
  z-index: 1;
  /* Texto con gradiente brand */
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 65%, #ff0074 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

/* line 79, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-hero-subtitle {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(15px, 1.6vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 0 auto 36px !important;
  max-width: 640px;
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------
   BENEFITS GRID · glass cards premium
   ----------------------------------------------------------------- */
/* line 95, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-benefits {
  position: relative;
  z-index: 1;
}

/* line 100, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-item {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 111, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 0, 116, 0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px -12px rgba(255, 0, 116, 0.3);
}

/* line 119, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-icon {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.35) !important;
  border-radius: 14px !important;
  margin: 0 auto 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 128, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-icon svg {
  width: 26px !important;
  height: 26px !important;
  fill: #ff3d9a !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.45));
}

/* line 136, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-item:hover .benefit-icon {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.28) 0%, rgba(180, 0, 255, 0.18) 100%) !important;
  border-color: rgba(255, 0, 116, 0.65) !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.4) !important;
}

/* line 143, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
}

/* line 152, app/assets/stylesheets/_components.exo-become-creator.scss */
.benefit-description {
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   FORM SECTIONS · glass cards
   ----------------------------------------------------------------- */
/* line 164, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-form-section {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  margin-bottom: 22px !important;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 172, app/assets/stylesheets/_components.exo-become-creator.scss */
.creator-form-section:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* -----------------------------------------------------------------
   SECTION TITLES
   ----------------------------------------------------------------- */
/* line 182, app/assets/stylesheets/_components.exo-become-creator.scss */
.section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
  /* Línea brand sutil bajo el título */
}

/* line 194, app/assets/stylesheets/_components.exo-become-creator.scss */
.section-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #ff0074 0%, transparent 100%);
}

/* line 204, app/assets/stylesheets/_components.exo-become-creator.scss */
.section-title svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 210, app/assets/stylesheets/_components.exo-become-creator.scss */
.section-description {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 22px !important;
}

/* -----------------------------------------------------------------
   INPUTS · alineado con stg-field pattern
   ----------------------------------------------------------------- */
/* line 223, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.02em !important;
}

/* line 231, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .textfield,
.input-group textarea,
.input-group select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  /* Padding explícito por lado · padding-right no se setea para preservar
       overrides específicos del legacy (.bio-textarea 50px para el emoji btn,
       .discount inputs con `style="padding-right:30px"` para el símbolo `%`). */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 14px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 251, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .textfield:hover,
.input-group textarea:hover,
.input-group select:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* line 255, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .textfield:focus,
.input-group textarea:focus,
.input-group select:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #ff0074 !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18) !important;
}

/* line 261, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .textfield::placeholder,
.input-group textarea::placeholder,
.input-group select::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* line 267, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-hint {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* -----------------------------------------------------------------
   USERNAME / SOCIAL prefix groups
   ----------------------------------------------------------------- */
/* line 278, app/assets/stylesheets/_components.exo-become-creator.scss */
.username-input-group,
.social-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 291, app/assets/stylesheets/_components.exo-become-creator.scss */
.username-input-group:focus-within,
.social-input-group:focus-within {
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.18);
}

/* line 297, app/assets/stylesheets/_components.exo-become-creator.scss */
.username-prefix,
.social-prefix {
  /* Reset legacy absolute positioning · ahora son flex siblings reales */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-right: 1px solid rgba(255, 0, 116, 0.2) !important;
  flex-shrink: 0;
}

/* line 318, app/assets/stylesheets/_components.exo-become-creator.scss */
.username-prefix svg,
.social-prefix svg {
  color: currentColor !important;
  fill: currentColor !important;
  transition: color 0.2s ease;
}

/* Selectors con specificity reforzada para vencer al general
   `.input-group .textfield` (0,2,0). Necesitamos al menos (0,3,0). */
/* line 327, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .username-input,
.input-group .social-input,
.input-group .textfield.username-input,
.input-group .textfield.social-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Reset el padding-left grande del legacy (35/44px que reservaba espacio
     para el icono absoluto) · ahora el prefix es sibling, padding normal. */
  padding-left: 14px !important;
}

/* line 342, app/assets/stylesheets/_components.exo-become-creator.scss */
.input-group .username-input:focus,
.input-group .social-input:focus,
.input-group .textfield.username-input:focus,
.input-group .textfield.social-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Focus state propagado al prefix para feedback visual */
/* line 352, app/assets/stylesheets/_components.exo-become-creator.scss */
.username-input-group:focus-within .username-prefix,
.social-input-group:focus-within .social-prefix {
  background: rgba(255, 0, 116, 0.18) !important;
  color: #fff !important;
  border-right-color: rgba(255, 0, 116, 0.45) !important;
}

/* -----------------------------------------------------------------
   IMAGE UPLOAD CARDS
   ----------------------------------------------------------------- */
/* line 363, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-upload-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 370, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-upload-card:hover {
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 375, app/assets/stylesheets/_components.exo-become-creator.scss */
.upload-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
}

/* line 381, app/assets/stylesheets/_components.exo-become-creator.scss */
.upload-title svg {
  fill: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 387, app/assets/stylesheets/_components.exo-become-creator.scss */
.upload-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.08em !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
}

/* line 394, app/assets/stylesheets/_components.exo-become-creator.scss */
.upload-badge.required {
  background: rgba(255, 0, 116, 0.12) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 400, app/assets/stylesheets/_components.exo-become-creator.scss */
.upload-badge.optional {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* line 407, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-preview-box {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 2px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 413, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-preview-box:hover {
  border-color: rgba(255, 0, 116, 0.4) !important;
}

/* line 417, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-preview-box.has-image {
  border-color: rgba(255, 0, 116, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.2), 0 12px 24px -8px rgba(255, 0, 116, 0.25);
}

/* line 424, app/assets/stylesheets/_components.exo-become-creator.scss */
.preview-placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: 'Rubik', sans-serif !important;
}

/* line 428, app/assets/stylesheets/_components.exo-become-creator.scss */
.preview-placeholder svg {
  fill: rgba(255, 255, 255, 0.2) !important;
}

/* line 433, app/assets/stylesheets/_components.exo-become-creator.scss */
.requirements-header {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 439, app/assets/stylesheets/_components.exo-become-creator.scss */
.requirements-header svg {
  fill: rgba(255, 255, 255, 0.45) !important;
}

/* line 444, app/assets/stylesheets/_components.exo-become-creator.scss */
.requirements-list li {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding-left: 18px !important;
  position: relative;
}

/* line 450, app/assets/stylesheets/_components.exo-become-creator.scss */
.requirements-list li::before {
  content: '•' !important;
  position: absolute !important;
  left: 4px !important;
  color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   IMAGE TIPS BOX · amber-toned advice
   ----------------------------------------------------------------- */
/* line 462, app/assets/stylesheets/_components.exo-become-creator.scss */
.image-tips-box {
  background: rgba(234, 179, 8, 0.06) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  border-left: 3px solid rgba(234, 179, 8, 0.55) !important;
}

/* line 470, app/assets/stylesheets/_components.exo-become-creator.scss */
.tips-icon {
  background: rgba(234, 179, 8, 0.14) !important;
  border-radius: 12px !important;
}

/* line 474, app/assets/stylesheets/_components.exo-become-creator.scss */
.tips-icon svg {
  fill: #fbbf24 !important;
}

/* line 477, app/assets/stylesheets/_components.exo-become-creator.scss */
.tips-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
}

/* line 483, app/assets/stylesheets/_components.exo-become-creator.scss */
.tips-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* -----------------------------------------------------------------
   CONTENT TAGS · pill chips brand
   ----------------------------------------------------------------- */
/* line 493, app/assets/stylesheets/_components.exo-become-creator.scss */
.content-tag-chip .tag-label {
  font-family: 'Rubik', sans-serif !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 507, app/assets/stylesheets/_components.exo-become-creator.scss */
.content-tag-chip:hover .tag-label {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
}

/* line 513, app/assets/stylesheets/_components.exo-become-creator.scss */
.content-tag-chip input[type="checkbox"]:checked + .tag-label {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.3) !important;
}

/* -----------------------------------------------------------------
   TERMS BOX · brand amber
   ----------------------------------------------------------------- */
/* line 526, app/assets/stylesheets/_components.exo-become-creator.scss */
.terms-box {
  background: rgba(234, 179, 8, 0.05) !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  border-left: 3px solid rgba(234, 179, 8, 0.55) !important;
}

/* line 534, app/assets/stylesheets/_components.exo-become-creator.scss */
.terms-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
}

/* line 540, app/assets/stylesheets/_components.exo-become-creator.scss */
.terms-text {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.65 !important;
}

/* line 545, app/assets/stylesheets/_components.exo-become-creator.scss */
.terms-text strong {
  color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   ERROR MESSAGES · red glass
   ----------------------------------------------------------------- */
/* line 552, app/assets/stylesheets/_components.exo-become-creator.scss */
.error-messages {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  border-left: 3px solid #ef4444 !important;
}

/* line 560, app/assets/stylesheets/_components.exo-become-creator.scss */
.error-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f87171 !important;
  font-size: 14px !important;
}

/* line 567, app/assets/stylesheets/_components.exo-become-creator.scss */
.error-list li {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(248, 113, 113, 0.85) !important;
  font-size: 13px !important;
}

/* line 572, app/assets/stylesheets/_components.exo-become-creator.scss */
.error-list li::before {
  color: #f87171 !important;
}

/* -----------------------------------------------------------------
   FORM ACTIONS · cancel + submit
   ----------------------------------------------------------------- */
/* line 579, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-cancel {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 13px 28px !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 592, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* line 599, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-submit {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 14px 32px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(255, 0, 116, 0.3) !important;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Sheen sweep on hover */
}

/* line 616, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 626, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-submit:hover {
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* line 630, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-submit:hover::after {
  transform: translateX(220%);
}

/* line 633, app/assets/stylesheets/_components.exo-become-creator.scss */
.btn-submit:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 100ms !important;
}

/* -----------------------------------------------------------------
   WIZARD · topbar/bottom-nav (mobile)
   ----------------------------------------------------------------- */
/* line 643, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active {
  /* Topbar más premium */
  /* Bottom nav glassy */
}

/* line 645, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-topbar {
  background: rgba(10, 10, 10, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* line 652, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-step-counter {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

/* line 659, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-step-counter strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: #ff3d9a !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}

/* line 667, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-step-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
}

/* line 675, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-dot {
  background: rgba(255, 255, 255, 0.1) !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 681, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-dot.wz-dot--active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  width: 22px !important;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.55) !important;
}

/* line 687, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-dot.wz-dot--done {
  background: rgba(255, 0, 116, 0.55) !important;
}

/* line 692, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-progress {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* line 696, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-progress-bar {
  background: linear-gradient(90deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.45) !important;
}

/* line 702, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-bottom-nav {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 0, 116, 0.18) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* line 710, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 720, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 100ms !important;
}

/* line 726, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn--back {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* line 732, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn--next {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.35) !important;
  position: relative;
  overflow: hidden;
  /* Sheen sweep */
}

/* line 741, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn--next::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 751, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn--next:hover {
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.5) !important;
}

/* line 753, app/assets/stylesheets/_components.exo-become-creator.scss */
.wizard-active .wz-btn--next:hover::after {
  transform: translateX(220%);
}

/* -----------------------------------------------------------------
   WIZARD VALIDATION ERROR
   ----------------------------------------------------------------- */
/* line 762, app/assets/stylesheets/_components.exo-become-creator.scss */
.wz-field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* line 767, app/assets/stylesheets/_components.exo-become-creator.scss */
.wz-error-msg {
  color: #f87171 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 1024px) {
  /* line 778, app/assets/stylesheets/_components.exo-become-creator.scss */
  .become-creator-page {
    padding: 16px 16px 110px !important;
  }
}

@media (max-width: 768px) {
  /* line 784, app/assets/stylesheets/_components.exo-become-creator.scss */
  .creator-hero {
    padding: 36px 22px !important;
    border-radius: 16px !important;
    margin-bottom: 22px !important;
  }
  /* line 790, app/assets/stylesheets/_components.exo-become-creator.scss */
  .creator-hero-title {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  /* line 794, app/assets/stylesheets/_components.exo-become-creator.scss */
  .creator-hero-subtitle {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }
  /* line 799, app/assets/stylesheets/_components.exo-become-creator.scss */
  .creator-benefits {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  /* line 805, app/assets/stylesheets/_components.exo-become-creator.scss */
  .benefit-item {
    padding: 18px 14px !important;
  }
  /* line 809, app/assets/stylesheets/_components.exo-become-creator.scss */
  .benefit-icon {
    width: 48px !important;
    height: 48px !important;
  }
  /* line 813, app/assets/stylesheets/_components.exo-become-creator.scss */
  .benefit-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* line 816, app/assets/stylesheets/_components.exo-become-creator.scss */
  .benefit-title {
    font-size: 13.5px !important;
  }
  /* line 820, app/assets/stylesheets/_components.exo-become-creator.scss */
  .benefit-description {
    font-size: 12px !important;
  }
  /* line 824, app/assets/stylesheets/_components.exo-become-creator.scss */
  .creator-form-section {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  /* line 829, app/assets/stylesheets/_components.exo-become-creator.scss */
  .section-title {
    font-size: 17px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
  }
  /* line 834, app/assets/stylesheets/_components.exo-become-creator.scss */
  .section-title svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* line 837, app/assets/stylesheets/_components.exo-become-creator.scss */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* line 842, app/assets/stylesheets/_components.exo-become-creator.scss */
  .image-upload-card {
    padding: 16px !important;
  }
}
/* ========================================
   CREATOR CONVERSATIONS - Estilo Instagram
   ======================================== */
/* line 6, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  height: calc(100vh - 90px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

/* line 17, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}

/* line 25, app/assets/stylesheets/creator_conversations.scss */
.creator-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}

/* line 32, app/assets/stylesheets/creator_conversations.scss */
.creator-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  text-align: center;
  padding: 40px;
}

/* line 42, app/assets/stylesheets/creator_conversations.scss */
.creator-chat-empty svg {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.3;
}

/* line 49, app/assets/stylesheets/creator_conversations.scss */
.creator-chat-empty h3 {
  color: #8e8e8e;
  font-size: 18px;
  margin-bottom: 8px;
}

/* line 55, app/assets/stylesheets/creator_conversations.scss */
.creator-chat-empty p {
  color: #666;
  font-size: 14px;
}

/* line 62, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-page .social-layout {
  grid-template-columns: 240px minmax(350px, 1fr) minmax(400px, 1fr);
  gap: 20px;
}

/* line 67, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-page .social-layout > .main-feed {
  width: 100%;
}

/* line 73, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-right: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

/* line 86, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
}

/* line 93, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

/* line 101, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}

/* line 108, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-list::-webkit-scrollbar {
  width: 6px;
}

/* line 112, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 116, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* line 120, app/assets/stylesheets/creator_conversations.scss */
.creator-conversations-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* line 126, app/assets/stylesheets/creator_conversations.scss */
.creator-conversation-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* line 139, app/assets/stylesheets/creator_conversations.scss */
.creator-conversation-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 143, app/assets/stylesheets/creator_conversations.scss */
.creator-conversation-item.active {
  background: rgba(255, 64, 129, 0.1);
  border-left: 3px solid #ff4081;
}

/* line 150, app/assets/stylesheets/creator_conversations.scss */
.creator-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 64, 129, 0.3);
}

/* line 159, app/assets/stylesheets/creator_conversations.scss */
.creator-user-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 175, app/assets/stylesheets/creator_conversations.scss */
.creator-conversation-content {
  flex: 1;
  min-width: 0;
}

/* line 180, app/assets/stylesheets/creator_conversations.scss */
.creator-user-name {
  font-weight: 600;
  font-size: 15px;
  color: #f5f5f5;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 190, app/assets/stylesheets/creator_conversations.scss */
.creator-user-email {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

/* line 196, app/assets/stylesheets/creator_conversations.scss */
.creator-last-message {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 204, app/assets/stylesheets/creator_conversations.scss */
.creator-last-message em {
  font-style: italic;
  color: #666;
}

/* line 211, app/assets/stylesheets/creator_conversations.scss */
.creator-conversation-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* line 220, app/assets/stylesheets/creator_conversations.scss */
.creator-message-time {
  color: #666;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 227, app/assets/stylesheets/creator_conversations.scss */
.creator-message-time svg {
  width: 12px;
  height: 12px;
}

/* line 233, app/assets/stylesheets/creator_conversations.scss */
.creator-unread-badge {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  min-width: 24px;
  text-align: center;
}

/* line 246, app/assets/stylesheets/creator_conversations.scss */
.creator-online-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #28a745;
  border: 2px solid #000;
  position: absolute;
  bottom: 2px;
  right: 2px;
}

/* line 257, app/assets/stylesheets/creator_conversations.scss */
.creator-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* line 263, app/assets/stylesheets/creator_conversations.scss */
.creator-empty-conversations {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(220, 53, 69, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  text-align: center;
  padding: 80px 40px;
  margin: 40px 0;
}

/* line 272, app/assets/stylesheets/creator_conversations.scss */
.creator-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 283, app/assets/stylesheets/creator_conversations.scss */
.creator-empty-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

/* line 290, app/assets/stylesheets/creator_conversations.scss */
.creator-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 12px;
}

/* line 297, app/assets/stylesheets/creator_conversations.scss */
.creator-empty-subtitle {
  color: #8e8e8e;
  font-size: 15px;
  line-height: 1.5;
}

/* line 304, app/assets/stylesheets/creator_conversations.scss */
.creator-pagination-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 1024px) {
  /* line 312, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  /* line 319, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-page .left-sidebar {
    display: none;
  }
  /* line 323, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-container {
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    min-height: 0;
    border-radius: 0;
    border: none;
  }
  /* line 331, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-header {
    flex-shrink: 0;
  }
  /* line 335, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-list {
    flex: 1;
    overflow-y: auto;
  }
  /* line 340, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-page .main-feed {
    display: block;
    max-width: 100%;
    padding-bottom: 0;
  }
  /* line 348, app/assets/stylesheets/creator_conversations.scss */
  turbo-frame#chat_panel .creator-chat-empty {
    display: none !important;
  }
  /* line 354, app/assets/stylesheets/creator_conversations.scss */
  turbo-frame#chat_panel:has(.creator-chat-container) {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 60px;
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    z-index: 200;
    background: #000;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  /* line 369, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-container {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  /* line 375, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversations-list {
    overflow-x: hidden;
    width: 100%;
  }
  /* line 380, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversation-item {
    padding: 12px 16px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* line 389, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversation-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  /* line 395, app/assets/stylesheets/creator_conversations.scss */
  .creator-user-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* line 402, app/assets/stylesheets/creator_conversations.scss */
  .creator-last-message {
    font-size: 13px;
    max-width: 100%;
  }
  /* line 407, app/assets/stylesheets/creator_conversations.scss */
  .creator-conversation-meta {
    flex-shrink: 0;
    min-width: 50px;
    max-width: 60px;
  }
  /* line 413, app/assets/stylesheets/creator_conversations.scss */
  .creator-message-time {
    font-size: 11px;
    white-space: nowrap;
  }
  /* line 418, app/assets/stylesheets/creator_conversations.scss */
  .creator-user-avatar,
.creator-user-avatar-placeholder {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  /* line 425, app/assets/stylesheets/creator_conversations.scss */
  .creator-empty-conversations {
    padding: 60px 24px;
  }
  /* line 429, app/assets/stylesheets/creator_conversations.scss */
  .creator-empty-icon {
    width: 64px;
    height: 64px;
  }
  /* line 433, app/assets/stylesheets/creator_conversations.scss */
  .creator-empty-icon svg {
    width: 32px;
    height: 32px;
  }
  /* line 439, app/assets/stylesheets/creator_conversations.scss */
  .creator-empty-title {
    font-size: 20px;
  }
}
/* ========================================
   CREATOR CHAT PANEL - Estilo Instagram
   ======================================== */
/* line 6, app/assets/stylesheets/creator_chat.scss */
.creator-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

/* line 19, app/assets/stylesheets/creator_chat.scss */
.creator-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

/* line 29, app/assets/stylesheets/creator_chat.scss */
.creator-chat-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 44, app/assets/stylesheets/creator_chat.scss */
.creator-chat-user-info {
  flex: 1;
  min-width: 0;
}

/* line 49, app/assets/stylesheets/creator_chat.scss */
.creator-chat-user-name {
  font-weight: 600;
  font-size: 16px;
  color: #f5f5f5;
  margin-bottom: 2px;
}

/* line 56, app/assets/stylesheets/creator_chat.scss */
.creator-chat-user-email {
  font-size: 13px;
  color: #666;
}

/* line 62, app/assets/stylesheets/creator_chat.scss */
.creator-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #000;
}

/* line 71, app/assets/stylesheets/creator_chat.scss */
.creator-messages-container::-webkit-scrollbar {
  width: 6px;
}

/* line 75, app/assets/stylesheets/creator_chat.scss */
.creator-messages-container::-webkit-scrollbar-track {
  background: transparent;
}

/* line 79, app/assets/stylesheets/creator_chat.scss */
.creator-messages-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* line 83, app/assets/stylesheets/creator_chat.scss */
.creator-messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* line 90, app/assets/stylesheets/creator_chat.scss */
.creator-message {
  display: flex;
  gap: 10px;
  max-width: 70%;
  animation: messageSlide 0.2s ease-out;
}

/* line 96, app/assets/stylesheets/creator_chat.scss */
.creator-message.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* line 101, app/assets/stylesheets/creator_chat.scss */
.creator-message.received {
  align-self: flex-start;
}

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

/* line 117, app/assets/stylesheets/creator_chat.scss */
.creator-message-avatar-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* line 124, app/assets/stylesheets/creator_chat.scss */
.creator-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

/* line 138, app/assets/stylesheets/creator_chat.scss */
.creator-message-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
}

/* line 146, app/assets/stylesheets/creator_chat.scss */
.creator-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #28a745;
  border: 2px solid #000;
  border-radius: 50%;
}

/* line 157, app/assets/stylesheets/creator_chat.scss */
.creator-message-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 16px;
  word-wrap: break-word;
  max-width: 100%;
}

/* line 165, app/assets/stylesheets/creator_chat.scss */
.creator-message.sent .creator-message-content {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
}

/* line 170, app/assets/stylesheets/creator_chat.scss */
.creator-message-text {
  margin: 0;
  line-height: 1.5;
  color: #f5f5f5;
  font-size: 14px;
}

/* line 177, app/assets/stylesheets/creator_chat.scss */
.creator-message.sent .creator-message-text {
  color: #fff;
}

/* line 181, app/assets/stylesheets/creator_chat.scss */
.creator-message-time {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

/* line 187, app/assets/stylesheets/creator_chat.scss */
.creator-message.sent .creator-message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* line 191, app/assets/stylesheets/creator_chat.scss */
.creator-message-image {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 400px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  display: block;
  margin-bottom: 8px;
}

/* line 202, app/assets/stylesheets/creator_chat.scss */
.creator-message-image:hover {
  transform: scale(1.02);
}

/* line 208, app/assets/stylesheets/creator_chat.scss */
.creator-message-form-container {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

/* line 215, app/assets/stylesheets/creator_chat.scss */
.creator-message-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 221, app/assets/stylesheets/creator_chat.scss */
.creator-message-input-wrapper {
  width: 100%;
  position: relative;
}

/* line 227, app/assets/stylesheets/creator_chat.scss */
.message-form-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* line 234, app/assets/stylesheets/creator_chat.scss */
.creator-message-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  color: #f5f5f5;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}

/* line 248, app/assets/stylesheets/creator_chat.scss */
.creator-message-input:focus {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 254, app/assets/stylesheets/creator_chat.scss */
.creator-message-input::placeholder {
  color: #666;
}

/* line 259, app/assets/stylesheets/creator_chat.scss */
.creator-send-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: none;
  border-radius: 24px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* line 271, app/assets/stylesheets/creator_chat.scss */
.creator-send-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
}

/* line 276, app/assets/stylesheets/creator_chat.scss */
.creator-send-button:active {
  transform: translateY(0);
}

/* line 280, app/assets/stylesheets/creator_chat.scss */
.creator-send-button:disabled {
  background: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  transform: none;
  opacity: 0.5;
}

/* line 289, app/assets/stylesheets/creator_chat.scss */
.creator-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 90px);
  color: #666;
  text-align: center;
  padding: 40px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* line 304, app/assets/stylesheets/creator_chat.scss */
.creator-chat-empty svg {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  opacity: 0.2;
}

/* line 311, app/assets/stylesheets/creator_chat.scss */
.creator-chat-empty h3 {
  color: #8e8e8e;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* line 318, app/assets/stylesheets/creator_chat.scss */
.creator-chat-empty p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* line 326, app/assets/stylesheets/creator_chat.scss */
.mobile-creator-chat-back-btn {
  display: none;
}

@media (max-width: 1024px) {
  /* line 332, app/assets/stylesheets/creator_chat.scss */
  .creator-chat-container {
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    min-height: 0;
    border-radius: 0;
  }
  /* line 339, app/assets/stylesheets/creator_chat.scss */
  .creator-chat-empty {
    display: none;
  }
  /* line 344, app/assets/stylesheets/creator_chat.scss */
  .mobile-creator-chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #f5f5f5;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    margin-right: 8px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  /* line 359, app/assets/stylesheets/creator_chat.scss */
  .mobile-creator-chat-back-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }
  /* line 363, app/assets/stylesheets/creator_chat.scss */
  .mobile-creator-chat-back-btn svg {
    width: 24px;
    height: 24px;
  }
  /* line 369, app/assets/stylesheets/creator_chat.scss */
  .creator-chat-header {
    padding: 12px 16px;
  }
  /* line 373, app/assets/stylesheets/creator_chat.scss */
  .creator-message {
    max-width: 80%;
  }
  /* line 377, app/assets/stylesheets/creator_chat.scss */
  .creator-message-image {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  /* line 383, app/assets/stylesheets/creator_chat.scss */
  .creator-message {
    max-width: 90%;
  }
  /* line 387, app/assets/stylesheets/creator_chat.scss */
  .creator-messages-container {
    padding: 16px;
  }
  /* line 391, app/assets/stylesheets/creator_chat.scss */
  .creator-message-form-container {
    padding: 12px 16px;
  }
}

/* line 397, app/assets/stylesheets/creator_chat.scss */
.message-action-buttons {
  display: flex;
  gap: 8px;
}

/* line 402, app/assets/stylesheets/creator_chat.scss */
.message-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #8e8e8e;
}

/* line 415, app/assets/stylesheets/creator_chat.scss */
.message-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ff4081;
  color: #ff4081;
  transform: scale(1.05);
}

/* line 422, app/assets/stylesheets/creator_chat.scss */
.message-action-btn svg {
  width: 20px;
  height: 20px;
}

/* line 429, app/assets/stylesheets/creator_chat.scss */
.creator-gif-preview,
.creator-image-preview {
  margin-bottom: 12px;
}

/* line 434, app/assets/stylesheets/creator_chat.scss */
.creator-gif-preview-container,
.creator-image-preview-container {
  position: relative;
  display: inline-block;
  max-width: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 64, 129, 0.3);
}

/* line 443, app/assets/stylesheets/creator_chat.scss */
.creator-gif-preview-container img,
.creator-image-preview-container img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 200px;
}

/* line 451, app/assets/stylesheets/creator_chat.scss */
.creator-gif-remove-btn,
.creator-image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* line 469, app/assets/stylesheets/creator_chat.scss */
.creator-gif-remove-btn:hover,
.creator-image-remove-btn:hover {
  background: #ff4081;
  transform: scale(1.1);
}

/* line 476, app/assets/stylesheets/creator_chat.scss */
.creator-message-gif {
  max-width: 250px;
  max-height: 250px;
  border-radius: 8px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* line 484, app/assets/stylesheets/creator_chat.scss */
.creator-message-gif:hover {
  transform: scale(1.02);
}

/* line 490, app/assets/stylesheets/creator_chat.scss */
.emoji-picker {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-height: 400px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  overflow: hidden;
}

/* line 505, app/assets/stylesheets/creator_chat.scss */
.emoji-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

/* line 514, app/assets/stylesheets/creator_chat.scss */
.emoji-picker-title {
  font-weight: 600;
  font-size: 14px;
  color: #f5f5f5;
}

/* line 520, app/assets/stylesheets/creator_chat.scss */
.emoji-close-btn {
  background: none;
  border: none;
  color: #8e8e8e;
  font-size: 24px;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

/* line 534, app/assets/stylesheets/creator_chat.scss */
.emoji-close-btn:hover {
  color: #ff4081;
}

/* line 539, app/assets/stylesheets/creator_chat.scss */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 16px;
  max-height: 320px;
  overflow-y: auto;
}

/* line 547, app/assets/stylesheets/creator_chat.scss */
.emoji-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 551, app/assets/stylesheets/creator_chat.scss */
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 557, app/assets/stylesheets/creator_chat.scss */
.emoji-item {
  font-size: 28px;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

/* line 565, app/assets/stylesheets/creator_chat.scss */
.emoji-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.2);
}

/* line 572, app/assets/stylesheets/creator_chat.scss */
.gif-picker {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-height: 500px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* line 589, app/assets/stylesheets/creator_chat.scss */
.gif-search {
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #f5f5f5;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

/* line 601, app/assets/stylesheets/creator_chat.scss */
.gif-search:focus {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.08);
}

/* line 606, app/assets/stylesheets/creator_chat.scss */
.gif-search::placeholder {
  color: #666;
}

/* line 611, app/assets/stylesheets/creator_chat.scss */
.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
  overflow-y: auto;
  max-height: 400px;
}

/* line 619, app/assets/stylesheets/creator_chat.scss */
.gif-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 623, app/assets/stylesheets/creator_chat.scss */
.gif-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 629, app/assets/stylesheets/creator_chat.scss */
.gif-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  background: rgba(255, 255, 255, 0.05);
}

/* line 637, app/assets/stylesheets/creator_chat.scss */
.gif-item:hover {
  transform: scale(1.05);
}

/* line 641, app/assets/stylesheets/creator_chat.scss */
.gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 648, app/assets/stylesheets/creator_chat.scss */
.gif-loading,
.gif-error {
  text-align: center;
  padding: 40px 20px;
  color: #8e8e8e;
  font-size: 14px;
  grid-column: 1 / -1;
}

/* line 657, app/assets/stylesheets/creator_chat.scss */
.gif-error {
  color: #ff4081;
}

/* line 663, app/assets/stylesheets/creator_chat.scss */
.content-notification-card {
  align-self: center;
  max-width: 320px;
  width: 100%;
  margin: 16px 0;
  animation: messageSlide 0.3s ease-out;
}

/* line 671, app/assets/stylesheets/creator_chat.scss */
.content-notification-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* line 681, app/assets/stylesheets/creator_chat.scss */
.content-notification-link-wrapper:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 64, 129, 0.4);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.15);
}

/* line 688, app/assets/stylesheets/creator_chat.scss */
.content-notification-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

/* line 696, app/assets/stylesheets/creator_chat.scss */
.notification-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* line 702, app/assets/stylesheets/creator_chat.scss */
.content-notification-link-wrapper:hover .notification-banner-img {
  transform: scale(1.05);
}

/* line 707, app/assets/stylesheets/creator_chat.scss */
video.notification-banner-img {
  background: #000;
  display: block;
}

/* line 712, app/assets/stylesheets/creator_chat.scss */
.notification-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  color: rgba(255, 255, 255, 0.2);
}

/* line 722, app/assets/stylesheets/creator_chat.scss */
.notification-locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 735, app/assets/stylesheets/creator_chat.scss */
.notification-lock-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
}

/* line 743, app/assets/stylesheets/creator_chat.scss */
.notification-price {
  font-size: 18px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
}

/* line 753, app/assets/stylesheets/creator_chat.scss */
.notification-gallery-badge,
.notification-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* line 770, app/assets/stylesheets/creator_chat.scss */
.content-notification-info {
  padding: 16px;
}

/* line 774, app/assets/stylesheets/creator_chat.scss */
.content-notification-title {
  color: #ff4081;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* line 783, app/assets/stylesheets/creator_chat.scss */
.content-notification-text {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* line 791, app/assets/stylesheets/creator_chat.scss */
.content-notification-desc {
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* line 798, app/assets/stylesheets/creator_chat.scss */
.content-notification-cta {
  margin-top: 12px;
}

/* line 802, app/assets/stylesheets/creator_chat.scss */
.cta-unlock {
  display: inline-block;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
  transition: all 0.2s;
}

/* line 813, app/assets/stylesheets/creator_chat.scss */
.content-notification-link-wrapper:hover .cta-unlock {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.4);
}

/* line 819, app/assets/stylesheets/creator_chat.scss */
.cta-view {
  display: inline-block;
  color: #ff4081;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

/* line 826, app/assets/stylesheets/creator_chat.scss */
.content-notification-link-wrapper:hover .cta-view {
  color: #f50057;
}

/* line 831, app/assets/stylesheets/creator_chat.scss */
.content-notification-link {
  color: #ff4081;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* line 840, app/assets/stylesheets/creator_chat.scss */
.content-notification-link:hover {
  text-decoration: underline;
}

/* line 846, app/assets/stylesheets/creator_chat.scss */
.content-notification-card.sent-content {
  align-self: flex-end;
  max-width: 280px;
}

/* line 850, app/assets/stylesheets/creator_chat.scss */
.content-notification-card.sent-content .content-notification-link-wrapper {
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 854, app/assets/stylesheets/creator_chat.scss */
.content-notification-card.sent-content .content-notification-title {
  color: #28a745;
}

/* line 859, app/assets/stylesheets/creator_chat.scss */
.notification-price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* line 871, app/assets/stylesheets/creator_chat.scss */
.content-notification-time {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

@media (max-width: 768px) {
  /* line 879, app/assets/stylesheets/creator_chat.scss */
  .emoji-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 50vh;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  }
  /* line 895, app/assets/stylesheets/creator_chat.scss */
  .emoji-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    max-height: calc(50vh - 130px);
    -webkit-overflow-scrolling: touch;
  }
  /* line 903, app/assets/stylesheets/creator_chat.scss */
  .emoji-item {
    font-size: 26px;
    padding: 8px 4px;
    min-height: 44px;
  }
  /* line 909, app/assets/stylesheets/creator_chat.scss */
  .gif-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  }
  /* line 925, app/assets/stylesheets/creator_chat.scss */
  .gif-search {
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
  /* line 933, app/assets/stylesheets/creator_chat.scss */
  .gif-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: 8px;
    padding: 0 12px 12px;
    max-height: calc(60vh - 120px);
    -webkit-overflow-scrolling: touch;
  }
  /* line 942, app/assets/stylesheets/creator_chat.scss */
  .gif-item {
    aspect-ratio: auto;
    border-radius: 8px;
    height: 100%;
    min-height: 130px;
  }
  /* line 949, app/assets/stylesheets/creator_chat.scss */
  .creator-gif-preview-container,
.creator-image-preview-container {
    max-width: 150px;
  }
  /* line 953, app/assets/stylesheets/creator_chat.scss */
  .creator-gif-preview-container img,
.creator-image-preview-container img {
    max-height: 150px;
  }
  /* line 958, app/assets/stylesheets/creator_chat.scss */
  .content-notification-card {
    max-width: 280px;
  }
  /* line 962, app/assets/stylesheets/creator_chat.scss */
  .notification-price {
    font-size: 16px;
    padding: 5px 12px;
  }
  /* line 967, app/assets/stylesheets/creator_chat.scss */
  .content-notification-text {
    font-size: 15px;
  }
}

/* line 973, app/assets/stylesheets/creator_chat.scss */
.system-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 20px;
  margin: 16px auto;
  max-width: 360px;
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.1) 0%, rgba(245, 0, 87, 0.08) 100%);
  border: 1px solid rgba(255, 64, 129, 0.25);
  border-radius: 16px;
  animation: messageSlide 0.3s ease-out;
}

/* line 987, app/assets/stylesheets/creator_chat.scss */
.system-message-content {
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.6;
}

/* line 992, app/assets/stylesheets/creator_chat.scss */
.system-message-content p {
  margin: 0 0 4px 0;
}

/* line 995, app/assets/stylesheets/creator_chat.scss */
.system-message-content p:last-child {
  margin-bottom: 0;
}

/* line 999, app/assets/stylesheets/creator_chat.scss */
.system-message-content p:first-child {
  font-weight: 600;
  font-size: 15px;
  color: #ff4081;
}

/* line 1007, app/assets/stylesheets/creator_chat.scss */
.system-message-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}
/* ========================================
   USER CONVERSATIONS - Estilo Instagram
   ======================================== */
/* line 6, app/assets/stylesheets/user_conversations.scss */
.user-conversations-page .social-layout {
  grid-template-columns: 240px minmax(350px, 1fr) minmax(400px, 1fr);
  gap: 20px;
}

/* line 11, app/assets/stylesheets/user_conversations.scss */
.user-conversations-page .social-layout > .main-feed {
  width: 100%;
}

/* line 17, app/assets/stylesheets/user_conversations.scss */
.user-conversations-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-right: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

/* line 30, app/assets/stylesheets/user_conversations.scss */
.user-conversations-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
}

/* line 37, app/assets/stylesheets/user_conversations.scss */
.user-conversations-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 4px 0;
}

/* line 44, app/assets/stylesheets/user_conversations.scss */
.user-conversations-subtitle {
  font-size: 13px;
  color: #8e8e8e;
  margin: 0;
}

/* line 51, app/assets/stylesheets/user_conversations.scss */
.user-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}

/* line 58, app/assets/stylesheets/user_conversations.scss */
.user-conversations-list::-webkit-scrollbar {
  width: 6px;
}

/* line 62, app/assets/stylesheets/user_conversations.scss */
.user-conversations-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 66, app/assets/stylesheets/user_conversations.scss */
.user-conversations-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* line 70, app/assets/stylesheets/user_conversations.scss */
.user-conversations-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* line 76, app/assets/stylesheets/user_conversations.scss */
.user-conversation-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* line 89, app/assets/stylesheets/user_conversations.scss */
.user-conversation-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 93, app/assets/stylesheets/user_conversations.scss */
.user-conversation-item.active {
  background: rgba(255, 64, 129, 0.1);
  border-left: 3px solid #ff4081;
}

/* line 98, app/assets/stylesheets/user_conversations.scss */
.user-conversation-item.unread {
  background: rgba(255, 64, 129, 0.05);
}

/* line 104, app/assets/stylesheets/user_conversations.scss */
.user-creator-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* line 109, app/assets/stylesheets/user_conversations.scss */
.user-creator-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 64, 129, 0.3);
}

/* line 118, app/assets/stylesheets/user_conversations.scss */
.user-creator-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 133, app/assets/stylesheets/user_conversations.scss */
.user-online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #28a745;
  border: 2px solid #000;
  border-radius: 50%;
}

/* line 145, app/assets/stylesheets/user_conversations.scss */
.user-conversation-content {
  flex: 1;
  min-width: 0;
}

/* line 150, app/assets/stylesheets/user_conversations.scss */
.user-conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

/* line 157, app/assets/stylesheets/user_conversations.scss */
.user-conversation-name {
  font-weight: 600;
  font-size: 15px;
  color: #f5f5f5;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 167, app/assets/stylesheets/user_conversations.scss */
.user-conversation-time {
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
  margin-left: 8px;
}

/* line 174, app/assets/stylesheets/user_conversations.scss */
.user-message-preview {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 186, app/assets/stylesheets/user_conversations.scss */
.user-message-preview svg {
  flex-shrink: 0;
}

/* line 190, app/assets/stylesheets/user_conversations.scss */
.user-message-preview.empty {
  font-style: italic;
  color: #666;
}

/* line 196, app/assets/stylesheets/user_conversations.scss */
.you-label {
  font-weight: 600;
  color: #666;
}

/* line 202, app/assets/stylesheets/user_conversations.scss */
.user-unread-badge {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* line 216, app/assets/stylesheets/user_conversations.scss */
.user-empty-conversations {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(220, 53, 69, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  text-align: center;
  padding: 80px 40px;
  margin: 40px 20px;
}

/* line 225, app/assets/stylesheets/user_conversations.scss */
.user-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 236, app/assets/stylesheets/user_conversations.scss */
.user-empty-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

/* line 243, app/assets/stylesheets/user_conversations.scss */
.user-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 12px;
}

/* line 250, app/assets/stylesheets/user_conversations.scss */
.user-empty-message {
  color: #8e8e8e;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* line 257, app/assets/stylesheets/user_conversations.scss */
.btn-explore {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 270, app/assets/stylesheets/user_conversations.scss */
.btn-explore:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.4);
}

@media (max-width: 1024px) {
  /* line 278, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  /* line 285, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-page .left-sidebar {
    display: none;
  }
  /* line 289, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-container {
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    min-height: 0;
    border-radius: 0;
    border: none;
  }
  /* line 297, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-header {
    flex-shrink: 0;
  }
  /* line 301, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-list {
    flex: 1;
    overflow-y: auto;
  }
  /* line 306, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-page .main-feed {
    display: block;
    max-width: 100%;
    padding-bottom: 0;
  }
  /* line 314, app/assets/stylesheets/user_conversations.scss */
  turbo-frame#chat_panel .user-chat-empty {
    display: none !important;
  }
  /* line 320, app/assets/stylesheets/user_conversations.scss */
  turbo-frame#chat_panel:has(.user-chat-container) {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 60px;
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    z-index: 200;
    background: #000;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  /* line 335, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-container {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  /* line 341, app/assets/stylesheets/user_conversations.scss */
  .user-conversations-list {
    overflow-x: hidden;
    width: 100%;
  }
  /* line 346, app/assets/stylesheets/user_conversations.scss */
  .user-conversation-item {
    padding: 12px 16px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* line 355, app/assets/stylesheets/user_conversations.scss */
  .user-conversation-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  /* line 361, app/assets/stylesheets/user_conversations.scss */
  .user-conversation-header {
    max-width: 100%;
    overflow: hidden;
  }
  /* line 366, app/assets/stylesheets/user_conversations.scss */
  .user-conversation-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  /* line 375, app/assets/stylesheets/user_conversations.scss */
  .user-conversation-time {
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* line 381, app/assets/stylesheets/user_conversations.scss */
  .user-message-preview {
    font-size: 13px;
    max-width: 100%;
  }
  /* line 386, app/assets/stylesheets/user_conversations.scss */
  .user-creator-avatar,
.user-creator-avatar-placeholder {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  /* line 393, app/assets/stylesheets/user_conversations.scss */
  .user-empty-conversations {
    padding: 60px 24px;
  }
}
/* ========================================
   USER CHAT PANEL - Estilo Instagram
   ======================================== */
/* line 6, app/assets/stylesheets/user_chat.scss */
.user-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

/* line 19, app/assets/stylesheets/user_chat.scss */
.user-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

/* line 29, app/assets/stylesheets/user_chat.scss */
.user-chat-creator-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 38, app/assets/stylesheets/user_chat.scss */
.user-chat-creator-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 53, app/assets/stylesheets/user_chat.scss */
.user-chat-creator-info {
  flex: 1;
  min-width: 0;
}

/* line 58, app/assets/stylesheets/user_chat.scss */
.user-chat-creator-name {
  font-weight: 600;
  font-size: 16px;
  color: #f5f5f5;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 68, app/assets/stylesheets/user_chat.scss */
.verified-icon {
  width: 16px;
  height: 16px;
  fill: #ff4081;
}

/* line 74, app/assets/stylesheets/user_chat.scss */
.user-chat-creator-username {
  font-size: 13px;
  color: #666;
}

/* line 79, app/assets/stylesheets/user_chat.scss */
.view-profile-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* line 91, app/assets/stylesheets/user_chat.scss */
.view-profile-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ff4081;
}

/* line 98, app/assets/stylesheets/user_chat.scss */
.user-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #000;
}

/* line 107, app/assets/stylesheets/user_chat.scss */
.user-messages-container::-webkit-scrollbar {
  width: 6px;
}

/* line 111, app/assets/stylesheets/user_chat.scss */
.user-messages-container::-webkit-scrollbar-track {
  background: transparent;
}

/* line 115, app/assets/stylesheets/user_chat.scss */
.user-messages-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* line 119, app/assets/stylesheets/user_chat.scss */
.user-messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* line 126, app/assets/stylesheets/user_chat.scss */
.user-message {
  display: flex;
  gap: 10px;
  max-width: 70%;
  animation: messageSlide 0.2s ease-out;
}

/* line 132, app/assets/stylesheets/user_chat.scss */
.user-message.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* line 137, app/assets/stylesheets/user_chat.scss */
.user-message.received {
  align-self: flex-start;
}

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

/* line 153, app/assets/stylesheets/user_chat.scss */
.user-message-avatar-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* line 160, app/assets/stylesheets/user_chat.scss */
.user-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

/* line 174, app/assets/stylesheets/user_chat.scss */
.user-message-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
  display: block;
  flex-shrink: 0;
}

/* line 184, app/assets/stylesheets/user_chat.scss */
.user-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #28a745;
  border: 2px solid #000;
  border-radius: 50%;
}

/* line 195, app/assets/stylesheets/user_chat.scss */
.user-message-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 16px;
  word-wrap: break-word;
  max-width: 100%;
}

/* line 203, app/assets/stylesheets/user_chat.scss */
.user-message.sent .user-message-content {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
}

/* line 208, app/assets/stylesheets/user_chat.scss */
.user-message-text {
  margin: 0;
  line-height: 1.5;
  color: #f5f5f5;
  font-size: 14px;
}

/* line 215, app/assets/stylesheets/user_chat.scss */
.user-message.sent .user-message-text {
  color: #fff;
}

/* line 219, app/assets/stylesheets/user_chat.scss */
.user-message-time {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

/* line 225, app/assets/stylesheets/user_chat.scss */
.user-message.sent .user-message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* line 229, app/assets/stylesheets/user_chat.scss */
.user-message-image {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 400px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  display: block;
  margin-bottom: 8px;
}

/* line 240, app/assets/stylesheets/user_chat.scss */
.user-message-image:hover {
  transform: scale(1.02);
}

/* line 246, app/assets/stylesheets/user_chat.scss */
.content-notification-card {
  align-self: center;
  max-width: 320px;
  width: 100%;
  margin: 16px 0;
  animation: messageSlide 0.3s ease-out;
}

/* line 254, app/assets/stylesheets/user_chat.scss */
.content-notification-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* line 264, app/assets/stylesheets/user_chat.scss */
.content-notification-link-wrapper:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 64, 129, 0.4);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.15);
}

/* line 271, app/assets/stylesheets/user_chat.scss */
.content-notification-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

/* line 279, app/assets/stylesheets/user_chat.scss */
.content-notification-banner.locked {
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.15) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.05) 0%, transparent 60%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
}

/* line 288, app/assets/stylesheets/user_chat.scss */
.notification-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* line 294, app/assets/stylesheets/user_chat.scss */
.content-notification-link-wrapper:hover .notification-banner-img {
  transform: scale(1.05);
}

/* line 299, app/assets/stylesheets/user_chat.scss */
video.notification-banner-img {
  background: #000;
  display: block;
}

/* line 304, app/assets/stylesheets/user_chat.scss */
.notification-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  color: rgba(255, 255, 255, 0.2);
}

/* line 315, app/assets/stylesheets/user_chat.scss */
.notification-locked-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.06) 0%, transparent 60%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  z-index: 0;
}

/* line 325, app/assets/stylesheets/user_chat.scss */
.notification-locked-bg.has-blur {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 332, app/assets/stylesheets/user_chat.scss */
.notification-locked-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* line 342, app/assets/stylesheets/user_chat.scss */
.notification-lock-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
}

/* line 350, app/assets/stylesheets/user_chat.scss */
.notification-price {
  font-size: 18px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
}

/* line 360, app/assets/stylesheets/user_chat.scss */
.notification-gallery-badge,
.notification-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* line 377, app/assets/stylesheets/user_chat.scss */
.content-notification-info {
  padding: 16px;
}

/* line 381, app/assets/stylesheets/user_chat.scss */
.content-notification-title {
  color: #ff4081;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* line 390, app/assets/stylesheets/user_chat.scss */
.content-notification-text {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* line 398, app/assets/stylesheets/user_chat.scss */
.content-notification-desc {
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* line 405, app/assets/stylesheets/user_chat.scss */
.content-notification-cta {
  margin-top: 12px;
}

/* line 409, app/assets/stylesheets/user_chat.scss */
.cta-unlock {
  display: inline-block;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
  transition: all 0.2s;
}

/* line 420, app/assets/stylesheets/user_chat.scss */
.content-notification-link-wrapper:hover .cta-unlock {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.4);
}

/* line 426, app/assets/stylesheets/user_chat.scss */
.cta-view {
  display: inline-block;
  color: #ff4081;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

/* line 433, app/assets/stylesheets/user_chat.scss */
.content-notification-link-wrapper:hover .cta-view {
  color: #f50057;
}

/* line 439, app/assets/stylesheets/user_chat.scss */
.content-notification-link {
  color: #ff4081;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* line 448, app/assets/stylesheets/user_chat.scss */
.content-notification-link:hover {
  text-decoration: underline;
}

/* line 453, app/assets/stylesheets/user_chat.scss */
.notification-price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* line 465, app/assets/stylesheets/user_chat.scss */
.content-notification-time {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

@media (max-width: 768px) {
  /* line 473, app/assets/stylesheets/user_chat.scss */
  .content-notification-card {
    max-width: 280px;
  }
  /* line 477, app/assets/stylesheets/user_chat.scss */
  .notification-price {
    font-size: 16px;
    padding: 5px 12px;
  }
  /* line 482, app/assets/stylesheets/user_chat.scss */
  .content-notification-text {
    font-size: 15px;
  }
}

/* line 488, app/assets/stylesheets/user_chat.scss */
.user-message-form-container {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

/* line 495, app/assets/stylesheets/user_chat.scss */
.user-message-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 501, app/assets/stylesheets/user_chat.scss */
.user-message-input-wrapper {
  width: 100%;
  position: relative;
}

/* line 507, app/assets/stylesheets/user_chat.scss */
.message-form-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* line 514, app/assets/stylesheets/user_chat.scss */
.user-message-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  color: #f5f5f5;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}

/* line 528, app/assets/stylesheets/user_chat.scss */
.user-message-input:focus {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 534, app/assets/stylesheets/user_chat.scss */
.user-message-input::placeholder {
  color: #666;
}

/* line 539, app/assets/stylesheets/user_chat.scss */
.user-send-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: none;
  border-radius: 24px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* line 551, app/assets/stylesheets/user_chat.scss */
.user-send-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
}

/* line 556, app/assets/stylesheets/user_chat.scss */
.user-send-button:active {
  transform: translateY(0);
}

/* line 560, app/assets/stylesheets/user_chat.scss */
.user-send-button:disabled {
  background: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  transform: none;
  opacity: 0.5;
}

/* line 569, app/assets/stylesheets/user_chat.scss */
.user-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 90px);
  color: #666;
  text-align: center;
  padding: 40px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* line 584, app/assets/stylesheets/user_chat.scss */
.user-chat-empty svg {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  opacity: 0.2;
}

/* line 591, app/assets/stylesheets/user_chat.scss */
.user-chat-empty h3 {
  color: #8e8e8e;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* line 598, app/assets/stylesheets/user_chat.scss */
.user-chat-empty p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* line 606, app/assets/stylesheets/user_chat.scss */
.mobile-chat-back-btn {
  display: none;
}

@media (max-width: 1024px) {
  /* line 612, app/assets/stylesheets/user_chat.scss */
  .user-chat-container {
    height: calc(100vh - 70px - 60px);
    height: calc(100dvh - 70px - 60px);
    min-height: 0;
    border-radius: 0;
  }
  /* line 619, app/assets/stylesheets/user_chat.scss */
  .user-chat-empty {
    display: none;
  }
  /* line 624, app/assets/stylesheets/user_chat.scss */
  .mobile-chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #f5f5f5;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    margin-right: 8px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  /* line 639, app/assets/stylesheets/user_chat.scss */
  .mobile-chat-back-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }
  /* line 643, app/assets/stylesheets/user_chat.scss */
  .mobile-chat-back-btn svg {
    width: 24px;
    height: 24px;
  }
  /* line 649, app/assets/stylesheets/user_chat.scss */
  .user-chat-header {
    padding: 12px 16px;
  }
  /* line 653, app/assets/stylesheets/user_chat.scss */
  .user-message {
    max-width: 80%;
  }
  /* line 657, app/assets/stylesheets/user_chat.scss */
  .user-message-image {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  /* line 663, app/assets/stylesheets/user_chat.scss */
  .user-message {
    max-width: 90%;
  }
  /* line 667, app/assets/stylesheets/user_chat.scss */
  .user-messages-container {
    padding: 16px;
  }
  /* line 671, app/assets/stylesheets/user_chat.scss */
  .user-message-form-container {
    padding: 12px 16px;
  }
  /* line 675, app/assets/stylesheets/user_chat.scss */
  .view-profile-btn {
    display: none;
  }
}

/* line 681, app/assets/stylesheets/user_chat.scss */
.message-action-buttons {
  display: flex;
  gap: 8px;
}

/* line 686, app/assets/stylesheets/user_chat.scss */
.message-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #8e8e8e;
}

/* line 699, app/assets/stylesheets/user_chat.scss */
.message-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ff4081;
  color: #ff4081;
  transform: scale(1.05);
}

/* line 706, app/assets/stylesheets/user_chat.scss */
.message-action-btn.tip-btn {
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.1) 0%, rgba(245, 0, 87, 0.1) 100%);
  border-color: rgba(255, 64, 129, 0.3);
  color: #ff4081;
}

/* line 711, app/assets/stylesheets/user_chat.scss */
.message-action-btn.tip-btn:hover {
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.2) 0%, rgba(245, 0, 87, 0.2) 100%);
  transform: scale(1.1);
}

/* line 717, app/assets/stylesheets/user_chat.scss */
.message-action-btn svg {
  width: 20px;
  height: 20px;
}

/* line 724, app/assets/stylesheets/user_chat.scss */
.user-gif-preview,
.user-image-preview {
  margin-bottom: 12px;
}

/* line 729, app/assets/stylesheets/user_chat.scss */
.user-gif-preview-container,
.user-image-preview-container {
  position: relative;
  display: inline-block;
  max-width: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 64, 129, 0.3);
}

/* line 738, app/assets/stylesheets/user_chat.scss */
.user-gif-preview-container img,
.user-image-preview-container img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 200px;
}

/* line 746, app/assets/stylesheets/user_chat.scss */
.user-gif-remove-btn,
.user-image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* line 764, app/assets/stylesheets/user_chat.scss */
.user-gif-remove-btn:hover,
.user-image-remove-btn:hover {
  background: #ff4081;
  transform: scale(1.1);
}

/* line 771, app/assets/stylesheets/user_chat.scss */
.user-message-gif {
  max-width: 250px;
  max-height: 250px;
  border-radius: 8px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* line 779, app/assets/stylesheets/user_chat.scss */
.user-message-gif:hover {
  transform: scale(1.02);
}

/* line 785, app/assets/stylesheets/user_chat.scss */
.emoji-picker {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-height: 400px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  overflow: hidden;
}

/* line 800, app/assets/stylesheets/user_chat.scss */
.emoji-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

/* line 809, app/assets/stylesheets/user_chat.scss */
.emoji-picker-title {
  font-weight: 600;
  font-size: 14px;
  color: #f5f5f5;
}

/* line 815, app/assets/stylesheets/user_chat.scss */
.emoji-close-btn {
  background: none;
  border: none;
  color: #8e8e8e;
  font-size: 24px;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

/* line 829, app/assets/stylesheets/user_chat.scss */
.emoji-close-btn:hover {
  color: #ff4081;
}

/* line 834, app/assets/stylesheets/user_chat.scss */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 16px;
  max-height: 320px;
  overflow-y: auto;
}

/* line 842, app/assets/stylesheets/user_chat.scss */
.emoji-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 846, app/assets/stylesheets/user_chat.scss */
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 852, app/assets/stylesheets/user_chat.scss */
.emoji-item {
  font-size: 28px;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

/* line 860, app/assets/stylesheets/user_chat.scss */
.emoji-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.2);
}

/* line 867, app/assets/stylesheets/user_chat.scss */
.gif-picker {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-height: 500px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* line 884, app/assets/stylesheets/user_chat.scss */
.gif-search {
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #f5f5f5;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

/* line 896, app/assets/stylesheets/user_chat.scss */
.gif-search:focus {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.08);
}

/* line 901, app/assets/stylesheets/user_chat.scss */
.gif-search::placeholder {
  color: #666;
}

/* line 906, app/assets/stylesheets/user_chat.scss */
.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
  overflow-y: auto;
  max-height: 400px;
}

/* line 914, app/assets/stylesheets/user_chat.scss */
.gif-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 918, app/assets/stylesheets/user_chat.scss */
.gif-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 924, app/assets/stylesheets/user_chat.scss */
.gif-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  background: rgba(255, 255, 255, 0.05);
}

/* line 932, app/assets/stylesheets/user_chat.scss */
.gif-item:hover {
  transform: scale(1.05);
}

/* line 936, app/assets/stylesheets/user_chat.scss */
.gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 943, app/assets/stylesheets/user_chat.scss */
.gif-loading,
.gif-error {
  text-align: center;
  padding: 40px 20px;
  color: #8e8e8e;
  font-size: 14px;
  grid-column: 1 / -1;
}

/* line 952, app/assets/stylesheets/user_chat.scss */
.gif-error {
  color: #ff4081;
}

/* line 962, app/assets/stylesheets/user_chat.scss */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
  /* line 975, app/assets/stylesheets/user_chat.scss */
  .emoji-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 50vh;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  }
  /* line 991, app/assets/stylesheets/user_chat.scss */
  .emoji-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    max-height: calc(50vh - 130px);
    -webkit-overflow-scrolling: touch;
  }
  /* line 999, app/assets/stylesheets/user_chat.scss */
  .emoji-item {
    font-size: 26px;
    padding: 8px 4px;
    min-height: 44px;
  }
  /* line 1005, app/assets/stylesheets/user_chat.scss */
  .gif-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  }
  /* line 1021, app/assets/stylesheets/user_chat.scss */
  .gif-search {
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
  /* line 1029, app/assets/stylesheets/user_chat.scss */
  .gif-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: 8px;
    padding: 0 12px 12px;
    max-height: calc(60vh - 120px);
    -webkit-overflow-scrolling: touch;
  }
  /* line 1038, app/assets/stylesheets/user_chat.scss */
  .gif-item {
    aspect-ratio: auto;
    border-radius: 8px;
    height: 100%;
    min-height: 130px;
  }
  /* line 1045, app/assets/stylesheets/user_chat.scss */
  .user-gif-preview-container,
.user-image-preview-container {
    max-width: 150px;
  }
  /* line 1049, app/assets/stylesheets/user_chat.scss */
  .user-gif-preview-container img,
.user-image-preview-container img {
    max-height: 150px;
  }
}

/* line 1058, app/assets/stylesheets/user_chat.scss */
.system-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 20px;
  margin: 16px auto;
  max-width: 360px;
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.1) 0%, rgba(245, 0, 87, 0.08) 100%);
  border: 1px solid rgba(255, 64, 129, 0.25);
  border-radius: 16px;
  animation: messageSlide 0.3s ease-out;
}

/* line 1072, app/assets/stylesheets/user_chat.scss */
.system-message-content {
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.6;
}

/* line 1077, app/assets/stylesheets/user_chat.scss */
.system-message-content p {
  margin: 0 0 4px 0;
}

/* line 1080, app/assets/stylesheets/user_chat.scss */
.system-message-content p:last-child {
  margin-bottom: 0;
}

/* line 1084, app/assets/stylesheets/user_chat.scss */
.system-message-content p:first-child {
  font-weight: 600;
  font-size: 15px;
  color: #ff4081;
}

/* line 1092, app/assets/stylesheets/user_chat.scss */
.system-message-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MESSAGING OVERRIDE (user + creator chats)
   -----------------------------------------------------------------
   Cubre:
   - /user/conversations · /creator/conversations (lista de chats)
   - /user/conversations/:id · /creator/conversations/:id (chat 1:1)
   - Emoji picker, GIF picker, compose form
   - Empty states

   Mantiene los selectores legacy (.user-*, .creator-chat-*, .emoji-*).
   Cero cambios al HTML/JS — message-form-controller, action-cable,
   tip modal triggers, content library modal todos intactos.

   Carga DESPUÉS de user_chat / creator_chat / messages /
   user_conversations / creator_conversations en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE (conversations list)
   ----------------------------------------------------------------- */
/* line 22, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-page,
.creator-conversations-page,
.messages-page {
  background: #0a0a0a !important;
}

/* line 28, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-container,
.creator-conversations-container,
.messages-container {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  overflow: hidden;
  isolation: isolate;
}

/* Header de la lista de conversaciones */
/* line 39, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-header,
.creator-conversations-header,
.messages-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 24px 28px !important;
  position: relative;
  /* Línea brand sutil */
}

/* line 47, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-header::after,
.creator-conversations-header::after,
.messages-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.25) 50%, transparent 100%);
  pointer-events: none;
}

/* line 59, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-title,
.creator-conversations-title,
.messages-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
}

/* line 69, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-subtitle,
.creator-conversations-subtitle,
.messages-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}

/* -----------------------------------------------------------------
   CONVERSATION LIST ITEMS
   ----------------------------------------------------------------- */
/* line 82, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversations-list,
.creator-conversations-list {
  padding: 8px;
}

/* line 87, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-content,
.creator-conversation-content {
  position: relative;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 102, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-content:hover,
.creator-conversation-content:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* line 106, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-content:active,
.creator-conversation-content:active {
  transform: scale(0.99);
}

/* Item con mensajes no leídos: tinte brand sutil + border-left */
/* line 112, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-content[data-unread="true"],
.creator-conversation-content[data-unread="true"],
.user-conversation-content.unread,
.creator-conversation-content.unread {
  background: linear-gradient(95deg, rgba(255, 0, 116, 0.06) 0%, transparent 60%) !important;
  box-shadow: inset 3px 0 0 #ff0074;
}

/* Avatar wrapper · ring brand (más sutil que profile, esto se ve cientos de veces) */
/* line 122, app/assets/stylesheets/_components.exo-messaging.scss */
.user-creator-avatar-wrapper,
.creator-conversation-content > .creator-chat-user-avatar,
.user-conversation-content .avatar-wrapper {
  position: relative;
  padding: 2px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* line 132, app/assets/stylesheets/_components.exo-messaging.scss */
.user-creator-avatar,
.user-creator-avatar-placeholder,
.creator-chat-user-avatar img,
.creator-chat-user-avatar-placeholder {
  border: 2px solid #111 !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* line 141, app/assets/stylesheets/_components.exo-messaging.scss */
.user-creator-avatar-placeholder,
.creator-chat-user-avatar-placeholder {
  background: linear-gradient(135deg, #2a0014 0%, #1a0820 100%) !important;
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* Online indicator (verde con glow) */
/* line 150, app/assets/stylesheets/_components.exo-messaging.scss */
.user-online-indicator {
  background: #22c55e !important;
  border: 2px solid #111 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
}

/* Header del item (nombre + tiempo) */
/* line 158, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-header,
.creator-conversation-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

/* line 167, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-name,
.creator-conversation-name,
.creator-chat-user-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Verified icon brand */
}

/* line 180, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-name .verified-icon,
.creator-conversation-name .verified-icon,
.creator-chat-user-name .verified-icon {
  width: 14px !important;
  height: 14px !important;
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 3px rgba(255, 0, 116, 0.5));
}

/* line 188, app/assets/stylesheets/_components.exo-messaging.scss */
.user-conversation-time,
.creator-conversation-time,
.creator-conversation-meta {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0;
}

/* Preview del último mensaje */
/* line 199, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-preview,
.creator-message-preview {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 212, app/assets/stylesheets/_components.exo-messaging.scss */
.you-label {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-right: 4px;
}

/* Unread badge gradient brand */
/* line 223, app/assets/stylesheets/_components.exo-messaging.scss */
.user-unread-badge,
.creator-unread-badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.4) !important;
  min-width: 22px;
  text-align: center;
}

/* -----------------------------------------------------------------
   EMPTY STATES (lista vacía + chat vacío)
   ----------------------------------------------------------------- */
/* line 241, app/assets/stylesheets/_components.exo-messaging.scss */
.user-empty-conversations,
.creator-empty-conversations,
.user-chat-empty,
.creator-chat-empty,
.messages-empty-state {
  text-align: center;
  padding: 64px 32px !important;
}

/* line 249, app/assets/stylesheets/_components.exo-messaging.scss */
.user-empty-conversations .user-empty-icon,
.user-empty-conversations .creator-empty-icon,
.user-empty-conversations .messages-empty-icon,
.user-empty-conversations > svg,
.creator-empty-conversations .user-empty-icon,
.creator-empty-conversations .creator-empty-icon,
.creator-empty-conversations .messages-empty-icon,
.creator-empty-conversations > svg,
.user-chat-empty .user-empty-icon,
.user-chat-empty .creator-empty-icon,
.user-chat-empty .messages-empty-icon,
.user-chat-empty > svg,
.creator-chat-empty .user-empty-icon,
.creator-chat-empty .creator-empty-icon,
.creator-chat-empty .messages-empty-icon,
.creator-chat-empty > svg,
.messages-empty-state .user-empty-icon,
.messages-empty-state .creator-empty-icon,
.messages-empty-state .messages-empty-icon,
.messages-empty-state > svg {
  color: rgba(255, 0, 116, 0.5) !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.3));
}

/* line 258, app/assets/stylesheets/_components.exo-messaging.scss */
.user-empty-title,
.creator-empty-title,
.messages-empty-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.02em !important;
  margin-top: 16px !important;
}

/* line 269, app/assets/stylesheets/_components.exo-messaging.scss */
.user-empty-message,
.creator-empty-message,
.messages-empty-text {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  line-height: 1.55 !important;
  margin-top: 8px !important;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* =================================================================
   CHAT 1:1 (show)
   ================================================================= */
/* Container del chat */
/* line 287, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-container,
.creator-chat-container {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* -----------------------------------------------------------------
   CHAT HEADER (sticky con avatar + nombre + status)
   ----------------------------------------------------------------- */
/* line 301, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-header,
.creator-chat-header {
  background: rgba(20, 18, 26, 0.85) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 14px 20px !important;
  position: sticky;
  top: 0;
  z-index: 10;
  /* Línea brand sutil */
}

/* line 313, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-header::after,
.creator-chat-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.25) 50%, transparent 100%);
  pointer-events: none;
}

/* line 325, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-creator-avatar-placeholder,
.creator-chat-user-avatar-placeholder {
  background: linear-gradient(135deg, #2a0014 0%, #1a0820 100%) !important;
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  border: 2px solid #111 !important;
}

/* line 334, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-creator-info,
.creator-chat-user-info {
  flex: 1;
  min-width: 0;
}

/* line 340, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-creator-name,
.creator-chat-user-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 349, app/assets/stylesheets/_components.exo-messaging.scss */
.user-chat-creator-username,
.creator-chat-user-status {
  color: #d8b4fe !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

/* -----------------------------------------------------------------
   MESSAGES CONTAINER
   ----------------------------------------------------------------- */
/* line 361, app/assets/stylesheets/_components.exo-messaging.scss */
.user-messages-container,
.creator-messages-container {
  background: #0a0a0a !important;
  padding: 24px 20px !important;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -----------------------------------------------------------------
   MESSAGE BUBBLES (asimétricos · sent vs received)
   ----------------------------------------------------------------- */
/* Avatar mini junto al bubble */
/* line 378, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-avatar-wrapper,
.creator-message-avatar-wrapper {
  padding: 1.5px !important;
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* line 386, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-avatar,
.user-message-avatar-img,
.creator-message-avatar {
  border: 1.5px solid #111 !important;
  border-radius: 50% !important;
}

/* Wrapper del mensaje individual */
/* line 394, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message,
.creator-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 !important;
  max-width: 100%;
}

/* Mensaje recibido (default) */
/* line 404, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message:not(.sent),
.creator-message:not(.sent),
.user-message.received,
.creator-message.received {
  align-self: flex-start;
}

/* Mensaje enviado (mío) */
/* line 412, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message.sent,
.creator-message.sent {
  flex-direction: row-reverse;
  align-self: flex-end;
}

/* Bubble content */
/* line 419, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-content,
.creator-message-content {
  max-width: 75%;
  max-width: min(75%, 480px);
  padding: 10px 14px !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  /* Asimétrico: esquina inferior izquierda más cuadrada */
  border-radius: 18px 18px 18px 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  min-width: 0;
}

/* Sent bubble: gradient brand sutil + esquina inferior derecha cuadrada */
/* line 434, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message.sent .user-message-content,
.creator-message.sent .creator-message-content {
  background: linear-gradient(135deg, #ff0074 0%, #d80064 100%) !important;
  border-color: transparent !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Texto del mensaje */
/* line 445, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-text,
.creator-message-text {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  word-wrap: break-word;
  margin: 0 !important;
}

/* line 455, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message.sent .user-message-text,
.creator-message.sent .creator-message-text {
  color: #fff !important;
}

/* Time stamp pequeño debajo */
/* line 461, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-time,
.creator-message-time {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
  display: block;
}

/* line 471, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message.sent .user-message-time,
.creator-message.sent .creator-message-time {
  color: rgba(255, 255, 255, 0.7) !important;
  text-align: right;
}

/* Imagen dentro del mensaje · respeta el ancho del bubble */
/* line 478, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-image,
.creator-message-image {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin-top: 4px;
  display: block;
}

/* line 487, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-image img,
.creator-message-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 12px !important;
  object-fit: cover;
}

/* GIF dentro del mensaje */
/* line 498, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-gif,
.creator-message-gif {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden;
  display: block;
}

/* line 506, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-gif img,
.creator-message-gif img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 12px !important;
}

/* =================================================================
   COMPOSE FORM (input + emoji + gif + send)
   ================================================================= */
/* line 519, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-form-container,
.creator-message-form-container {
  padding: 12px 16px !important;
  background: rgba(20, 18, 26, 0.85) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
  /* Línea brand sutil top */
}

/* line 529, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-form-container::before,
.creator-message-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.25) 50%, transparent 100%);
  pointer-events: none;
}

/* line 541, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-input-wrapper,
.creator-message-input-wrapper {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  transition: border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 550, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-input-wrapper:focus-within,
.creator-message-input-wrapper:focus-within {
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* line 556, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-input,
.creator-message-input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}

/* line 565, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-input::placeholder,
.creator-message-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 569, app/assets/stylesheets/_components.exo-messaging.scss */
.user-message-input:focus,
.creator-message-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* line 575, app/assets/stylesheets/_components.exo-messaging.scss */
.message-form-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* -----------------------------------------------------------------
   ACTION BUTTONS (emoji, gif, image, mic, send)
   ----------------------------------------------------------------- */
/* line 585, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn {
  display: grid !important;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Send button: gradient brand + glow + sheen */
}

/* line 600, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* line 605, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #ff3d9a !important;
}

/* line 610, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn:active {
  transform: scale(0.92);
}

/* line 615, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn.send-btn, .message-action-btn[type="submit"], .message-action-btn.message-send-btn {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Sheen sweep */
}

/* line 629, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn.send-btn::after, .message-action-btn[type="submit"]::after, .message-action-btn.message-send-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 639, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn.send-btn:hover, .message-action-btn[type="submit"]:hover, .message-action-btn.message-send-btn:hover {
  transform: translateY(-1px) rotate(-12deg) !important;
  box-shadow: 0 8px 20px rgba(255, 0, 116, 0.5) !important;
}

/* line 643, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn.send-btn:hover::after, .message-action-btn[type="submit"]:hover::after, .message-action-btn.message-send-btn:hover::after {
  transform: translateX(120%);
}

/* line 645, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-btn.send-btn:active, .message-action-btn[type="submit"]:active, .message-action-btn.message-send-btn:active {
  transform: translateY(0) scale(0.95) !important;
}

/* line 651, app/assets/stylesheets/_components.exo-messaging.scss */
.message-action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =================================================================
   EMOJI PICKER (mejora visual sin cambiar HTML legacy)
   ================================================================= */
/* line 661, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-picker {
  background: rgba(20, 18, 26, 0.95) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 0, 116, 0.12) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 !important;
  /* Radial glow brand */
  /* Línea brand top */
}

/* line 676, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-picker::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 50%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 689, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-picker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

/* line 701, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-picker-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 709, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-picker-title {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* line 718, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-close-btn {
  display: grid !important;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 733, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-close-btn svg {
  width: 14px;
  height: 14px;
}

/* line 735, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-close-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
}

/* Grid de emojis */
/* line 743, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px !important;
  max-height: 280px;
  overflow-y: auto;
  /* Scrollbar custom */
}

/* line 752, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 755, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

/* line 758, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.25);
  border-radius: 3px;
}

/* line 762, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.45);
}

/* line 766, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-item {
  display: grid !important;
  place-items: center;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* line 781, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-item:hover {
  background: rgba(255, 0, 116, 0.12) !important;
  transform: scale(1.15);
}

/* line 786, app/assets/stylesheets/_components.exo-messaging.scss */
.emoji-item:active {
  transform: scale(0.92);
}

/* =================================================================
   GIF PICKER
   ================================================================= */
/* line 795, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-picker {
  background: rgba(20, 18, 26, 0.95) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 0, 116, 0.12) !important;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

/* line 808, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-picker::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 50%;
  background: radial-gradient(circle, rgba(180, 0, 255, 0.16) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 821, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-search {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  padding: 10px 14px !important;
}

/* line 829, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-search::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* line 831, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-search:focus {
  outline: none !important;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* line 838, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px !important;
  max-height: 320px;
  overflow-y: auto;
}

/* line 846, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 847, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid::-webkit-scrollbar-track {
  background: transparent;
}

/* line 848, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.25);
  border-radius: 3px;
}

/* line 851, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.45);
}

/* line 854, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 861, app/assets/stylesheets/_components.exo-messaging.scss */
.gif-grid img:hover {
  transform: scale(1.03);
}
@charset "UTF-8";
/* ========================================
   SEARCH PAGE - Estilo Switch Pro
   ======================================== */
/* line 6, app/assets/stylesheets/search.scss */
.search-results-page {
  background: #000;
  min-height: calc(100vh - 90px);
}

/* line 13, app/assets/stylesheets/search.scss */
.mobile-search-container {
  display: none;
}

@media (max-width: 1024px) {
  /* line 18, app/assets/stylesheets/search.scss */
  .mobile-search-container {
    display: block;
    padding: 16px;
    padding-top: 8px;
  }
  /* line 24, app/assets/stylesheets/search.scss */
  .mobile-search-box {
    width: 100%;
  }
  /* line 28, app/assets/stylesheets/search.scss */
  .mobile-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  /* line 34, app/assets/stylesheets/search.scss */
  .mobile-search-icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
  }
  /* line 45, app/assets/stylesheets/search.scss */
  .mobile-search-input {
    width: 100%;
    padding: 14px 48px 14px 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* line 56, app/assets/stylesheets/search.scss */
  .mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }
  /* line 60, app/assets/stylesheets/search.scss */
  .mobile-search-input:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
  }
  /* line 65, app/assets/stylesheets/search.scss */
  .mobile-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 0, 116, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.1), 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  /* line 72, app/assets/stylesheets/search.scss */
  .mobile-search-input:focus + .mobile-search-icon, .mobile-search-input:focus ~ .mobile-search-icon {
    color: #ff0074;
  }
  /* line 80, app/assets/stylesheets/search.scss */
  .mobile-search-input-wrapper:focus-within .mobile-search-icon {
    color: #ff0074;
  }
  /* line 84, app/assets/stylesheets/search.scss */
  .mobile-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
  }
  /* line 100, app/assets/stylesheets/search.scss */
  .mobile-search-clear svg {
    width: 16px;
    height: 16px;
  }
  /* line 105, app/assets/stylesheets/search.scss */
  .mobile-search-clear:hover {
    background: rgba(255, 0, 116, 0.15);
    color: #ff0074;
  }
  /* line 110, app/assets/stylesheets/search.scss */
  .mobile-search-clear:active {
    transform: scale(0.95);
  }
  /* line 116, app/assets/stylesheets/search.scss */
  .search-header {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  /* line 122, app/assets/stylesheets/search.scss */
  .mobile-search-container {
    padding: 12px;
    padding-top: 4px;
  }
  /* line 127, app/assets/stylesheets/search.scss */
  .mobile-search-input {
    padding: 12px 44px 12px 44px;
    font-size: 15px;
    border-radius: 12px;
  }
  /* line 133, app/assets/stylesheets/search.scss */
  .mobile-search-icon {
    left: 14px;
    width: 18px;
    height: 18px;
  }
  /* line 139, app/assets/stylesheets/search.scss */
  .mobile-search-clear {
    right: 6px;
    width: 30px;
    height: 30px;
  }
  /* line 144, app/assets/stylesheets/search.scss */
  .mobile-search-clear svg {
    width: 14px;
    height: 14px;
  }
}

/* line 152, app/assets/stylesheets/search.scss */
.search-header {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 61, 154, 0.04) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* line 161, app/assets/stylesheets/search.scss */
.search-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 173, app/assets/stylesheets/search.scss */
.search-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* line 183, app/assets/stylesheets/search.scss */
.search-title::before {
  content: '🔍';
  font-size: 24px;
}

/* line 189, app/assets/stylesheets/search.scss */
.search-query {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.15);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 24px;
}

/* line 197, app/assets/stylesheets/search.scss */
.search-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
  padding-left: 36px;
  margin: 0;
}

/* line 206, app/assets/stylesheets/search.scss */
.results-section {
  margin-bottom: 60px;
}

/* line 210, app/assets/stylesheets/search.scss */
.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 64, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 221, app/assets/stylesheets/search.scss */
.section-title:before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 2px;
}

/* line 231, app/assets/stylesheets/search.scss */
.creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* line 238, app/assets/stylesheets/search.scss */
.creator-result-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* line 251, app/assets/stylesheets/search.scss */
.creator-result-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff4081 0%, #f50057 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* line 264, app/assets/stylesheets/search.scss */
.creator-result-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #ff4081;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.2);
}

/* line 270, app/assets/stylesheets/search.scss */
.creator-result-card:hover:before {
  transform: scaleX(1);
}

/* line 276, app/assets/stylesheets/search.scss */
.result-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 286, app/assets/stylesheets/search.scss */
.result-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  border: 2px solid #ff4081;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 302, app/assets/stylesheets/search.scss */
.result-info {
  flex: 1;
  min-width: 0;
}

/* line 307, app/assets/stylesheets/search.scss */
.result-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 320, app/assets/stylesheets/search.scss */
.result-username {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

/* line 326, app/assets/stylesheets/search.scss */
.result-bio {
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* line 337, app/assets/stylesheets/search.scss */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* line 344, app/assets/stylesheets/search.scss */
.no-results {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 80px 40px;
  text-align: center;
  margin: 40px 0;
}

/* line 353, app/assets/stylesheets/search.scss */
.no-results-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  fill: #333;
  opacity: 0.5;
}

/* line 361, app/assets/stylesheets/search.scss */
.no-results-title {
  color: #f5f5f5;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* line 368, app/assets/stylesheets/search.scss */
.no-results-text {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* line 375, app/assets/stylesheets/search.scss */
.search-suggestions {
  color: #8e8e8e;
  font-size: 14px;
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

/* line 385, app/assets/stylesheets/search.scss */
.search-suggestions p {
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 12px;
}

/* line 391, app/assets/stylesheets/search.scss */
.search-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 397, app/assets/stylesheets/search.scss */
.search-suggestions li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

/* line 403, app/assets/stylesheets/search.scss */
.search-suggestions li:before {
  content: '→';
  position: absolute;
  left: 0;
  color: #ff4081;
  font-weight: 700;
}

/* line 414, app/assets/stylesheets/search.scss */
.search-pagination {
  text-align: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
  /* line 423, app/assets/stylesheets/search.scss */
  .creators-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  /* line 428, app/assets/stylesheets/search.scss */
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /* line 435, app/assets/stylesheets/search.scss */
  .search-header {
    padding: 20px 16px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  /* line 441, app/assets/stylesheets/search.scss */
  .search-title {
    font-size: 22px;
    gap: 10px;
  }
  /* line 445, app/assets/stylesheets/search.scss */
  .search-title::before {
    font-size: 20px;
  }
  /* line 450, app/assets/stylesheets/search.scss */
  .search-query {
    font-size: 18px;
    padding: 3px 10px;
  }
  /* line 455, app/assets/stylesheets/search.scss */
  .search-subtitle {
    font-size: 13px;
    padding-left: 30px;
  }
  /* line 460, app/assets/stylesheets/search.scss */
  .creators-grid {
    grid-template-columns: 1fr;
  }
  /* line 464, app/assets/stylesheets/search.scss */
  .creator-result-card {
    padding: 16px;
  }
  /* line 468, app/assets/stylesheets/search.scss */
  .result-avatar,
.result-avatar-placeholder {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  /* line 475, app/assets/stylesheets/search.scss */
  .no-results {
    padding: 60px 24px;
  }
  /* line 479, app/assets/stylesheets/search.scss */
  .no-results-icon {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  /* line 486, app/assets/stylesheets/search.scss */
  .search-header {
    padding: 16px 14px;
  }
  /* line 490, app/assets/stylesheets/search.scss */
  .search-title {
    font-size: 20px;
    gap: 8px;
  }
  /* line 494, app/assets/stylesheets/search.scss */
  .search-title::before {
    font-size: 18px;
  }
  /* line 499, app/assets/stylesheets/search.scss */
  .search-query {
    font-size: 16px;
    padding: 2px 8px;
  }
  /* line 504, app/assets/stylesheets/search.scss */
  .search-subtitle {
    font-size: 12px;
    padding-left: 26px;
  }
}

/* ========================================
   HERO SEARCH INPUT (desktop + mobile)
   Replaces the old mobile-only inline form.
   ======================================== */
/* line 514, app/assets/stylesheets/search.scss */
.search-hero-container {
  padding: 24px 24px 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* line 520, app/assets/stylesheets/search.scss */
.search-hero-box {
  width: 100%;
}

/* line 524, app/assets/stylesheets/search.scss */
.search-hero-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 530, app/assets/stylesheets/search.scss */
.search-hero-icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 1;
}

/* line 540, app/assets/stylesheets/search.scss */
.search-hero-input {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 52px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* line 554, app/assets/stylesheets/search.scss */
.search-hero-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* line 558, app/assets/stylesheets/search.scss */
.search-hero-input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 563, app/assets/stylesheets/search.scss */
.search-hero-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 64, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.12);
}

/* line 571, app/assets/stylesheets/search.scss */
.search-hero-clear {
  position: absolute;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

/* line 587, app/assets/stylesheets/search.scss */
.search-hero-clear svg {
  width: 14px;
  height: 14px;
}

/* line 592, app/assets/stylesheets/search.scss */
.search-hero-clear:hover {
  background: rgba(255, 64, 129, 0.25);
  color: #fff;
}

@media (max-width: 768px) {
  /* line 599, app/assets/stylesheets/search.scss */
  .search-hero-container {
    padding: 16px 16px 12px;
  }
  /* line 603, app/assets/stylesheets/search.scss */
  .search-hero-input {
    height: 48px;
    font-size: 14px;
    padding: 0 48px 0 48px;
  }
  /* line 609, app/assets/stylesheets/search.scss */
  .search-hero-icon {
    left: 16px;
    width: 18px;
    height: 18px;
  }
}

/* ========================================
   SEARCH EMPTY STATE MODULES
   Three compact, navigational modules shown
   when the search input is empty.
   ======================================== */
/* line 621, app/assets/stylesheets/search.scss */
.search-empty-modules {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* line 630, app/assets/stylesheets/search.scss */
.search-empty-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 636, app/assets/stylesheets/search.scss */
.search-empty-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* line 643, app/assets/stylesheets/search.scss */
.search-empty-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* line 654, app/assets/stylesheets/search.scss */
.search-empty-section-title svg {
  color: #ff4081;
  flex-shrink: 0;
}

/* line 660, app/assets/stylesheets/search.scss */
.search-empty-clear-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

/* line 671, app/assets/stylesheets/search.scss */
.search-empty-clear-btn:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.08);
}

/* line 677, app/assets/stylesheets/search.scss */
.search-empty-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Recent searches ---- */
/* line 685, app/assets/stylesheets/search.scss */
.recent-searches-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* line 690, app/assets/stylesheets/search.scss */
.recent-searches-list:empty {
  display: none;
}

/* line 695, app/assets/stylesheets/search.scss */
.recent-search-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  transition: all 0.15s ease;
  overflow: hidden;
}

/* line 704, app/assets/stylesheets/search.scss */
.recent-search-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 710, app/assets/stylesheets/search.scss */
.recent-search-link {
  padding: 8px 6px 8px 14px;
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 722, app/assets/stylesheets/search.scss */
.recent-search-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  transition: all 0.15s ease;
}

/* line 737, app/assets/stylesheets/search.scss */
.recent-search-remove:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.12);
}

/* ---- Popular tags ---- */
/* line 744, app/assets/stylesheets/search.scss */
.popular-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* line 750, app/assets/stylesheets/search.scss */
.popular-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: #d0d0d0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

/* line 764, app/assets/stylesheets/search.scss */
.popular-tag-pill:hover {
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.12) 0%, rgba(245, 0, 87, 0.12) 100%);
  border-color: rgba(255, 64, 129, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

/* line 772, app/assets/stylesheets/search.scss */
.popular-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
}

/* ---- Trending creators (compact avatar chips) ---- */
/* line 786, app/assets/stylesheets/search.scss */
.trending-creators-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0;
}

/* line 793, app/assets/stylesheets/search.scss */
.trending-creator-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

/* line 802, app/assets/stylesheets/search.scss */
.trending-creator-chip:hover {
  transform: translateY(-2px);
}

/* line 805, app/assets/stylesheets/search.scss */
.trending-creator-chip:hover .trending-creator-avatar {
  border-color: rgba(255, 64, 129, 0.6);
  box-shadow: 0 4px 16px rgba(255, 64, 129, 0.25);
}

/* line 810, app/assets/stylesheets/search.scss */
.trending-creator-chip:hover .trending-creator-username {
  color: #fff;
}

/* line 816, app/assets/stylesheets/search.scss */
.trending-creator-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.15s ease;
}

/* line 824, app/assets/stylesheets/search.scss */
.trending-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 831, app/assets/stylesheets/search.scss */
.trending-creator-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}

/* line 843, app/assets/stylesheets/search.scss */
.trending-creator-username {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  transition: color 0.15s ease;
}

@media (max-width: 768px) {
  /* line 856, app/assets/stylesheets/search.scss */
  .search-empty-modules {
    padding: 8px 16px 40px;
    gap: 24px;
  }
  /* line 861, app/assets/stylesheets/search.scss */
  .trending-creator-chip {
    width: 64px;
  }
  /* line 865, app/assets/stylesheets/search.scss */
  .trending-creator-avatar {
    width: 54px;
    height: 54px;
  }
}
@charset "UTF-8";
/* ========================================
   CREATOR DASHBOARD - Exotha Premium Studio
   ======================================== */
/* line 6, app/assets/stylesheets/creator_dashboard.scss */
:root {
  --dash-primary: #ff0074;
  --dash-primary-light: #ff3d9a;
  --dash-primary-dark: #cc005c;
  --dash-accent-purple: #7c4dff;
  --dash-accent-blue: #536dfe;
  --dash-accent-teal: #00bfa5;
  --dash-surface: rgba(255, 255, 255, 0.02);
  --dash-surface-hover: rgba(255, 255, 255, 0.05);
  --dash-border: rgba(255, 255, 255, 0.08);
  --dash-border-hover: rgba(255, 0, 116, 0.25);
  --dash-text: #f5f5f5;
  --dash-text-muted: #8e8e8e;
  --dash-text-dim: #666;
}

@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 shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 0, 116, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 0, 116, 0.5);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* line 85, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page {
  background: linear-gradient(180deg, #000 0%, #0a0a0f 100%);
  min-height: 100vh;
}

/* line 89, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

/* line 100, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-main {
  width: 100%;
  max-width: 100%;
}

/* line 105, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard {
  padding: 0;
  background: transparent;
  width: 100%;
}

/* line 112, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.5s ease;
}

/* line 123, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

/* line 134, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.1;
}

/* line 146, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.pending {
  border-left-color: transparent;
}

/* line 149, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.pending::before {
  background: linear-gradient(180deg, #6c757d 0%, #495057 100%);
}

/* line 153, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.pending::after {
  background: radial-gradient(circle, #6c757d 0%, transparent 70%);
}

/* line 157, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.pending h3 {
  color: #adb5bd;
}

/* line 160, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.pending h3 i {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
}

/* line 167, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.under_review {
  border-left-color: transparent;
}

/* line 170, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.under_review::before {
  background: linear-gradient(180deg, #ffc107 0%, #ff9800 100%);
}

/* line 174, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.under_review::after {
  background: radial-gradient(circle, #ffc107 0%, transparent 70%);
}

/* line 178, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.under_review h3 {
  color: #ffd54f;
}

/* line 181, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.under_review h3 i {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

/* line 188, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.rejected {
  border-left-color: transparent;
}

/* line 191, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.rejected::before {
  background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
}

/* line 195, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.rejected::after {
  background: radial-gradient(circle, #dc3545 0%, transparent 70%);
}

/* line 199, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.rejected h3 {
  color: #f8d7da;
}

/* line 202, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner.rejected h3 i {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

/* line 209, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* line 219, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner h3 i {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* line 230, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner p {
  color: var(--dash-text-muted);
  margin-bottom: 20px;
  line-height: 1.7;
  font-size: 15px;
  position: relative;
  z-index: 1;
  max-width: 600px;
}

/* line 240, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-light) 100%);
  color: #fff;
  border: none;
}

/* line 256, app/assets/stylesheets/creator_dashboard.scss */
.verification-banner .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.4);
}

/* line 264, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-header {
  margin-bottom: 40px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.12) 0%, rgba(255, 0, 116, 0.04) 50%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.6s ease;
}

/* line 275, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-header::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.2) 0%, transparent 70%);
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

/* line 288, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-header::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--dash-primary) 0%, var(--dash-primary-light) 50%, var(--dash-primary) 100%);
  border-radius: 4px 0 0 4px;
}

/* line 300, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-header .header-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 0, 116, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* line 309, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 321, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-title::before {
  content: '🎬';
  font-size: 32px;
}

/* line 327, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* line 337, app/assets/stylesheets/creator_dashboard.scss */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
}

/* line 345, app/assets/stylesheets/creator_dashboard.scss */
.stat-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeInUp 0.5s ease backwards;
}

/* line 358, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:nth-child(1) {
  animation-delay: 0.1s;
}

/* line 359, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:nth-child(2) {
  animation-delay: 0.15s;
}

/* line 360, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:nth-child(3) {
  animation-delay: 0.2s;
}

/* line 361, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:nth-child(4) {
  animation-delay: 0.25s;
}

/* line 364, app/assets/stylesheets/creator_dashboard.scss */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dash-primary), var(--dash-primary-light), var(--dash-primary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 376, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:hover {
  border-color: var(--dash-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 0, 116, 0.1);
}

/* line 381, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:hover::before {
  opacity: 1;
}

/* line 385, app/assets/stylesheets/creator_dashboard.scss */
.stat-card:hover .stat-icon {
  opacity: 0.6;
  transform: translateY(-50%) scale(1.1);
}

/* line 392, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.08) 100%);
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 396, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary::before {
  opacity: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--dash-primary), #fff, var(--dash-primary));
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

/* line 404, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary:hover {
  border-color: rgba(255, 0, 116, 0.5);
  box-shadow: 0 12px 40px rgba(255, 0, 116, 0.25);
}

/* line 409, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .stat-label {
  color: var(--dash-primary-light) !important;
}

/* line 413, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .stat-value {
  color: #fff !important;
}

/* line 417, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .stat-icon {
  opacity: 0.4;
}

/* line 420, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .stat-icon svg {
  fill: var(--dash-primary);
}

/* line 425, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .payout-info {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* line 429, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .payout-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  transition: all 0.3s ease;
}

/* line 444, app/assets/stylesheets/creator_dashboard.scss */
.stat-card--primary .payout-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* line 453, app/assets/stylesheets/creator_dashboard.scss */
.stat-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
  transition: all 0.4s ease;
}

/* line 461, app/assets/stylesheets/creator_dashboard.scss */
.stat-icon svg {
  width: 60px;
  height: 60px;
  fill: var(--dash-primary);
}

/* line 468, app/assets/stylesheets/creator_dashboard.scss */
.stat-label {
  color: var(--dash-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  font-weight: 600;
}

/* line 477, app/assets/stylesheets/creator_dashboard.scss */
.stat-value {
  color: var(--dash-text);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* line 485, app/assets/stylesheets/creator_dashboard.scss */
.stat-info {
  color: var(--dash-accent-teal);
  font-size: 13px;
  margin-top: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 494, app/assets/stylesheets/creator_dashboard.scss */
.stat-info::before {
  content: '↑';
  font-weight: 700;
}

/* line 500, app/assets/stylesheets/creator_dashboard.scss */
.payout-info {
  color: var(--dash-text-dim);
  font-size: 12px;
  margin-top: 12px;
  font-weight: 500;
}

/* line 508, app/assets/stylesheets/creator_dashboard.scss */
.earnings-analytics-section {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease 0.3s backwards;
}

/* line 517, app/assets/stylesheets/creator_dashboard.scss */
.earnings-analytics-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* line 524, app/assets/stylesheets/creator_dashboard.scss */
.earnings-breakdown-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* line 530, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* line 542, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  transition: width 0.3s ease;
}

/* line 553, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card:hover {
  background: var(--dash-surface-hover);
  transform: translateY(-3px) translateX(2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* line 558, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card:hover::before {
  width: 6px;
}

/* line 562, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card:hover .earnings-card-icon {
  transform: scale(1.1);
}

/* line 568, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.subscriptions::before {
  background: linear-gradient(180deg, #ff0074, #ff3d9a);
}

/* line 572, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.subscriptions .earnings-card-icon {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.1) 100%);
  color: var(--dash-primary);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.2);
}

/* line 580, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.tips::before {
  background: linear-gradient(180deg, #ff6b9d, #ffb3c9);
}

/* line 584, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.tips .earnings-card-icon {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2) 0%, rgba(255, 107, 157, 0.1) 100%);
  color: #ff6b9d;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.2);
}

/* line 592, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.content::before {
  background: linear-gradient(180deg, #7c4dff, #b388ff);
}

/* line 596, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.content .earnings-card-icon {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.2) 0%, rgba(124, 77, 255, 0.1) 100%);
  color: var(--dash-accent-purple);
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.2);
}

/* line 604, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.ppv::before {
  background: linear-gradient(180deg, #536dfe, #8c9eff);
}

/* line 608, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.ppv .earnings-card-icon {
  background: linear-gradient(135deg, rgba(83, 109, 254, 0.2) 0%, rgba(83, 109, 254, 0.1) 100%);
  color: var(--dash-accent-blue);
  box-shadow: 0 4px 16px rgba(83, 109, 254, 0.2);
}

/* line 616, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.referrals::before {
  background: linear-gradient(180deg, #4caf50, #81c784);
}

/* line 620, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card.referrals .earnings-card-icon {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
  color: #4caf50;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2);
}

/* line 628, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* line 638, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-icon svg {
  width: 26px;
  height: 26px;
}

/* line 644, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* line 651, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-label {
  font-size: 11px;
  color: var(--dash-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* line 659, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--dash-text);
  letter-spacing: -0.3px;
}

/* line 666, app/assets/stylesheets/creator_dashboard.scss */
.earnings-card-month {
  font-size: 12px;
  color: var(--dash-text-dim);
  font-weight: 500;
}

/* line 673, app/assets/stylesheets/creator_dashboard.scss */
.charts-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

/* line 679, app/assets/stylesheets/creator_dashboard.scss */
.chart-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s ease;
}

/* line 686, app/assets/stylesheets/creator_dashboard.scss */
.chart-card:hover {
  border-color: var(--dash-border-hover);
}

/* line 691, app/assets/stylesheets/creator_dashboard.scss */
.chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 700, app/assets/stylesheets/creator_dashboard.scss */
.chart-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--dash-primary), var(--dash-primary-light));
  border-radius: 2px;
}

/* line 709, app/assets/stylesheets/creator_dashboard.scss */
.chart-wrapper {
  position: relative;
  height: 280px;
}

/* line 713, app/assets/stylesheets/creator_dashboard.scss */
.chart-wrapper.donut-wrapper {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 721, app/assets/stylesheets/creator_dashboard.scss */
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

/* line 730, app/assets/stylesheets/creator_dashboard.scss */
.donut-total-label {
  display: block;
  font-size: 11px;
  color: var(--dash-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* line 739, app/assets/stylesheets/creator_dashboard.scss */
.donut-total-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--dash-text);
  margin-top: 4px;
  letter-spacing: -0.5px;
}

/* line 749, app/assets/stylesheets/creator_dashboard.scss */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  justify-content: center;
}

/* line 757, app/assets/stylesheets/creator_dashboard.scss */
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 20px;
  transition: all 0.2s ease;
}

/* line 767, app/assets/stylesheets/creator_dashboard.scss */
.legend-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 772, app/assets/stylesheets/creator_dashboard.scss */
.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* line 779, app/assets/stylesheets/creator_dashboard.scss */
.legend-label {
  color: var(--dash-text-muted);
  font-weight: 500;
}

/* line 784, app/assets/stylesheets/creator_dashboard.scss */
.legend-value {
  color: var(--dash-text);
  font-weight: 700;
}

/* line 790, app/assets/stylesheets/creator_dashboard.scss */
.quick-actions {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease 0.4s backwards;
}

/* line 799, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--dash-text);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.3px;
}

/* line 809, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .section-title::before {
  content: '';
  width: 5px;
  min-width: 5px;
  flex-shrink: 0;
  height: 28px;
  background: linear-gradient(180deg, var(--dash-primary) 0%, var(--dash-primary-light) 100%);
  border-radius: 3px;
}

/* line 820, app/assets/stylesheets/creator_dashboard.scss */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

/* line 827, app/assets/stylesheets/creator_dashboard.scss */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--dash-text-muted);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

/* line 844, app/assets/stylesheets/creator_dashboard.scss */
.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 853, app/assets/stylesheets/creator_dashboard.scss */
.action-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 1;
}

/* line 862, app/assets/stylesheets/creator_dashboard.scss */
.action-btn span {
  position: relative;
  z-index: 1;
}

/* line 867, app/assets/stylesheets/creator_dashboard.scss */
.action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* line 874, app/assets/stylesheets/creator_dashboard.scss */
.action-btn:hover::before {
  opacity: 1;
}

/* line 878, app/assets/stylesheets/creator_dashboard.scss */
.action-btn:hover svg {
  color: var(--dash-primary);
  transform: scale(1.1);
}

/* line 884, app/assets/stylesheets/creator_dashboard.scss */
.action-btn:focus-visible {
  outline: 2px solid rgba(255, 0, 116, 0.4);
  outline-offset: 2px;
}

/* line 889, app/assets/stylesheets/creator_dashboard.scss */
.action-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  transition: all 0.08s ease;
}

/* line 897, app/assets/stylesheets/creator_dashboard.scss */
.action-btn .user-unread-badge {
  background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-light) 100%);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  position: relative;
  z-index: 1;
  animation: pulse-glow 2s infinite;
}

/* line 912, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .content-section {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s ease;
  margin-bottom: 24px;
  animation: fadeInUp 0.6s ease 0.5s backwards;
}

/* line 921, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .content-section:last-child {
  margin-bottom: 0;
}

/* line 925, app/assets/stylesheets/creator_dashboard.scss */
.creator-dashboard-page .content-section:hover {
  border-color: var(--dash-border-hover);
}

/* line 931, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-recent-grid {
  display: block;
  width: 100%;
}

/* line 935, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-recent-grid > .content-section {
  margin-bottom: 24px;
}

/* line 938, app/assets/stylesheets/creator_dashboard.scss */
.dashboard-recent-grid > .content-section:last-child {
  margin-bottom: 0;
}

@media (min-width: 1280px) {
  /* line 946, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-recent-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  /* line 952, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-recent-grid > .content-section {
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
  }
}

/* line 960, app/assets/stylesheets/creator_dashboard.scss */
.content-list {
  margin-top: 20px;
}

/* line 964, app/assets/stylesheets/creator_dashboard.scss */
.content-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* line 978, app/assets/stylesheets/creator_dashboard.scss */
.content-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 0, 116, 0.2);
  transform: translateX(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* line 984, app/assets/stylesheets/creator_dashboard.scss */
.content-item:hover .content-thumbnail {
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 989, app/assets/stylesheets/creator_dashboard.scss */
.content-item:last-child {
  margin-bottom: 0;
}

/* line 994, app/assets/stylesheets/creator_dashboard.scss */
.content-thumbnail {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* line 1007, app/assets/stylesheets/creator_dashboard.scss */
.content-thumbnail img,
.content-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1015, app/assets/stylesheets/creator_dashboard.scss */
.content-info {
  flex: 1;
  min-width: 0;
}

/* line 1020, app/assets/stylesheets/creator_dashboard.scss */
.content-title {
  color: var(--dash-text);
  font-weight: 700;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

/* line 1030, app/assets/stylesheets/creator_dashboard.scss */
.content-meta {
  color: var(--dash-text-dim);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 1040, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* line 1051, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 0, 116, 0.2);
  transform: translateX(4px);
}

/* line 1056, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-item:hover .subscriber-avatar {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.3);
}

/* line 1062, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-item:last-child {
  margin-bottom: 0;
}

/* line 1067, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

/* line 1075, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  border: 3px solid rgba(255, 0, 116, 0.3);
  transition: all 0.3s ease;
}

/* line 1091, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-details {
  color: var(--dash-text);
  min-width: 0;
  overflow: hidden;
}

/* line 1097, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-name {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1106, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-date {
  color: var(--dash-text-dim);
  font-size: 12px;
  font-weight: 500;
}

/* line 1112, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-amount {
  color: var(--dash-accent-teal);
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* line 1122, app/assets/stylesheets/creator_dashboard.scss */
.subscriber-amount::before {
  content: '+';
}

/* line 1128, app/assets/stylesheets/creator_dashboard.scss */
.empty-state {
  text-align: center;
  padding: 60px 40px;
  color: var(--dash-text-dim);
}

/* line 1133, app/assets/stylesheets/creator_dashboard.scss */
.empty-state svg {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  opacity: 0.2;
  fill: var(--dash-text-muted);
}

/* line 1141, app/assets/stylesheets/creator_dashboard.scss */
.empty-state p {
  color: var(--dash-text-muted);
  font-size: 15px;
  margin: 0;
  font-weight: 500;
}

/* line 1150, app/assets/stylesheets/creator_dashboard.scss */
.message-indicator {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-block;
}

/* line 1157, app/assets/stylesheets/creator_dashboard.scss */
.indicator-dot {
  width: 12px;
  height: 12px;
  background: var(--dash-primary);
  border-radius: 50%;
  display: block;
  animation: pulse-glow 2s infinite;
  box-shadow: 0 0 0 3px #000;
}

/* line 1167, app/assets/stylesheets/creator_dashboard.scss */
#creator_message_indicator {
  position: absolute;
  top: 10px;
  right: 10px;
}

@media (max-width: 1400px) {
  /* line 1175, app/assets/stylesheets/creator_dashboard.scss */
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  /* line 1181, app/assets/stylesheets/creator_dashboard.scss */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* line 1185, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-breakdown-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* line 1189, app/assets/stylesheets/creator_dashboard.scss */
  .charts-container {
    grid-template-columns: 1fr;
  }
  /* line 1193, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper {
    height: 300px;
  }
  /* line 1196, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper.donut-wrapper {
    height: 250px;
  }
}

@media (max-width: 1024px) {
  /* line 1203, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  /* line 1208, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .social-layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 1216, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .left-sidebar {
    display: none;
  }
  /* line 1221, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-main {
    padding: 20px 16px 100px 16px;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* line 1228, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* line 1234, app/assets/stylesheets/creator_dashboard.scss */
  .content-item,
.subscriber-item {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* line 1240, app/assets/stylesheets/creator_dashboard.scss */
  .content-info,
.subscriber-info,
.subscriber-details {
    min-width: 0;
    overflow: hidden;
  }
  /* line 1247, app/assets/stylesheets/creator_dashboard.scss */
  .content-title,
.subscriber-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1254, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-amount {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* line 1260, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card:hover,
.earnings-card:hover,
.content-item:hover,
.subscriber-item:hover {
    transform: none;
  }
  /* line 1268, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header::before {
    animation: none;
  }
  /* line 1272, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header {
    padding: 28px 24px;
    margin-bottom: 24px;
    border-radius: 16px;
  }
  /* line 1278, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-title {
    font-size: 26px;
  }
  /* line 1281, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-title::before {
    font-size: 24px;
  }
  /* line 1286, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-subtitle {
    font-size: 14px;
  }
  /* line 1290, app/assets/stylesheets/creator_dashboard.scss */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  /* line 1296, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card {
    padding: 22px;
    border-radius: 16px;
  }
  /* line 1301, app/assets/stylesheets/creator_dashboard.scss */
  .stat-value {
    font-size: 26px;
  }
  /* line 1305, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon {
    right: 16px;
    opacity: 0.1;
  }
  /* line 1309, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon svg {
    width: 44px;
    height: 44px;
  }
  /* line 1315, app/assets/stylesheets/creator_dashboard.scss */
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  /* line 1320, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn {
    padding: 16px 12px;
    flex-direction: column;
    text-align: center;
    border-radius: 12px;
    gap: 8px;
    min-height: 76px;
  }
  /* line 1329, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn:active {
    transform: scale(0.96);
    background: rgba(255, 0, 116, 0.08);
    border-color: rgba(255, 0, 116, 0.2);
    transition: all 0.08s ease;
  }
  /* line 1336, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn svg {
    width: 24px;
    height: 24px;
  }
  /* line 1341, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn span {
    font-size: 12px;
    line-height: 1.3;
  }
  /* line 1347, app/assets/stylesheets/creator_dashboard.scss */
  .quick-actions,
.creator-dashboard-page .content-section,
.earnings-analytics-section {
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 20px;
  }
  /* line 1355, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .section-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  /* line 1360, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner {
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  /* line 1365, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner h3 {
    font-size: 18px;
  }
  /* line 1369, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  /* line 1376, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-main {
    padding: 16px 14px 100px 14px;
    width: 100%;
    max-width: 100vw;
  }
  /* line 1382, app/assets/stylesheets/creator_dashboard.scss */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }
  /* line 1388, app/assets/stylesheets/creator_dashboard.scss */
  .content-section,
.quick-actions,
.earnings-analytics-section {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* line 1395, app/assets/stylesheets/creator_dashboard.scss */
  .content-list {
    max-width: 100%;
  }
  /* line 1399, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card {
    padding: 18px;
    border-radius: 14px;
  }
  /* line 1404, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card:active {
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.08s ease;
  }
  /* line 1410, app/assets/stylesheets/creator_dashboard.scss */
  .stat-value {
    font-size: 22px;
    position: relative;
    z-index: 1;
  }
  /* line 1416, app/assets/stylesheets/creator_dashboard.scss */
  .stat-label {
    position: relative;
    z-index: 1;
  }
  /* line 1421, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon {
    right: 14px;
    opacity: 0.07;
  }
  /* line 1425, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon svg {
    width: 38px;
    height: 38px;
  }
  /* line 1431, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header {
    padding: 22px 20px;
    margin-bottom: 18px;
    border-radius: 14px;
  }
  /* line 1437, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header::before {
    width: 180px;
    height: 180px;
    top: -80px;
    right: -60px;
    opacity: 0.7;
  }
  /* line 1446, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-title {
    font-size: 22px;
  }
  /* line 1450, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-breakdown-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* line 1455, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card {
    padding: 16px;
    gap: 12px;
    border-radius: 14px;
  }
  /* line 1460, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card:active {
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.08s ease;
  }
  /* line 1466, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  /* line 1471, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-icon svg {
    width: 20px;
    height: 20px;
  }
  /* line 1477, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-value {
    font-size: 20px;
  }
  /* line 1481, app/assets/stylesheets/creator_dashboard.scss */
  .chart-card {
    padding: 20px;
    border-radius: 14px;
  }
  /* line 1486, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper {
    height: 280px;
  }
  /* line 1489, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper.donut-wrapper {
    height: 240px;
  }
  /* line 1494, app/assets/stylesheets/creator_dashboard.scss */
  .donut-total-value {
    font-size: 20px;
  }
  /* line 1498, app/assets/stylesheets/creator_dashboard.scss */
  .chart-legend {
    gap: 8px;
    margin-top: 20px;
  }
  /* line 1503, app/assets/stylesheets/creator_dashboard.scss */
  .legend-item {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
  }
  /* line 1509, app/assets/stylesheets/creator_dashboard.scss */
  .quick-actions,
.creator-dashboard-page .content-section,
.earnings-analytics-section {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: 14px;
  }
  /* line 1517, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .section-title {
    font-size: 17px;
  }
  /* line 1520, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .section-title::before {
    height: 22px;
    width: 4px;
    min-width: 4px;
  }
  /* line 1527, app/assets/stylesheets/creator_dashboard.scss */
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  /* line 1532, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn {
    padding: 14px 8px;
    gap: 6px;
    min-height: 72px;
  }
  /* line 1537, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn svg {
    width: 22px;
    height: 22px;
  }
  /* line 1542, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn span {
    font-size: 11px;
  }
  /* line 1547, app/assets/stylesheets/creator_dashboard.scss */
  .content-item {
    padding: 14px;
    gap: 14px;
    border-radius: 12px;
  }
  /* line 1552, app/assets/stylesheets/creator_dashboard.scss */
  .content-item:active {
    background: rgba(255, 0, 116, 0.06);
    border-color: rgba(255, 0, 116, 0.15);
    transition: all 0.08s ease;
  }
  /* line 1559, app/assets/stylesheets/creator_dashboard.scss */
  .content-thumbnail {
    width: 58px;
    height: 58px;
    border-radius: 10px;
  }
  /* line 1565, app/assets/stylesheets/creator_dashboard.scss */
  .content-title {
    font-size: 14px;
    margin-bottom: 4px;
  }
  /* line 1570, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-item {
    padding: 14px;
    border-radius: 12px;
  }
  /* line 1574, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-item:active {
    background: rgba(255, 0, 116, 0.06);
    transition: all 0.08s ease;
  }
  /* line 1580, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-avatar {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  /* line 1586, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-amount {
    font-size: 15px;
  }
  /* line 1590, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner {
    padding: 20px;
    border-radius: 14px;
  }
  /* line 1594, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner h3 {
    font-size: 16px;
    gap: 10px;
  }
  /* line 1598, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner h3 i, .verification-banner h3 svg {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  /* line 1605, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  /* line 1610, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner .cta-button {
    padding: 12px 24px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
    border-radius: 10px;
  }
  /* line 1617, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner .cta-button:active {
    transform: scale(0.97);
    transition: all 0.08s ease;
  }
  /* line 1624, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state {
    padding: 48px 24px;
  }
  /* line 1627, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state svg {
    width: 56px;
    height: 56px;
  }
  /* line 1632, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  /* line 1639, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-main {
    padding: 12px 12px 100px 12px;
    width: 100%;
  }
  /* line 1644, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header {
    padding: 20px 16px;
    margin-bottom: 14px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px;
  }
  /* line 1651, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header::before {
    width: 140px;
    height: 140px;
    top: -50px;
    right: -50px;
    opacity: 0.5;
  }
  /* line 1660, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-title {
    font-size: 20px;
    gap: 10px;
  }
  /* line 1664, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-title::before {
    font-size: 18px;
  }
  /* line 1669, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-subtitle {
    font-size: 13px;
  }
  /* line 1673, app/assets/stylesheets/creator_dashboard.scss */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* line 1678, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card {
    padding: 16px 14px;
    border-radius: 12px;
    gap: 4px;
  }
  /* line 1685, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card--primary .payout-btn {
    padding: 10px 20px;
    font-size: 13px;
    margin-top: 8px;
    border-radius: 8px;
  }
  /* line 1691, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card--primary .payout-btn:active {
    transform: scale(0.97);
    transition: all 0.08s ease;
  }
  /* line 1698, app/assets/stylesheets/creator_dashboard.scss */
  .stat-value {
    font-size: 20px;
  }
  /* line 1702, app/assets/stylesheets/creator_dashboard.scss */
  .stat-label {
    font-size: 10px;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
  }
  /* line 1708, app/assets/stylesheets/creator_dashboard.scss */
  .stat-info {
    font-size: 11px;
    margin-top: 4px;
  }
  /* line 1713, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon {
    right: 10px;
    opacity: 0.06;
  }
  /* line 1717, app/assets/stylesheets/creator_dashboard.scss */
  .stat-icon svg {
    width: 32px;
    height: 32px;
  }
  /* line 1723, app/assets/stylesheets/creator_dashboard.scss */
  .payout-info {
    font-size: 11px;
    margin-top: 8px;
  }
  /* line 1728, app/assets/stylesheets/creator_dashboard.scss */
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* line 1733, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn {
    padding: 14px 6px;
    border-radius: 10px;
    gap: 5px;
    min-height: 68px;
  }
  /* line 1739, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn svg {
    width: 22px;
    height: 22px;
  }
  /* line 1744, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn span {
    font-size: 10px;
    line-height: 1.2;
  }
  /* line 1749, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn .user-unread-badge {
    padding: 2px 7px;
    font-size: 9px;
    margin-left: 0;
  }
  /* line 1756, app/assets/stylesheets/creator_dashboard.scss */
  .quick-actions,
.creator-dashboard-page .content-section,
.earnings-analytics-section {
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  /* line 1764, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .section-title {
    font-size: 16px;
    margin-bottom: 14px;
    gap: 10px;
  }
  /* line 1769, app/assets/stylesheets/creator_dashboard.scss */
  .creator-dashboard-page .section-title::before {
    height: 20px;
    width: 3px;
    min-width: 3px;
  }
  /* line 1776, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-analytics-grid {
    gap: 20px;
  }
  /* line 1780, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-breakdown-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* line 1785, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card {
    padding: 14px 12px;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
  }
  /* line 1793, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  /* line 1798, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 1804, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-label {
    font-size: 10px;
  }
  /* line 1808, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-value {
    font-size: 18px;
  }
  /* line 1812, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card-month {
    font-size: 11px;
  }
  /* line 1816, app/assets/stylesheets/creator_dashboard.scss */
  .charts-container {
    gap: 14px;
  }
  /* line 1820, app/assets/stylesheets/creator_dashboard.scss */
  .chart-card {
    padding: 16px;
    border-radius: 12px;
  }
  /* line 1825, app/assets/stylesheets/creator_dashboard.scss */
  .chart-title {
    font-size: 14px;
    margin-bottom: 14px;
  }
  /* line 1829, app/assets/stylesheets/creator_dashboard.scss */
  .chart-title::before {
    height: 14px;
    width: 3px;
  }
  /* line 1835, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper {
    height: 240px;
  }
  /* line 1838, app/assets/stylesheets/creator_dashboard.scss */
  .chart-wrapper.donut-wrapper {
    height: 200px;
  }
  /* line 1843, app/assets/stylesheets/creator_dashboard.scss */
  .donut-total-value {
    font-size: 18px;
  }
  /* line 1847, app/assets/stylesheets/creator_dashboard.scss */
  .donut-total-label {
    font-size: 10px;
  }
  /* line 1851, app/assets/stylesheets/creator_dashboard.scss */
  .chart-legend {
    gap: 6px;
    margin-top: 14px;
    flex-direction: column;
  }
  /* line 1857, app/assets/stylesheets/creator_dashboard.scss */
  .legend-item {
    font-size: 12px;
    padding: 8px 12px;
    justify-content: space-between;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
  }
  /* line 1865, app/assets/stylesheets/creator_dashboard.scss */
  .content-item {
    padding: 12px;
    gap: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  /* line 1872, app/assets/stylesheets/creator_dashboard.scss */
  .content-thumbnail {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }
  /* line 1878, app/assets/stylesheets/creator_dashboard.scss */
  .content-title {
    font-size: 14px;
    margin-bottom: 3px;
  }
  /* line 1883, app/assets/stylesheets/creator_dashboard.scss */
  .content-meta {
    font-size: 12px;
  }
  /* line 1887, app/assets/stylesheets/creator_dashboard.scss */
  .content-list {
    margin-top: 14px;
  }
  /* line 1891, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-item {
    padding: 12px;
    gap: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  /* line 1898, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-info {
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  /* line 1904, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-width: 2px;
  }
  /* line 1911, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-name {
    font-size: 14px;
  }
  /* line 1915, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-date {
    font-size: 11px;
  }
  /* line 1919, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-amount {
    font-size: 14px;
    padding-left: 6px;
  }
  /* line 1924, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 14px;
  }
  /* line 1929, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner::after {
    display: none;
  }
  /* line 1933, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner h3 {
    font-size: 15px;
  }
  /* line 1936, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner h3 i, .verification-banner h3 svg {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 8px;
  }
  /* line 1944, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner p {
    font-size: 13px;
    line-height: 1.6;
  }
  /* line 1949, app/assets/stylesheets/creator_dashboard.scss */
  .verification-banner .cta-button {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 13px;
    border-radius: 8px;
  }
  /* line 1958, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state {
    padding: 40px 16px;
  }
  /* line 1961, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state svg {
    width: 48px;
    height: 48px;
  }
  /* line 1966, app/assets/stylesheets/creator_dashboard.scss */
  .empty-state p {
    font-size: 13px;
  }
  /* line 1972, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card,
.earnings-analytics-section,
.quick-actions,
.creator-dashboard-page .content-section {
    animation-duration: 0.3s;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* line 1983, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card:hover,
.earnings-card:hover,
.action-btn:hover,
.content-item:hover,
.subscriber-item:hover,
.chart-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--dash-border);
    background: var(--dash-surface);
  }
  /* line 1995, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card:hover .stat-icon {
    opacity: 0.07;
    transform: translateY(-50%);
  }
  /* line 2000, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card:hover .earnings-card-icon {
    transform: none;
  }
  /* line 2004, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-item:hover .subscriber-avatar {
    transform: none;
    box-shadow: none;
  }
  /* line 2010, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card:active {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 0, 116, 0.15);
    transition: all 0.06s ease;
  }
  /* line 2016, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn:active {
    transform: scale(0.95);
    background: rgba(255, 0, 116, 0.1);
    border-color: rgba(255, 0, 116, 0.25);
    transition: all 0.06s ease;
  }
  /* line 2022, app/assets/stylesheets/creator_dashboard.scss */
  .action-btn:active svg {
    color: var(--dash-primary);
  }
  /* line 2027, app/assets/stylesheets/creator_dashboard.scss */
  .content-item:active {
    background: rgba(255, 0, 116, 0.06);
    border-color: rgba(255, 0, 116, 0.15);
    transition: all 0.06s ease;
  }
  /* line 2033, app/assets/stylesheets/creator_dashboard.scss */
  .subscriber-item:active {
    background: rgba(255, 0, 116, 0.06);
    transition: all 0.06s ease;
  }
  /* line 2038, app/assets/stylesheets/creator_dashboard.scss */
  .earnings-card:active {
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.06s ease;
  }
  /* line 2043, app/assets/stylesheets/creator_dashboard.scss */
  .cta-button:active,
.payout-btn:active {
    transform: scale(0.97);
    transition: all 0.06s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 2052, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card,
.dashboard-header,
.verification-banner,
.earnings-analytics-section,
.quick-actions,
.creator-dashboard-page .content-section {
    animation: none;
  }
  /* line 2061, app/assets/stylesheets/creator_dashboard.scss */
  .dashboard-header::before {
    animation: none;
  }
  /* line 2065, app/assets/stylesheets/creator_dashboard.scss */
  .stat-card--primary::before {
    animation: none;
  }
  /* line 2069, app/assets/stylesheets/creator_dashboard.scss */
  .indicator-dot {
    animation: none;
  }
  /* line 2073, app/assets/stylesheets/creator_dashboard.scss */
  .user-unread-badge {
    animation: none;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR DASHBOARD OVERRIDE
   -----------------------------------------------------------------
   Override visual del dashboard del creador (/creator/dashboard).
   Mantiene los selectores legacy de creator_dashboard.scss (2076 líneas).
   Cero cambios al HTML/ERB, charts (chart.js), action-cable subscriptions,
   verification flow, payout flow.

   Carga DESPUÉS de creator_dashboard.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 16, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.creator-dashboard-page {
  background: #0a0a0a !important;
}

/* line 20, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.creator-dashboard {
  background: transparent;
}

/* -----------------------------------------------------------------
   HEADER (title + subtitle)
   ----------------------------------------------------------------- */
/* line 28, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.dashboard-header {
  margin-bottom: 32px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

/* line 34, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, transparent 100%);
}

/* line 45, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.dashboard-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
  line-height: 1.05 !important;
}

/* line 55, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 15px !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   VERIFICATION BANNER · tonos semánticos
   ----------------------------------------------------------------- */
/* line 66, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  margin-bottom: 24px;
  isolation: isolate;
  overflow: hidden;
  /* Radial glow tinte según estado */
  /* Pending: amber */
  /* Under review: blue */
  /* Rejected: red */
}

/* line 77, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 80%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* line 89, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 101, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
}

/* line 109, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner .cta-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 127, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner .cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 0, 116, 0.45) !important;
}

/* line 134, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.pending {
  border-color: rgba(234, 179, 8, 0.35) !important;
  background: rgba(234, 179, 8, 0.04) !important;
}

/* line 137, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.pending::before {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.18) 0%, transparent 60%);
}

/* line 141, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.under_review {
  border-color: rgba(59, 130, 246, 0.35) !important;
  background: rgba(59, 130, 246, 0.04) !important;
}

/* line 144, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.under_review::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, transparent 60%);
}

/* line 148, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.rejected {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* line 151, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.verification-banner.rejected::before {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 60%);
}

/* -----------------------------------------------------------------
   STATS GRID · 4 cards
   ----------------------------------------------------------------- */
/* line 159, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* line 166, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card {
  position: relative;
  padding: 24px !important;
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Glow brand sutil radial en esquina top-right */
  /* Stat card primary (Available balance) destacado · gradient brand fondo */
}

/* line 179, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.5;
}

/* line 193, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* line 197, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card:hover::before {
  opacity: 1;
}

/* line 200, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card.stat-card--primary {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.1);
}

/* line 205, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card.stat-card--primary::before {
  background: radial-gradient(circle, rgba(255, 0, 116, 0.2) 0%, transparent 60%);
  opacity: 1;
}

/* line 210, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card.stat-card--primary:hover {
  box-shadow: 0 0 48px rgba(255, 0, 116, 0.18);
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* Scopeados a .stat-card (natural parent en el dashboard grid) para no
   contaminar .stat-item/.stat-value de otras vistas (live viewer, etc).
   Bug previo: bleed a /live_streams/:id donde el contador "0 espectadores"
   se mostraba como un círculo gigante con gradient. */
/* line 221, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card .stat-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 12px !important;
}

/* line 231, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card .stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #f5f5f5 !important;
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px !important;
}

/* line 246, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card--primary .stat-value {
  background: linear-gradient(135deg, #fff 0%, #ffd4e8 60%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* line 253, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card .stat-info {
  color: #4ade80 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  margin-top: 6px !important;
}

/* line 262, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-net-amount {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

/* line 268, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-net-amount strong {
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* line 275, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card .stat-icon {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 36px !important;
  height: 36px !important;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 289, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card .stat-icon svg {
  width: 18px;
  height: 18px;
}

/* line 292, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card:hover .stat-icon {
  color: #ff3d9a !important;
}

/* line 296, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.stat-card--primary .stat-icon {
  background: rgba(255, 0, 116, 0.18) !important;
  border-color: rgba(255, 0, 116, 0.3) !important;
  color: #ff7eb8 !important;
}

/* Payout button dentro del stat card primary */
/* line 303, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.payout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #2a0014 !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 321, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.payout-btn:hover {
  transform: translateY(-1px);
  background: #fff !important;
}

/* -----------------------------------------------------------------
   BANK FEE WARNING
   ----------------------------------------------------------------- */
/* line 331, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px !important;
  background: rgba(234, 179, 8, 0.06) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  border-radius: 14px !important;
  margin-bottom: 24px;
}

/* line 341, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(234, 179, 8, 0.15);
  border-radius: 10px;
  color: #facc15;
}

/* line 352, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__content {
  flex: 1;
  min-width: 0;
}

/* line 356, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__content p {
  color: #facc15 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* line 365, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__suggestion {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 4px !important;
}

/* line 370, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__link {
  display: inline-block !important;
  margin-top: 8px;
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

/* line 380, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.bank-fee-warning__link:hover {
  color: #ff7eb8 !important;
}

/* -----------------------------------------------------------------
   SECTION TITLES
   ----------------------------------------------------------------- */
/* line 388, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 32px 0 16px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 399, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.section-title svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   QUICK ACTIONS · container vertical (title arriba, grid abajo)
   ----------------------------------------------------------------- */
/* line 409, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions {
  margin-bottom: 32px;
  /* NO grid aquí · es solo el wrapper que contiene el title + .actions-grid */
}

/* line 414, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

@media (max-width: 600px) {
  /* line 414, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* line 425, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a,
.actions-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px !important;
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Glow brand sutil al hover */
  /* Mobile: cards más compactos */
}

/* line 452, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a::before,
.actions-grid a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}

/* line 462, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a svg,
.actions-grid a svg {
  width: 28px !important;
  height: 28px !important;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* line 469, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a:hover,
.actions-grid a:hover {
  transform: translateY(-4px);
  background: #1a1a1a !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #fff !important;
}

/* line 475, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a:hover::before,
.actions-grid a:hover::before {
  opacity: 1;
}

/* line 476, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.quick-actions a:hover svg,
.actions-grid a:hover svg {
  color: #ff3d9a;
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.5));
}

@media (max-width: 600px) {
  /* line 425, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .quick-actions a,
.actions-grid a {
    padding: 18px 12px !important;
    gap: 8px;
    font-size: 12px !important;
  }
  /* line 488, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .quick-actions a svg,
.actions-grid a svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* -----------------------------------------------------------------
   EARNINGS ANALYTICS (charts + breakdown)
   ----------------------------------------------------------------- */
/* line 499, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-analytics-section {
  margin-bottom: 32px;
}

/* line 503, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  /* line 503, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-analytics-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* line 513, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.charts-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* line 519, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.chart-card {
  position: relative;
  padding: 22px !important;
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden;
  isolation: isolate;
}

/* line 528, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.chart-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 541, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.chart-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 16px !important;
}

/* line 550, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.chart-wrapper {
  position: relative;
  min-height: 200px;
}

/* Donut center label */
/* line 556, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.donut-wrapper {
  position: relative;
  display: grid;
  place-items: center;
}

/* line 562, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}

/* line 568, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.donut-total-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 4px;
}

/* line 578, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.donut-total-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Chart legend */
/* line 592, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* line 599, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  transition: background 0.2s ease;
}

/* line 608, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 611, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-color {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

/* line 619, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-label {
  flex: 1;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 13px !important;
}

/* line 625, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-label.subscriptions {
  color: #ff7eb8;
}

/* line 626, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-label.tips {
  color: #d8b4fe;
}

/* line 627, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-label.ppv {
  color: #e8c79e;
}

/* line 628, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-label.referrals {
  color: #4ade80;
}

/* line 631, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.legend-value {
  color: #f5f5f5 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   EARNINGS BREAKDOWN CARDS (mensuales)
   ----------------------------------------------------------------- */
/* line 643, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-breakdown-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* line 649, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px !important;
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  transition: border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 659, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card:hover {
  border-color: rgba(255, 0, 116, 0.25) !important;
}

/* line 664, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-icon {
  display: grid !important;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.2) !important;
  border-radius: 10px !important;
  color: #ff7eb8 !important;
}

/* line 675, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-icon svg {
  width: 18px;
  height: 18px;
}

/* line 678, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-info {
  flex: 1;
  min-width: 0;
}

/* line 683, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* line 693, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-value {
  color: #f5f5f5 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
}

/* line 702, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.earnings-card-month {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   RECENT ACTIVITY GRID (subscribers + content recientes)
   ----------------------------------------------------------------- */
/* line 714, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.dashboard-recent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

@media (min-width: 900px) {
  /* line 714, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .dashboard-recent-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Subscriber list / content list shared container */
/* line 726, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-item,
.content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px !important;
  margin-bottom: 8px;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 738, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-item:hover,
.content:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 0, 116, 0.18);
}

/* line 744, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #ff0074, #b000ff) border-box !important;
  flex-shrink: 0;
  object-fit: cover;
}

/* line 756, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-info,
.subscriber-details {
  flex: 1;
  min-width: 0;
}

/* line 762, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
}

/* line 771, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-date {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}

/* line 778, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.subscriber-amount {
  color: #4ade80 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Content item */
/* line 788, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.content-thumbnail {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* line 797, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.content-info {
  flex: 1;
  min-width: 0;
}

/* line 802, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.content-title {
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px !important;
}

/* line 813, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.content-meta {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 824, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
.empty-state {
  text-align: center;
  padding: 48px 24px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

/* =================================================================
   MOBILE OPTIMIZATIONS (≤768px)
   ================================================================= */
@media (max-width: 768px) {
  /* Padding lateral al dashboard porque social-layout en mobile lo deja en 0
     Padding-bottom extra (100px) para que el bottom nav fijo (~80px) no tape el contenido */
  /* line 843, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .creator-dashboard-main {
    padding: 16px 16px 100px !important;
  }
  /* CONTENT SECTIONS · padding interno reducido para alinear con stats cards */
  /* line 848, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .creator-dashboard-page .content-section,
.earnings-analytics-section {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  /* HEADER · más compacto */
  /* line 856, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .dashboard-header {
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
  }
  /* line 860, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .dashboard-title {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  /* line 863, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .dashboard-subtitle {
    font-size: 13px !important;
  }
  /* SECTION TITLES · menos margin top entre secciones */
  /* line 868, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .section-title {
    font-size: 17px !important;
    margin: 24px 0 12px !important;
  }
  /* VERIFICATION BANNER · padding reducido + cta full-width */
  /* line 874, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .verification-banner {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  /* line 878, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .verification-banner h3 {
    font-size: 15px !important;
  }
  /* line 879, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .verification-banner p {
    font-size: 13px !important;
  }
  /* line 881, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .verification-banner .cta-button {
    display: flex !important;
    width: 100%;
    padding: 12px 16px !important;
  }
  /* STATS GRID · siempre 2x2 en mobile (4 cards visibles sin scroll largo) */
  /* line 889, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px;
  }
  /* line 895, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-card {
    padding: 14px 14px 16px !important;
    border-radius: 14px !important;
    min-width: 0;
    /* Stat icon va flotando arriba derecha, lo escondemos en mobile para dar espacio al value */
  }
  /* line 902, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-label {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 6px !important;
  }
  /* line 908, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-value {
    font-size: 17px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  /* line 916, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-info {
    font-size: 10.5px !important;
    margin-top: 4px !important;
  }
  /* Stat icon: oculto en mobile · da espacio completo al label + value */
  /* line 922, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-icon {
    display: none !important;
  }
  /* Primary card destaca por visual (gradient + glow) · no por tamaño */
  /* line 927, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-card.stat-card--primary {
    /* Mantiene su ubicación natural en grid 2x2 */
    grid-column: auto;
  }
  /* line 932, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .stat-net-amount {
    font-size: 10.5px !important;
    margin-top: 6px !important;
  }
  /* line 937, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .payout-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  /* BANK FEE WARNING · stack vertical en mobile */
  /* line 945, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .bank-fee-warning {
    flex-direction: column;
    align-items: stretch;
    padding: 14px !important;
  }
  /* line 950, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .bank-fee-warning__icon {
    align-self: flex-start;
  }
  /* line 954, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .bank-fee-warning__content p {
    font-size: 13px !important;
  }
  /* QUICK ACTIONS · ya tiene su media query, mantener */
  /* EARNINGS ANALYTICS · stack vertical en mobile (ya estaba) */
  /* line 960, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-analytics-grid {
    gap: 12px;
  }
  /* line 964, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .chart-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  /* line 969, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .chart-title {
    font-size: 14px !important;
    margin-bottom: 14px !important;
  }
  /* line 974, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .donut-total-value {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  /* EARNINGS BREAKDOWN · layout HORIZONTAL compacto en mobile (de 110px a 56px por card) */
  /* line 979, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-breakdown-cards {
    gap: 8px;
  }
  /* line 983, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card,
.earnings-card.subscriptions,
.earnings-card.tips,
.earnings-card.content,
.earnings-card.ppv,
.earnings-card.referrals {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 12px;
    /* Border uniforme en los 4 lados · el strip ::before del legacy se mantiene como decoración */
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  /* line 1002, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  /* line 1007, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* line 1010, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-info {
    /* Label + value en line horizontal, no stacked */
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }
  /* line 1018, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-label {
    font-size: 10px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  /* line 1024, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-value {
    font-size: 15px !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* line 1032, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .earnings-card-month {
    font-size: 9.5px !important;
    text-align: right;
  }
  /* RECENT ACTIVITY · items SIN card propio · solo divider sutil entre items */
  /* line 1038, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-item,
.content {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 !important;
    padding: 12px 4px !important;
    margin-bottom: 0 !important;
    gap: 12px;
  }
  /* line 1048, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-item:last-child,
.content:last-child {
    border-bottom: none !important;
  }
  /* line 1052, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-item:hover,
.content:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
  }
  /* line 1058, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  /* line 1063, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-name {
    font-size: 13px !important;
  }
  /* line 1064, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-date {
    font-size: 10px !important;
  }
  /* line 1065, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .subscriber-amount {
    font-size: 13px !important;
  }
  /* line 1067, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .content-thumbnail {
    width: 40px !important;
    height: 40px !important;
  }
  /* line 1072, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .content-title {
    font-size: 13px !important;
  }
  /* line 1073, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .content-meta {
    font-size: 10px !important;
  }
  /* EMPTY STATE · padding reducido */
  /* line 1076, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .empty-state {
    padding: 32px 16px !important;
    font-size: 13px !important;
  }
  /* DASHBOARD RECENT GRID · neutralizado en mobile (sus hijos pasan a ser
     siblings directos del main para que ocupen el mismo ancho que las stats) */
  /* line 1083, app/assets/stylesheets/_components.exo-creator-dashboard.scss */
  .dashboard-recent-grid {
    display: contents !important;
  }
}
@charset "UTF-8";
/* ========================================
     USER DASHBOARD — Premium Dark
     ======================================== */
/* line 4, app/assets/stylesheets/user_dashboard.scss */
.ud {
  min-height: 100vh;
  background-color: #000;
  padding: 0;
}

/* line 10, app/assets/stylesheets/user_dashboard.scss */
.ud .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 70px);
}

/* line 20, app/assets/stylesheets/user_dashboard.scss */
.ud .left-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

/* line 21, app/assets/stylesheets/user_dashboard.scss */
.ud .right-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

/* line 23, app/assets/stylesheets/user_dashboard.scss */
.ud-main {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== GREETING ===== */
/* line 33, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting {
  padding: 6px 0 2px;
}

/* line 37, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 43, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 0, 116, 0.3);
  flex-shrink: 0;
}

/* line 52, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting-avatar-ph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 0, 116, 0.3);
}

/* line 67, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  line-height: 1.2;
}

/* line 76, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting h1 span {
  background: linear-gradient(135deg, #ff0074, #ff5ca1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* line 83, app/assets/stylesheets/user_dashboard.scss */
.ud-greeting p {
  color: #5a5a5a;
  font-size: 13px;
  margin: 2px 0 0;
  font-family: 'Rubik', sans-serif;
}

/* ===== STATS ===== */
/* line 91, app/assets/stylesheets/user_dashboard.scss */
.ud-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* line 97, app/assets/stylesheets/user_dashboard.scss */
.ud-stat {
  position: relative;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 18px 14px 16px;
  transition: border-color 0.25s ease, transform 0.2s ease;
  overflow: hidden;
}

/* line 107, app/assets/stylesheets/user_dashboard.scss */
.ud-stat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-accent, #ff0074), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 119, app/assets/stylesheets/user_dashboard.scss */
.ud-stat:hover {
  border-color: rgba(255, 0, 116, 0.15);
  transform: translateY(-1px);
}

/* line 124, app/assets/stylesheets/user_dashboard.scss */
.ud-stat:hover::after {
  opacity: 1;
}

/* line 126, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(255, 0, 116, 0.08);
}

/* line 137, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon svg {
  width: 16px;
  height: 16px;
  fill: #ff0074;
}

/* line 143, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.green {
  background: rgba(0, 200, 83, 0.08);
}

/* line 144, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.green svg {
  fill: #00c853;
}

/* line 145, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.blue {
  background: rgba(41, 121, 255, 0.08);
}

/* line 146, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.blue svg {
  fill: #2979ff;
}

/* line 147, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.amber {
  background: rgba(255, 171, 0, 0.08);
}

/* line 148, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-icon.amber svg {
  fill: #ffab00;
}

/* line 150, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

/* line 159, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-value.accent {
  background: linear-gradient(135deg, #ff0074, #ff5ca1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* line 166, app/assets/stylesheets/user_dashboard.scss */
.ud-stat-label {
  color: #505050;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: 'Rubik', sans-serif;
}

/* ===== SECTIONS ===== */
/* line 176, app/assets/stylesheets/user_dashboard.scss */
.ud-section {
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
}

/* line 183, app/assets/stylesheets/user_dashboard.scss */
.ud-section-head {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 191, app/assets/stylesheets/user_dashboard.scss */
.ud-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #d4d4d4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* line 202, app/assets/stylesheets/user_dashboard.scss */
.ud-section-title svg {
  width: 17px;
  height: 17px;
  fill: #ff0074;
  flex-shrink: 0;
  opacity: 0.85;
}

/* line 210, app/assets/stylesheets/user_dashboard.scss */
.ud-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 116, 0.12);
  color: #ff3d9a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  font-family: 'Rubik', sans-serif;
}

/* line 224, app/assets/stylesheets/user_dashboard.scss */
.ud-link {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Rubik', sans-serif;
}

/* line 236, app/assets/stylesheets/user_dashboard.scss */
.ud-link:hover {
  color: #ff0074;
}

/* line 238, app/assets/stylesheets/user_dashboard.scss */
.ud-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.2s;
}

/* line 245, app/assets/stylesheets/user_dashboard.scss */
.ud-link:hover svg {
  transform: translateX(2px);
}

/* ===== SUBSCRIPTION LIST ===== */
/* line 248, app/assets/stylesheets/user_dashboard.scss */
.ud-list {
  padding: 0;
}

/* line 250, app/assets/stylesheets/user_dashboard.scss */
.ud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}

/* line 261, app/assets/stylesheets/user_dashboard.scss */
.ud-item:last-child {
  border-bottom: none;
}

/* line 262, app/assets/stylesheets/user_dashboard.scss */
.ud-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* line 264, app/assets/stylesheets/user_dashboard.scss */
.ud-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.06);
}

/* line 273, app/assets/stylesheets/user_dashboard.scss */
.ud-avatar-ph {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* line 287, app/assets/stylesheets/user_dashboard.scss */
.ud-item-body {
  flex: 1;
  min-width: 0;
}

/* line 292, app/assets/stylesheets/user_dashboard.scss */
.ud-item-name {
  font-weight: 600;
  color: #e8e8e8;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Montserrat', sans-serif;
}

/* line 302, app/assets/stylesheets/user_dashboard.scss */
.ud-item-sub {
  color: #4a4a4a;
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Rubik', sans-serif;
}

/* line 312, app/assets/stylesheets/user_dashboard.scss */
.ud-item-end {
  flex-shrink: 0;
  text-align: right;
}

/* line 317, app/assets/stylesheets/user_dashboard.scss */
.ud-price {
  color: #ff0074;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
}

/* line 324, app/assets/stylesheets/user_dashboard.scss */
.ud-price-original {
  text-decoration: line-through;
  color: #3a3a3a;
  font-size: 11px;
  font-weight: 400;
}

/* line 331, app/assets/stylesheets/user_dashboard.scss */
.ud-price-period {
  color: #4a4a4a;
  font-size: 11px;
  font-weight: 400;
}

/* line 337, app/assets/stylesheets/user_dashboard.scss */
.ud-badge-promo {
  display: inline-block;
  background: linear-gradient(135deg, #00c853, #69f0ae);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* line 351, app/assets/stylesheets/user_dashboard.scss */
.ud-unread {
  background: #ff0074;
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  line-height: 1;
}

/* line 363, app/assets/stylesheets/user_dashboard.scss */
.ud-time {
  color: #3a3a3a;
  font-size: 11px;
  font-family: 'Rubik', sans-serif;
}

/* ===== CONTENT GRID ===== */
/* line 370, app/assets/stylesheets/user_dashboard.scss */
.ud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 18px 18px;
}

/* line 377, app/assets/stylesheets/user_dashboard.scss */
.ud-card {
  position: relative;
  background: #090909;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 387, app/assets/stylesheets/user_dashboard.scss */
.ud-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 0, 116, 0.12);
}

/* line 393, app/assets/stylesheets/user_dashboard.scss */
.ud-card-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #0a0a0a;
}

/* line 400, app/assets/stylesheets/user_dashboard.scss */
.ud-card-img img,
.ud-card-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* line 408, app/assets/stylesheets/user_dashboard.scss */
.ud-card:hover .ud-card-img img,
.ud-card:hover .ud-card-img video {
  transform: scale(1.04);
}

/* line 413, app/assets/stylesheets/user_dashboard.scss */
.ud-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #111, #080808);
}

/* line 422, app/assets/stylesheets/user_dashboard.scss */
.ud-card-placeholder svg {
  width: 32px;
  height: 32px;
  fill: #1a1a1a;
}

/* line 428, app/assets/stylesheets/user_dashboard.scss */
.ud-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 44px;
  height: 44px;
  background: rgba(255, 0, 116, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 0, 116, 0.3);
}

/* line 445, app/assets/stylesheets/user_dashboard.scss */
.ud-card:hover .ud-card-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* line 450, app/assets/stylesheets/user_dashboard.scss */
.ud-card-play svg {
  width: 18px;
  height: 18px;
  fill: white;
  margin-left: 2px;
}

/* line 457, app/assets/stylesheets/user_dashboard.scss */
.ud-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 471, app/assets/stylesheets/user_dashboard.scss */
.ud-card-badge svg {
  width: 13px;
  height: 13px;
}

/* line 476, app/assets/stylesheets/user_dashboard.scss */
.ud-card-badge.purchased svg {
  fill: #00c853;
}

/* line 477, app/assets/stylesheets/user_dashboard.scss */
.ud-card-badge.liked svg {
  fill: #ff0074;
}

/* line 479, app/assets/stylesheets/user_dashboard.scss */
.ud-card-deleted {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 152, 0, 0.9);
  color: #fff;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* line 496, app/assets/stylesheets/user_dashboard.scss */
.ud-card-info {
  padding: 10px 12px 12px;
}

/* line 500, app/assets/stylesheets/user_dashboard.scss */
.ud-card-creator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* line 507, app/assets/stylesheets/user_dashboard.scss */
.ud-card-creator img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 514, app/assets/stylesheets/user_dashboard.scss */
.ud-card-creator-ph {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  font-weight: 700;
}

/* line 527, app/assets/stylesheets/user_dashboard.scss */
.ud-card-creator span {
  color: #484848;
  font-size: 11px;
  font-weight: 500;
}

/* line 533, app/assets/stylesheets/user_dashboard.scss */
.ud-card-title {
  color: #c0c0c0;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

/* line 546, app/assets/stylesheets/user_dashboard.scss */
.ud-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: #3a3a3a;
  font-size: 11px;
}

/* line 555, app/assets/stylesheets/user_dashboard.scss */
.ud-card-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* line 561, app/assets/stylesheets/user_dashboard.scss */
.ud-card-meta svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* line 567, app/assets/stylesheets/user_dashboard.scss */
.ud-card-meta .pink svg {
  fill: #ff0074;
}

/* line 569, app/assets/stylesheets/user_dashboard.scss */
.ud-card.deleted-content {
  opacity: 0.75;
}

/* line 570, app/assets/stylesheets/user_dashboard.scss */
.ud-card.deleted-content .ud-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ===== EMPTY STATE ===== */
/* line 579, app/assets/stylesheets/user_dashboard.scss */
.ud-empty {
  padding: 44px 20px;
  text-align: center;
}

/* line 584, app/assets/stylesheets/user_dashboard.scss */
.ud-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: rgba(255, 0, 116, 0.06);
  border: 1px solid rgba(255, 0, 116, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 596, app/assets/stylesheets/user_dashboard.scss */
.ud-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: #ff0074;
  opacity: 0.5;
}

/* line 603, app/assets/stylesheets/user_dashboard.scss */
.ud-empty h3 {
  color: #777;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
}

/* line 611, app/assets/stylesheets/user_dashboard.scss */
.ud-empty p {
  color: #404040;
  font-size: 13px;
  margin: 0 0 18px;
  font-family: 'Rubik', sans-serif;
}

/* line 618, app/assets/stylesheets/user_dashboard.scss */
.ud-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* line 633, app/assets/stylesheets/user_dashboard.scss */
.ud-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.25);
}

/* line 638, app/assets/stylesheets/user_dashboard.scss */
.ud-cta svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ===== SECTION DIVIDER ===== */
/* line 645, app/assets/stylesheets/user_dashboard.scss */
.ud-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

/* line 652, app/assets/stylesheets/user_dashboard.scss */
.ud-divider-label {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #333;
  white-space: nowrap;
}

/* line 662, app/assets/stylesheets/user_dashboard.scss */
.ud-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}

/* ===== ANIMATIONS ===== */
@keyframes udSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 674, app/assets/stylesheets/user_dashboard.scss */
.ud-main > * {
  animation: udSlideUp 0.45s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* line 678, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(1) {
  animation-delay: 0s;
}

/* line 679, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(2) {
  animation-delay: 0.05s;
}

/* line 680, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(3) {
  animation-delay: 0.1s;
}

/* line 681, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(4) {
  animation-delay: 0.15s;
}

/* line 682, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(5) {
  animation-delay: 0.2s;
}

/* line 683, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(6) {
  animation-delay: 0.25s;
}

/* line 684, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(7) {
  animation-delay: 0.3s;
}

/* line 685, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(8) {
  animation-delay: 0.35s;
}

/* line 686, app/assets/stylesheets/user_dashboard.scss */
.ud-main > :nth-child(9) {
  animation-delay: 0.4s;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  /* line 690, app/assets/stylesheets/user_dashboard.scss */
  .ud .social-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  /* line 694, app/assets/stylesheets/user_dashboard.scss */
  .ud .left-sidebar,
.ud .right-sidebar {
    display: none;
  }
  /* line 696, app/assets/stylesheets/user_dashboard.scss */
  .ud-main {
    padding: 16px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  /* line 703, app/assets/stylesheets/user_dashboard.scss */
  .ud-main {
    gap: 16px;
  }
  /* line 705, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting h1 {
    font-size: 20px;
  }
  /* line 706, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting-avatar,
.ud-greeting-avatar-ph {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  /* line 709, app/assets/stylesheets/user_dashboard.scss */
  .ud-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* line 713, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat {
    padding: 14px 12px 12px;
    border-radius: 12px;
  }
  /* line 714, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  /* line 715, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-icon svg {
    width: 14px;
    height: 14px;
  }
  /* line 716, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-value {
    font-size: 22px;
  }
  /* line 717, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-label {
    font-size: 10px;
  }
  /* line 719, app/assets/stylesheets/user_dashboard.scss */
  .ud-section-head {
    padding: 14px 16px;
  }
  /* line 720, app/assets/stylesheets/user_dashboard.scss */
  .ud-section-title {
    font-size: 14px;
  }
  /* line 722, app/assets/stylesheets/user_dashboard.scss */
  .ud-item {
    padding: 11px 16px;
    gap: 10px;
  }
  /* line 723, app/assets/stylesheets/user_dashboard.scss */
  .ud-avatar, .ud-avatar-ph {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  /* line 724, app/assets/stylesheets/user_dashboard.scss */
  .ud-item-name {
    font-size: 13px;
  }
  /* line 725, app/assets/stylesheets/user_dashboard.scss */
  .ud-price {
    font-size: 12px;
  }
  /* line 727, app/assets/stylesheets/user_dashboard.scss */
  .ud-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 16px 16px;
  }
  /* line 733, app/assets/stylesheets/user_dashboard.scss */
  .ud-card-info {
    padding: 8px 10px 10px;
  }
  /* line 734, app/assets/stylesheets/user_dashboard.scss */
  .ud-card-title {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  /* line 738, app/assets/stylesheets/user_dashboard.scss */
  .ud-main {
    padding: 12px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
  }
  /* line 740, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting-row {
    gap: 10px;
  }
  /* line 741, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting h1 {
    font-size: 18px;
  }
  /* line 742, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting p {
    font-size: 12px;
  }
  /* line 743, app/assets/stylesheets/user_dashboard.scss */
  .ud-greeting-avatar,
.ud-greeting-avatar-ph {
    width: 36px;
    height: 36px;
    font-size: 14px;
    border-width: 1.5px;
  }
  /* line 746, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat {
    padding: 12px 10px;
  }
  /* line 747, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-value {
    font-size: 20px;
  }
  /* line 748, app/assets/stylesheets/user_dashboard.scss */
  .ud-stat-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
  }
  /* line 750, app/assets/stylesheets/user_dashboard.scss */
  .ud-card-img {
    aspect-ratio: 4/5;
  }
  /* line 751, app/assets/stylesheets/user_dashboard.scss */
  .ud-card-creator img,
.ud-card-creator-ph {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }
  /* line 753, app/assets/stylesheets/user_dashboard.scss */
  .ud-card-creator span {
    font-size: 10px;
  }
  /* line 755, app/assets/stylesheets/user_dashboard.scss */
  .ud-empty {
    padding: 32px 14px;
  }
  /* line 756, app/assets/stylesheets/user_dashboard.scss */
  .ud-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · USER DASHBOARD OVERRIDE
   -----------------------------------------------------------------
   Override visual del dashboard del fan (/user/dashboard).
   Mantiene los selectores legacy `.ud-*` de user_dashboard.scss
   (extraído del style inline). Cero cambios al HTML/ERB.

   Aplica detalles de alineación con el sistema brand:
   - Stats values con gradient brand consistente
   - Avatares con ring gradient brand
   - Section heads con tipografía premium
   - Cards con hover dramático
   - Mobile padding-bottom para bottom nav

   Carga DESPUÉS de user_dashboard.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE · warm-charcoal igual al resto del sistema
   ----------------------------------------------------------------- */
/* line 22, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud {
  background-color: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   GREETING · tipografía premium con tracking tight
   ----------------------------------------------------------------- */
/* line 30, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-greeting h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 36, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-greeting h1 span {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* line 43, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-greeting p {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Rubik', sans-serif !important;
}

/* Avatar greeting con ring gradient brand */
/* line 49, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-greeting-avatar,
.ud-greeting-avatar-ph {
  border: 2px solid transparent !important;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box, linear-gradient(135deg, #ff0074, #ff3d9a, #b000ff) border-box !important;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.25);
}

/* -----------------------------------------------------------------
   STATS · TODOS los values con gradient brand consistente
   ----------------------------------------------------------------- */
/* line 62, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 69, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 116, 0.3) !important;
}

/* line 75, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  /* Gradient brand para TODOS los stats values (antes solo .accent) */
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-variant-numeric: tabular-nums;
}

/* El .accent mantiene un gradient más vibrante (más rosa) */
/* line 88, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-value.accent {
  background: linear-gradient(135deg, #ff7eb8 0%, #ff0074 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* line 95, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-label {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  font-size: 10.5px !important;
}

/* Stat icons con drop-shadow brand sutil */
/* line 104, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon {
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.18);
}

/* line 108, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon svg {
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.35));
}

/* line 112, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.green {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.22);
}

/* line 115, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.green svg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

/* line 118, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.blue {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.22);
}

/* line 121, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.blue svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* line 124, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.amber {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.22);
}

/* line 127, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-stat-icon.amber svg {
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.4));
}

/* -----------------------------------------------------------------
   SECTIONS · tipografía premium
   ----------------------------------------------------------------- */
/* line 135, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* line 141, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
  /* Línea brand sutil */
}

/* line 146, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section-head::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* line 158, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
}

/* line 164, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section-title svg {
  fill: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
  opacity: 1 !important;
}

/* line 171, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-section-count {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  color: #ff7eb8 !important;
  border: 1px solid rgba(255, 0, 116, 0.22);
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* line 180, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* line 186, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-link:hover {
  color: #ff3d9a !important;
}

/* -----------------------------------------------------------------
   ITEMS (subscriptions, transactions, messages list)
   ----------------------------------------------------------------- */
/* line 193, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 197, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-item:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

/* Avatar items con ring gradient brand sutil */
/* line 203, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-avatar,
.ud-avatar-ph {
  border: 2px solid transparent !important;
  background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #ff0074, #b000ff) border-box !important;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.18);
}

/* line 212, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-avatar-ph {
  /* Override del background para placeholder con texto */
  background: linear-gradient(135deg, #2a0014 0%, #1a0820 100%) padding-box, linear-gradient(135deg, #ff0074, #b000ff) border-box !important;
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* line 222, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-item-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f5f5f5 !important;
}

/* line 229, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-item-sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.04em !important;
}

/* line 236, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-price {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: #ff7eb8 !important;
}

/* line 243, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-price-original {
  color: rgba(255, 255, 255, 0.3) !important;
  text-decoration: line-through;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace !important;
}

/* -----------------------------------------------------------------
   CONTENT GRID (library / favorites cards)
   ----------------------------------------------------------------- */
/* line 254, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 262, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 116, 0.25) !important;
  box-shadow: 0 16px 40px rgba(255, 0, 116, 0.12), 0 0 32px rgba(255, 0, 116, 0.06);
}

/* line 269, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-img img,
.ud-card-img video {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 274, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card:hover .ud-card-img img,
.ud-card:hover .ud-card-img video {
  transform: scale(1.05) !important;
}

/* line 279, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-title {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
  color: #f5f5f5 !important;
}

/* line 285, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-meta {
  font-family: 'JetBrains Mono', monospace !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.04em !important;
}

/* line 291, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-creator span {
  font-family: 'Rubik', sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* line 296, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-badge {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.3);
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  backdrop-filter: blur(8px);
}

/* line 306, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-play {
  background: rgba(10, 7, 16, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* line 314, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card:hover .ud-card-play {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  border-color: transparent;
  box-shadow: 0 0 24px rgba(255, 0, 116, 0.45);
  transform: scale(1.08);
}

/* line 321, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-card-play svg {
  fill: #fff !important;
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 329, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-empty {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
}

/* line 335, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-empty-icon {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.22);
}

/* line 339, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-empty-icon svg {
  filter: drop-shadow(0 0 8px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   DIVIDERS
   ----------------------------------------------------------------- */
/* line 348, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 353, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-divider .ud-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%) !important;
}

/* line 359, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-divider .ud-divider-label {
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* -----------------------------------------------------------------
   PROMO BADGE
   ----------------------------------------------------------------- */
/* line 373, app/assets/stylesheets/_components.exo-user-dashboard.scss */
.ud-badge-promo {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35);
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* Greeting más compacto */
  /* line 388, app/assets/stylesheets/_components.exo-user-dashboard.scss */
  .ud-greeting h1 {
    letter-spacing: -0.025em !important;
  }
  /* Stat values con line-height más apretado para que el gradient text quepa */
  /* line 391, app/assets/stylesheets/_components.exo-user-dashboard.scss */
  .ud-stat-value {
    line-height: 1.05 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/discover.scss */
.dsc-feed.main-feed {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* line 7, app/assets/stylesheets/discover.scss */
.discover-page {
  background-color: #000;
  min-height: 100vh;
  padding: 0;
}

/* line 13, app/assets/stylesheets/discover.scss */
.page-header {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 61, 154, 0.04) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* line 23, app/assets/stylesheets/discover.scss */
.page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 34, app/assets/stylesheets/discover.scss */
.page-title {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

/* line 42, app/assets/stylesheets/discover.scss */
.page-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
}

/* Hero section (visitors only) */
/* line 50, app/assets/stylesheets/discover.scss */
.hero-section {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

/* line 61, app/assets/stylesheets/discover.scss */
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 64, 129, 0.08) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
}

/* line 77, app/assets/stylesheets/discover.scss */
.hero-title {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

/* line 87, app/assets/stylesheets/discover.scss */
.hero-text {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

/* line 95, app/assets/stylesheets/discover.scss */
.hero-cta {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

/* line 109, app/assets/stylesheets/discover.scss */
.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* Sections */
/* line 115, app/assets/stylesheets/discover.scss */
.discover-section {
  margin-bottom: 48px;
}

/* line 119, app/assets/stylesheets/discover.scss */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* line 126, app/assets/stylesheets/discover.scss */
.section-title {
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 600;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 136, app/assets/stylesheets/discover.scss */
.section-icon {
  width: 24px;
  height: 24px;
  fill: #ff4081;
}

/* line 142, app/assets/stylesheets/discover.scss */
.see-all-link {
  color: #ff0074;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* line 152, app/assets/stylesheets/discover.scss */
.see-all-link:hover {
  color: #ff3d9a;
  text-decoration: underline;
}

/* Creator carousel */
/* line 158, app/assets/stylesheets/discover.scss */
.creators-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* line 167, app/assets/stylesheets/discover.scss */
.creators-carousel::-webkit-scrollbar {
  height: 6px;
}

/* line 168, app/assets/stylesheets/discover.scss */
.creators-carousel::-webkit-scrollbar-track {
  background: transparent;
}

/* line 169, app/assets/stylesheets/discover.scss */
.creators-carousel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 170, app/assets/stylesheets/discover.scss */
.creators-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* line 172, app/assets/stylesheets/discover.scss */
.discover-creator-card {
  flex-shrink: 0;
  width: 160px;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 183, app/assets/stylesheets/discover.scss */
.discover-creator-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

/* line 188, app/assets/stylesheets/discover.scss */
.creator-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: #262626;
}

/* line 195, app/assets/stylesheets/discover.scss */
.creator-quick-info {
  padding: 12px;
  text-align: center;
}

/* line 200, app/assets/stylesheets/discover.scss */
.creator-quick-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 210, app/assets/stylesheets/discover.scss */
.creator-quick-price {
  color: #ff4081;
  font-size: 13px;
  font-weight: 600;
}

/* Content grid */
/* line 217, app/assets/stylesheets/discover.scss */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Scroll fade hint — shows more content is available */
/* line 224, app/assets/stylesheets/discover.scss */
.scroll-fade-wrap {
  position: relative;
}

/* line 228, app/assets/stylesheets/discover.scss */
.scroll-fade-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, #000);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Trending tags */
/* line 243, app/assets/stylesheets/discover.scss */
.trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* line 249, app/assets/stylesheets/discover.scss */
.trending-tag {
  display: inline-block;
  padding: 8px 16px;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8e8e8e;
  text-decoration: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* line 262, app/assets/stylesheets/discover.scss */
.trending-tag:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border-color: #ff4081;
}

/* line 268, app/assets/stylesheets/discover.scss */
.tag-hot {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}

/* line 275, app/assets/stylesheets/discover.scss */
.tag-hot:hover {
  background: linear-gradient(135deg, #f50057 0%, #ff4081 100%);
  color: #fff;
}

/* ═══════════════════════════════════
     MOBILE — Tighter, touch-friendly
     ═══════════════════════════════════ */
@media (max-width: 1024px) {
  /* line 285, app/assets/stylesheets/discover.scss */
  .discover-page {
    padding-bottom: 100px;
  }
}

@media (max-width: 768px) {
  /* line 291, app/assets/stylesheets/discover.scss */
  .discover-page {
    padding: 0 0 100px;
  }
  /* Header — compact */
  /* line 296, app/assets/stylesheets/discover.scss */
  .page-header {
    padding: 18px 16px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  /* line 302, app/assets/stylesheets/discover.scss */
  .page-title {
    font-size: 22px;
    margin-bottom: 4px;
  }
  /* line 307, app/assets/stylesheets/discover.scss */
  .page-subtitle {
    font-size: 13px;
    line-height: 1.4;
  }
  /* Hero — tighter */
  /* line 313, app/assets/stylesheets/discover.scss */
  .hero-section {
    padding: 28px 20px;
    margin-bottom: 28px;
    border-radius: 10px;
  }
  /* line 319, app/assets/stylesheets/discover.scss */
  .hero-title {
    font-size: 21px;
    margin-bottom: 8px;
  }
  /* line 320, app/assets/stylesheets/discover.scss */
  .hero-text {
    font-size: 14px;
    margin-bottom: 18px;
  }
  /* line 321, app/assets/stylesheets/discover.scss */
  .hero-cta {
    padding: 11px 28px;
    font-size: 13px;
  }
  /* Sections — reduce gaps */
  /* line 324, app/assets/stylesheets/discover.scss */
  .discover-section {
    margin-bottom: 32px;
  }
  /* line 328, app/assets/stylesheets/discover.scss */
  .section-header {
    margin-bottom: 14px;
    padding: 0 2px;
  }
  /* line 333, app/assets/stylesheets/discover.scss */
  .section-title {
    font-size: 17px;
    gap: 8px;
  }
  /* line 338, app/assets/stylesheets/discover.scss */
  .section-icon {
    width: 20px;
    height: 20px;
  }
  /* line 343, app/assets/stylesheets/discover.scss */
  .see-all-link {
    font-size: 12px;
  }
  /* Fade hint visible on mobile */
  /* line 346, app/assets/stylesheets/discover.scss */
  .scroll-fade-wrap::after {
    opacity: 1;
  }
  /* Creator carousel — smaller cards, edge-to-edge scroll */
  /* line 351, app/assets/stylesheets/discover.scss */
  .creators-carousel {
    gap: 10px;
    padding-bottom: 8px;
    margin: 0 -2px;
    scrollbar-width: none;
  }
  /* line 358, app/assets/stylesheets/discover.scss */
  .creators-carousel::-webkit-scrollbar {
    display: none;
  }
  /* line 360, app/assets/stylesheets/discover.scss */
  .discover-creator-card {
    width: 130px;
    border-radius: 10px;
  }
  /* line 365, app/assets/stylesheets/discover.scss */
  .creator-thumbnail {
    height: 165px;
  }
  /* line 369, app/assets/stylesheets/discover.scss */
  .creator-quick-info {
    padding: 10px 8px;
  }
  /* line 373, app/assets/stylesheets/discover.scss */
  .creator-quick-name {
    font-size: 13px;
    margin-bottom: 2px;
  }
  /* line 378, app/assets/stylesheets/discover.scss */
  .creator-quick-price {
    font-size: 12px;
  }
  /* Content grid — single column, tighter */
  /* line 383, app/assets/stylesheets/discover.scss */
  .content-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Tags — horizontal scroll on mobile */
  /* line 389, app/assets/stylesheets/discover.scss */
  .trending-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  /* line 398, app/assets/stylesheets/discover.scss */
  .trending-tags::-webkit-scrollbar {
    display: none;
  }
  /* line 400, app/assets/stylesheets/discover.scss */
  .trending-tag {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* line 408, app/assets/stylesheets/discover.scss */
  .page-header {
    padding: 14px 12px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  /* line 414, app/assets/stylesheets/discover.scss */
  .page-title {
    font-size: 19px;
  }
  /* line 415, app/assets/stylesheets/discover.scss */
  .page-subtitle {
    font-size: 12px;
  }
  /* line 417, app/assets/stylesheets/discover.scss */
  .hero-section {
    padding: 24px 16px;
    margin-bottom: 24px;
  }
  /* line 422, app/assets/stylesheets/discover.scss */
  .hero-title {
    font-size: 19px;
  }
  /* line 423, app/assets/stylesheets/discover.scss */
  .hero-text {
    font-size: 13px;
    margin-bottom: 16px;
  }
  /* line 424, app/assets/stylesheets/discover.scss */
  .hero-cta {
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 8px;
  }
  /* line 426, app/assets/stylesheets/discover.scss */
  .discover-section {
    margin-bottom: 28px;
  }
  /* line 427, app/assets/stylesheets/discover.scss */
  .section-title {
    font-size: 16px;
  }
  /* line 429, app/assets/stylesheets/discover.scss */
  .discover-creator-card {
    width: 120px;
  }
  /* line 430, app/assets/stylesheets/discover.scss */
  .creator-thumbnail {
    height: 150px;
  }
  /* line 431, app/assets/stylesheets/discover.scss */
  .creator-quick-info {
    padding: 8px 6px;
  }
  /* line 432, app/assets/stylesheets/discover.scss */
  .creator-quick-name {
    font-size: 12px;
  }
  /* line 433, app/assets/stylesheets/discover.scss */
  .creator-quick-price {
    font-size: 11px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · DISCOVER OVERRIDE
   -----------------------------------------------------------------
   Override visual de /discover (página de explorar creadoras).
   Mantiene los selectores legacy de discover.scss (extraído del
   style inline). Cero cambios al HTML/ERB.

   Carga DESPUÉS de discover.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   PAGE BASE
   ----------------------------------------------------------------- */
/* line 15, app/assets/stylesheets/_components.exo-discover.scss */
.discover-page,
.dsc-feed {
  background: #0a0a0a !important;
}

/* -----------------------------------------------------------------
   PAGE HEADER (title + subtitle)
   ----------------------------------------------------------------- */
/* line 24, app/assets/stylesheets/_components.exo-discover.scss */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

/* line 30, app/assets/stylesheets/_components.exo-discover.scss */
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, transparent 100%);
}

/* line 41, app/assets/stylesheets/_components.exo-discover.scss */
.page-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #f5f5f5 !important;
}

/* line 49, app/assets/stylesheets/_components.exo-discover.scss */
.page-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Rubik', sans-serif !important;
}

/* -----------------------------------------------------------------
   HERO SECTION (banner principal del discover)
   ----------------------------------------------------------------- */
/* line 58, app/assets/stylesheets/_components.exo-discover.scss */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #1a0820 0%, #12050d 50%, #0d0812 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.18) !important;
  isolation: isolate;
  overflow: hidden;
  /* Atmósfera brand sutil con dos radial gradients */
  /* Línea brand top */
}

/* line 66, app/assets/stylesheets/_components.exo-discover.scss */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(180, 0, 255, 0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 15% 100%, rgba(255, 0, 116, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* line 78, app/assets/stylesheets/_components.exo-discover.scss */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0 !important;
  left: 10%;
  right: 10%;
  bottom: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.5) 50%, transparent 100%) !important;
  pointer-events: none;
  z-index: 1;
  opacity: 1 !important;
}

/* line 92, app/assets/stylesheets/_components.exo-discover.scss */
.hero-section > * {
  position: relative;
  z-index: 2;
}

/* line 95, app/assets/stylesheets/_components.exo-discover.scss */
.hero-text {
  position: relative;
  z-index: 2;
}

/* line 100, app/assets/stylesheets/_components.exo-discover.scss */
.hero-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #f5f5f5 !important;
}

/* line 107, app/assets/stylesheets/_components.exo-discover.scss */
.hero-title span,
.hero-title em,
.hero-title strong {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* line 118, app/assets/stylesheets/_components.exo-discover.scss */
.hero-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Sheen sweep */
}

/* line 139, app/assets/stylesheets/_components.exo-discover.scss */
.hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 149, app/assets/stylesheets/_components.exo-discover.scss */
.hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 153, app/assets/stylesheets/_components.exo-discover.scss */
.hero-cta:hover::after {
  transform: translateX(120%);
}

/* -----------------------------------------------------------------
   SECTIONS · titles + headers
   ----------------------------------------------------------------- */
/* line 160, app/assets/stylesheets/_components.exo-discover.scss */
.discover-section {
  margin-bottom: 32px;
}

/* line 164, app/assets/stylesheets/_components.exo-discover.scss */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 172, app/assets/stylesheets/_components.exo-discover.scss */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  /* No border-left · el icon brand ya provee la acentuación */
}

/* line 185, app/assets/stylesheets/_components.exo-discover.scss */
.section-title::before {
  display: none !important;
}

/* line 190, app/assets/stylesheets/_components.exo-discover.scss */
.section-icon {
  display: grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.22) !important;
  border-radius: 10px !important;
  color: #ff3d9a !important;
}

/* line 200, app/assets/stylesheets/_components.exo-discover.scss */
.section-icon svg {
  width: 16px !important;
  height: 16px !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   CREATORS CAROUSEL (creator cards horizontal scroll)
   ----------------------------------------------------------------- */
/* line 211, app/assets/stylesheets/_components.exo-discover.scss */
.creators-carousel {
  /* Custom scrollbar brand */
}

/* line 213, app/assets/stylesheets/_components.exo-discover.scss */
.creators-carousel::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3) !important;
}

/* line 216, app/assets/stylesheets/_components.exo-discover.scss */
.creators-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 116, 0.5) !important;
}

/* Creator thumbnail (mini avatar circular en carousel) */
/* line 223, app/assets/stylesheets/_components.exo-discover.scss */
.creator-thumbnail {
  position: relative;
  border: 2px solid transparent !important;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box, linear-gradient(135deg, #ff0074, #ff3d9a, #b000ff) border-box !important;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 234, app/assets/stylesheets/_components.exo-discover.scss */
.creator-thumbnail:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 28px rgba(255, 0, 116, 0.5);
}

/* line 240, app/assets/stylesheets/_components.exo-discover.scss */
.creator-quick-info {
  /* Container del nombre + price debajo del thumbnail */
}

/* line 244, app/assets/stylesheets/_components.exo-discover.scss */
.creator-quick-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 255, app/assets/stylesheets/_components.exo-discover.scss */
.creator-quick-price {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: #ff7eb8 !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   TRENDING TAGS (chips de tags populares)
   ----------------------------------------------------------------- */
/* line 268, app/assets/stylesheets/_components.exo-discover.scss */
.trending-tags {
  /* Custom scrollbar */
  /* Tag links */
}

/* line 270, app/assets/stylesheets/_components.exo-discover.scss */
.trending-tags::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.3) !important;
}

/* line 275, app/assets/stylesheets/_components.exo-discover.scss */
.trending-tags > a,
.trending-tags > .tag-pill,
.trending-tags .trending-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 298, app/assets/stylesheets/_components.exo-discover.scss */
.trending-tags > a:hover,
.trending-tags > .tag-pill:hover,
.trending-tags .trending-tag:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.18);
}

/* -----------------------------------------------------------------
   CONTENT GRID (clips/posts en discover)
   ----------------------------------------------------------------- */
/* line 312, app/assets/stylesheets/_components.exo-discover.scss */
.content-grid {
  /* Layout legacy preservado · solo ajustamos hover de items */
}

/* -----------------------------------------------------------------
   SCROLL FADE (edge fades en carousels)
   ----------------------------------------------------------------- */
/* line 320, app/assets/stylesheets/_components.exo-discover.scss */
.scroll-fade-wrap {
  position: relative;
  /* Edge fades brand-aware */
}

/* line 324, app/assets/stylesheets/_components.exo-discover.scss */
.scroll-fade-wrap::before, .scroll-fade-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 1;
}

/* line 335, app/assets/stylesheets/_components.exo-discover.scss */
.scroll-fade-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #0a0a0a 0%, transparent 100%);
}

/* line 340, app/assets/stylesheets/_components.exo-discover.scss */
.scroll-fade-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, #0a0a0a 0%, transparent 100%);
}

/* -----------------------------------------------------------------
   PTR INDICATOR (pull-to-refresh)
   ----------------------------------------------------------------- */
/* line 350, app/assets/stylesheets/_components.exo-discover.scss */
.ptr-indicator {
  color: #ff3d9a !important;
}

/* =================================================================
   INTERACCIONES PROFESIONALES (tier 1)
   ================================================================= */
/* -----------------------------------------------------------------
   SCROLL-SNAP en carousels horizontales
   ----------------------------------------------------------------- */
/* line 362, app/assets/stylesheets/_components.exo-discover.scss */
.creators-carousel,
.trending-tags {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* line 370, app/assets/stylesheets/_components.exo-discover.scss */
.creators-carousel > *,
.trending-tags > * {
  scroll-snap-align: start;
}

/* -----------------------------------------------------------------
   TAP HAPTIC FEEDBACK · scale al active (touch press)
   ----------------------------------------------------------------- */
/* line 385, app/assets/stylesheets/_components.exo-discover.scss */
.creator-thumbnail:active,
.trending-tags > a:active,
.trending-tags > .tag-pill:active,
.trending-tags .trending-tag:active,
.section-icon:active,
.hero-cta:active {
  transform: scale(0.95) !important;
  transition-duration: 100ms !important;
}

/* Hero CTA preserva su translateY al hover y scale al active sin pelearse */
/* line 392, app/assets/stylesheets/_components.exo-discover.scss */
.hero-cta:active {
  transform: translateY(0) scale(0.97) !important;
}

/* -----------------------------------------------------------------
   SECTION REVEAL AL SCROLL (cinematográfico, no molesto · solo first-time)
   ----------------------------------------------------------------- */
/* line 400, app/assets/stylesheets/_components.exo-discover.scss */
.discover-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* line 408, app/assets/stylesheets/_components.exo-discover.scss */
.discover-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero section · entrada coreografiada al cargar (no espera scroll) */
/* line 415, app/assets/stylesheets/_components.exo-discover.scss */
.hero-section {
  opacity: 0;
  transform: translateY(20px);
  animation: exo-discover-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes exo-discover-hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page header · idem hero pero más rápido */
/* line 429, app/assets/stylesheets/_components.exo-discover.scss */
.page-header {
  opacity: 0;
  transform: translateY(12px);
  animation: exo-discover-header-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes exo-discover-header-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: sin animaciones */
@media (prefers-reduced-motion: reduce) {
  /* line 444, app/assets/stylesheets/_components.exo-discover.scss */
  .discover-section,
.hero-section,
.page-header {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile · drop section reveal completamente.
   Razón: cuando el primer carousel ocupa mucho viewport, IntersectionObserver
   no dispara para las secciones siguientes hasta que el user scrollea — quedan
   invisibles (opacity: 0) y parece que la página está rota. La animación
   cinematográfica solo aporta valor en desktop. */
@media (max-width: 768px) {
  /* line 460, app/assets/stylesheets/_components.exo-discover.scss */
  .discover-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* Padding-bottom para bottom nav fijo */
  /* line 473, app/assets/stylesheets/_components.exo-discover.scss */
  .discover-page .main-feed,
.dsc-feed .main-feed {
    padding-bottom: 100px !important;
  }
  /* Page title más compacto en mobile */
  /* line 479, app/assets/stylesheets/_components.exo-discover.scss */
  .page-title {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
  /* Section titles más compactos */
  /* line 484, app/assets/stylesheets/_components.exo-discover.scss */
  .section-title {
    font-size: 16px !important;
    gap: 10px;
  }
  /* line 489, app/assets/stylesheets/_components.exo-discover.scss */
  .section-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
  /* line 494, app/assets/stylesheets/_components.exo-discover.scss */
  .section-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Hero más compacto */
  /* line 498, app/assets/stylesheets/_components.exo-discover.scss */
  .hero-title {
    line-height: 1.1 !important;
  }
  /* Trending tags más compactos */
  /* line 503, app/assets/stylesheets/_components.exo-discover.scss */
  .trending-tags > a,
.trending-tags > .tag-pill,
.trending-tags .trending-tag {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/creator_insights.scss */
.insights-page {
  background: #000;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/creator_insights.scss */
.insights-page-wrapper .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

/* line 18, app/assets/stylesheets/creator_insights.scss */
.insights-main {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* line 24, app/assets/stylesheets/creator_insights.scss */
.insights-header {
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 0, 116, 0.02) 50%, transparent 100%);
  border: 1px solid rgba(255, 0, 116, 0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* line 33, app/assets/stylesheets/creator_insights.scss */
.insights-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 44, app/assets/stylesheets/creator_insights.scss */
.insights-header::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* line 56, app/assets/stylesheets/creator_insights.scss */
.insights-title {
  font-size: 32px;
  font-weight: 800;
  color: #f5f5f5;
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 69, app/assets/stylesheets/creator_insights.scss */
.insights-title::before {
  content: '📊';
  font-size: 28px;
}

/* line 75, app/assets/stylesheets/creator_insights.scss */
.insights-subtitle {
  color: #949494;
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* line 85, app/assets/stylesheets/creator_insights.scss */
.insights-period-toggle {
  display: inline-flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 999px;
  position: relative;
  z-index: 1;
}

/* line 94, app/assets/stylesheets/creator_insights.scss */
.insights-period-toggle .period-pill {
  padding: 8px 16px;
  border-radius: 999px;
  color: #8e8e8e;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

/* line 103, app/assets/stylesheets/creator_insights.scss */
.insights-period-toggle .period-pill.is-active {
  background: #ff0074;
  color: #fff;
}

/* line 110, app/assets/stylesheets/creator_insights.scss */
.insights-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #f5f5f5;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.3px;
}

/* line 120, app/assets/stylesheets/creator_insights.scss */
.insights-section-title::before {
  content: '';
  width: 4px;
  min-width: 4px;
  flex-shrink: 0;
  height: 24px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 3px;
}

/* line 131, app/assets/stylesheets/creator_insights.scss */
.insights-empty-state {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 64px 32px;
  text-align: center;
  color: #8e8e8e;
}

/* line 139, app/assets/stylesheets/creator_insights.scss */
.insights-empty-state svg {
  color: #ff0074;
  margin-bottom: 16px;
}

/* line 144, app/assets/stylesheets/creator_insights.scss */
.insights-empty-state h2 {
  color: #f5f5f5;
  font-size: 20px;
  margin: 0 0 8px;
}

/* line 150, app/assets/stylesheets/creator_insights.scss */
.insights-empty-state p {
  margin: 0;
  font-size: 14px;
}

/* line 153, app/assets/stylesheets/creator_insights.scss */
.insights-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  /* line 153, app/assets/stylesheets/creator_insights.scss */
  .insights-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* line 162, app/assets/stylesheets/creator_insights.scss */
.insight-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: insightFadeInUp 0.5s ease backwards;
}

/* line 172, app/assets/stylesheets/creator_insights.scss */
.insight-card:nth-child(1) {
  animation-delay: 0.1s;
}

/* line 173, app/assets/stylesheets/creator_insights.scss */
.insight-card:nth-child(2) {
  animation-delay: 0.15s;
}

/* line 174, app/assets/stylesheets/creator_insights.scss */
.insight-card:nth-child(3) {
  animation-delay: 0.2s;
}

/* line 175, app/assets/stylesheets/creator_insights.scss */
.insight-card:nth-child(4) {
  animation-delay: 0.25s;
}

/* line 177, app/assets/stylesheets/creator_insights.scss */
.insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #ff0074);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 189, app/assets/stylesheets/creator_insights.scss */
.insight-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 0, 116, 0.1);
}

/* line 194, app/assets/stylesheets/creator_insights.scss */
.insight-card:hover::before {
  opacity: 1;
}

/* line 198, app/assets/stylesheets/creator_insights.scss */
.insight-card:hover .insight-card-icon {
  opacity: 0.5;
  transform: translateY(-50%) scale(1.1);
}

/* line 204, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.15;
  transition: all 0.4s ease;
}

/* line 212, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-icon svg {
  width: 56px;
  height: 56px;
  fill: #ff0074;
}

/* line 219, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-label {
  color: #8e8e8e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  font-weight: 600;
}

/* line 228, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-value {
  color: #f5f5f5;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* line 236, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-sub {
  color: #8e8e8e;
  font-size: 12px;
  margin-top: 8px;
}

/* line 242, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 8px;
}

/* line 250, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-delta.up {
  color: #00bfa5;
  background: rgba(0, 191, 165, 0.1);
}

/* line 251, app/assets/stylesheets/creator_insights.scss */
.insight-card .insight-card-delta.down {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.1);
}

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

/* line 266, app/assets/stylesheets/creator_insights.scss */
.insights-charts {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  /* line 266, app/assets/stylesheets/creator_insights.scss */
  .insights-charts {
    grid-template-columns: 1fr;
  }
}

/* line 275, app/assets/stylesheets/creator_insights.scss */
.insight-chart-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
}

/* line 281, app/assets/stylesheets/creator_insights.scss */
.insight-chart-card .chart-title {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
}

/* line 288, app/assets/stylesheets/creator_insights.scss */
.insight-chart-card .chart-wrapper {
  position: relative;
  height: 280px;
}

/* line 291, app/assets/stylesheets/creator_insights.scss */
.insight-chart-card .chart-wrapper.donut-wrapper {
  height: 240px;
}

/* line 295, app/assets/stylesheets/creator_insights.scss */
.chart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  min-height: 200px;
}

/* line 304, app/assets/stylesheets/creator_insights.scss */
.chart-empty-state svg {
  color: rgba(255, 0, 116, 0.35);
  margin-bottom: 16px;
}

/* line 309, app/assets/stylesheets/creator_insights.scss */
.chart-empty-state .chart-empty-title {
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* line 316, app/assets/stylesheets/creator_insights.scss */
.chart-empty-state .chart-empty-body {
  color: #8e8e8e;
  font-size: 13px;
  margin: 0;
  max-width: 260px;
  line-height: 1.5;
}

/* line 325, app/assets/stylesheets/creator_insights.scss */
.insights-rankings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  /* line 325, app/assets/stylesheets/creator_insights.scss */
  .insights-rankings {
    grid-template-columns: 1fr;
  }
}

/* line 333, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
}

/* line 340, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-title {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
}

/* line 347, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-empty {
  color: #8e8e8e;
  font-size: 13px;
  margin: 0;
}

/* line 353, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 358, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .insights-ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 365, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .insights-ranking-row:last-child {
  border-bottom: none;
}

/* line 368, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

/* line 376, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 379, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e8e;
  font-weight: 700;
}

/* line 385, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074, #7c4dff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* line 395, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-info {
  flex: 1;
  min-width: 0;
}

/* line 397, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-title {
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 404, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-meta {
  color: #8e8e8e;
  font-size: 12px;
  margin-top: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* line 411, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-badge {
  background: rgba(255, 0, 116, 0.15);
  color: #ff3d9a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* line 420, app/assets/stylesheets/creator_insights.scss */
.insights-ranking-list .ranking-value {
  color: #00bfa5;
  font-weight: 700;
  font-size: 14px;
}

/* ========== MOBILE: 1024px ========== */
@media (max-width: 1024px) {
  /* line 429, app/assets/stylesheets/creator_insights.scss */
  .insights-page-wrapper .social-layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
  /* line 435, app/assets/stylesheets/creator_insights.scss */
  .insights-main {
    padding: 20px 16px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* line 443, app/assets/stylesheets/creator_insights.scss */
  .insights-header {
    padding: 24px 20px;
    margin-bottom: 24px;
    border-radius: 16px;
  }
  /* line 448, app/assets/stylesheets/creator_insights.scss */
  .insights-header::after {
    width: 150px;
    height: 150px;
    top: -40px;
    right: -40px;
  }
  /* line 456, app/assets/stylesheets/creator_insights.scss */
  .insights-title {
    font-size: 26px;
  }
}

/* ========== MOBILE: 768px ========== */
@media (max-width: 768px) {
  /* line 463, app/assets/stylesheets/creator_insights.scss */
  .insights-header {
    padding: 20px 16px;
    border-radius: 14px;
  }
  /* line 468, app/assets/stylesheets/creator_insights.scss */
  .insights-title {
    font-size: 22px;
    gap: 10px;
  }
  /* line 472, app/assets/stylesheets/creator_insights.scss */
  .insights-title::before {
    font-size: 22px;
  }
  /* line 477, app/assets/stylesheets/creator_insights.scss */
  .insights-subtitle {
    font-size: 13px;
  }
  /* line 481, app/assets/stylesheets/creator_insights.scss */
  .insights-section-title {
    font-size: 18px;
    margin-bottom: 16px;
  }
  /* line 485, app/assets/stylesheets/creator_insights.scss */
  .insights-section-title::before {
    height: 20px;
  }
  /* line 490, app/assets/stylesheets/creator_insights.scss */
  .insight-card {
    padding: 22px;
    border-radius: 16px;
  }
  /* line 494, app/assets/stylesheets/creator_insights.scss */
  .insight-card:hover {
    transform: none;
  }
  /* line 498, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-icon {
    right: 16px;
    opacity: 0.1;
  }
  /* line 502, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-icon svg {
    width: 44px;
    height: 44px;
  }
  /* line 508, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-value {
    font-size: 26px;
  }
  /* line 513, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card {
    padding: 16px;
  }
  /* line 516, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-wrapper {
    height: 220px;
  }
  /* line 518, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-wrapper.donut-wrapper {
    height: 200px;
  }
  /* line 521, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-title {
    font-size: 15px;
  }
  /* line 526, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-card {
    padding: 16px;
  }
  /* line 530, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-title {
    font-size: 15px;
  }
  /* line 535, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-thumb {
    width: 40px;
    height: 40px;
  }
  /* line 540, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  /* line 546, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-title {
    font-size: 13px;
  }
  /* line 550, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-meta {
    font-size: 11px;
  }
}

/* ========== MOBILE: 480px ========== */
@media (max-width: 480px) {
  /* line 558, app/assets/stylesheets/creator_insights.scss */
  .insights-main {
    padding: 16px 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 563, app/assets/stylesheets/creator_insights.scss */
  .insights-header {
    padding: 16px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  /* line 569, app/assets/stylesheets/creator_insights.scss */
  .insights-title {
    font-size: 18px;
    gap: 8px;
  }
  /* line 573, app/assets/stylesheets/creator_insights.scss */
  .insights-title::before {
    font-size: 18px;
  }
  /* line 578, app/assets/stylesheets/creator_insights.scss */
  .insights-subtitle {
    font-size: 12px;
  }
  /* line 582, app/assets/stylesheets/creator_insights.scss */
  .insights-period-toggle .period-pill {
    padding: 6px 14px;
    font-size: 12px;
  }
  /* line 587, app/assets/stylesheets/creator_insights.scss */
  .insights-section-title {
    font-size: 16px;
    margin-bottom: 14px;
    gap: 10px;
  }
  /* line 592, app/assets/stylesheets/creator_insights.scss */
  .insights-section-title::before {
    height: 18px;
    width: 3px;
    min-width: 3px;
  }
  /* line 599, app/assets/stylesheets/creator_insights.scss */
  .insight-card {
    padding: 18px 16px;
    border-radius: 14px;
  }
  /* line 603, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-icon {
    right: 14px;
  }
  /* line 606, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-icon svg {
    width: 36px;
    height: 36px;
  }
  /* line 612, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-value {
    font-size: 22px;
  }
  /* line 616, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-label {
    font-size: 10px;
    letter-spacing: 1px;
  }
  /* line 621, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-sub {
    font-size: 11px;
  }
  /* line 625, app/assets/stylesheets/creator_insights.scss */
  .insight-card .insight-card-delta {
    font-size: 10px;
    padding: 2px 6px;
  }
  /* line 631, app/assets/stylesheets/creator_insights.scss */
  .insights-stats-grid,
.insights-charts,
.insights-rankings {
    gap: 10px;
    margin-bottom: 16px;
  }
  /* line 638, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card {
    padding: 14px;
    border-radius: 10px;
  }
  /* line 642, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-wrapper {
    height: 200px;
  }
  /* line 644, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-wrapper.donut-wrapper {
    height: 180px;
  }
  /* line 647, app/assets/stylesheets/creator_insights.scss */
  .insight-chart-card .chart-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
  /* line 653, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-card {
    padding: 14px;
    border-radius: 10px;
  }
  /* line 658, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
  /* line 664, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .insights-ranking-row {
    padding: 8px 0;
    gap: 10px;
  }
  /* line 669, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }
  /* line 675, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  /* line 681, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-title {
    font-size: 12px;
  }
  /* line 685, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-meta {
    font-size: 10px;
  }
  /* line 689, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-badge {
    padding: 3px 6px;
    font-size: 10px;
  }
  /* line 694, app/assets/stylesheets/creator_insights.scss */
  .insights-ranking-list .ranking-value {
    font-size: 13px;
  }
}
/* line 5, app/assets/stylesheets/panel_analytics.scss */
.panel-analytics .panel-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* line 14, app/assets/stylesheets/panel_analytics.scss */
.panel-analytics .admin-subtitle {
  color: #8e8e8e;
  font-size: 14px;
  margin: 4px 0 0;
}

/* line 20, app/assets/stylesheets/panel_analytics.scss */
.panel-analytics .panel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  /* line 20, app/assets/stylesheets/panel_analytics.scss */
  .panel-analytics .panel-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* line 20, app/assets/stylesheets/panel_analytics.scss */
  .panel-analytics .panel-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* line 30, app/assets/stylesheets/panel_analytics.scss */
.panel-analytics .panel-leaderboards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  /* line 30, app/assets/stylesheets/panel_analytics.scss */
  .panel-analytics .panel-leaderboards {
    grid-template-columns: 1fr;
  }
}

/* line 41, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-creator-context {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* line 46, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-creator-context .admin-creator-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 52, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-creator-context .admin-creator-avatar--placeholder {
  background: linear-gradient(135deg, #ff0074, #7c4dff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}

/* line 64, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-creator-meta {
  color: #8e8e8e;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}

/* line 74, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* line 80, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-badge--verified {
  background: rgba(0, 191, 165, 0.15);
  color: #00bfa5;
}

/* line 81, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-badge--suspended {
  background: rgba(255, 82, 82, 0.15);
  color: #ff5252;
}

/* line 84, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-viewing-label {
  background: rgba(124, 77, 255, 0.15);
  color: #9d6dff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 95, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-back-link {
  color: #8e8e8e;
  font-size: 13px;
  text-decoration: none;
}

/* line 100, app/assets/stylesheets/panel_analytics.scss */
.creator-insights-admin .admin-back-link:hover {
  color: #ff0074;
}
@charset "UTF-8";
/* ========================================
   CREATOR NEW CONTENT - Estilo Switch Pro
   ======================================== */
/* line 5, app/assets/stylesheets/creator_content_new.scss */
.new-content-page {
  background: #000;
  min-height: calc(100vh - 90px);
}

/* line 9, app/assets/stylesheets/creator_content_new.scss */
.new-content-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 40px 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* line 18, app/assets/stylesheets/creator_content_new.scss */
.new-content-page .main-feed {
  max-width: 100%;
  width: 100%;
}

/* line 24, app/assets/stylesheets/creator_content_new.scss */
.page-header {
  margin-bottom: 40px;
}

/* line 28, app/assets/stylesheets/creator_content_new.scss */
.page-title {
  font-size: 36px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 37, app/assets/stylesheets/creator_content_new.scss */
.page-title:before {
  content: '';
  width: 4px;
  height: 36px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 2px;
}

/* line 46, app/assets/stylesheets/creator_content_new.scss */
.page-subtitle {
  color: #8e8e8e;
  font-size: 16px;
  margin-left: 16px;
}

/* line 52, app/assets/stylesheets/creator_content_new.scss */
.content-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}

/* line 59, app/assets/stylesheets/creator_content_new.scss */
.form-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

/* line 67, app/assets/stylesheets/creator_content_new.scss */
.form-section:hover {
  border-color: rgba(255, 64, 129, 0.2);
}

/* line 72, app/assets/stylesheets/creator_content_new.scss */
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 83, app/assets/stylesheets/creator_content_new.scss */
.section-title:before {
  content: '';
  width: 3px;
  height: 20px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 2px;
}

/* line 92, app/assets/stylesheets/creator_content_new.scss */
.form-group {
  margin-bottom: 25px;
}

/* line 96, app/assets/stylesheets/creator_content_new.scss */
.form-label {
  display: block;
  color: #f5f5f5;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* line 106, app/assets/stylesheets/creator_content_new.scss */
.form-label-required::after {
  content: " *";
  color: #ff4081;
}

/* line 111, app/assets/stylesheets/creator_content_new.scss */
.form-help-text {
  color: #8e8e8e;
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.5;
}

/* line 118, app/assets/stylesheets/creator_content_new.scss */
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f5f5f5;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* line 128, app/assets/stylesheets/creator_content_new.scss */
.form-input:focus {
  outline: none;
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 135, app/assets/stylesheets/creator_content_new.scss */
.form-input::placeholder {
  color: #666;
}

/* line 140, app/assets/stylesheets/creator_content_new.scss */
.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

/* line 148, app/assets/stylesheets/creator_content_new.scss */
.content-type-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* line 154, app/assets/stylesheets/creator_content_new.scss */
.type-option {
  position: relative;
  cursor: pointer;
}

/* line 158, app/assets/stylesheets/creator_content_new.scss */
.type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* line 163, app/assets/stylesheets/creator_content_new.scss */
.type-option input[type="radio"]:checked + .type-label {
  background: rgba(255, 64, 129, 0.15);
  border-color: #ff4081;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 171, app/assets/stylesheets/creator_content_new.scss */
.type-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
}

/* line 182, app/assets/stylesheets/creator_content_new.scss */
.type-label:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 188, app/assets/stylesheets/creator_content_new.scss */
.type-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  fill: #ff4081;
}

/* line 195, app/assets/stylesheets/creator_content_new.scss */
.type-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 202, app/assets/stylesheets/creator_content_new.scss */
.upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

/* line 213, app/assets/stylesheets/creator_content_new.scss */
.upload-area:hover, .upload-area.dragover {
  border-color: #ff4081;
  background: rgba(255, 64, 129, 0.08);
  box-shadow: 0 0 20px rgba(255, 64, 129, 0.2);
}

/* line 221, app/assets/stylesheets/creator_content_new.scss */
.upload-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  fill: #8e8e8e;
  transition: all 0.3s ease;
}

/* line 228, app/assets/stylesheets/creator_content_new.scss */
.upload-area:hover .upload-icon {
  fill: #ff4081;
  transform: scale(1.1);
}

/* line 234, app/assets/stylesheets/creator_content_new.scss */
.upload-text {
  color: #f5f5f5;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
}

/* line 240, app/assets/stylesheets/creator_content_new.scss */
.upload-text .tap-text {
  display: none;
}

/* line 245, app/assets/stylesheets/creator_content_new.scss */
.upload-subtext {
  color: #8e8e8e;
  font-size: 14px;
}

/* line 250, app/assets/stylesheets/creator_content_new.scss */
.upload-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* line 261, app/assets/stylesheets/creator_content_new.scss */
.preview-container {
  margin-top: 20px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* line 268, app/assets/stylesheets/creator_content_new.scss */
.preview-image,
.preview-video {
  width: 100%;
  border-radius: 12px;
  max-height: 400px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 277, app/assets/stylesheets/creator_content_new.scss */
.preview-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* line 291, app/assets/stylesheets/creator_content_new.scss */
.preview-remove:hover {
  background: #ff4081;
  border-color: #ff4081;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
}

/* line 300, app/assets/stylesheets/creator_content_new.scss */
.access-type-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

/* line 307, app/assets/stylesheets/creator_content_new.scss */
.access-option {
  position: relative;
  cursor: pointer;
}

/* line 311, app/assets/stylesheets/creator_content_new.scss */
.access-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* line 316, app/assets/stylesheets/creator_content_new.scss */
.access-option input[type="radio"]:checked + .access-label {
  background: rgba(255, 64, 129, 0.15);
  border-color: #ff4081;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.3);
}

/* line 322, app/assets/stylesheets/creator_content_new.scss */
.access-option input[type="radio"]:checked + .access-label .access-icon {
  transform: scale(1.1);
}

/* line 328, app/assets/stylesheets/creator_content_new.scss */
.access-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 140px;
}

/* line 340, app/assets/stylesheets/creator_content_new.scss */
.access-label:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 346, app/assets/stylesheets/creator_content_new.scss */
.access-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  fill: #ff4081;
  transition: all 0.3s ease;
}

/* line 354, app/assets/stylesheets/creator_content_new.scss */
.access-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

/* line 361, app/assets/stylesheets/creator_content_new.scss */
.access-desc {
  color: #8e8e8e;
  font-size: 12px;
  line-height: 1.4;
}

/* line 367, app/assets/stylesheets/creator_content_new.scss */
.price-input-wrapper {
  display: none;
  margin-top: 15px;
}

/* line 371, app/assets/stylesheets/creator_content_new.scss */
.price-input-wrapper.show {
  display: block;
}

/* line 377, app/assets/stylesheets/creator_content_new.scss */
.pricing-toggle,
.schedule-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* line 390, app/assets/stylesheets/creator_content_new.scss */
.pricing-toggle:hover,
.schedule-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 396, app/assets/stylesheets/creator_content_new.scss */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  min-width: 50px;
  height: 26px;
  flex-shrink: 0;
}

/* line 404, app/assets/stylesheets/creator_content_new.scss */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* line 411, app/assets/stylesheets/creator_content_new.scss */
.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-color: transparent;
}

/* line 416, app/assets/stylesheets/creator_content_new.scss */
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* line 421, app/assets/stylesheets/creator_content_new.scss */
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 433, app/assets/stylesheets/creator_content_new.scss */
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  top: 2px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* line 447, app/assets/stylesheets/creator_content_new.scss */
.toggle-label {
  color: #f5f5f5;
  font-weight: 500;
  font-size: 15px;
  user-select: none;
}

/* line 454, app/assets/stylesheets/creator_content_new.scss */
.datetime-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  width: 100%;
  transition: all 0.2s ease;
}

/* line 464, app/assets/stylesheets/creator_content_new.scss */
.datetime-input:focus {
  outline: none;
  border-color: #ff0074;
  background: rgba(255, 0, 116, 0.05);
}

/* line 470, app/assets/stylesheets/creator_content_new.scss */
.datetime-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* line 475, app/assets/stylesheets/creator_content_new.scss */
.datetime-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* line 481, app/assets/stylesheets/creator_content_new.scss */
#schedule-wrapper {
  padding: 20px;
  background: rgba(255, 0, 116, 0.05);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 12px;
  margin-top: 16px;
}

/* line 488, app/assets/stylesheets/creator_content_new.scss */
#schedule-wrapper .form-label {
  color: #ff0074;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 496, app/assets/stylesheets/creator_content_new.scss */
#schedule-wrapper .form-label::before {
  content: '📅';
}

/* line 503, app/assets/stylesheets/creator_content_new.scss */
.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
}

/* line 510, app/assets/stylesheets/creator_content_new.scss */
.btn-cancel {
  padding: 14px 30px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 14px;
}

/* line 522, app/assets/stylesheets/creator_content_new.scss */
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* line 529, app/assets/stylesheets/creator_content_new.scss */
.btn-submit {
  padding: 14px 40px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

/* line 540, app/assets/stylesheets/creator_content_new.scss */
.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
}

/* line 546, app/assets/stylesheets/creator_content_new.scss */
.btn-submit:active {
  transform: translateY(-1px);
}

/* line 552, app/assets/stylesheets/creator_content_new.scss */
.tips-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  position: sticky;
  top: 20px;
}

/* line 561, app/assets/stylesheets/creator_content_new.scss */
.tips-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 570, app/assets/stylesheets/creator_content_new.scss */
.tips-title:before {
  content: '💡';
  font-size: 24px;
}

/* line 576, app/assets/stylesheets/creator_content_new.scss */
.tip-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 583, app/assets/stylesheets/creator_content_new.scss */
.tip-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* line 590, app/assets/stylesheets/creator_content_new.scss */
.tip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 601, app/assets/stylesheets/creator_content_new.scss */
.tip-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* line 608, app/assets/stylesheets/creator_content_new.scss */
.tip-content {
  flex: 1;
}

/* line 612, app/assets/stylesheets/creator_content_new.scss */
.tip-title {
  color: #f5f5f5;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 15px;
}

/* line 619, app/assets/stylesheets/creator_content_new.scss */
.tip-text {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.5;
}

/* line 626, app/assets/stylesheets/creator_content_new.scss */
.error-messages {
  background: rgba(255, 64, 129, 0.1);
  border: 1px solid #ff4081;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
}

/* line 633, app/assets/stylesheets/creator_content_new.scss */
.error-messages strong {
  color: #f5f5f5 !important;
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

/* line 640, app/assets/stylesheets/creator_content_new.scss */
.error-messages ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 646, app/assets/stylesheets/creator_content_new.scss */
.error-messages li {
  color: #ff4081;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

/* line 652, app/assets/stylesheets/creator_content_new.scss */
.error-messages li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #ff4081;
}

/* line 659, app/assets/stylesheets/creator_content_new.scss */
.error-messages li:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  /* line 668, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    min-height: auto;
  }
  /* line 674, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 681, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .left-sidebar {
    display: none;
  }
  /* line 685, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .main-feed {
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
  /* line 692, app/assets/stylesheets/creator_content_new.scss */
  .content-form-wrapper {
    grid-template-columns: 1fr;
  }
  /* line 696, app/assets/stylesheets/creator_content_new.scss */
  .tips-section {
    position: static;
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  /* line 705, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-header {
    margin-bottom: 24px;
    padding: 0 24px;
  }
  /* line 710, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .content-form-wrapper {
    padding: 0 24px;
  }
  /* line 714, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-title {
    font-size: 24px;
  }
  /* line 717, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-title:before {
    height: 24px;
  }
  /* line 722, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-subtitle {
    display: none;
  }
  /* line 726, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .content-type-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  /* line 731, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 24px;
  }
  /* line 740, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-section:hover {
    border-color: rgba(255, 255, 255, 0.06);
  }
  /* line 744, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-section:last-of-type {
    border-bottom: none;
  }
  /* line 749, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .section-title {
    font-size: 16px;
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
  }
  /* line 756, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 30px;
  }
  /* line 764, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .btn-submit {
    order: -2;
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
  /* line 771, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .btn-save-draft {
    order: -1;
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  /* line 778, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .btn-cancel {
    order: 0;
    width: auto;
    align-self: center;
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    color: #8e8e8e;
    min-height: auto;
  }
  /* line 789, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .btn-cancel:hover {
    background: none;
    border: none;
    transform: none;
    color: #f5f5f5;
  }
  /* line 797, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-type-selector {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* line 802, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-label {
    min-height: auto;
    flex-direction: row;
    padding: 16px;
    gap: 14px;
    text-align: left;
  }
  /* line 810, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-icon {
    margin-bottom: 0;
  }
  /* line 815, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .tips-section {
    display: none;
  }
  /* line 820, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-text .drag-text {
    display: none;
  }
  /* line 824, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-text .tap-text {
    display: inline;
  }
}

@media (max-width: 480px) {
  /* line 830, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-header {
    margin-bottom: 18px;
    padding: 0 20px;
  }
  /* line 835, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .content-form-wrapper {
    padding: 0 20px;
  }
  /* line 839, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-title {
    font-size: 22px;
  }
  /* line 842, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .page-title:before {
    height: 22px;
    width: 3px;
  }
  /* line 848, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-section {
    margin-bottom: 0px;
    padding-bottom: 20px;
  }
  /* line 853, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .section-title {
    font-size: 14px;
    margin-bottom: 14px;
  }
  /* line 858, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-label {
    font-size: 12px;
  }
  /* line 862, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-input {
    padding: 12px 14px;
    font-size: 16px;
  }
  /* line 867, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .form-textarea {
    min-height: 100px;
  }
  /* line 871, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .type-label {
    padding: 14px 12px;
  }
  /* line 875, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-area {
    padding: 28px 16px;
  }
  /* line 879, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }
  /* line 885, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-text {
    font-size: 14px;
  }
  /* line 889, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .upload-subtext {
    font-size: 12px;
  }
  /* line 893, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-type-selector {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* line 898, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-label {
    padding: 14px;
    min-height: auto;
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }
  /* line 906, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
  }
  /* line 912, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-name {
    font-size: 13px;
  }
  /* line 916, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .access-desc {
    font-size: 11px;
  }
  /* line 920, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .btn-cancel,
.new-content-page .btn-save-draft,
.new-content-page .btn-submit {
    padding: 14px 24px;
    font-size: 14px;
  }
  /* line 927, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .toggle-label {
    font-size: 14px;
  }
  /* line 931, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page .pricing-toggle,
.new-content-page .schedule-toggle {
    padding: 14px 16px;
  }
  /* line 936, app/assets/stylesheets/creator_content_new.scss */
  .new-content-page #schedule-wrapper {
    padding: 16px;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* line 944, app/assets/stylesheets/creator_content_new.scss */
  .form-section:hover {
    border-color: rgba(255, 255, 255, 0.1);
  }
  /* line 948, app/assets/stylesheets/creator_content_new.scss */
  .type-label:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }
  /* line 953, app/assets/stylesheets/creator_content_new.scss */
  .access-label:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }
  /* line 958, app/assets/stylesheets/creator_content_new.scss */
  .upload-area:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
  }
  /* line 964, app/assets/stylesheets/creator_content_new.scss */
  .upload-area:hover .upload-icon {
    fill: #8e8e8e;
    transform: none;
  }
  /* line 969, app/assets/stylesheets/creator_content_new.scss */
  .btn-cancel:hover,
.btn-save-draft:hover,
.btn-submit:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 976, app/assets/stylesheets/creator_content_new.scss */
  .preview-remove:hover {
    transform: none;
  }
  /* line 981, app/assets/stylesheets/creator_content_new.scss */
  .type-option:active .type-label {
    transform: scale(0.97);
    background: rgba(255, 0, 116, 0.08);
    border-color: rgba(255, 0, 116, 0.3);
  }
  /* line 987, app/assets/stylesheets/creator_content_new.scss */
  .access-option:active .access-label {
    transform: scale(0.97);
    background: rgba(255, 0, 116, 0.08);
    border-color: rgba(255, 0, 116, 0.3);
  }
  /* line 993, app/assets/stylesheets/creator_content_new.scss */
  .upload-area:active {
    transform: scale(0.98);
    border-color: #ff0074;
    background: rgba(255, 0, 116, 0.06);
  }
  /* line 999, app/assets/stylesheets/creator_content_new.scss */
  .btn-submit:active {
    transform: scale(0.97);
    opacity: 0.9;
  }
  /* line 1004, app/assets/stylesheets/creator_content_new.scss */
  .btn-save-draft:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
  }
  /* line 1009, app/assets/stylesheets/creator_content_new.scss */
  .btn-cancel:active {
    color: #f5f5f5;
  }
  /* line 1013, app/assets/stylesheets/creator_content_new.scss */
  .schedule-toggle:active,
.pricing-toggle:active {
    transform: scale(0.98);
    background: rgba(255, 0, 116, 0.05);
  }
  /* line 1019, app/assets/stylesheets/creator_content_new.scss */
  .preview-remove:active {
    transform: scale(0.95);
    background: #ff0074;
  }
  /* line 1024, app/assets/stylesheets/creator_content_new.scss */
  .btn-clear-gallery:active {
    transform: scale(0.95);
    background: rgba(255, 64, 129, 0.25);
  }
  /* line 1030, app/assets/stylesheets/creator_content_new.scss */
  .gallery-item-remove {
    opacity: 1 !important;
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 1040, app/assets/stylesheets/creator_content_new.scss */
  .form-section,
.type-label,
.access-label,
.upload-area,
.upload-icon,
.btn-cancel,
.btn-save-draft,
.btn-submit,
.preview-remove,
.toggle-slider,
.toggle-slider:before,
.schedule-toggle,
.pricing-toggle,
.btn-clear-gallery,
.gallery-item-remove,
.access-icon {
    transition: none !important;
  }
  /* line 1059, app/assets/stylesheets/creator_content_new.scss */
  .type-option input[type="radio"]:checked + .type-label,
.access-option input[type="radio"]:checked + .access-label {
    transform: none;
  }
}
/* ========================================
   CREATOR CONTENTS INDEX - Estilo Switch Pro
   ======================================== */
/* line 5, app/assets/stylesheets/creator_contents_index.scss */
.contents-page {
  background: #000;
  min-height: calc(100vh - 90px);
}

/* line 9, app/assets/stylesheets/creator_contents_index.scss */
.contents-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 40px 20px;
  max-width: 1800px;
  margin: 0 auto;
}

/* line 18, app/assets/stylesheets/creator_contents_index.scss */
.contents-page .main-feed {
  max-width: 100%;
  width: 100%;
}

/* line 24, app/assets/stylesheets/creator_contents_index.scss */
.mobile-bottom-spacer {
  display: none;
}

/* line 29, app/assets/stylesheets/creator_contents_index.scss */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

/* line 38, app/assets/stylesheets/creator_contents_index.scss */
.page-title {
  font-size: 36px;
  font-weight: 700;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 46, app/assets/stylesheets/creator_contents_index.scss */
.page-title:before {
  content: '';
  width: 4px;
  height: 36px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 2px;
}

/* line 55, app/assets/stylesheets/creator_contents_index.scss */
.new-content-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
}

/* line 69, app/assets/stylesheets/creator_contents_index.scss */
.new-content-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
}

/* line 75, app/assets/stylesheets/creator_contents_index.scss */
.new-content-btn:active {
  transform: translateY(-1px);
}

/* line 79, app/assets/stylesheets/creator_contents_index.scss */
.new-content-btn svg {
  width: 20px;
  height: 20px;
}

/* line 84, app/assets/stylesheets/creator_contents_index.scss */
.new-content-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* line 92, app/assets/stylesheets/creator_contents_index.scss */
.verification-banner {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 30px;
  border-left: 4px solid #ffc107;
}

/* line 100, app/assets/stylesheets/creator_contents_index.scss */
.verification-banner h3 {
  color: #ffc107;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
}

/* line 110, app/assets/stylesheets/creator_contents_index.scss */
.verification-banner p {
  color: #8e8e8e;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* line 116, app/assets/stylesheets/creator_contents_index.scss */
.verification-banner .cta-button {
  padding: 10px 25px;
  font-size: 14px;
}

/* line 123, app/assets/stylesheets/creator_contents_index.scss */
.content-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  /* line 123, app/assets/stylesheets/creator_contents_index.scss */
  .content-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* line 123, app/assets/stylesheets/creator_contents_index.scss */
  .content-stats {
    grid-template-columns: 1fr;
  }
}

/* line 138, app/assets/stylesheets/creator_contents_index.scss */
.stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
}

/* line 146, app/assets/stylesheets/creator_contents_index.scss */
.stat-card:hover {
  border-color: rgba(255, 64, 129, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.2);
}

/* line 153, app/assets/stylesheets/creator_contents_index.scss */
.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 8px;
  line-height: 1;
}

/* line 161, app/assets/stylesheets/creator_contents_index.scss */
.stat-label {
  color: #8e8e8e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* line 170, app/assets/stylesheets/creator_contents_index.scss */
.content-filters {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* line 181, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.03);
  color: #8e8e8e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 192, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 198, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 207, app/assets/stylesheets/creator_contents_index.scss */
.content-search-bar {
  margin-bottom: 16px;
}

/* line 211, app/assets/stylesheets/creator_contents_index.scss */
.content-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 217, app/assets/stylesheets/creator_contents_index.scss */
.content-search-icon {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: #8e8e8e;
  pointer-events: none;
}

/* line 226, app/assets/stylesheets/creator_contents_index.scss */
.content-search-input {
  width: 100%;
  padding: 12px 44px 12px 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f5f5f5;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

/* line 237, app/assets/stylesheets/creator_contents_index.scss */
.content-search-input::placeholder {
  color: #666;
}

/* line 241, app/assets/stylesheets/creator_contents_index.scss */
.content-search-input:focus {
  border-color: rgba(255, 0, 116, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* line 247, app/assets/stylesheets/creator_contents_index.scss */
.content-search-spinner {
  position: absolute;
  right: 40px;
  display: flex;
  align-items: center;
  color: #ff0074;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* line 257, app/assets/stylesheets/creator_contents_index.scss */
.content-search-spinner.visible {
  opacity: 1;
}

/* line 261, app/assets/stylesheets/creator_contents_index.scss */
.content-search-spinner svg {
  animation: searchSpin 0.6s linear infinite;
}

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

/* line 270, app/assets/stylesheets/creator_contents_index.scss */
.content-search-clear {
  position: absolute;
  right: 12px;
  color: #8e8e8e;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}

/* line 280, app/assets/stylesheets/creator_contents_index.scss */
.content-search-clear:hover {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.08);
}

/* line 288, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn--clips:not(.active) {
  border-color: rgba(255, 0, 116, 0.2);
  color: #ff3d9a;
}

/* line 295, app/assets/stylesheets/creator_contents_index.scss */
.contents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

@media (max-width: 1200px) {
  /* line 295, app/assets/stylesheets/creator_contents_index.scss */
  .contents-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  /* line 295, app/assets/stylesheets/creator_contents_index.scss */
  .contents-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* line 313, app/assets/stylesheets/creator_contents_index.scss */
.contents-grid.clips-only .content-card.is-clip .content-preview {
  aspect-ratio: 9/16;
}

/* line 318, app/assets/stylesheets/creator_contents_index.scss */
.contents-grid.clips-only {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  /* line 318, app/assets/stylesheets/creator_contents_index.scss */
  .contents-grid.clips-only {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  /* line 318, app/assets/stylesheets/creator_contents_index.scss */
  .contents-grid.clips-only {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* line 330, app/assets/stylesheets/creator_contents_index.scss */
.content-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
}

/* line 337, app/assets/stylesheets/creator_contents_index.scss */
.content-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 64, 129, 0.3);
  box-shadow: 0 12px 32px rgba(255, 64, 129, 0.25);
}

/* line 344, app/assets/stylesheets/creator_contents_index.scss */
.content-preview {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  text-decoration: none;
  color: inherit;
}

/* line 354, app/assets/stylesheets/creator_contents_index.scss */
.content-preview img,
.content-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* line 362, app/assets/stylesheets/creator_contents_index.scss */
.content-card:hover .content-preview img, .content-card:hover .content-preview video {
  transform: scale(1.05);
}

/* line 368, app/assets/stylesheets/creator_contents_index.scss */
.content-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

/* line 376, app/assets/stylesheets/creator_contents_index.scss */
.content-preview-placeholder svg {
  width: 60px;
  height: 60px;
  fill: #666;
}

/* line 383, app/assets/stylesheets/creator_contents_index.scss */
.content-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 399, app/assets/stylesheets/creator_contents_index.scss */
.gallery-count-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* line 415, app/assets/stylesheets/creator_contents_index.scss */
.gallery-count-badge svg {
  width: 14px;
  height: 14px;
}

/* line 421, app/assets/stylesheets/creator_contents_index.scss */
.content-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  border: 1px solid;
}

/* line 432, app/assets/stylesheets/creator_contents_index.scss */
.content-status--published {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.3);
}

/* line 438, app/assets/stylesheets/creator_contents_index.scss */
.content-status--scheduled {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border-color: rgba(33, 150, 243, 0.3);
}

/* line 444, app/assets/stylesheets/creator_contents_index.scss */
.content-status--draft {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.3);
}

/* line 452, app/assets/stylesheets/creator_contents_index.scss */
.content-info {
  padding: 14px;
}

@media (max-width: 768px) {
  /* line 452, app/assets/stylesheets/creator_contents_index.scss */
  .content-info {
    padding: 10px;
  }
}

/* line 459, app/assets/stylesheets/creator_contents_index.scss */
.content-info .content-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px;
  margin-bottom: 8px;
}

/* line 466, app/assets/stylesheets/creator_contents_index.scss */
.content-info .content-header .content-title {
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0% !important;
}

@media (max-width: 768px) {
  /* line 466, app/assets/stylesheets/creator_contents_index.scss */
  .content-info .content-header .content-title {
    font-size: 13px;
  }
}

/* line 483, app/assets/stylesheets/creator_contents_index.scss */
.content-info .content-header .content-menu {
  flex-shrink: 0 !important;
  position: relative;
  z-index: 10;
}

/* line 491, app/assets/stylesheets/creator_contents_index.scss */
.menu-trigger {
  padding: 6px;
  background: transparent;
  border: none;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* line 503, app/assets/stylesheets/creator_contents_index.scss */
.menu-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

/* line 508, app/assets/stylesheets/creator_contents_index.scss */
.menu-trigger svg {
  width: 20px;
  height: 20px;
}

/* line 514, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.15s ease;
  z-index: 100;
  overflow: hidden;
}

/* line 530, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* line 537, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #f5f5f5;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

/* line 547, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* line 551, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-item svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* line 558, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-item span {
  font-size: 13px;
  font-weight: 500;
}

/* line 564, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-item-danger:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* line 572, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  min-width: 100% !important;
  border-radius: 16px 16px 0 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #1f1f1f;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.7);
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9998 !important;
}

/* line 592, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 8px auto 12px;
}

/* line 602, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet.active {
  transform: translateY(0);
}

/* line 606, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet .dropdown-item {
  padding: 16px 24px;
  gap: 14px;
}

/* line 610, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet .dropdown-item svg {
  width: 20px;
  height: 20px;
}

/* line 615, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet .dropdown-item span {
  font-size: 15px;
  font-weight: 500;
}

/* line 621, app/assets/stylesheets/creator_contents_index.scss */
.dropdown-menu.bottom-sheet .dropdown-item-danger {
  color: #dc3545;
}

/* line 626, app/assets/stylesheets/creator_contents_index.scss */
.content-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9997;
  transition: background 0.25s ease;
}

/* line 633, app/assets/stylesheets/creator_contents_index.scss */
.content-menu-backdrop.active {
  background: rgba(0, 0, 0, 0.6);
}

/* line 638, app/assets/stylesheets/creator_contents_index.scss */
.content-description {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* line 645, app/assets/stylesheets/creator_contents_index.scss */
.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #666;
  font-size: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
  /* line 645, app/assets/stylesheets/creator_contents_index.scss */
  .content-meta {
    font-size: 11px;
    gap: 6px 8px;
  }
}

/* line 660, app/assets/stylesheets/creator_contents_index.scss */
.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* line 666, app/assets/stylesheets/creator_contents_index.scss */
.meta-item svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* line 673, app/assets/stylesheets/creator_contents_index.scss */
.meta-sep {
  color: #535353;
  margin: 0 4px;
  font-size: 10px;
}

/* line 679, app/assets/stylesheets/creator_contents_index.scss */
.meta-date {
  color: #666;
}

/* line 683, app/assets/stylesheets/creator_contents_index.scss */
.content-price {
  color: #ff4081;
  font-weight: 700;
}

/* line 688, app/assets/stylesheets/creator_contents_index.scss */
.content-free {
  color: #4caf50;
  font-weight: 600;
}

/* line 693, app/assets/stylesheets/creator_contents_index.scss */
.content-subscribers {
  color: #8e8e8e;
}

/* line 698, app/assets/stylesheets/creator_contents_index.scss */
.stat-card--sales {
  border-color: rgba(76, 175, 80, 0.3);
  background: rgba(76, 175, 80, 0.05);
}

/* line 702, app/assets/stylesheets/creator_contents_index.scss */
.stat-card--sales:hover {
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.2);
}

/* line 707, app/assets/stylesheets/creator_contents_index.scss */
.stat-card--sales .stat-value {
  color: #4caf50;
}

/* line 712, app/assets/stylesheets/creator_contents_index.scss */
.stat-revenue {
  color: #4caf50;
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(76, 175, 80, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* line 725, app/assets/stylesheets/creator_contents_index.scss */
.stat-revenue-note {
  font-size: 11px;
  font-weight: 500;
  color: #8e8e8e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 734, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn--sales:not(.active) {
  border-color: rgba(76, 175, 80, 0.3);
  color: #4caf50;
  background: rgba(76, 175, 80, 0.08);
}

/* line 739, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn--sales:not(.active):hover {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.5);
}

/* line 745, app/assets/stylesheets/creator_contents_index.scss */
.filter-btn--sales.active {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* line 752, app/assets/stylesheets/creator_contents_index.scss */
.meta-item--sales {
  color: #4caf50;
}

/* line 755, app/assets/stylesheets/creator_contents_index.scss */
.meta-item--sales svg {
  fill: #4caf50;
}

/* line 759, app/assets/stylesheets/creator_contents_index.scss */
.meta-item--sales .sales-count {
  font-weight: 600;
}

/* line 765, app/assets/stylesheets/creator_contents_index.scss */
.empty-contents {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 80px 40px;
  text-align: center;
}

/* line 773, app/assets/stylesheets/creator_contents_index.scss */
.empty-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 30px;
  opacity: 0.3;
  fill: #8e8e8e;
}

/* line 781, app/assets/stylesheets/creator_contents_index.scss */
.empty-title {
  color: #f5f5f5;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* line 788, app/assets/stylesheets/creator_contents_index.scss */
.empty-text {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* line 797, app/assets/stylesheets/creator_contents_index.scss */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px 0 16px;
}

/* line 803, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 809, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination > span, .contents-page nav.pagination > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* line 816, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #8e8e8e;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 832, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination a:hover {
  color: #f5f5f5;
  background: rgba(255, 0, 116, 0.15);
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 840, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* line 856, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination span.gap {
  color: #535353;
  padding: 0 4px;
  font-size: 13px;
}

/* line 863, app/assets/stylesheets/creator_contents_index.scss */
.contents-page nav.pagination span.disabled {
  color: #3a3a3a;
  padding: 0 6px;
  font-size: 12px;
}

@media (max-width: 768px) {
  /* line 803, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page nav.pagination {
    gap: 3px;
  }
  /* line 872, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page nav.pagination a, .contents-page nav.pagination span.current {
    min-width: 30px;
    height: 30px;
    font-size: 12px;
    padding: 0 6px;
    border-radius: 6px;
  }
  /* line 881, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page nav.pagination .first, .contents-page nav.pagination .last {
    display: none;
  }
}

@media (max-width: 1024px) {
  /* line 889, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .social-layout {
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 30px 16px;
  }
}

@media (max-width: 768px) {
  /* line 897, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .social-layout {
    grid-template-columns: 1fr;
    padding: 8px 0;
  }
  /* line 902, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .main-feed {
    padding: 0 12px;
  }
  /* line 906, app/assets/stylesheets/creator_contents_index.scss */
  .mobile-bottom-spacer {
    display: block;
    height: 80px;
  }
  /* line 912, app/assets/stylesheets/creator_contents_index.scss */
  .page-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
  }
  /* line 919, app/assets/stylesheets/creator_contents_index.scss */
  .page-title {
    font-size: 18px;
    margin: 0;
  }
  /* line 923, app/assets/stylesheets/creator_contents_index.scss */
  .page-title:before {
    height: 20px;
    width: 3px;
  }
  /* line 929, app/assets/stylesheets/creator_contents_index.scss */
  .new-content-btn {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
  }
  /* line 935, app/assets/stylesheets/creator_contents_index.scss */
  .new-content-btn svg {
    width: 14px;
    height: 14px;
  }
  /* line 936, app/assets/stylesheets/creator_contents_index.scss */
  .new-content-btn span {
    display: none;
  }
  /* line 939, app/assets/stylesheets/creator_contents_index.scss */
  .new-content-btn:after {
    content: 'Subir';
    font-size: 12px;
  }
  /* line 946, app/assets/stylesheets/creator_contents_index.scss */
  .content-stats {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
  }
  /* line 956, app/assets/stylesheets/creator_contents_index.scss */
  .stat-card {
    flex: 1;
    padding: 10px 6px;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
  }
  /* line 964, app/assets/stylesheets/creator_contents_index.scss */
  .stat-card:last-child {
    border-right: none;
  }
  /* line 965, app/assets/stylesheets/creator_contents_index.scss */
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 968, app/assets/stylesheets/creator_contents_index.scss */
  .stat-value {
    font-size: 16px;
    margin-bottom: 2px;
  }
  /* line 973, app/assets/stylesheets/creator_contents_index.scss */
  .stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  /* line 978, app/assets/stylesheets/creator_contents_index.scss */
  .stat-card--sales .stat-revenue {
    font-size: 11px;
    margin-top: 2px;
  }
  /* line 983, app/assets/stylesheets/creator_contents_index.scss */
  .stat-revenue-note {
    display: none;
  }
  /* line 988, app/assets/stylesheets/creator_contents_index.scss */
  .content-search-bar {
    margin-bottom: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* line 995, app/assets/stylesheets/creator_contents_index.scss */
  .content-search-input {
    padding: 9px 36px 9px 36px;
    font-size: 13px;
    border-radius: 8px;
  }
  /* line 1001, app/assets/stylesheets/creator_contents_index.scss */
  .content-search-icon {
    width: 18px;
    height: 18px;
    left: 12px;
  }
  /* line 1008, app/assets/stylesheets/creator_contents_index.scss */
  .content-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 0;
    margin-bottom: 12px;
    border: none;
    background: transparent;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  /* line 1020, app/assets/stylesheets/creator_contents_index.scss */
  .content-filters::-webkit-scrollbar {
    display: none;
  }
  /* line 1023, app/assets/stylesheets/creator_contents_index.scss */
  .filter-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 20px;
  }
  /* line 1031, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .content-card {
    display: flex !important;
    flex-direction: row !important;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
  }
  /* line 1039, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .content-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 1041, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .content-card > a.content-preview {
    display: block !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 10px 0 0 10px !important;
    flex-shrink: 0 !important;
  }
  /* line 1052, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .content-card.is-clip > a.content-preview {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    aspect-ratio: 9 / 14 !important;
  }
  /* line 1059, app/assets/stylesheets/creator_contents_index.scss */
  .contents-page .content-card > .content-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* line 1069, app/assets/stylesheets/creator_contents_index.scss */
  .content-type-badge {
    top: 5px;
    left: 5px;
    padding: 2px 5px;
    font-size: 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
  }
  /* line 1078, app/assets/stylesheets/creator_contents_index.scss */
  .content-status {
    top: auto;
    bottom: 5px;
    right: auto;
    left: 5px;
    padding: 2px 5px;
    font-size: 8px;
    border-radius: 4px;
  }
  /* line 1088, app/assets/stylesheets/creator_contents_index.scss */
  .pinned-indicator {
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
  }
  /* line 1095, app/assets/stylesheets/creator_contents_index.scss */
  .gallery-count-badge {
    bottom: 5px;
    right: 5px;
    padding: 2px 5px;
    font-size: 9px;
    border-radius: 4px;
  }
  /* line 1104, app/assets/stylesheets/creator_contents_index.scss */
  .content-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  }
  /* line 1111, app/assets/stylesheets/creator_contents_index.scss */
  .content-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
  }
  /* line 1125, app/assets/stylesheets/creator_contents_index.scss */
  .content-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0;
  }
  /* line 1132, app/assets/stylesheets/creator_contents_index.scss */
  .menu-trigger {
    padding: 2px;
  }
  /* line 1135, app/assets/stylesheets/creator_contents_index.scss */
  .menu-trigger svg {
    width: 16px;
    height: 16px;
  }
  /* line 1142, app/assets/stylesheets/creator_contents_index.scss */
  .content-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 0;
    gap: 0;
    font-size: 11px;
    border-top: none;
    color: #8e8e8e;
    overflow: hidden;
  }
  /* line 1154, app/assets/stylesheets/creator_contents_index.scss */
  .meta-sep {
    margin: 0 4px;
    color: #535353;
  }
  /* line 1159, app/assets/stylesheets/creator_contents_index.scss */
  .meta-item {
    gap: 3px;
    white-space: nowrap;
  }
  /* line 1163, app/assets/stylesheets/creator_contents_index.scss */
  .meta-item svg {
    width: 12px;
    height: 12px;
  }
  /* line 1170, app/assets/stylesheets/creator_contents_index.scss */
  .contents-grid {
    gap: 8px;
  }
  /* line 1175, app/assets/stylesheets/creator_contents_index.scss */
  .pagination-wrapper {
    padding: 16px 0 8px;
  }
}

/* ========================================
   PINNED INDICATOR - Creator Dashboard
   ======================================== */
/* line 1184, app/assets/stylesheets/creator_contents_index.scss */
.content-card.is-pinned {
  border: 1px solid rgba(255, 0, 116, 0.2);
}

/* line 1188, app/assets/stylesheets/creator_contents_index.scss */
.pinned-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 0, 116, 0.3);
  color: #ff0074;
}
/* ========================================
   CREATOR PAYOUTS - Exotha Premium Dark
   Luxury financial dashboard aesthetic
   ======================================== */
/* line 7, app/assets/stylesheets/creator_payouts.scss */
.payouts-page {
  background: #000;
  min-height: calc(100vh - 90px);
  position: relative;
}

/* line 13, app/assets/stylesheets/creator_payouts.scss */
.payouts-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 116, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* line 25, app/assets/stylesheets/creator_payouts.scss */
.payouts-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* line 36, app/assets/stylesheets/creator_payouts.scss */
.payouts-page .main-feed {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

/* line 44, app/assets/stylesheets/creator_payouts.scss */
.page-header {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 0, 116, 0.02) 50%, transparent 100%);
  border: 1px solid rgba(255, 0, 116, 0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* line 53, app/assets/stylesheets/creator_payouts.scss */
.page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 64, app/assets/stylesheets/creator_payouts.scss */
.page-header::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* line 76, app/assets/stylesheets/creator_payouts.scss */
.page-title {
  font-size: 32px;
  font-weight: 800;
  color: #f5f5f5;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}

/* line 87, app/assets/stylesheets/creator_payouts.scss */
.page-subtitle {
  color: #949494;
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* line 97, app/assets/stylesheets/creator_payouts.scss */
.payouts-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

/* line 104, app/assets/stylesheets/creator_payouts.scss */
.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* line 114, app/assets/stylesheets/creator_payouts.scss */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #ff0074);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 126, app/assets/stylesheets/creator_payouts.scss */
.stat-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 0, 116, 0.1);
}

/* line 131, app/assets/stylesheets/creator_payouts.scss */
.stat-card:hover::before {
  opacity: 1;
}

/* line 136, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.08) 100%);
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 140, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance::before {
  opacity: 1;
  height: 3px;
  background: linear-gradient(90deg, #ff0074, #fff, #ff0074);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

/* line 148, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance:hover {
  border-color: rgba(255, 0, 116, 0.5);
  box-shadow: 0 12px 40px rgba(255, 0, 116, 0.15);
}

/* line 153, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance .stat-icon {
  background: rgba(255, 0, 116, 0.2);
  border: 1px solid rgba(255, 0, 116, 0.3);
}

/* line 157, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance .stat-icon svg {
  fill: #ff3d9a;
}

/* line 162, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance .stat-label {
  color: #ff3d9a;
}

/* line 166, app/assets/stylesheets/creator_payouts.scss */
.stat-card--balance .stat-value {
  color: #fff;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* line 177, app/assets/stylesheets/creator_payouts.scss */
.stat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.05) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* line 189, app/assets/stylesheets/creator_payouts.scss */
.stat-icon svg {
  width: 28px;
  height: 28px;
  fill: #ff0074;
  transition: transform 0.3s ease;
}

/* line 196, app/assets/stylesheets/creator_payouts.scss */
.stat-card:hover .stat-icon svg {
  transform: scale(1.1);
}

/* line 201, app/assets/stylesheets/creator_payouts.scss */
.stat-label {
  color: #949494;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

/* line 211, app/assets/stylesheets/creator_payouts.scss */
.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

/* line 220, app/assets/stylesheets/creator_payouts.scss */
.request-payout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Montserrat', sans-serif;
  backdrop-filter: blur(10px);
}

/* line 240, app/assets/stylesheets/creator_payouts.scss */
.request-payout-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* line 247, app/assets/stylesheets/creator_payouts.scss */
.request-payout-btn.request-payout-btn-secondary {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.3);
}

/* line 252, app/assets/stylesheets/creator_payouts.scss */
.request-payout-btn.request-payout-btn-secondary:hover {
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.45);
}

/* line 258, app/assets/stylesheets/creator_payouts.scss */
.min-balance-info {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.5;
  font-family: 'Rubik', sans-serif;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: inline-block;
}

/* line 271, app/assets/stylesheets/creator_payouts.scss */
.payouts-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
}

/* line 278, app/assets/stylesheets/creator_payouts.scss */
.section-header {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: rgba(0, 0, 0, 0.3);
}

/* line 288, app/assets/stylesheets/creator_payouts.scss */
.section-header .request-payout-btn {
  margin: 0;
}

/* line 293, app/assets/stylesheets/creator_payouts.scss */
.section-title {
  font-size: 22px;
  font-weight: 800;
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 302, app/assets/stylesheets/creator_payouts.scss */
.section-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 312, app/assets/stylesheets/creator_payouts.scss */
.payouts-table {
  width: 100%;
  border-collapse: collapse;
}

/* line 317, app/assets/stylesheets/creator_payouts.scss */
.table-header {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
}

/* line 321, app/assets/stylesheets/creator_payouts.scss */
.table-header th {
  padding: 18px 28px;
  text-align: left;
  color: #949494;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

/* line 331, app/assets/stylesheets/creator_payouts.scss */
.table-header th:first-child {
  padding-left: 32px;
}

/* line 335, app/assets/stylesheets/creator_payouts.scss */
.table-header th:last-child {
  padding-right: 32px;
}

/* line 341, app/assets/stylesheets/creator_payouts.scss */
.table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

/* line 345, app/assets/stylesheets/creator_payouts.scss */
.table-row:hover {
  background: rgba(255, 0, 116, 0.03);
}

/* line 349, app/assets/stylesheets/creator_payouts.scss */
.table-row:last-child {
  border-bottom: none;
}

/* line 353, app/assets/stylesheets/creator_payouts.scss */
.table-row td {
  padding: 24px 28px;
  color: #f5f5f5;
  vertical-align: middle;
  font-family: 'Rubik', sans-serif;
}

/* line 359, app/assets/stylesheets/creator_payouts.scss */
.table-row td:first-child {
  padding-left: 32px;
}

/* line 363, app/assets/stylesheets/creator_payouts.scss */
.table-row td:last-child {
  padding-right: 32px;
}

/* line 369, app/assets/stylesheets/creator_payouts.scss */
.payout-amount {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}

/* line 377, app/assets/stylesheets/creator_payouts.scss */
.payout-commission {
  color: #666;
  font-size: 12px;
  line-height: 1.6;
}

/* line 382, app/assets/stylesheets/creator_payouts.scss */
.payout-commission span {
  color: #ff0074;
  font-weight: 600;
}

/* line 389, app/assets/stylesheets/creator_payouts.scss */
.payout-amount-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

/* line 396, app/assets/stylesheets/creator_payouts.scss */
.payout-gross {
  color: #949494;
}

/* line 400, app/assets/stylesheets/creator_payouts.scss */
.payout-fee {
  color: #ffc107;
  font-size: 12px;
}

/* line 405, app/assets/stylesheets/creator_payouts.scss */
.payout-net {
  color: #f5f5f5;
}

/* line 409, app/assets/stylesheets/creator_payouts.scss */
.payout-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  font-family: 'Montserrat', sans-serif;
}

/* line 422, app/assets/stylesheets/creator_payouts.scss */
.payout-status--pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.3);
}

/* line 427, app/assets/stylesheets/creator_payouts.scss */
.payout-status--pending::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #ffc107;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

/* line 437, app/assets/stylesheets/creator_payouts.scss */
.payout-status--approved {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.05) 100%);
  color: #2196f3;
  border-color: rgba(33, 150, 243, 0.3);
}

/* line 443, app/assets/stylesheets/creator_payouts.scss */
.payout-status--paid {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.3);
}

/* line 449, app/assets/stylesheets/creator_payouts.scss */
.payout-status--rejected {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.05) 100%);
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.3);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* line 467, app/assets/stylesheets/creator_payouts.scss */
.payout-date {
  color: #949494;
  font-size: 13px;
  line-height: 1.7;
}

/* line 473, app/assets/stylesheets/creator_payouts.scss */
.payout-reference {
  color: #ff0074;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(255, 0, 116, 0.05) 100%);
  border-radius: 8px;
  border: 1px solid rgba(255, 0, 116, 0.2);
  display: inline-block;
  transition: all 0.2s ease;
}

/* line 485, app/assets/stylesheets/creator_payouts.scss */
.payout-reference:hover {
  background: rgba(255, 0, 116, 0.15);
  border-color: rgba(255, 0, 116, 0.4);
}

/* line 491, app/assets/stylesheets/creator_payouts.scss */
.rejection-reason {
  position: relative;
  color: #f44336;
  font-size: 12px;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
  font-weight: 500;
}

/* line 502, app/assets/stylesheets/creator_payouts.scss */
.rejection-reason:hover {
  color: #ff6b6b;
}

/* line 506, app/assets/stylesheets/creator_payouts.scss */
.rejection-reason:hover::after {
  content: attr(data-reason);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, #1f1f1f 0%, #141414 100%);
  color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 300px;
  font-size: 12px;
  z-index: 1000;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 0, 116, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  font-weight: 400;
}

/* line 527, app/assets/stylesheets/creator_payouts.scss */
.rejection-reason:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #1f1f1f;
  margin-bottom: -6px;
}

/* line 539, app/assets/stylesheets/creator_payouts.scss */
.no-reference {
  color: #535353;
  font-size: 13px;
}

/* line 545, app/assets/stylesheets/creator_payouts.scss */
.empty-payouts {
  padding: 80px 32px;
  text-align: center;
}

/* line 550, app/assets/stylesheets/creator_payouts.scss */
.empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  opacity: 0.3;
  fill: #ff0074;
}

/* line 558, app/assets/stylesheets/creator_payouts.scss */
.empty-title {
  color: #f5f5f5;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
}

/* line 566, app/assets/stylesheets/creator_payouts.scss */
.empty-text {
  color: #949494;
  font-size: 15px;
  margin-bottom: 28px;
  font-family: 'Rubik', sans-serif;
}

/* line 574, app/assets/stylesheets/creator_payouts.scss */
.pagination-wrapper {
  padding: 28px 32px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 1200px) {
  /* line 584, app/assets/stylesheets/creator_payouts.scss */
  .payouts-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /* line 589, app/assets/stylesheets/creator_payouts.scss */
  .stat-card {
    padding: 24px 20px;
  }
  /* line 593, app/assets/stylesheets/creator_payouts.scss */
  .stat-value {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  /* line 599, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 603, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page::before {
    position: absolute;
    height: 250px;
  }
  /* line 608, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 16px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
    max-width: 100vw;
  }
  /* line 616, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page .left-sidebar {
    display: none;
  }
  /* line 620, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page .main-feed {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 626, app/assets/stylesheets/creator_payouts.scss */
  .payouts-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  /* line 631, app/assets/stylesheets/creator_payouts.scss */
  .stat-card {
    padding: 24px;
  }
  /* line 634, app/assets/stylesheets/creator_payouts.scss */
  .stat-card--balance {
    grid-column: 1 / -1;
    order: -1;
  }
  /* line 639, app/assets/stylesheets/creator_payouts.scss */
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 645, app/assets/stylesheets/creator_payouts.scss */
  .stat-icon {
    width: 56px;
    height: 56px;
  }
  /* line 649, app/assets/stylesheets/creator_payouts.scss */
  .stat-icon svg {
    width: 24px;
    height: 24px;
  }
  /* line 655, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner {
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  /* line 660, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner .banner-title {
    font-size: 14px;
  }
  /* line 664, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner .banner-text {
    font-size: 12px;
  }
  /* line 669, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card {
    border-radius: 16px;
    margin-bottom: 20px;
  }
  /* line 673, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-header {
    padding: 18px 20px;
  }
  /* line 677, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-body {
    padding: 18px 20px;
  }
  /* line 682, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section {
    padding: 20px;
    border-radius: 16px;
    margin-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
}

@media (max-width: 768px) {
  /* line 690, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page .social-layout {
    padding: 16px 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 695, app/assets/stylesheets/creator_payouts.scss */
  .page-header {
    padding: 24px 20px;
    margin-bottom: 24px;
    border-radius: 16px;
  }
  /* line 701, app/assets/stylesheets/creator_payouts.scss */
  .page-title {
    font-size: 24px;
  }
  /* line 705, app/assets/stylesheets/creator_payouts.scss */
  .page-subtitle {
    font-size: 14px;
  }
  /* line 709, app/assets/stylesheets/creator_payouts.scss */
  .payouts-stats {
    margin-bottom: 24px;
  }
  /* line 713, app/assets/stylesheets/creator_payouts.scss */
  .stat-card {
    padding: 20px;
    border-radius: 14px;
  }
  /* line 718, app/assets/stylesheets/creator_payouts.scss */
  .stat-value {
    font-size: 26px;
  }
  /* line 722, app/assets/stylesheets/creator_payouts.scss */
  .stat-label {
    font-size: 10px;
  }
  /* line 726, app/assets/stylesheets/creator_payouts.scss */
  .request-payout-btn {
    padding: 12px 24px;
    font-size: 11px;
  }
  /* line 731, app/assets/stylesheets/creator_payouts.scss */
  .payouts-section {
    border-radius: 16px;
    margin-bottom: 40px;
  }
  /* line 736, app/assets/stylesheets/creator_payouts.scss */
  .section-header {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  /* line 741, app/assets/stylesheets/creator_payouts.scss */
  .section-header .request-payout-btn {
    width: 100%;
    justify-content: center;
  }
  /* line 747, app/assets/stylesheets/creator_payouts.scss */
  .section-title {
    font-size: 18px;
  }
  /* line 752, app/assets/stylesheets/creator_payouts.scss */
  .payouts-table {
    display: block;
  }
  /* line 755, app/assets/stylesheets/creator_payouts.scss */
  .payouts-table thead {
    display: none;
  }
  /* line 759, app/assets/stylesheets/creator_payouts.scss */
  .payouts-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  /* line 767, app/assets/stylesheets/creator_payouts.scss */
  .table-row {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    gap: 12px;
  }
  /* line 776, app/assets/stylesheets/creator_payouts.scss */
  .table-row:hover {
    background: rgba(255, 0, 116, 0.05);
    border-color: rgba(255, 0, 116, 0.15);
  }
  /* line 781, app/assets/stylesheets/creator_payouts.scss */
  .table-row td {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* line 787, app/assets/stylesheets/creator_payouts.scss */
  .table-row td:first-child {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 793, app/assets/stylesheets/creator_payouts.scss */
  .table-row td:last-child {
    padding-right: 0;
  }
  /* line 797, app/assets/stylesheets/creator_payouts.scss */
  .table-row td::before {
    content: attr(data-label);
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  /* line 806, app/assets/stylesheets/creator_payouts.scss */
  .table-row td:first-child::before {
    display: none;
  }
  /* line 812, app/assets/stylesheets/creator_payouts.scss */
  .payout-amount {
    font-size: 22px;
  }
  /* line 816, app/assets/stylesheets/creator_payouts.scss */
  .payout-commission {
    font-size: 11px;
  }
  /* line 820, app/assets/stylesheets/creator_payouts.scss */
  .empty-payouts {
    padding: 60px 20px;
  }
  /* line 824, app/assets/stylesheets/creator_payouts.scss */
  .empty-icon {
    width: 64px;
    height: 64px;
  }
  /* line 829, app/assets/stylesheets/creator_payouts.scss */
  .empty-title {
    font-size: 18px;
  }
  /* line 833, app/assets/stylesheets/creator_payouts.scss */
  .empty-text {
    font-size: 14px;
  }
  /* line 837, app/assets/stylesheets/creator_payouts.scss */
  .pagination-wrapper {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  /* line 843, app/assets/stylesheets/creator_payouts.scss */
  .payouts-page .social-layout {
    padding: 12px 10px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 20px));
  }
  /* line 848, app/assets/stylesheets/creator_payouts.scss */
  .page-header {
    padding: 20px 16px;
    border-radius: 14px;
  }
  /* line 853, app/assets/stylesheets/creator_payouts.scss */
  .page-title {
    font-size: 20px;
  }
  /* line 857, app/assets/stylesheets/creator_payouts.scss */
  .page-subtitle {
    font-size: 13px;
  }
  /* line 861, app/assets/stylesheets/creator_payouts.scss */
  .stat-card {
    padding: 18px 16px;
    border-radius: 12px;
  }
  /* line 866, app/assets/stylesheets/creator_payouts.scss */
  .stat-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }
  /* line 871, app/assets/stylesheets/creator_payouts.scss */
  .stat-icon svg {
    width: 22px;
    height: 22px;
  }
  /* line 877, app/assets/stylesheets/creator_payouts.scss */
  .stat-value {
    font-size: 24px;
  }
  /* line 881, app/assets/stylesheets/creator_payouts.scss */
  .request-payout-btn {
    padding: 10px 20px;
    font-size: 10px;
  }
  /* line 886, app/assets/stylesheets/creator_payouts.scss */
  .min-balance-info {
    font-size: 12px;
    padding: 8px 12px;
  }
  /* line 891, app/assets/stylesheets/creator_payouts.scss */
  .section-header {
    padding: 16px;
  }
  /* line 895, app/assets/stylesheets/creator_payouts.scss */
  .section-title {
    font-size: 16px;
  }
  /* line 898, app/assets/stylesheets/creator_payouts.scss */
  .section-title::before {
    height: 20px;
    width: 3px;
  }
  /* line 904, app/assets/stylesheets/creator_payouts.scss */
  .payouts-table tbody {
    padding: 12px;
    gap: 10px;
  }
  /* line 909, app/assets/stylesheets/creator_payouts.scss */
  .table-row {
    padding: 14px;
    border-radius: 10px;
  }
  /* line 914, app/assets/stylesheets/creator_payouts.scss */
  .payout-amount {
    font-size: 20px;
  }
  /* line 918, app/assets/stylesheets/creator_payouts.scss */
  .payout-status {
    padding: 6px 12px;
    font-size: 9px;
  }
  /* line 923, app/assets/stylesheets/creator_payouts.scss */
  .payout-date {
    font-size: 12px;
  }
  /* line 927, app/assets/stylesheets/creator_payouts.scss */
  .payout-reference {
    font-size: 11px;
    padding: 5px 10px;
  }
  /* line 932, app/assets/stylesheets/creator_payouts.scss */
  .empty-payouts {
    padding: 50px 16px;
  }
  /* line 936, app/assets/stylesheets/creator_payouts.scss */
  .empty-icon {
    width: 56px;
    height: 56px;
  }
  /* line 941, app/assets/stylesheets/creator_payouts.scss */
  .empty-title {
    font-size: 16px;
  }
  /* line 945, app/assets/stylesheets/creator_payouts.scss */
  .empty-text {
    font-size: 13px;
    margin-bottom: 20px;
  }
  /* line 950, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner {
    padding: 14px 12px;
    gap: 12px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  /* line 956, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner .banner-icon svg {
    width: 20px;
    height: 20px;
  }
  /* line 961, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner .banner-title {
    font-size: 13px;
  }
  /* line 965, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-banner .banner-text {
    font-size: 11px;
  }
  /* line 970, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card {
    border-radius: 14px;
    margin-bottom: 16px;
  }
  /* line 974, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-header {
    padding: 16px;
  }
  /* line 978, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-label h3 {
    font-size: 16px;
  }
  /* line 982, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-badge {
    font-size: 10px;
    padding: 3px 10px;
  }
  /* line 987, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .payment-date-value {
    font-size: 14px;
  }
  /* line 991, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-body {
    padding: 16px;
  }
  /* line 995, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-balance-value {
    font-size: 22px;
  }
  /* line 999, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .eligibility-badge {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
  }
  /* line 1005, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .rollover-info {
    font-size: 11px;
  }
  /* line 1010, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section {
    padding: 16px;
    border-radius: 14px;
    margin-top: 20px;
  }
  /* line 1015, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section h3 {
    font-size: 16px;
    margin-bottom: 18px;
  }
  /* line 1020, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section .info-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  /* line 1027, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section .info-content strong {
    font-size: 13px;
  }
  /* line 1031, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section .info-content p {
    font-size: 12px;
  }
}

/* line 1039, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

/* line 1049, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-banner .banner-icon {
  flex-shrink: 0;
  color: #949494;
  margin-top: 2px;
}

/* line 1055, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-banner .banner-title {
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 6px;
}

/* line 1062, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-banner .banner-text {
  font-size: 13px;
  color: #949494;
  line-height: 1.6;
  margin: 0;
}

/* line 1071, app/assets/stylesheets/creator_payouts.scss */
.current-period-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  margin-bottom: 28px;
  overflow: hidden;
}

/* line 1078, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 1087, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 0, 116, 0.15);
  color: #ff0074;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* line 1100, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-label h3 {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

/* line 1107, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-payment-date {
  text-align: right;
}

/* line 1111, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .payment-date-label {
  display: block;
  font-size: 11px;
  color: var(--color-gray-05, #949494);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* line 1120, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .payment-date-value {
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
}

/* line 1126, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-body {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* line 1134, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-balance-label {
  display: block;
  font-size: 12px;
  color: var(--color-gray-05, #949494);
  margin-bottom: 4px;
}

/* line 1141, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .period-balance-value {
  font-size: 28px;
  font-weight: 700;
  color: #00d68f;
}

/* line 1147, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .eligibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* line 1156, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .eligibility-badge--eligible {
  background: rgba(0, 214, 143, 0.1);
  color: #00d68f;
  border: 1px solid rgba(0, 214, 143, 0.2);
}

/* line 1162, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .eligibility-badge--not-eligible {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

/* line 1169, app/assets/stylesheets/creator_payouts.scss */
.current-period-card .rollover-info {
  font-size: 12px;
  color: var(--color-gray-05, #949494);
  margin-top: 8px;
}

/* line 1177, app/assets/stylesheets/creator_payouts.scss */
.period-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 0, 116, 0.08);
  color: #ff3d9a;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* line 1186, app/assets/stylesheets/creator_payouts.scss */
.period-tag--legacy {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-gray-05, #949494);
}

/* line 1193, app/assets/stylesheets/creator_payouts.scss */
.payout-date--paid {
  font-size: 11px;
  color: #00d68f;
  margin-top: 2px;
}

/* line 1200, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section {
  margin-top: 32px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

/* line 1207, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 24px;
}

/* line 1214, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section .info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* line 1220, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section .info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* line 1226, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section .info-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

/* line 1241, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section .info-content strong {
  display: block;
  font-size: 14px;
  color: #f5f5f5;
  margin-bottom: 4px;
}

/* line 1248, app/assets/stylesheets/creator_payouts.scss */
.payouts-info-section .info-content p {
  font-size: 13px;
  color: var(--color-gray-05, #949494);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  /* line 1259, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  /* line 1265, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-payment-date {
    text-align: left;
  }
  /* line 1269, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-body {
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 1274, app/assets/stylesheets/creator_payouts.scss */
  .current-period-card .period-balance-value {
    font-size: 24px;
  }
  /* line 1279, app/assets/stylesheets/creator_payouts.scss */
  .payouts-info-section .info-grid {
    grid-template-columns: 1fr;
  }
}
/* line 9, app/assets/stylesheets/creator_promotions.scss */
.promotions-page {
  background: #000;
  min-height: calc(100vh - 90px);
}

/* line 13, app/assets/stylesheets/creator_promotions.scss */
.promotions-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}

/* line 22, app/assets/stylesheets/creator_promotions.scss */
.promotions-page .page-header-left {
  flex: 1;
}

/* line 26, app/assets/stylesheets/creator_promotions.scss */
.promotions-page .page-title {
  font-size: 36px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 35, app/assets/stylesheets/creator_promotions.scss */
.promotions-page .page-title:before {
  content: '';
  width: 4px;
  height: 36px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 2px;
}

/* line 44, app/assets/stylesheets/creator_promotions.scss */
.promotions-page .page-subtitle {
  color: #8e8e8e;
  font-size: 16px;
  margin-left: 16px;
}

@media (max-width: 768px) {
  /* line 51, app/assets/stylesheets/creator_promotions.scss */
  .promotions-page .page-title {
    font-size: 24px;
  }
  /* line 54, app/assets/stylesheets/creator_promotions.scss */
  .promotions-page .page-title:before {
    height: 24px;
  }
  /* line 59, app/assets/stylesheets/creator_promotions.scss */
  .promotions-page .page-subtitle {
    font-size: 14px;
    margin-left: 12px;
  }
}

@media (max-width: 480px) {
  /* line 66, app/assets/stylesheets/creator_promotions.scss */
  .promotions-page .page-title {
    font-size: 20px;
  }
  /* line 69, app/assets/stylesheets/creator_promotions.scss */
  .promotions-page .page-title:before {
    height: 20px;
    width: 3px;
  }
}

/* line 78, app/assets/stylesheets/creator_promotions.scss */
.promo-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
}

/* line 92, app/assets/stylesheets/creator_promotions.scss */
.promo-new-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
  color: #fff;
}

/* line 99, app/assets/stylesheets/creator_promotions.scss */
.promo-new-btn svg {
  width: 20px;
  height: 20px;
}

/* line 106, app/assets/stylesheets/creator_promotions.scss */
.promo-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  /* line 106, app/assets/stylesheets/creator_promotions.scss */
  .promo-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* line 117, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

/* line 127, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-card:hover {
  border-color: rgba(255, 64, 129, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.2);
}

/* line 134, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* line 145, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-card:hover .promo-stat-icon {
  transform: scale(1.1);
}

/* line 149, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-icon--active {
  background: rgba(255, 0, 116, 0.15);
  color: #ff0074;
}

/* line 154, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-icon--uses {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

/* line 159, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-icon--discount {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* line 165, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-info {
  display: flex;
  flex-direction: column;
}

/* line 170, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #f5f5f5;
  line-height: 1.2;
}

/* line 177, app/assets/stylesheets/creator_promotions.scss */
.promo-stat-label {
  font-size: 13px;
  color: #8e8e8e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: 4px;
}

/* line 187, app/assets/stylesheets/creator_promotions.scss */
.promo-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* line 193, app/assets/stylesheets/creator_promotions.scss */
.promo-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* line 200, app/assets/stylesheets/creator_promotions.scss */
.promo-card:hover {
  border-color: rgba(255, 64, 129, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.15);
}

/* line 207, app/assets/stylesheets/creator_promotions.scss */
.promo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 215, app/assets/stylesheets/creator_promotions.scss */
.promo-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.3);
  border-radius: 8px;
  padding: 8px 16px;
}

/* line 224, app/assets/stylesheets/creator_promotions.scss */
.promo-code-badge i {
  color: #ff0074;
  font-size: 14px;
}

/* line 230, app/assets/stylesheets/creator_promotions.scss */
.promo-code-text {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
}

/* line 238, app/assets/stylesheets/creator_promotions.scss */
.promo-status {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 246, app/assets/stylesheets/creator_promotions.scss */
.promo-status--active {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

/* line 251, app/assets/stylesheets/creator_promotions.scss */
.promo-status--expired {
  background: rgba(108, 117, 125, 0.15);
  color: #6c757d;
}

/* line 256, app/assets/stylesheets/creator_promotions.scss */
.promo-status--depleted {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* line 261, app/assets/stylesheets/creator_promotions.scss */
.promo-status--disabled {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* line 267, app/assets/stylesheets/creator_promotions.scss */
.promo-card-body {
  padding: 16px 24px;
}

/* line 271, app/assets/stylesheets/creator_promotions.scss */
.promo-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

/* line 277, app/assets/stylesheets/creator_promotions.scss */
.promo-detail-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 282, app/assets/stylesheets/creator_promotions.scss */
.promo-detail-label {
  font-size: 13px;
  color: #8e8e8e;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 290, app/assets/stylesheets/creator_promotions.scss */
.promo-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 298, app/assets/stylesheets/creator_promotions.scss */
.promo-detail-value i {
  font-size: 12px;
  color: #ff4081;
}

/* line 304, app/assets/stylesheets/creator_promotions.scss */
.promo-badge-new-only {
  font-size: 12px;
  color: #17a2b8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(23, 162, 184, 0.1);
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 500;
}

/* line 316, app/assets/stylesheets/creator_promotions.scss */
.promo-card-actions {
  display: flex;
  gap: 6px;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  justify-content: flex-end;
}

/* line 324, app/assets/stylesheets/creator_promotions.scss */
.promo-action-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #8e8e8e;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
}

/* line 339, app/assets/stylesheets/creator_promotions.scss */
.promo-action-btn:hover {
  background: rgba(255, 64, 129, 0.1);
  border-color: rgba(255, 64, 129, 0.3);
  color: #ff4081;
  transform: translateY(-2px);
}

/* line 346, app/assets/stylesheets/creator_promotions.scss */
.promo-action-btn--danger:hover {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

/* line 354, app/assets/stylesheets/creator_promotions.scss */
.promo-empty-state {
  text-align: center;
  padding: 80px 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

/* line 362, app/assets/stylesheets/creator_promotions.scss */
.promo-empty-icon {
  margin-bottom: 24px;
  color: #535353;
  opacity: 0.5;
}

/* line 367, app/assets/stylesheets/creator_promotions.scss */
.promo-empty-icon svg {
  width: 80px;
  height: 80px;
}

/* line 373, app/assets/stylesheets/creator_promotions.scss */
.promo-empty-state h3 {
  color: #f5f5f5;
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 700;
}

/* line 380, app/assets/stylesheets/creator_promotions.scss */
.promo-empty-state p {
  color: #8e8e8e;
  margin: 0 0 30px 0;
  font-size: 16px;
  line-height: 1.5;
}

/* line 390, app/assets/stylesheets/creator_promotions.scss */
.promo-code-input {
  text-transform: uppercase;
  font-family: 'Courier New', monospace !important;
  font-size: 18px !important;
  letter-spacing: 2px;
}

/* line 398, app/assets/stylesheets/creator_promotions.scss */
.promo-type-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* line 401, app/assets/stylesheets/creator_promotions.scss */
.promo-type-grid .type-icon {
  stroke: #ff4081;
  fill: none;
}

/* line 406, app/assets/stylesheets/creator_promotions.scss */
.promo-type-grid .type-option input[type="radio"]:checked + .type-label .type-icon {
  stroke: #fff;
}

/* line 412, app/assets/stylesheets/creator_promotions.scss */
.promo-preview {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  margin-top: 25px;
}

/* line 420, app/assets/stylesheets/creator_promotions.scss */
.promo-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: #8e8e8e;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* line 429, app/assets/stylesheets/creator_promotions.scss */
.promo-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
  color: #c9c9c9;
}

/* line 436, app/assets/stylesheets/creator_promotions.scss */
.promo-preview-row--discount {
  color: #28a745;
}

/* line 440, app/assets/stylesheets/creator_promotions.scss */
.promo-preview-row--total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 8px;
  padding-top: 14px;
  font-weight: 700;
  font-size: 18px;
  color: #ff4081;
}

/* line 451, app/assets/stylesheets/creator_promotions.scss */
.promo-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 576px) {
  /* line 451, app/assets/stylesheets/creator_promotions.scss */
  .promo-dates-row {
    grid-template-columns: 1fr;
  }
}
@charset "UTF-8";
/* ========================================
   CREATOR LIVE STREAMS - Exotha Premium Dashboard
   ======================================== */
/* line 5, app/assets/stylesheets/creator_live_streams.scss */
.streams-dashboard {
  background: linear-gradient(180deg, #000 0%, #0a0a0f 100%);
  min-height: calc(100vh - 90px);
}

/* line 9, app/assets/stylesheets/creator_live_streams.scss */
.streams-dashboard .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 40px 20px;
  max-width: 1800px;
  margin: 0 auto;
}

/* line 18, app/assets/stylesheets/creator_live_streams.scss */
.streams-dashboard .main-feed {
  max-width: 100%;
  width: 100%;
}

/* ========================================
   DASHBOARD HEADER - Hero Style
   ======================================== */
/* line 28, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-header {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 0, 116, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.6s ease;
}

/* line 39, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-header::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* line 51, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-header::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 50%, #ff0074 100%);
  border-radius: 4px 0 0 4px;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 74, app/assets/stylesheets/creator_live_streams.scss */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* line 84, app/assets/stylesheets/creator_live_streams.scss */
.header-title-section {
  flex: 1;
}

/* line 88, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-title {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 98, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-title i {
  color: #ff0074;
  font-size: 32px;
}

/* line 104, app/assets/stylesheets/creator_live_streams.scss */
.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

/* line 111, app/assets/stylesheets/creator_live_streams.scss */
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* line 117, app/assets/stylesheets/creator_live_streams.scss */
.btn-primary-gradient {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* line 133, app/assets/stylesheets/creator_live_streams.scss */
.btn-primary-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff3d9a 0%, #ff0074 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 142, app/assets/stylesheets/creator_live_streams.scss */
.btn-primary-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 0, 116, 0.5);
  color: white;
}

/* line 147, app/assets/stylesheets/creator_live_streams.scss */
.btn-primary-gradient:hover::before {
  opacity: 1;
}

/* line 152, app/assets/stylesheets/creator_live_streams.scss */
.btn-primary-gradient svg, .btn-primary-gradient span {
  position: relative;
  z-index: 1;
}

/* ========================================
   STATS OVERVIEW - Premium Cards
   ======================================== */
/* line 162, app/assets/stylesheets/creator_live_streams.scss */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  animation: fadeInUp 0.6s ease 0.2s both;
}

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

/* line 181, app/assets/stylesheets/creator_live_streams.scss */
.stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 191, app/assets/stylesheets/creator_live_streams.scss */
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 200, app/assets/stylesheets/creator_live_streams.scss */
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 116, 0.25);
  box-shadow: 0 16px 40px rgba(255, 0, 116, 0.15);
}

/* line 205, app/assets/stylesheets/creator_live_streams.scss */
.stat-card:hover::before {
  opacity: 1;
}

/* line 209, app/assets/stylesheets/creator_live_streams.scss */
.stat-card:hover .stat-icon {
  transform: scale(1.1);
}

/* line 215, app/assets/stylesheets/creator_live_streams.scss */
.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* line 224, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* line 233, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon svg {
  width: 26px;
  height: 26px;
}

/* line 238, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon.icon-live {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.1) 100%);
  color: #28a745;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
}

/* line 244, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon.icon-viewers {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
  color: #ffc107;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);
}

/* line 250, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon.icon-earnings {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.1) 100%);
  color: #ff0074;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.15);
}

/* line 256, app/assets/stylesheets/creator_live_streams.scss */
.stat-icon.icon-scheduled {
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.2) 0%, rgba(32, 201, 151, 0.1) 100%);
  color: #20c997;
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.15);
}

/* line 263, app/assets/stylesheets/creator_live_streams.scss */
.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* line 273, app/assets/stylesheets/creator_live_streams.scss */
.stat-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* line 284, app/assets/stylesheets/creator_live_streams.scss */
.stat-change {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 295, app/assets/stylesheets/creator_live_streams.scss */
.stat-change.positive {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
  }
}

/* ========================================
   LIVE STREAM BANNER - Active Broadcast
   ======================================== */
/* line 312, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-banner {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.12) 0%, rgba(40, 167, 69, 0.04) 100%);
  border: 1px solid rgba(40, 167, 69, 0.25);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease 0.3s both;
}

/* line 323, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #28a745 50%, transparent 100%);
  animation: scanLine 2s linear infinite;
}

/* line 335, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(40, 167, 69, 0.1) 0%, transparent 50%);
  animation: glowPulse 4s ease infinite;
  pointer-events: none;
}

@keyframes scanLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* line 358, app/assets/stylesheets/creator_live_streams.scss */
.live-banner-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* line 367, app/assets/stylesheets/creator_live_streams.scss */
.live-indicator {
  display: flex;
  align-items: center;
}

/* line 372, app/assets/stylesheets/creator_live_streams.scss */
.live-badge-animated {
  background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
  padding: 10px 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: pulseLive 2s infinite;
  box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
}

@keyframes pulseLive {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(220, 53, 69, 0.6);
  }
}

/* line 393, app/assets/stylesheets/creator_live_streams.scss */
.live-dot-animated {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  animation: blink 1s infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* line 407, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-info {
  flex: 1;
}

/* line 411, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px 0;
}

/* line 418, app/assets/stylesheets/creator_live_streams.scss */
.live-stream-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

/* line 424, app/assets/stylesheets/creator_live_streams.scss */
.live-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* line 431, app/assets/stylesheets/creator_live_streams.scss */
.live-stat-item i {
  color: #28a745;
  font-size: 16px;
}

/* line 437, app/assets/stylesheets/creator_live_streams.scss */
.live-stat-value {
  color: #fff;
  font-weight: 700;
}

/* line 442, app/assets/stylesheets/creator_live_streams.scss */
.live-actions-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* line 448, app/assets/stylesheets/creator_live_streams.scss */
.btn-action {
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

/* line 460, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-studio {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* line 465, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-studio:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  color: #fff;
}

/* line 472, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-view {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

/* line 476, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4);
  color: white;
}

/* line 483, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-end {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #dc3545;
}

/* line 488, app/assets/stylesheets/creator_live_streams.scss */
.btn-action.btn-end:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  transform: translateY(-2px);
}

/* ========================================
   FILTERS SECTION - Clean & Functional
   ======================================== */
/* line 500, app/assets/stylesheets/creator_live_streams.scss */
.filters-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  animation: fadeInUp 0.6s ease 0.1s both;
}

/* line 509, app/assets/stylesheets/creator_live_streams.scss */
.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  gap: 12px;
}

/* line 520, app/assets/stylesheets/creator_live_streams.scss */
.filters-title {
  font-size: 16px;
  font-weight: 700;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  margin: 0;
}

/* line 528, app/assets/stylesheets/creator_live_streams.scss */
.filters-title svg {
  color: #ff0074;
  margin-right: 10px;
}

/* line 534, app/assets/stylesheets/creator_live_streams.scss */
.btn-clear-filters {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  color: #dc3545;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* line 548, app/assets/stylesheets/creator_live_streams.scss */
.btn-clear-filters:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  transform: translateY(-1px);
}

/* line 555, app/assets/stylesheets/creator_live_streams.scss */
.filters-form {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr auto;
  gap: 16px;
  align-items: end;
}

/* line 562, app/assets/stylesheets/creator_live_streams.scss */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 568, app/assets/stylesheets/creator_live_streams.scss */
.filter-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* line 576, app/assets/stylesheets/creator_live_streams.scss */
.filter-input,
.filter-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;
}

/* line 587, app/assets/stylesheets/creator_live_streams.scss */
.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: #ff0074;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.1);
}

/* line 594, app/assets/stylesheets/creator_live_streams.scss */
.filter-input::placeholder,
.filter-select::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* line 599, app/assets/stylesheets/creator_live_streams.scss */
.filter-select option {
  background: #0a0a0f;
  color: #fff;
}

/* line 604, app/assets/stylesheets/creator_live_streams.scss */
.date-range-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* line 610, app/assets/stylesheets/creator_live_streams.scss */
.btn-apply-filters {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* line 626, app/assets/stylesheets/creator_live_streams.scss */
.btn-apply-filters:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.4);
}

/* line 632, app/assets/stylesheets/creator_live_streams.scss */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 641, app/assets/stylesheets/creator_live_streams.scss */
.filter-tag {
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.25);
  color: #ff0074;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* line 660, app/assets/stylesheets/creator_live_streams.scss */
.filter-tag-remove {
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s;
  display: flex;
}

/* line 666, app/assets/stylesheets/creator_live_streams.scss */
.filter-tag-remove:hover {
  opacity: 1;
}

/* ========================================
   STREAMS SECTION
   ======================================== */
/* line 675, app/assets/stylesheets/creator_live_streams.scss */
.streams-section {
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease 0.4s both;
}

/* line 680, app/assets/stylesheets/creator_live_streams.scss */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 689, app/assets/stylesheets/creator_live_streams.scss */
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 698, app/assets/stylesheets/creator_live_streams.scss */
.section-title i {
  color: #ff0074;
}

/* line 703, app/assets/stylesheets/creator_live_streams.scss */
.section-count {
  background: rgba(255, 0, 116, 0.12);
  color: #ff0074;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* ========================================
   STREAM CARDS - Upcoming
   ======================================== */
/* line 716, app/assets/stylesheets/creator_live_streams.scss */
.streams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* line 722, app/assets/stylesheets/creator_live_streams.scss */
.stream-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* line 730, app/assets/stylesheets/creator_live_streams.scss */
.stream-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #20c997, #28a745);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 742, app/assets/stylesheets/creator_live_streams.scss */
.stream-card:hover {
  transform: translateY(-6px);
  border-color: rgba(32, 201, 151, 0.3);
  box-shadow: 0 20px 50px rgba(32, 201, 151, 0.15);
}

/* line 747, app/assets/stylesheets/creator_live_streams.scss */
.stream-card:hover::before {
  opacity: 1;
}

/* line 753, app/assets/stylesheets/creator_live_streams.scss */
.stream-card-header {
  padding: 24px;
  position: relative;
}

/* line 758, app/assets/stylesheets/creator_live_streams.scss */
.stream-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

/* line 769, app/assets/stylesheets/creator_live_streams.scss */
.stream-status.status-scheduled {
  background: rgba(32, 201, 151, 0.12);
  color: #20c997;
}

/* line 774, app/assets/stylesheets/creator_live_streams.scss */
.stream-status.status-ended {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}

/* line 780, app/assets/stylesheets/creator_live_streams.scss */
.stream-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* line 792, app/assets/stylesheets/creator_live_streams.scss */
.stream-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 798, app/assets/stylesheets/creator_live_streams.scss */
.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* line 805, app/assets/stylesheets/creator_live_streams.scss */
.meta-item i {
  color: rgba(255, 255, 255, 0.3);
  font-size: 15px;
  width: 18px;
}

/* line 812, app/assets/stylesheets/creator_live_streams.scss */
.stream-card-actions {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  gap: 10px;
}

/* line 820, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid;
}

/* line 831, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-primary {
  background: rgba(255, 0, 116, 0.1);
  color: #ff0074;
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 836, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-primary:hover {
  background: rgba(255, 0, 116, 0.2);
  border-color: #ff0074;
  transform: translateY(-2px);
}

/* line 843, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

/* line 848, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
}

/* line 855, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-danger {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.15);
}

/* line 860, app/assets/stylesheets/creator_live_streams.scss */
.btn-card-action.btn-card-danger:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: #dc3545;
  transform: translateY(-2px);
}

/* ========================================
   PAST STREAMS TABLE
   ======================================== */
/* line 872, app/assets/stylesheets/creator_live_streams.scss */
.past-streams-table {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

/* line 879, app/assets/stylesheets/creator_live_streams.scss */
.table-container {
  overflow-x: auto;
}

/* line 883, app/assets/stylesheets/creator_live_streams.scss */
.streams-table {
  width: 100%;
  border-collapse: collapse;
}

/* line 887, app/assets/stylesheets/creator_live_streams.scss */
.streams-table thead {
  background: rgba(0, 0, 0, 0.3);
}

/* line 891, app/assets/stylesheets/creator_live_streams.scss */
.streams-table th {
  padding: 16px 20px;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 902, app/assets/stylesheets/creator_live_streams.scss */
.streams-table td {
  padding: 18px 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 909, app/assets/stylesheets/creator_live_streams.scss */
.streams-table tbody tr {
  transition: background 0.2s ease;
}

/* line 912, app/assets/stylesheets/creator_live_streams.scss */
.streams-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* line 916, app/assets/stylesheets/creator_live_streams.scss */
.streams-table tbody tr:last-child td {
  border-bottom: none;
}

/* line 922, app/assets/stylesheets/creator_live_streams.scss */
.table-title {
  font-weight: 600;
  color: #fff;
}

/* line 927, app/assets/stylesheets/creator_live_streams.scss */
.table-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

/* line 934, app/assets/stylesheets/creator_live_streams.scss */
.table-badge.badge-success {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
}

/* line 940, app/assets/stylesheets/creator_live_streams.scss */
.btn-table-action {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ff0074;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.2);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

/* line 952, app/assets/stylesheets/creator_live_streams.scss */
.btn-table-action:hover {
  background: rgba(255, 0, 116, 0.2);
  border-color: #ff0074;
  transform: translateY(-2px);
}

/* ========================================
   EMPTY STATE
   ======================================== */
/* line 963, app/assets/stylesheets/creator_live_streams.scss */
.empty-state-container {
  text-align: center;
  padding: 80px 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  animation: fadeInUp 0.6s ease 0.5s both;
}

/* line 972, app/assets/stylesheets/creator_live_streams.scss */
.empty-state-icon {
  font-size: 72px;
  color: rgba(255, 0, 116, 0.3);
  margin-bottom: 24px;
}

/* line 978, app/assets/stylesheets/creator_live_streams.scss */
.empty-state-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px 0;
}

/* line 985, app/assets/stylesheets/creator_live_streams.scss */
.empty-state-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

/* ========================================
   LOADING & SCROLL
   ======================================== */
/* line 996, app/assets/stylesheets/creator_live_streams.scss */
.infinite-scroll-loading {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* line 1002, app/assets/stylesheets/creator_live_streams.scss */
.infinite-scroll-loading .loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 0, 116, 0.15);
  border-top-color: #ff0074;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

/* line 1018, app/assets/stylesheets/creator_live_streams.scss */
.infinite-scroll-end {
  text-align: center;
  padding: 30px 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-weight: 500;
}

/* line 1026, app/assets/stylesheets/creator_live_streams.scss */
.text-muted {
  color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   FILTERS: COLLAPSIBLE DETAILS
   ======================================== */
/* line 1036, app/assets/stylesheets/creator_live_streams.scss */
details.filters-section summary {
  list-style: none;
}

/* line 1039, app/assets/stylesheets/creator_live_streams.scss */
details.filters-section summary::-webkit-details-marker {
  display: none;
}

/* line 1044, app/assets/stylesheets/creator_live_streams.scss */
details.filters-section .filters-toggle-chevron {
  display: none;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

/* line 1051, app/assets/stylesheets/creator_live_streams.scss */
details.filters-section[open] .filters-toggle-chevron {
  transform: rotate(180deg);
}

@media (min-width: 769px) {
  /* line 1059, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary {
    cursor: default;
    pointer-events: none;
  }
  /* line 1063, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary a, details.filters-section > summary button, details.filters-section > summary .btn-clear-filters {
    pointer-events: auto;
  }
}

/* line 1069, app/assets/stylesheets/creator_live_streams.scss */
.filters-active-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff0074;
  margin-left: 8px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.6);
  animation: filtersDotPulse 2s ease infinite;
}

@keyframes filtersDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  /* line 1090, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  /* line 1095, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 1103, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard .left-sidebar {
    display: none;
  }
  /* line 1107, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard .main-feed {
    padding: 20px 16px 80px 16px;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* line 1115, app/assets/stylesheets/creator_live_streams.scss */
  .filters-section,
.stats-overview,
.live-stream-banner,
.streams-section,
.empty-state-container {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* line 1124, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card {
    min-width: 0;
  }
  /* line 1128, app/assets/stylesheets/creator_live_streams.scss */
  .stat-value {
    word-break: break-word;
  }
  /* line 1132, app/assets/stylesheets/creator_live_streams.scss */
  .filters-form {
    max-width: 100%;
  }
  /* line 1136, app/assets/stylesheets/creator_live_streams.scss */
  .filter-input,
.filter-select {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* line 1142, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* line 1147, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-stats {
    max-width: 100%;
  }
  /* line 1151, app/assets/stylesheets/creator_live_streams.scss */
  .live-stat-item {
    min-width: 0;
    flex-shrink: 1;
  }
  /* line 1156, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-header {
    margin-bottom: 24px;
    padding: 24px;
  }
  /* line 1161, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-title {
    font-size: 26px;
  }
  /* line 1165, app/assets/stylesheets/creator_live_streams.scss */
  .header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  /* line 1171, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions {
    width: 100%;
  }
  /* line 1174, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient {
    width: 100%;
    justify-content: center;
  }
  /* line 1180, app/assets/stylesheets/creator_live_streams.scss */
  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* line 1185, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card {
    padding: 20px;
  }
  /* line 1189, app/assets/stylesheets/creator_live_streams.scss */
  .stat-icon {
    width: 44px;
    height: 44px;
  }
  /* line 1194, app/assets/stylesheets/creator_live_streams.scss */
  .stat-value {
    font-size: 26px;
  }
  /* line 1198, app/assets/stylesheets/creator_live_streams.scss */
  .live-banner-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* line 1203, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-banner {
    padding: 20px;
  }
  /* line 1207, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-stats {
    gap: 16px;
  }
  /* line 1211, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group {
    width: 100%;
  }
  /* line 1214, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group .btn-action {
    flex: 1;
    justify-content: center;
    min-height: 42px;
  }
  /* line 1221, app/assets/stylesheets/creator_live_streams.scss */
  .filters-form {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* line 1225, app/assets/stylesheets/creator_live_streams.scss */
  .filters-form .filter-group:first-child {
    grid-column: 1 / -1;
  }
  /* line 1229, app/assets/stylesheets/creator_live_streams.scss */
  .filters-form .btn-apply-filters {
    grid-column: 1 / -1;
  }
  /* line 1234, app/assets/stylesheets/creator_live_streams.scss */
  .streams-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TABLET & PHONE (≤768px)
   ======================================== */
@media (max-width: 768px) {
  /* line 1244, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard .main-feed {
    padding: 16px 12px 90px 12px;
    width: 100%;
  }
  /* line 1250, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-header {
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 16px;
  }
  /* line 1255, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-header::before {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -80px;
  }
  /* line 1262, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-header::after {
    width: 3px;
  }
  /* line 1267, app/assets/stylesheets/creator_live_streams.scss */
  .header-content {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  /* line 1274, app/assets/stylesheets/creator_live_streams.scss */
  .header-title-section {
    min-width: 0;
    flex: 1;
  }
  /* line 1279, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-title {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* line 1288, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-subtitle {
    font-size: 12px;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* line 1296, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions {
    width: auto;
    flex-shrink: 0;
  }
  /* line 1301, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient {
    width: auto;
    padding: 10px 14px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
  }
  /* line 1308, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient svg {
    width: 16px;
    height: 16px;
  }
  /* line 1313, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient span {
    display: none;
  }
  /* line 1317, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient::after {
    content: 'Nuevo';
    position: relative;
    z-index: 1;
  }
  /* line 1325, app/assets/stylesheets/creator_live_streams.scss */
  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  /* line 1331, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card {
    display: block;
    padding: 14px;
    border-radius: 14px;
  }
  /* line 1336, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 1342, app/assets/stylesheets/creator_live_streams.scss */
  .stat-header {
    margin-bottom: 10px;
  }
  /* line 1346, app/assets/stylesheets/creator_live_streams.scss */
  .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  /* line 1351, app/assets/stylesheets/creator_live_streams.scss */
  .stat-icon svg {
    width: 20px;
    height: 20px;
  }
  /* line 1357, app/assets/stylesheets/creator_live_streams.scss */
  .stat-value {
    font-size: 22px;
  }
  /* line 1361, app/assets/stylesheets/creator_live_streams.scss */
  .stat-label {
    font-size: 10px;
    margin-top: 4px;
    letter-spacing: 0.6px;
  }
  /* line 1367, app/assets/stylesheets/creator_live_streams.scss */
  .stat-change {
    top: 12px;
    right: 12px;
    padding: 3px 8px;
    font-size: 9px;
  }
  /* line 1375, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section {
    padding: 0;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  /* line 1380, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary {
    padding: 14px 16px;
    margin: 0;
    border: 0;
    cursor: pointer;
    user-select: none;
    justify-content: flex-start;
    gap: 10px;
  }
  /* line 1389, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary .filters-title {
    flex: 1;
    min-width: 0;
  }
  /* line 1394, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary .filters-toggle-chevron {
    display: inline-block;
    margin-left: 0;
  }
  /* line 1399, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary .btn-clear-filters {
    padding: 6px 10px;
    font-size: 11px;
  }
  /* line 1403, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary .btn-clear-filters svg {
    width: 14px;
    height: 14px;
  }
  /* line 1410, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section[open] > summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* line 1414, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > *:not(summary) {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* line 1419, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > .filters-form {
    padding-top: 14px;
    padding-bottom: 14px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* line 1425, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > .filters-form .filter-group:first-child {
    grid-column: auto;
  }
  /* line 1429, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > .filters-form .btn-apply-filters {
    grid-column: auto;
    padding: 12px;
    min-height: 44px;
  }
  /* line 1436, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > .filter-tags {
    padding-bottom: 14px;
    margin-top: 0;
    padding-top: 12px;
  }
  /* line 1443, app/assets/stylesheets/creator_live_streams.scss */
  .filters-title {
    font-size: 14px;
  }
  /* line 1447, app/assets/stylesheets/creator_live_streams.scss */
  .filter-input,
.filter-select {
    padding: 11px 14px;
    font-size: 14px;
    min-height: 44px;
  }
  /* line 1454, app/assets/stylesheets/creator_live_streams.scss */
  .date-range-group {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* line 1460, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-banner {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 18px;
  }
  /* line 1466, app/assets/stylesheets/creator_live_streams.scss */
  .live-banner-content {
    gap: 14px;
  }
  /* line 1470, app/assets/stylesheets/creator_live_streams.scss */
  .live-indicator {
    justify-content: flex-start;
  }
  /* line 1474, app/assets/stylesheets/creator_live_streams.scss */
  .live-badge-animated {
    padding: 7px 16px;
    font-size: 11px;
    letter-spacing: 0.8px;
  }
  /* line 1480, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  /* line 1485, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-stats {
    gap: 10px 16px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  /* line 1491, app/assets/stylesheets/creator_live_streams.scss */
  .live-stat-item {
    font-size: 13px;
    flex: 1 1 45%;
  }
  /* line 1495, app/assets/stylesheets/creator_live_streams.scss */
  .live-stat-item i {
    font-size: 14px;
  }
  /* line 1500, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* line 1505, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group .btn-action {
    width: auto;
    padding: 12px 10px;
    font-size: 12px;
    justify-content: center;
    min-height: 44px;
  }
  /* line 1512, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group .btn-action.btn-studio {
    grid-column: 1 / -1;
  }
  /* line 1519, app/assets/stylesheets/creator_live_streams.scss */
  .section-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  /* line 1524, app/assets/stylesheets/creator_live_streams.scss */
  .section-title {
    font-size: 17px;
    gap: 10px;
  }
  /* line 1528, app/assets/stylesheets/creator_live_streams.scss */
  .section-title i {
    font-size: 18px;
  }
  /* line 1533, app/assets/stylesheets/creator_live_streams.scss */
  .section-count {
    font-size: 11px;
    padding: 3px 10px;
  }
  /* line 1538, app/assets/stylesheets/creator_live_streams.scss */
  .streams-section {
    margin-bottom: 28px;
  }
  /* line 1543, app/assets/stylesheets/creator_live_streams.scss */
  .streams-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* line 1548, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card {
    border-radius: 14px;
  }
  /* line 1551, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 1557, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card-header {
    padding: 16px;
  }
  /* line 1561, app/assets/stylesheets/creator_live_streams.scss */
  .stream-status {
    padding: 4px 10px;
    font-size: 10px;
    margin-bottom: 10px;
  }
  /* line 1567, app/assets/stylesheets/creator_live_streams.scss */
  .stream-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  /* line 1572, app/assets/stylesheets/creator_live_streams.scss */
  .stream-meta {
    gap: 6px;
  }
  /* line 1576, app/assets/stylesheets/creator_live_streams.scss */
  .meta-item {
    font-size: 12px;
    gap: 8px;
  }
  /* line 1580, app/assets/stylesheets/creator_live_streams.scss */
  .meta-item i {
    font-size: 14px;
  }
  /* line 1585, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card-actions {
    padding: 12px 16px;
    gap: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* line 1592, app/assets/stylesheets/creator_live_streams.scss */
  .btn-card-action {
    padding: 10px 6px;
    font-size: 11px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* line 1602, app/assets/stylesheets/creator_live_streams.scss */
  .past-streams-table {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  /* line 1609, app/assets/stylesheets/creator_live_streams.scss */
  .table-container {
    overflow: visible;
  }
  /* line 1613, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table {
    min-width: 0;
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  /* line 1619, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table thead {
    display: none;
  }
  /* line 1623, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tbody,
.streams-table tr {
    display: block;
  }
  /* line 1628, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 14px 10px;
    margin-bottom: 10px;
    position: relative;
  }
  /* line 1636, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  /* line 1641, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
  }
  /* line 1651, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table td::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;
  }
  /* line 1661, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table td:last-child {
    border-bottom: none;
    padding-top: 10px;
    margin-top: 4px;
  }
  /* line 1669, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr td.table-title {
    display: block;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 15px;
    color: #fff;
  }
  /* line 1677, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr td.table-title::before {
    display: none;
  }
  /* line 1683, app/assets/stylesheets/creator_live_streams.scss */
  .table-badge {
    padding: 4px 10px;
    font-size: 10px;
  }
  /* line 1688, app/assets/stylesheets/creator_live_streams.scss */
  .btn-table-action {
    padding: 9px 14px;
    font-size: 12px;
    min-height: 38px;
  }
  /* line 1695, app/assets/stylesheets/creator_live_streams.scss */
  .empty-state-container {
    padding: 48px 24px;
    border-radius: 16px;
  }
  /* line 1700, app/assets/stylesheets/creator_live_streams.scss */
  .empty-state-icon {
    font-size: 56px;
    margin-bottom: 18px;
  }
  /* line 1705, app/assets/stylesheets/creator_live_streams.scss */
  .empty-state-title {
    font-size: 20px;
  }
  /* line 1709, app/assets/stylesheets/creator_live_streams.scss */
  .empty-state-text {
    font-size: 13px;
    margin-bottom: 22px;
  }
}

/* ========================================
   PHONE (≤480px)
   ======================================== */
@media (max-width: 480px) {
  /* line 1720, app/assets/stylesheets/creator_live_streams.scss */
  .streams-dashboard .main-feed {
    padding: 14px 10px 90px 10px;
  }
  /* line 1725, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-header {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  /* line 1731, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-title {
    font-size: 16px;
  }
  /* line 1735, app/assets/stylesheets/creator_live_streams.scss */
  .dashboard-subtitle {
    font-size: 11px;
  }
  /* line 1739, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient {
    padding: 9px 12px;
  }
  /* line 1742, app/assets/stylesheets/creator_live_streams.scss */
  .header-actions .btn-primary-gradient svg {
    width: 14px;
    height: 14px;
  }
  /* line 1749, app/assets/stylesheets/creator_live_streams.scss */
  .stats-overview {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  /* line 1759, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card {
    flex: 1;
    padding: 12px 6px;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    text-align: center;
  }
  /* line 1768, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card:last-child {
    border-right: none;
  }
  /* line 1772, app/assets/stylesheets/creator_live_streams.scss */
  .stat-card::before {
    display: none;
  }
  /* line 1777, app/assets/stylesheets/creator_live_streams.scss */
  .stat-header {
    justify-content: center;
    margin-bottom: 6px;
  }
  /* line 1782, app/assets/stylesheets/creator_live_streams.scss */
  .stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  /* line 1787, app/assets/stylesheets/creator_live_streams.scss */
  .stat-icon svg {
    width: 16px;
    height: 16px;
  }
  /* line 1793, app/assets/stylesheets/creator_live_streams.scss */
  .stat-value {
    font-size: 18px;
  }
  /* line 1797, app/assets/stylesheets/creator_live_streams.scss */
  .stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
    margin-top: 2px;
  }
  /* line 1803, app/assets/stylesheets/creator_live_streams.scss */
  .stat-change {
    display: none;
  }
  /* line 1808, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > summary {
    padding: 12px 14px;
  }
  /* line 1812, app/assets/stylesheets/creator_live_streams.scss */
  .filters-title {
    font-size: 13px;
  }
  /* line 1816, app/assets/stylesheets/creator_live_streams.scss */
  details.filters-section > *:not(summary) {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* line 1822, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-banner {
    padding: 14px;
  }
  /* line 1826, app/assets/stylesheets/creator_live_streams.scss */
  .live-stream-title {
    font-size: 17px;
  }
  /* line 1830, app/assets/stylesheets/creator_live_streams.scss */
  .live-stat-item {
    font-size: 12px;
    flex: 1 1 100%;
  }
  /* line 1835, app/assets/stylesheets/creator_live_streams.scss */
  .live-actions-group .btn-action {
    padding: 11px 8px;
    font-size: 11px;
  }
  /* line 1841, app/assets/stylesheets/creator_live_streams.scss */
  .section-title {
    font-size: 16px;
  }
  /* line 1846, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card-header {
    padding: 14px;
  }
  /* line 1850, app/assets/stylesheets/creator_live_streams.scss */
  .stream-title {
    font-size: 15px;
  }
  /* line 1854, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card-actions {
    padding: 10px 14px;
    grid-template-columns: 1fr 1fr;
  }
  /* line 1858, app/assets/stylesheets/creator_live_streams.scss */
  .stream-card-actions .btn-card-action:first-child {
    grid-column: 1 / -1;
  }
  /* line 1864, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr {
    padding: 12px 12px 8px;
    border-radius: 12px;
  }
  /* line 1869, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table tr td.table-title {
    font-size: 14px;
  }
  /* line 1873, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table td {
    font-size: 12px;
  }
  /* line 1876, app/assets/stylesheets/creator_live_streams.scss */
  .streams-table td::before {
    font-size: 9px;
  }
}
@charset "UTF-8";
/* ========================================
   CREATOR NEW LIVE STREAM — Exotha-aligned
   Extends .new-content-page / .form-section / .toggle-switch
   from creator_content_new.scss with the few bits unique to this
   form: back link, privacy option cards, per-option toggle rows,
   PPV price block, and shared helper-text / section-description.
   ======================================== */
/* ---------- Back link above the page title ---------- */
/* line 10, app/assets/stylesheets/creator_live_stream_new.scss */
.new-content-page .stream-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #c9c9c9;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 26, app/assets/stylesheets/creator_live_stream_new.scss */
.new-content-page .stream-back-link svg {
  display: block;
}

/* line 28, app/assets/stylesheets/creator_live_stream_new.scss */
.new-content-page .stream-back-link:hover, .new-content-page .stream-back-link:focus-visible {
  border-color: rgba(255, 0, 116, 0.3);
  color: #ff3d9a;
  background: rgba(255, 0, 116, 0.06);
  outline: none;
}

/* ---------- Helpers used inside sections ---------- */
/* line 38, app/assets/stylesheets/creator_live_stream_new.scss */
.new-content-page .section-description {
  color: var(--color-gray-05, #949494);
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  margin: -6px 0 18px;
}

/* line 46, app/assets/stylesheets/creator_live_stream_new.scss */
.new-content-page .form-hint {
  color: var(--color-gray-05, #949494);
  font-family: 'Rubik', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 6px 0 0;
}

/* ---------- Privacy option cards (radios) ---------- */
/* line 55, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 61, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option {
  position: relative;
  cursor: pointer;
  display: block;
}

/* line 66, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 72, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option input[type="radio"]:checked + .stream-privacy-card {
  border-color: rgba(255, 0, 116, 0.5);
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 0, 116, 0.02) 100%);
  box-shadow: 0 6px 22px rgba(255, 0, 116, 0.14);
}

/* line 78, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option input[type="radio"]:checked + .stream-privacy-card .stream-privacy-icon {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* line 86, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option input[type="radio"]:checked + .stream-privacy-card .stream-privacy-check {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-color: transparent;
  color: #fff;
  opacity: 1;
  transform: scale(1);
}

/* line 94, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-option input[type="radio"]:focus-visible + .stream-privacy-card {
  outline: 2px solid rgba(255, 0, 116, 0.4);
  outline-offset: 2px;
}

/* line 100, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 110, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-card:hover {
  border-color: rgba(255, 0, 116, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* line 116, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 12px;
  color: #ff3d9a;
  transition: all 0.25s ease;
}

/* line 129, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-icon svg {
  display: block;
}

/* line 132, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-content {
  flex: 1;
  min-width: 0;
}

/* line 137, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 2px;
  line-height: 1.3;
}

/* line 146, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #949494;
}

/* line 153, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-privacy-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
  color: transparent;
  opacity: 0.55;
  transform: scale(0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- PPV price block (revealed when PPV selected) ---------- */
/* line 170, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-ppv-price {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.05) 0%, transparent 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 12px;
  animation: stream-ppv-slide 0.22s ease;
}

/* line 178, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-ppv-price .form-label {
  margin-top: 0;
}

/* line 181, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 8px;
}

/* line 188, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-prefix,
.stream-price-suffix {
  position: absolute;
  pointer-events: none;
  color: #c9c9c9;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* line 198, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-prefix {
  left: 18px;
}

/* line 202, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-suffix {
  right: 18px;
  color: #8e8e8e;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* line 209, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-input {
  /* Space reserved for $ prefix (left) and USD suffix (right) */
  padding-left: 34px !important;
  padding-right: 56px !important;
  /* Kill the native number-input spinners, they clash with the dark theme */
  -moz-appearance: textfield;
}

/* line 217, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-price-input::-webkit-outer-spin-button, .stream-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@keyframes stream-ppv-slide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Toggle rows (icon + title + desc + switch) ---------- */
/* line 230, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 237, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

/* line 242, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-row:first-child {
  padding-top: 4px;
}

/* line 245, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-info {
  flex: 1;
  min-width: 0;
}

/* line 250, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 4px;
}

/* line 260, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-title svg {
  flex-shrink: 0;
  color: #ff3d9a;
}

/* line 266, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-desc {
  color: #949494;
  font-family: 'Rubik', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  padding-left: 28px;
}

/* The label wrapping the toggle must keep its pointer behaviour */
/* line 276, app/assets/stylesheets/creator_live_stream_new.scss */
.stream-toggle-row .toggle-switch {
  margin-top: 2px;
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 600px) {
  /* line 282, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-privacy-card {
    padding: 12px 14px;
    gap: 12px;
  }
  /* line 287, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-privacy-icon {
    width: 40px;
    height: 40px;
  }
  /* line 292, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-privacy-title {
    font-size: 14px;
  }
  /* line 293, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-privacy-desc {
    font-size: 12px;
  }
  /* line 295, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-toggle-row {
    gap: 12px;
    padding: 14px 0;
  }
  /* line 300, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-toggle-title {
    font-size: 14px;
  }
  /* line 301, app/assets/stylesheets/creator_live_stream_new.scss */
  .stream-toggle-desc {
    font-size: 12px;
    padding-left: 28px;
  }
}
@charset "UTF-8";
/* ========================================
   CREATOR LIVE STREAM SHOW - Estilo Exotha Premium
   Dark luxury aesthetic with magenta accents
   ======================================== */
/* line 6, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-details-page {
  background: #000;
  min-height: calc(100vh - 90px);
  position: relative;
}

/* line 12, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-details-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 116, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* line 24, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-details-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 40px 20px;
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* line 35, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-details-page .main-feed {
  max-width: 100%;
  width: 100%;
}

/* line 42, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-header {
  margin-bottom: 32px;
  animation: fadeInDown 0.5s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 58, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(31, 31, 31, 0.8);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

/* line 75, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-back i {
  font-size: 16px;
  transition: transform 0.25s ease;
}

/* line 80, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-back:hover {
  background: rgba(255, 0, 116, 0.15);
  border-color: rgba(255, 0, 116, 0.4);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 0, 116, 0.15);
}

/* line 86, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-back:hover i {
  transform: translateX(-4px);
}

/* line 93, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-card {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 32px;
  animation: fadeInUp 0.5s ease 0.1s both;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

/* line 105, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, rgba(255, 0, 116, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* line 117, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 50%, #ff0074 100%);
}

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

/* line 139, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* line 148, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-left {
  flex: 1;
  min-width: 0;
}

/* line 153, app/assets/stylesheets/creator_live_stream_show.scss */
.status-indicator {
  margin-bottom: 16px;
}

/* line 157, app/assets/stylesheets/creator_live_stream_show.scss */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  font-family: 'Montserrat', sans-serif;
}

/* line 170, app/assets/stylesheets/creator_live_stream_show.scss */
.status-badge.status-live {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  animation: pulseLive 2s infinite;
  box-shadow: 0 4px 20px rgba(255, 0, 116, 0.4);
}

/* line 178, app/assets/stylesheets/creator_live_stream_show.scss */
.status-badge.status-scheduled {
  background: rgba(255, 0, 116, 0.1);
  color: #ff3d9a;
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 184, app/assets/stylesheets/creator_live_stream_show.scss */
.status-badge.status-ended {
  background: rgba(80, 80, 80, 0.3);
  color: #949494;
  border-color: rgba(148, 148, 148, 0.2);
}

@keyframes pulseLive {
  0% {
    box-shadow: 0 4px 20px rgba(255, 0, 116, 0.4), 0 0 0 0 rgba(255, 0, 116, 0.6);
  }
  70% {
    box-shadow: 0 4px 20px rgba(255, 0, 116, 0.4), 0 0 0 12px rgba(255, 0, 116, 0);
  }
  100% {
    box-shadow: 0 4px 20px rgba(255, 0, 116, 0.4), 0 0 0 0 rgba(255, 0, 116, 0);
  }
}

/* line 203, app/assets/stylesheets/creator_live_stream_show.scss */
.status-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: blink 1.5s infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* line 217, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-title {
  font-size: 34px;
  font-weight: 800;
  color: #f5f5f5;
  margin: 0 0 14px 0;
  line-height: 1.15;
  word-break: break-word;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 231, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  min-width: 4px;
  align-self: stretch;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 242, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-description {
  color: #949494;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  font-family: 'Rubik', sans-serif;
}

/* line 251, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-info-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* line 257, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(255, 0, 116, 0.3);
  position: relative;
  overflow: hidden;
}

/* line 276, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

/* line 287, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 116, 0.45);
  color: white;
}

/* line 292, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary:hover::before {
  left: 100%;
}

/* line 297, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary.btn-end-stream {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* line 301, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-action-primary.btn-end-stream:hover {
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.45);
}

/* line 308, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 0, 116, 0.15);
  position: relative;
}

/* line 317, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
}

/* line 326, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-item:hover {
  background: rgba(255, 0, 116, 0.05);
}

/* line 330, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-item i {
  font-size: 20px;
  color: #ff0074;
  margin-top: 2px;
}

/* line 337, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 343, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-label {
  color: #949494;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Montserrat', sans-serif;
}

/* line 352, app/assets/stylesheets/creator_live_stream_show.scss */
.metadata-value {
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

/* line 360, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  animation: fadeInUp 0.5s ease 0.2s both;
}

/* line 368, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-stat-card {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* line 380, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* line 392, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 116, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 0, 116, 0.1);
}

/* line 397, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-stat-card:hover::before {
  opacity: 1;
}

/* line 403, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
}

/* line 414, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-icon-wrapper.icon-viewers {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

/* line 420, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-icon-wrapper.icon-max-viewers {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.05) 100%);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

/* line 426, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-icon-wrapper.icon-earnings {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.05) 100%);
  color: #ff0074;
  border: 1px solid rgba(255, 0, 116, 0.3);
}

/* line 432, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-icon-wrapper.icon-messages {
  background: linear-gradient(135deg, rgba(32, 201, 151, 0.15) 0%, rgba(32, 201, 151, 0.05) 100%);
  color: #20c997;
  border: 1px solid rgba(32, 201, 151, 0.2);
}

/* line 439, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-data {
  flex: 1;
  min-width: 0;
}

/* line 444, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

/* line 454, app/assets/stylesheets/creator_live_stream_show.scss */
.stat-label {
  color: #949494;
  font-size: 11px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* line 465, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* line 472, app/assets/stylesheets/creator_live_stream_show.scss */
.detail-section {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  animation: fadeInUp 0.5s ease 0.3s both;
  backdrop-filter: blur(10px);
}

/* line 481, app/assets/stylesheets/creator_live_stream_show.scss */
.section-header-detail {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

/* line 487, app/assets/stylesheets/creator_live_stream_show.scss */
.section-title-detail {
  font-size: 16px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
}

/* line 498, app/assets/stylesheets/creator_live_stream_show.scss */
.section-title-detail::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
  margin-right: 2px;
}

/* line 508, app/assets/stylesheets/creator_live_stream_show.scss */
.section-title-detail i, .section-title-detail svg {
  color: #ff0074;
  font-size: 18px;
}

/* line 514, app/assets/stylesheets/creator_live_stream_show.scss */
.count-badge {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.1) 100%);
  color: #ff3d9a;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 0, 116, 0.25);
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

/* line 528, app/assets/stylesheets/creator_live_stream_show.scss */
.viewers-list {
  max-height: 500px;
  overflow-y: auto;
  padding: 14px;
}

/* line 533, app/assets/stylesheets/creator_live_stream_show.scss */
.viewers-list::-webkit-scrollbar {
  width: 4px;
}

/* line 537, app/assets/stylesheets/creator_live_stream_show.scss */
.viewers-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 2px;
}

/* line 542, app/assets/stylesheets/creator_live_stream_show.scss */
.viewers-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 546, app/assets/stylesheets/creator_live_stream_show.scss */
.viewers-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff3d9a 0%, #ff0074 100%);
}

/* line 552, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

/* line 563, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-item:hover {
  background: rgba(255, 0, 116, 0.05);
  border-color: rgba(255, 0, 116, 0.15);
}

/* line 568, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-item:last-child {
  margin-bottom: 0;
}

/* line 573, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/* line 580, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 587, app/assets/stylesheets/creator_live_stream_show.scss */
.avatar-placeholder-small {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 10px rgba(255, 0, 116, 0.3);
}

/* line 602, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-info {
  flex: 1;
  min-width: 0;
}

/* line 607, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

/* line 614, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-meta {
  color: #8e8e8e;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 621, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-meta i {
  font-size: 11px;
}

/* line 626, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* line 639, app/assets/stylesheets/creator_live_stream_show.scss */
.viewer-badge.subscriber-badge {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.1) 100%);
  color: #ff3d9a;
  border: 1px solid rgba(255, 0, 116, 0.3);
}

/* line 647, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-messages-list {
  max-height: 500px;
  overflow-y: auto;
  padding: 14px;
}

/* line 652, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-messages-list::-webkit-scrollbar {
  width: 4px;
}

/* line 656, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-messages-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 2px;
}

/* line 661, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-messages-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 665, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-messages-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff3d9a 0%, #ff0074 100%);
}

/* line 671, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-message-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

/* line 681, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-message-item:hover {
  background: rgba(255, 0, 116, 0.05);
  border-color: rgba(255, 0, 116, 0.15);
}

/* line 686, app/assets/stylesheets/creator_live_stream_show.scss */
.chat-message-item:last-child {
  margin-bottom: 0;
}

/* line 691, app/assets/stylesheets/creator_live_stream_show.scss */
.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/* line 698, app/assets/stylesheets/creator_live_stream_show.scss */
.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 704, app/assets/stylesheets/creator_live_stream_show.scss */
.message-avatar .avatar-placeholder-small {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

/* line 711, app/assets/stylesheets/creator_live_stream_show.scss */
.message-content {
  flex: 1;
  min-width: 0;
}

/* line 716, app/assets/stylesheets/creator_live_stream_show.scss */
.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* line 723, app/assets/stylesheets/creator_live_stream_show.scss */
.message-username {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 13px;
}

/* line 729, app/assets/stylesheets/creator_live_stream_show.scss */
.message-time {
  color: #666;
  font-size: 11px;
}

/* line 734, app/assets/stylesheets/creator_live_stream_show.scss */
.message-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

/* line 740, app/assets/stylesheets/creator_live_stream_show.scss */
.message-text .message-gif {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 8px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* line 749, app/assets/stylesheets/creator_live_stream_show.scss */
.message-text .message-gif:hover {
  transform: scale(1.05);
}

/* line 756, app/assets/stylesheets/creator_live_stream_show.scss */
.empty-state-small {
  text-align: center;
  padding: 40px 20px;
  color: #535353;
}

/* line 761, app/assets/stylesheets/creator_live_stream_show.scss */
.empty-state-small i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
  color: #ff0074;
}

/* line 768, app/assets/stylesheets/creator_live_stream_show.scss */
.empty-state-small p {
  margin: 0;
  font-size: 13px;
  color: #949494;
  font-family: 'Rubik', sans-serif;
}

/* line 777, app/assets/stylesheets/creator_live_stream_show.scss */
.stream-settings-card {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 32px;
  animation: fadeInUp 0.5s ease 0.4s both;
  backdrop-filter: blur(10px);
}

/* line 787, app/assets/stylesheets/creator_live_stream_show.scss */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 0, 116, 0.08);
  padding: 1px;
}

/* line 795, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-item {
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 0.2s ease;
}

/* line 803, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-item:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* line 808, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.05) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ff0074;
  flex-shrink: 0;
}

/* line 822, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 828, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-label {
  color: #949494;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Montserrat', sans-serif;
}

/* line 837, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-value {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

/* line 842, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-value.enabled {
  color: #20c997;
}

/* line 846, app/assets/stylesheets/creator_live_stream_show.scss */
.setting-value.disabled {
  color: #949494;
}

/* line 852, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone {
  background: linear-gradient(145deg, rgba(40, 20, 25, 0.9) 0%, rgba(30, 15, 20, 0.95) 100%);
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 14px;
  overflow: hidden;
  animation: fadeInUp 0.5s ease 0.5s both;
  position: relative;
}

/* line 860, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.5), transparent);
}

/* line 871, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-header {
  padding: 16px 20px;
  background: rgba(220, 53, 69, 0.08);
  border-bottom: 1px solid rgba(220, 53, 69, 0.15);
}

/* line 876, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-header h3 {
  margin: 0;
  color: #ff6b6b;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* line 890, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-content {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* line 899, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-info {
  flex: 1;
  min-width: 200px;
}

/* line 903, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-info strong {
  display: block;
  color: #f5f5f5;
  font-size: 15px;
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}

/* line 911, app/assets/stylesheets/creator_live_stream_show.scss */
.danger-zone-info p {
  margin: 0;
  color: #949494;
  font-size: 13px;
  line-height: 1.6;
  font-family: 'Rubik', sans-serif;
}

/* line 920, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-danger {
  padding: 12px 20px;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 10px;
  color: #ff6b6b;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* line 937, app/assets/stylesheets/creator_live_stream_show.scss */
.btn-danger:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.5);
  color: #ff8585;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 53, 69, 0.25);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
  /* line 951, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* line 955, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  /* line 961, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    min-height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* line 969, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page::before {
    position: absolute;
    height: 250px;
  }
  /* line 974, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 983, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .left-sidebar {
    display: none;
  }
  /* line 987, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .main-feed {
    max-width: 100vw;
    overflow-x: hidden;
    padding-bottom: 0;
  }
  /* line 994, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-header {
    margin-bottom: 14px;
  }
  /* line 998, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .btn-back {
    padding: 9px 16px;
    font-size: 13px;
  }
  /* line 1003, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card {
    padding: 22px;
    margin-bottom: 18px;
    border-radius: 16px;
  }
  /* line 1008, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card::before {
    width: 120px;
    height: 120px;
  }
  /* line 1014, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-content-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }
  /* line 1020, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-section {
    border-radius: 14px;
  }
  /* line 1024, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewers-list,
.stream-details-page .chat-messages-list {
    max-height: 360px;
  }
  /* line 1029, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-settings-card {
    margin-bottom: 18px;
    border-radius: 14px;
  }
  /* line 1034, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone {
    margin-bottom: 20px;
    border-radius: 14px;
  }
}

/* ========================================
   TABLET & PHONE (≤768px)
   ======================================== */
@media (max-width: 768px) {
  /* line 1045, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .social-layout {
    padding: 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 1051, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-header {
    margin-bottom: 12px;
  }
  /* line 1055, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .btn-back {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 9px;
    gap: 6px;
  }
  /* line 1061, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .btn-back i {
    font-size: 14px;
  }
  /* line 1067, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card {
    padding: 18px 18px 18px 20px;
    margin-bottom: 14px;
    border-radius: 14px;
  }
  /* line 1072, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card::before {
    width: 140px;
    height: 140px;
  }
  /* line 1077, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card::after {
    width: 3px;
  }
  /* line 1082, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-header {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }
  /* line 1088, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .status-indicator {
    margin-bottom: 10px;
  }
  /* line 1092, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .status-badge {
    padding: 6px 14px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }
  /* line 1098, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-title {
    font-size: 22px;
    gap: 10px;
    margin-bottom: 8px;
  }
  /* line 1103, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-title::before {
    width: 3px;
    min-width: 3px;
  }
  /* line 1109, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-description {
    font-size: 13px;
    line-height: 1.55;
  }
  /* line 1114, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-right {
    width: 100%;
  }
  /* line 1118, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-right .btn-action-primary {
    flex: 1;
    justify-content: center;
    padding: 12px 18px;
    font-size: 13px;
    min-height: 44px;
    width: 100%;
  }
  /* line 1128, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-metadata {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 14px;
  }
  /* line 1134, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-item {
    padding: 10px;
    gap: 10px;
    min-width: 0;
  }
  /* line 1139, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-item i {
    font-size: 16px;
  }
  /* line 1144, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-content {
    min-width: 0;
    gap: 2px;
  }
  /* line 1149, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-label {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  /* line 1154, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-value {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1162, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  /* line 1168, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stat-card {
    padding: 12px;
    border-radius: 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  /* line 1175, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stat-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* line 1181, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-icon-wrapper {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
  }
  /* line 1187, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-icon-wrapper svg {
    width: 20px;
    height: 20px;
  }
  /* line 1193, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-number {
    font-size: 20px;
    margin-bottom: 2px;
  }
  /* line 1198, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-label {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  /* line 1204, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .section-header-detail {
    padding: 13px 14px;
  }
  /* line 1208, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .section-title-detail {
    font-size: 14px;
  }
  /* line 1211, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .section-title-detail::before {
    height: 16px;
  }
  /* line 1215, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .section-title-detail i, .stream-details-page .section-title-detail svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
  /* line 1222, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .count-badge {
    padding: 3px 9px;
    font-size: 10px;
  }
  /* line 1228, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewers-list,
.stream-details-page .chat-messages-list {
    max-height: 340px;
    padding: 12px;
  }
  /* line 1234, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-item,
.stream-details-page .chat-message-item {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 6px;
  }
  /* line 1241, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-avatar,
.stream-details-page .avatar-placeholder-small {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  /* line 1248, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-avatar {
    width: 32px;
    height: 32px;
  }
  /* line 1252, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-avatar .avatar-placeholder-small {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  /* line 1259, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-name {
    font-size: 13px;
  }
  /* line 1263, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-meta {
    font-size: 11px;
  }
  /* line 1267, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-badge {
    padding: 3px 8px;
    font-size: 9px;
  }
  /* line 1272, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-username {
    font-size: 13px;
  }
  /* line 1276, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-text {
    font-size: 13px;
  }
  /* line 1280, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-time {
    font-size: 10px;
  }
  /* line 1284, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small {
    padding: 32px 18px;
  }
  /* line 1287, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small i {
    font-size: 42px;
  }
  /* line 1291, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small p {
    font-size: 12px;
  }
  /* line 1297, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* line 1301, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-item {
    padding: 14px;
    gap: 10px;
  }
  /* line 1306, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 9px;
  }
  /* line 1312, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 1318, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-content {
    min-width: 0;
  }
  /* line 1322, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-label {
    font-size: 9px;
    letter-spacing: 0.6px;
  }
  /* line 1327, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-value {
    font-size: 13px;
  }
  /* line 1332, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-header {
    padding: 12px 16px;
  }
  /* line 1335, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-header h3 {
    font-size: 12px;
    letter-spacing: 0.4px;
  }
  /* line 1341, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  /* line 1347, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-content .btn-danger {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    min-height: 44px;
  }
  /* line 1355, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-info {
    min-width: 0;
  }
  /* line 1358, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-info strong {
    font-size: 14px;
  }
  /* line 1362, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-info p {
    font-size: 12px;
  }
  /* line 1367, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card,
.stream-details-page .detail-section,
.stream-details-page .stream-settings-card,
.stream-details-page .danger-zone {
    max-width: 100%;
  }
}

/* ========================================
   PHONE (≤480px)
   ======================================== */
@media (max-width: 480px) {
  /* line 1380, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .social-layout {
    padding: 10px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 1385, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .btn-back {
    padding: 7px 12px;
    font-size: 11px;
    border-radius: 8px;
  }
  /* line 1392, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-info-card {
    padding: 16px 16px 16px 18px;
    border-radius: 14px;
  }
  /* line 1397, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-title {
    font-size: 19px;
  }
  /* line 1401, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-description {
    font-size: 12px;
  }
  /* line 1405, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .status-badge {
    padding: 5px 12px;
    font-size: 9px;
  }
  /* line 1411, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stream-metadata {
    gap: 6px;
  }
  /* line 1415, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-item {
    padding: 8px 10px;
    gap: 8px;
  }
  /* line 1419, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-item i {
    font-size: 14px;
  }
  /* line 1424, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-label {
    font-size: 9px;
  }
  /* line 1428, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .metadata-value {
    font-size: 12px;
  }
  /* line 1433, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stats-grid {
    display: flex;
    gap: 0;
    background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  /* line 1443, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stat-card {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  /* line 1455, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stat-card:last-child {
    border-right: none;
  }
  /* line 1459, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .detail-stat-card::before {
    display: none;
  }
  /* line 1464, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-icon-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  /* line 1469, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-icon-wrapper svg {
    width: 16px;
    height: 16px;
  }
  /* line 1475, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-data {
    text-align: center;
    flex: unset;
  }
  /* line 1480, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-number {
    font-size: 17px;
    margin-bottom: 2px;
  }
  /* line 1485, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .stat-label {
    font-size: 8px;
    letter-spacing: 0.3px;
    line-height: 1.2;
  }
  /* line 1492, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* line 1496, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-item {
    padding: 12px 10px;
    gap: 8px;
  }
  /* line 1501, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  /* line 1506, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-icon svg {
    width: 16px;
    height: 16px;
  }
  /* line 1512, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-label {
    font-size: 9px;
  }
  /* line 1516, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .setting-value {
    font-size: 12px;
  }
  /* line 1521, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewers-list,
.stream-details-page .chat-messages-list {
    max-height: 320px;
    padding: 10px;
  }
  /* line 1527, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-item,
.stream-details-page .chat-message-item {
    padding: 9px;
    gap: 10px;
    border-radius: 9px;
  }
  /* line 1534, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-avatar,
.stream-details-page .avatar-placeholder-small {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  /* line 1541, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-name {
    font-size: 12px;
  }
  /* line 1545, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .viewer-meta {
    font-size: 10px;
  }
  /* line 1549, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-username {
    font-size: 12px;
  }
  /* line 1553, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .message-text {
    font-size: 12px;
    line-height: 1.4;
  }
  /* line 1558, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .count-badge {
    padding: 2px 8px;
    font-size: 9px;
  }
  /* line 1564, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-header {
    padding: 11px 14px;
  }
  /* line 1567, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-header h3 {
    font-size: 11px;
  }
  /* line 1572, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-content {
    padding: 14px;
  }
  /* line 1577, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-info strong {
    font-size: 13px;
  }
  /* line 1581, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .danger-zone-info p {
    font-size: 11px;
  }
  /* line 1586, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .btn-danger {
    padding: 11px 16px;
    font-size: 12px;
  }
  /* line 1591, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small {
    padding: 28px 14px;
  }
  /* line 1594, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small i {
    font-size: 36px;
  }
  /* line 1598, app/assets/stylesheets/creator_live_stream_show.scss */
  .stream-details-page .empty-state-small p {
    font-size: 11px;
  }
}
@charset "UTF-8";
/* ========================================
   CREATOR PROFILE EDIT - Exotha Premium Settings
   ======================================== */
/* line 6, app/assets/stylesheets/creator_profile_edit.scss */
.d-none {
  display: none !important;
}

/* line 11, app/assets/stylesheets/creator_profile_edit.scss */
:root {
  --settings-primary: #ff0074;
  --settings-primary-light: #ff3d9a;
  --settings-surface: rgba(255, 255, 255, 0.02);
  --settings-surface-hover: rgba(255, 255, 255, 0.05);
  --settings-border: rgba(255, 255, 255, 0.08);
  --settings-border-hover: rgba(255, 0, 116, 0.25);
  --settings-text: #f5f5f5;
  --settings-text-muted: #8e8e8e;
  --settings-text-dim: #666;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(255, 0, 116, 0.3);
  }
  50% {
    border-color: rgba(255, 0, 116, 0.6);
  }
}

/* line 65, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page {
  background: linear-gradient(180deg, #000 0%, #0a0a0f 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* line 70, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* line 80, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .main-feed {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* line 89, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-header {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(255, 0, 116, 0.03) 50%, transparent 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* line 98, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  border-radius: 4px 0 0 4px;
}

/* line 109, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-header::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* line 121, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--settings-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* line 132, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-title i {
  color: var(--settings-primary);
  font-size: 28px;
}

/* line 138, app/assets/stylesheets/creator_profile_edit.scss */
.settings-page-subtitle {
  color: var(--settings-text-muted);
  font-size: 15px;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* line 147, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  min-width: 0;
}

/* line 155, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav {
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 16px;
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

/* line 165, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--settings-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
  padding-left: 14px;
}

/* line 175, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--settings-text-muted);
  text-decoration: none;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  position: relative;
}

/* line 190, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item:hover {
  background: var(--settings-surface-hover);
  color: var(--settings-text);
  transform: translateX(4px);
}

/* line 196, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item.active {
  background: linear-gradient(135deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 0, 116, 0.4);
  transform: translateX(0);
}

/* line 202, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item.active::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--settings-primary);
  border-radius: 0 4px 4px 0;
}

/* line 214, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item.active i {
  color: #fff;
}

/* line 219, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-nav-item i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

/* line 227, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-content {
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 0;
  overflow-x: hidden;
}

/* line 237, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-section {
  display: none;
  min-width: 0;
  overflow-anchor: none;
}

/* line 242, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-section.active {
  display: block;
  animation: fadeInSection 0.4s ease;
}

/* line 248, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-section-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--settings-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* line 257, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-section-title i {
  color: var(--settings-primary);
  font-size: 26px;
}

/* line 263, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-section-subtitle {
  color: var(--settings-text-muted);
  font-size: 15px;
  margin-bottom: 36px;
  line-height: 1.7;
  max-width: 600px;
}

/* line 272, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-group {
  margin-bottom: 28px;
}

/* line 276, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--settings-text);
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* line 287, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-label i {
  color: var(--settings-primary);
  font-size: 16px;
}

/* line 293, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-hint {
  color: var(--settings-text-dim);
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* line 302, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-hint i {
  color: var(--settings-text-muted);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* line 310, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--settings-border);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* line 321, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 326, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--settings-primary);
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.15);
}

/* line 333, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* line 338, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.7;
}

/* line 345, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .character-counter {
  text-align: right;
  color: var(--settings-text-dim);
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500;
}

/* line 352, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .character-counter.warning {
  color: #ffc107;
}

/* line 356, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .character-counter.danger {
  color: #dc3545;
}

/* line 362, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* line 370, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-options {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

/* line 376, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--settings-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 389, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-option:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 394, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-option.selected {
  border-color: var(--settings-primary);
  background: rgba(255, 0, 116, 0.08);
}

/* line 399, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 406, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .account-type-label {
  color: var(--settings-text);
  font-size: 14px;
  font-weight: 600;
}

/* line 412, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--settings-border);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

/* line 423, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 435, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* line 441, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card:hover::before {
  opacity: 0.5;
}

/* line 446, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card.selected {
  border-color: var(--settings-primary);
  background: rgba(255, 0, 116, 0.08);
  box-shadow: 0 8px 32px rgba(255, 0, 116, 0.25);
  transform: translateY(-4px);
}

/* line 452, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card.selected::before {
  opacity: 1;
}

/* line 456, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card.selected .payment-method-checkmark {
  opacity: 1;
  transform: scale(1);
}

/* line 462, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* line 469, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-checkmark {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

/* line 484, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-checkmark i {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

/* line 491, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.3);
}

/* line 502, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-icon i {
  color: #fff;
  font-size: 28px;
}

/* line 508, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-icon.paxum-icon {
  background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3);
}

/* line 514, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--settings-text);
  margin-bottom: 6px;
}

/* line 521, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-method-desc {
  font-size: 13px;
  color: var(--settings-text-muted);
  line-height: 1.5;
}

/* line 527, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .payment-info-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--settings-border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 20px;
  animation: fadeIn 0.3s ease;
}

/* line 537, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
  min-width: 0;
}

/* line 546, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--settings-border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  min-width: 0;
  overflow: hidden;
}

/* line 555, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-group:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

/* line 561, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-group input[type="file"] {
  display: none !important;
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* line 572, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* line 580, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-label .label-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--settings-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 590, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-label .label-text i {
  color: var(--settings-primary);
  font-size: 16px;
}

/* line 596, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-upload-label .label-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--settings-primary);
  background: rgba(255, 0, 116, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 608, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

/* line 622, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview:hover {
  border-color: rgba(255, 0, 116, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

/* line 627, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview.has-image {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
  animation: pulse-border 3s infinite;
}

/* line 632, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview.has-image:hover .image-overlay {
  opacity: 1;
}

/* line 637, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 643, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview .empty-state {
  text-align: center;
  color: var(--settings-text-dim);
  padding: 20px;
}

/* line 648, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview .empty-state i {
  font-size: 42px;
  color: var(--settings-text-dim);
  margin-bottom: 12px;
  display: block;
  opacity: 0.5;
}

/* line 656, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-preview .empty-state p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* line 664, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}

/* line 678, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-overlay i {
  color: #fff;
  font-size: 28px;
}

/* line 684, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .upload-button {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--settings-border);
  border-radius: 10px;
  color: var(--settings-text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* line 700, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .upload-button i {
  font-size: 16px;
  color: var(--settings-primary);
}

/* line 705, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .upload-button:hover {
  background: rgba(255, 0, 116, 0.08);
  border-color: var(--settings-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.2);
}

/* line 714, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 193, 7, 0.05);
  border: 1px solid rgba(255, 193, 7, 0.15);
  border-radius: 10px;
}

/* line 721, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements .requirements-title {
  font-size: 11px;
  font-weight: 700;
  color: #ffc107;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}

/* line 732, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements .requirements-title i {
  font-size: 12px;
}

/* line 737, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 742, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements ul li {
  font-size: 12px;
  color: var(--settings-text-muted);
  padding: 3px 0;
  padding-left: 16px;
  position: relative;
}

/* line 749, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .image-requirements ul li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: #ffc107;
  font-size: 10px;
}

/* line 761, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 767, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .currency-symbol {
  position: absolute;
  left: 20px;
  color: var(--settings-primary);
  font-size: 18px;
  font-weight: 700;
  z-index: 1;
}

/* line 776, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* line 782, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-input {
  padding-right: 40px !important;
}

/* line 786, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-symbol {
  position: absolute;
  right: 14px;
  color: var(--settings-primary);
  font-size: 16px;
  font-weight: 700;
  z-index: 1;
}

/* line 795, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-preview {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-gray-05, #949494);
  line-height: 1.4;
}

/* line 802, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-preview strong {
  color: var(--settings-primary);
}

/* line 806, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .discount-preview small {
  color: var(--color-gray-04, #535353);
}

/* line 811, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-input {
  padding-left: 75px !important;
  font-size: 22px !important;
  font-weight: 700;
  text-align: left;
}

/* line 818, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--settings-border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
}

/* line 825, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--settings-text-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
  letter-spacing: 0.8px;
}

/* line 834, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 840, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
  gap: 8px;
}

/* line 849, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item:last-child {
  border-bottom: none;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
}

/* line 856, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item .item-label {
  color: var(--settings-text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 863, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item .item-label i {
  color: var(--settings-text-dim);
  font-size: 16px;
}

/* line 869, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item .item-value {
  color: var(--settings-text);
  font-size: 16px;
  font-weight: 700;
}

/* line 874, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .price-preview-card .preview-item .item-value.highlight {
  color: var(--settings-primary);
  font-size: 20px;
}

/* line 883, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-left: 4px solid #ffc107;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

/* line 892, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box-icon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* line 897, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box-icon > i {
  color: #ffc107;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 905, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box-content {
  flex: 1;
  min-width: 0;
}

/* line 910, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box-title {
  color: #ffc107;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 15px;
}

/* line 917, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .warning-box-text {
  color: var(--settings-text);
  font-size: 14px;
  line-height: 1.7;
}

/* line 923, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box {
  background: rgba(23, 162, 184, 0.06);
  border: 1px solid rgba(23, 162, 184, 0.2);
  border-left: 4px solid #17a2b8;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

/* line 931, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box .info-box-icon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* line 936, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box .info-box-icon > i {
  color: #17a2b8;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 944, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box .info-box-content {
  flex: 1;
  min-width: 0;
}

/* line 949, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box .info-box-title {
  color: #17a2b8;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 15px;
}

/* line 956, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .info-box .info-box-text {
  color: var(--settings-text);
  font-size: 14px;
  line-height: 1.7;
}

/* line 964, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .settings-form-actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* line 974, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-save {
  flex: 1;
  max-width: 260px;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--settings-primary) 0%, var(--settings-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* line 992, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-save:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(255, 0, 116, 0.5);
}

/* line 997, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-save:active {
  transform: translateY(-1px);
}

/* line 1002, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-cancel {
  padding: 16px 28px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: var(--settings-text);
  text-decoration: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* line 1017, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-cancel i {
  font-size: 14px;
}

/* line 1021, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .btn-settings-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-2px);
}

/* line 1030, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-left: 4px solid #dc3545;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

/* line 1038, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages h3 {
  color: #dc3545;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 1047, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages h3 i {
  font-size: 18px;
}

/* line 1052, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 1058, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages li {
  color: var(--settings-text);
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

/* line 1066, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .error-messages li:before {
  content: "•";
  position: absolute;
  left: 6px;
  color: #dc3545;
  font-weight: 700;
}

/* line 1076, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .alert-success {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.25);
  border-left: 4px solid #4CAF50;
  color: #4CAF50;
  padding: 18px 24px;
  border-radius: 14px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 14px;
}

/* line 1090, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .alert-success i {
  font-size: 22px;
  flex-shrink: 0;
}

/* line 1096, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .alert-danger {
  background: rgba(244, 67, 54, 0.08);
  border: 1px solid rgba(244, 67, 54, 0.25);
  border-left: 4px solid #f44336;
  color: #f44336;
  padding: 18px 24px;
  border-radius: 14px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 14px;
}

/* line 1110, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .alert-danger i {
  font-size: 22px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  /* line 1118, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-container {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  /* line 1123, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-content {
    padding: 32px;
  }
}

@media (max-width: 1024px) {
  /* line 1129, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page {
    max-width: 100vw;
    width: 100%;
  }
  /* line 1133, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .social-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
    gap: 0;
    max-width: 100vw;
  }
  /* line 1141, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .left-sidebar {
    display: none;
  }
  /* line 1145, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .main-feed {
    max-width: 100vw;
  }
  /* line 1150, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-container {
    grid-template-columns: 220px 1fr;
    gap: 20px;
  }
  /* line 1155, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-upload-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* line 1160, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  /* line 1165, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-card {
    padding: 22px 16px;
  }
  /* line 1169, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }
  /* line 1174, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon i {
    font-size: 26px;
  }
  /* line 1179, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-header {
    padding: 24px;
    margin-bottom: 28px;
  }
  /* line 1184, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-title {
    font-size: 26px;
  }
  /* line 1187, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-title i {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  /* line 1194, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .social-layout {
    padding: 16px 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 1199, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* line 1204, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav {
    position: static;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 14px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  }
  /* line 1221, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav::-webkit-scrollbar {
    display: none;
  }
  /* line 1226, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav-title {
    display: none;
  }
  /* line 1230, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav-item {
    flex-shrink: 0;
    padding: 12px 16px;
    margin-bottom: 0;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 10px;
  }
  /* line 1239, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav-item.active::before {
    display: none;
  }
  /* line 1244, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-nav-item i {
    font-size: 16px;
  }
  /* line 1249, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-content {
    padding: 24px 20px;
    border-radius: 16px;
    margin-bottom: 40px;
  }
  /* line 1255, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-section-title {
    font-size: 22px;
  }
  /* line 1258, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-section-title i {
    font-size: 22px;
  }
  /* line 1263, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-section-subtitle {
    font-size: 14px;
    margin-bottom: 28px;
  }
  /* line 1268, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-methods-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* line 1273, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-card {
    padding: 20px 16px;
  }
  /* line 1277, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  /* line 1283, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon i {
    font-size: 24px;
  }
  /* line 1288, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-name {
    font-size: 16px;
    margin-bottom: 4px;
  }
  /* line 1293, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-desc {
    font-size: 12px;
  }
  /* line 1297, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-checkmark {
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
  }
  /* line 1303, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-checkmark i {
    font-size: 10px;
  }
  /* line 1308, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-info-input {
    padding: 18px;
    margin-top: 16px;
  }
  /* line 1313, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-card {
    padding: 24px 20px;
  }
  /* line 1317, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon {
    width: 56px;
    height: 56px;
  }
  /* line 1321, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon i {
    font-size: 24px;
  }
  /* line 1326, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-upload-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* line 1331, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-upload-group {
    padding: 20px;
  }
  /* line 1335, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-preview {
    height: 180px;
  }
  /* line 1339, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-form-actions {
    flex-direction: column-reverse;
    gap: 12px;
    margin-bottom: 20px;
  }
  /* line 1344, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-form-actions .btn-settings-save,
.creator-settings-page .settings-form-actions .btn-settings-cancel {
    width: 100%;
    max-width: none;
    justify-content: center;
  }
  /* line 1352, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .price-input {
    font-size: 20px !important;
  }
  /* line 1356, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .price-preview-card .preview-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* line 1361, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .price-preview-card .preview-item .item-value.highlight {
    font-size: 18px;
  }
  /* line 1366, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-header {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 16px;
  }
  /* line 1372, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-title {
    font-size: 22px;
    gap: 10px;
  }
  /* line 1376, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-title i {
    font-size: 20px;
  }
  /* line 1381, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-subtitle {
    font-size: 14px;
  }
  /* line 1385, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .warning-box,
.creator-settings-page .info-box {
    padding: 16px 18px;
  }
  /* line 1389, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .warning-box .warning-box-icon,
.creator-settings-page .warning-box .info-box-icon,
.creator-settings-page .info-box .warning-box-icon,
.creator-settings-page .info-box .info-box-icon {
    gap: 12px;
  }
  /* line 1393, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .warning-box .warning-box-icon > i,
.creator-settings-page .warning-box .info-box-icon > i,
.creator-settings-page .info-box .warning-box-icon > i,
.creator-settings-page .info-box .info-box-icon > i {
    font-size: 20px;
  }
  /* line 1398, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .warning-box .warning-box-title,
.creator-settings-page .warning-box .info-box-title,
.creator-settings-page .info-box .warning-box-title,
.creator-settings-page .info-box .info-box-title {
    font-size: 14px;
  }
  /* line 1403, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .warning-box .warning-box-text,
.creator-settings-page .warning-box .info-box-text,
.creator-settings-page .info-box .warning-box-text,
.creator-settings-page .info-box .info-box-text {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* line 1411, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .social-layout {
    padding: 12px 10px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 20px));
  }
  /* line 1416, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-content {
    padding: 20px 16px;
    margin-bottom: 30px;
  }
  /* line 1421, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-section-title {
    font-size: 20px;
    gap: 10px;
  }
  /* line 1425, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-section-title i {
    font-size: 20px;
  }
  /* line 1430, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .settings-form-input {
    padding: 14px 16px;
    font-size: 14px;
  }
  /* line 1435, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-upload-group {
    padding: 16px;
  }
  /* line 1439, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-preview {
    height: 160px;
  }
  /* line 1443, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .upload-button {
    padding: 12px 14px;
    font-size: 13px;
  }
  /* line 1448, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-requirements {
    padding: 12px;
  }
  /* line 1451, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-requirements .requirements-title {
    font-size: 10px;
  }
  /* line 1455, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .image-requirements ul li {
    font-size: 11px;
  }
  /* line 1460, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-card {
    padding: 20px 16px;
  }
  /* line 1464, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
  }
  /* line 1469, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-icon i {
    font-size: 22px;
  }
  /* line 1474, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-name {
    font-size: 16px;
  }
  /* line 1478, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .payment-method-desc {
    font-size: 12px;
  }
  /* line 1482, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-header {
    padding: 16px;
  }
  /* line 1486, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-title {
    font-size: 20px;
  }
  /* line 1490, app/assets/stylesheets/creator_profile_edit.scss */
  .settings-page-subtitle {
    font-size: 13px;
  }
  /* line 1494, app/assets/stylesheets/creator_profile_edit.scss */
  .creator-settings-page .btn-settings-save,
.creator-settings-page .btn-settings-cancel {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* line 1502, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* line 1509, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tag-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* line 1515, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tag-chip input[type="checkbox"] {
  display: none;
}

/* line 1519, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tag-chip .tag-label {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #a0a0a0;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* line 1532, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tag-chip:hover .tag-label {
  background: rgba(255, 64, 129, 0.08);
  border-color: rgba(255, 64, 129, 0.25);
  color: #d0d0d0;
}

/* line 1538, app/assets/stylesheets/creator_profile_edit.scss */
.creator-settings-page .content-tag-chip input[type="checkbox"]:checked + .tag-label {
  background: rgba(255, 64, 129, 0.15);
  border-color: #ff4081;
  color: #ff4081;
  font-weight: 600;
}

/* ── Account Tab Cards ─────────────────── */
/* line 1548, app/assets/stylesheets/creator_profile_edit.scss */
.account-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

/* line 1555, app/assets/stylesheets/creator_profile_edit.scss */
.account-card--danger {
  border-color: rgba(220, 53, 69, 0.15);
  background: rgba(220, 53, 69, 0.03);
}

/* line 1560, app/assets/stylesheets/creator_profile_edit.scss */
.account-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 1566, app/assets/stylesheets/creator_profile_edit.scss */
.account-card__header > i {
  font-size: 20px;
  color: #ff3d9a;
  margin-top: 2px;
  flex-shrink: 0;
}

/* line 1574, app/assets/stylesheets/creator_profile_edit.scss */
.account-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 4px;
}

/* line 1582, app/assets/stylesheets/creator_profile_edit.scss */
.account-card__desc {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  margin: 0;
  line-height: 1.4;
}
/* ========================================
   CONTENT SHOW - Estilo Switch Pro
   ======================================== */
/* line 5, app/assets/stylesheets/content_show.scss */
.content-show-page {
  background: #000;
  min-height: calc(100vh - 90px);
}

/* line 9, app/assets/stylesheets/content_show.scss */
.content-show-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  gap: 24px;
  padding: 40px 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* line 18, app/assets/stylesheets/content_show.scss */
.content-show-page .main-feed {
  max-width: 100%;
  width: 100%;
}

/* line 24, app/assets/stylesheets/content_show.scss */
.content-header {
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  display: flow;
}

/* line 35, app/assets/stylesheets/content_show.scss */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 45, app/assets/stylesheets/content_show.scss */
.back-link-wrapper {
  flex-shrink: 0;
}

/* line 49, app/assets/stylesheets/content_show.scss */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #a0a0a0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
}

/* line 62, app/assets/stylesheets/content_show.scss */
.back-link svg {
  width: 18px;
  height: 18px;
  fill: #a0a0a0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 69, app/assets/stylesheets/content_show.scss */
.back-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(-2px);
}

/* line 74, app/assets/stylesheets/content_show.scss */
.back-link:hover svg {
  fill: #ff4081;
  transform: translateX(-2px);
}

/* line 81, app/assets/stylesheets/content_show.scss */
.meta-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* line 89, app/assets/stylesheets/content_show.scss */
.title-wrapper {
  width: 100%;
}

/* line 93, app/assets/stylesheets/content_show.scss */
.content-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.5px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* line 105, app/assets/stylesheets/content_show.scss */
.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909090;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

/* line 119, app/assets/stylesheets/content_show.scss */
.meta-item svg {
  width: 16px;
  height: 16px;
  fill: #909090;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* line 127, app/assets/stylesheets/content_show.scss */
.meta-item span {
  white-space: nowrap;
}

/* line 131, app/assets/stylesheets/content_show.scss */
.meta-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* line 135, app/assets/stylesheets/content_show.scss */
.meta-item:hover svg {
  fill: #ff4081;
}

/* line 141, app/assets/stylesheets/content_show.scss */
.content-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.4);
  transition: all 0.3s ease;
}

/* line 156, app/assets/stylesheets/content_show.scss */
.content-type-badge svg {
  width: 13px;
  height: 13px;
  fill: white;
}

/* line 162, app/assets/stylesheets/content_show.scss */
.content-type-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.5);
}

/* line 169, app/assets/stylesheets/content_show.scss */
.media-container {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

/* line 177, app/assets/stylesheets/content_show.scss */
.media-container:hover {
  border-color: rgba(255, 64, 129, 0.2);
}

/* line 182, app/assets/stylesheets/content_show.scss */
.media-wrapper {
  position: relative;
  width: 100%;
  background: #000;
}

/* line 188, app/assets/stylesheets/content_show.scss */
.single-image-wrap {
  cursor: pointer;
}

/* line 191, app/assets/stylesheets/content_show.scss */
.single-image-wrap .media-image {
  transition: filter 0.2s ease;
}

/* line 195, app/assets/stylesheets/content_show.scss */
.single-image-wrap:hover .media-image {
  filter: brightness(0.92);
}

/* line 200, app/assets/stylesheets/content_show.scss */
.media-video,
.media-image {
  width: 100%;
  height: auto;
  display: block;
}

/* line 207, app/assets/stylesheets/content_show.scss */
.media-video {
  max-height: 720px;
}

/* line 211, app/assets/stylesheets/content_show.scss */
.post-placeholder {
  padding: 80px 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* line 221, app/assets/stylesheets/content_show.scss */
.post-placeholder i {
  font-size: 80px;
  color: #8e8e8e;
  margin-bottom: 20px;
}

/* line 227, app/assets/stylesheets/content_show.scss */
.post-placeholder p {
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
}

/* line 235, app/assets/stylesheets/content_show.scss */
.gallery-slider {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

/* line 243, app/assets/stylesheets/content_show.scss */
.gallery-viewport {
  position: relative;
  overflow: hidden;
}

/* line 247, app/assets/stylesheets/content_show.scss */
.gallery-viewport:hover .gallery-nav {
  opacity: 1;
}

/* line 252, app/assets/stylesheets/content_show.scss */
.gallery-slides {
  position: relative;
  width: 100%;
  min-height: 300px;
}

@media (max-width: 768px) {
  /* line 252, app/assets/stylesheets/content_show.scss */
  .gallery-slides {
    min-height: auto;
  }
}

/* line 262, app/assets/stylesheets/content_show.scss */
.gallery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 1;
  cursor: pointer;
}

/* line 273, app/assets/stylesheets/content_show.scss */
.gallery-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* line 280, app/assets/stylesheets/content_show.scss */
.gallery-slide.exiting {
  opacity: 0;
  visibility: visible;
  z-index: 1;
}

/* line 286, app/assets/stylesheets/content_show.scss */
.gallery-slide .media-video,
.gallery-slide .media-image {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  display: block;
}

/* line 296, app/assets/stylesheets/content_show.scss */
.gallery-slide:has(video) {
  cursor: default;
}

/* line 302, app/assets/stylesheets/content_show.scss */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
}

/* line 322, app/assets/stylesheets/content_show.scss */
.gallery-nav svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* line 328, app/assets/stylesheets/content_show.scss */
.gallery-nav:hover {
  background: rgba(255, 0, 116, 0.75);
  border-color: rgba(255, 0, 116, 0.9);
  transform: translateY(-50%) scale(1.08);
}

/* line 334, app/assets/stylesheets/content_show.scss */
.gallery-nav:active {
  transform: translateY(-50%) scale(0.96);
}

/* line 338, app/assets/stylesheets/content_show.scss */
.gallery-nav.gallery-prev {
  left: 12px;
}

/* line 342, app/assets/stylesheets/content_show.scss */
.gallery-nav.gallery-next {
  right: 12px;
}

/* line 348, app/assets/stylesheets/content_show.scss */
.gallery-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
}

/* line 363, app/assets/stylesheets/content_show.scss */
.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 373, app/assets/stylesheets/content_show.scss */
.gallery-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* line 377, app/assets/stylesheets/content_show.scss */
.gallery-dot.active {
  background: #ff0074;
  width: 18px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 0, 116, 0.5);
}

/* line 386, app/assets/stylesheets/content_show.scss */
.gallery-thumbstrip {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* line 397, app/assets/stylesheets/content_show.scss */
.gallery-thumbstrip::-webkit-scrollbar {
  display: none;
}

/* line 402, app/assets/stylesheets/content_show.scss */
.gallery-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.25s ease, opacity 0.25s ease;
  background: rgba(255, 255, 255, 0.05);
  padding: 0;
  opacity: 0.5;
}

/* line 415, app/assets/stylesheets/content_show.scss */
.gallery-thumb .thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 422, app/assets/stylesheets/content_show.scss */
.gallery-thumb:hover {
  opacity: 0.8;
  border-color: rgba(255, 255, 255, 0.2);
}

/* line 427, app/assets/stylesheets/content_show.scss */
.gallery-thumb.active {
  opacity: 1;
  border-color: #ff0074;
  box-shadow: 0 0 10px rgba(255, 0, 116, 0.35);
}

/* line 434, app/assets/stylesheets/content_show.scss */
.thumb-video-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
}

/* line 442, app/assets/stylesheets/content_show.scss */
.thumb-video-icon svg {
  width: 20px;
  height: 20px;
  fill: #ff0074;
}

/* line 450, app/assets/stylesheets/content_show.scss */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* line 461, app/assets/stylesheets/content_show.scss */
.gallery-lightbox.open {
  opacity: 1;
}

/* line 465, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* line 482, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__close svg {
  width: 22px;
  height: 22px;
}

/* line 487, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__close:hover {
  background: rgba(255, 0, 116, 0.6);
  border-color: #ff0074;
}

/* line 493, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-secondary, "Rubik", sans-serif);
  letter-spacing: 0.05em;
  z-index: 10;
  user-select: none;
}

/* line 507, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__media {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 515, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}

/* line 523, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
}

/* line 529, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* line 546, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav svg {
  width: 26px;
  height: 26px;
}

/* line 551, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav:hover {
  background: rgba(255, 0, 116, 0.6);
  border-color: #ff0074;
  transform: translateY(-50%) scale(1.08);
}

/* line 557, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav:active {
  transform: translateY(-50%) scale(0.95);
}

/* line 561, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav--prev {
  left: 16px;
}

/* line 565, app/assets/stylesheets/content_show.scss */
.gallery-lightbox__nav--next {
  right: 16px;
}

@media (max-width: 768px) {
  /* line 573, app/assets/stylesheets/content_show.scss */
  .gallery-nav {
    opacity: 1;
    width: 34px;
    height: 34px;
  }
  /* line 578, app/assets/stylesheets/content_show.scss */
  .gallery-nav svg {
    width: 18px;
    height: 18px;
  }
  /* line 583, app/assets/stylesheets/content_show.scss */
  .gallery-nav.gallery-prev {
    left: 8px;
  }
  /* line 587, app/assets/stylesheets/content_show.scss */
  .gallery-nav.gallery-next {
    right: 8px;
  }
  /* line 592, app/assets/stylesheets/content_show.scss */
  .gallery-dots {
    bottom: 10px;
    padding: 5px 8px;
    gap: 5px;
  }
  /* line 598, app/assets/stylesheets/content_show.scss */
  .gallery-dot {
    width: 6px;
    height: 6px;
  }
  /* line 602, app/assets/stylesheets/content_show.scss */
  .gallery-dot.active {
    width: 14px;
  }
  /* line 607, app/assets/stylesheets/content_show.scss */
  .gallery-thumbstrip {
    padding: 8px 10px;
    gap: 5px;
  }
  /* line 612, app/assets/stylesheets/content_show.scss */
  .gallery-thumb {
    width: 46px;
    height: 46px;
    border-radius: 6px;
  }
  /* line 619, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__nav {
    width: 38px;
    height: 38px;
  }
  /* line 623, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__nav svg {
    width: 20px;
    height: 20px;
  }
  /* line 628, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__nav--prev {
    left: 8px;
  }
  /* line 632, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__nav--next {
    right: 8px;
  }
  /* line 637, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
  /* line 644, app/assets/stylesheets/content_show.scss */
  .gallery-lightbox__counter {
    top: 16px;
    font-size: 13px;
  }
}

/* line 652, app/assets/stylesheets/content_show.scss */
.content-description {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

/* line 660, app/assets/stylesheets/content_show.scss */
.content-description:hover {
  border-color: rgba(255, 64, 129, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

/* line 666, app/assets/stylesheets/content_show.scss */
.description-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 675, app/assets/stylesheets/content_show.scss */
.description-title i {
  color: #ff4081;
}

/* line 680, app/assets/stylesheets/content_show.scss */
.description-text {
  color: #8e8e8e;
  line-height: 1.7;
  white-space: pre-wrap;
  font-size: 15px;
}

/* line 688, app/assets/stylesheets/content_show.scss */
.content-actions {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 64, 129, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* line 698, app/assets/stylesheets/content_show.scss */
.content-actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 64, 129, 0.3) 50%, transparent 100%);
}

/* line 714, app/assets/stylesheets/content_show.scss */
.content-actions-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 721, app/assets/stylesheets/content_show.scss */
.content-actions-primary .tip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
}

/* line 736, app/assets/stylesheets/content_show.scss */
.content-actions-primary .tip-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* line 741, app/assets/stylesheets/content_show.scss */
.content-actions-primary .tip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* line 745, app/assets/stylesheets/content_show.scss */
.content-actions-primary .tip-btn:hover svg {
  transform: scale(1.1);
}

/* line 750, app/assets/stylesheets/content_show.scss */
.content-actions-primary .tip-btn:active {
  transform: translateY(0);
}

/* line 757, app/assets/stylesheets/content_show.scss */
.content-stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.2);
}

/* line 766, app/assets/stylesheets/content_show.scss */
.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8e8e8e;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: default;
}

/* line 776, app/assets/stylesheets/content_show.scss */
.stat-item svg, .stat-item i {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: #666;
  transition: all 0.2s ease;
}

/* line 784, app/assets/stylesheets/content_show.scss */
.stat-item span {
  color: #a0a0a0;
  font-weight: 600;
}

/* line 789, app/assets/stylesheets/content_show.scss */
.stat-item:hover {
  color: #f5f5f5;
}

/* line 792, app/assets/stylesheets/content_show.scss */
.stat-item:hover svg, .stat-item:hover i {
  color: #ff4081;
}

/* line 796, app/assets/stylesheets/content_show.scss */
.stat-item:hover span {
  color: #f5f5f5;
}

/* line 803, app/assets/stylesheets/content_show.scss */
.content-show-page .right-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

/* line 809, app/assets/stylesheets/content_show.scss */
.content-show-page .profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 816, app/assets/stylesheets/content_show.scss */
.content-show-page .profile-widget-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
}

/* line 824, app/assets/stylesheets/content_show.scss */
.content-show-page .profile-widget-info {
  flex: 1;
}

/* line 828, app/assets/stylesheets/content_show.scss */
.content-show-page .profile-widget-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 834, app/assets/stylesheets/content_show.scss */
.content-show-page .profile-widget-username {
  color: #8e8e8e;
  font-size: 12px;
}

/* line 839, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestions-section {
  margin-bottom: 24px;
}

/* line 843, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* line 850, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestions-title {
  color: #8e8e8e;
  font-weight: 600;
  font-size: 14px;
}

/* line 856, app/assets/stylesheets/content_show.scss */
.content-show-page .see-all-btn {
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* line 863, app/assets/stylesheets/content_show.scss */
.content-show-page .see-all-btn:hover {
  color: #ff4081;
}

/* line 868, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 875, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* line 883, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-info {
  flex: 1;
  min-width: 0;
}

/* line 888, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

/* line 896, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-name:hover {
  color: #ff4081;
}

/* line 901, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-meta {
  color: #8e8e8e;
  font-size: 12px;
}

/* line 906, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-follow-btn {
  background: none;
  border: none;
  color: #ff0074;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 915, app/assets/stylesheets/content_show.scss */
.content-show-page .suggestion-follow-btn:hover {
  color: #ff4081;
}

/* line 920, app/assets/stylesheets/content_show.scss */
.content-show-page .sidebar-footer {
  color: #8e8e8e;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 24px;
}

/* line 927, app/assets/stylesheets/content_show.scss */
.content-show-page .sidebar-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* line 934, app/assets/stylesheets/content_show.scss */
.content-show-page .sidebar-footer-link {
  color: #8e8e8e;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* line 939, app/assets/stylesheets/content_show.scss */
.content-show-page .sidebar-footer-link:hover {
  color: #f5f5f5;
  text-decoration: underline;
}

/* line 946, app/assets/stylesheets/content_show.scss */
.creator-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

/* line 954, app/assets/stylesheets/content_show.scss */
.creator-card:hover {
  border-color: rgba(255, 64, 129, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

/* line 960, app/assets/stylesheets/content_show.scss */
.creator-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* line 967, app/assets/stylesheets/content_show.scss */
.creator-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 64, 129, 0.2);
  flex-shrink: 0;
}

/* line 976, app/assets/stylesheets/content_show.scss */
.creator-avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid rgba(255, 64, 129, 0.2);
}

/* line 990, app/assets/stylesheets/content_show.scss */
.creator-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 998, app/assets/stylesheets/content_show.scss */
.creator-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 1008, app/assets/stylesheets/content_show.scss */
.creator-username {
  color: #8e8e8e;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 1016, app/assets/stylesheets/content_show.scss */
.subscribe-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* line 1031, app/assets/stylesheets/content_show.scss */
.subscribe-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
  color: white;
}

/* line 1038, app/assets/stylesheets/content_show.scss */
.subscribe-btn:active {
  transform: translateY(-1px);
}

/* line 1042, app/assets/stylesheets/content_show.scss */
.subscribe-btn.subscribed {
  background: rgba(255, 255, 255, 0.1);
  cursor: default;
}

/* line 1046, app/assets/stylesheets/content_show.scss */
.subscribe-btn.subscribed:hover {
  transform: none;
  box-shadow: none;
}

/* line 1053, app/assets/stylesheets/content_show.scss */
.creator-bio {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1063, app/assets/stylesheets/content_show.scss */
.content-info-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

/* line 1071, app/assets/stylesheets/content_show.scss */
.content-info-card:hover {
  border-color: rgba(255, 64, 129, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

/* line 1077, app/assets/stylesheets/content_show.scss */
.info-title {
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 1086, app/assets/stylesheets/content_show.scss */
.info-title i {
  color: #ff4081;
}

/* line 1091, app/assets/stylesheets/content_show.scss */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1098, app/assets/stylesheets/content_show.scss */
.info-item:last-child {
  border-bottom: none;
}

/* line 1103, app/assets/stylesheets/content_show.scss */
.info-label {
  color: #8e8e8e;
  font-size: 14px;
}

/* line 1108, app/assets/stylesheets/content_show.scss */
.info-value {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 1114, app/assets/stylesheets/content_show.scss */
.price-badge {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}

/* line 1123, app/assets/stylesheets/content_show.scss */
.free-badge {
  color: #4caf50;
  font-weight: 700;
}

/* line 1129, app/assets/stylesheets/content_show.scss */
.more-content {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1135, app/assets/stylesheets/content_show.scss */
.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 1144, app/assets/stylesheets/content_show.scss */
.section-title i {
  color: #ff4081;
}

/* line 1149, app/assets/stylesheets/content_show.scss */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* line 1155, app/assets/stylesheets/content_show.scss */
.content-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}

/* line 1164, app/assets/stylesheets/content_show.scss */
.content-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 64, 129, 0.3);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.2);
}

/* line 1171, app/assets/stylesheets/content_show.scss */
.card-thumbnail {
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
}

/* line 1177, app/assets/stylesheets/content_show.scss */
.card-thumbnail img,
.card-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* line 1185, app/assets/stylesheets/content_show.scss */
.card-thumbnail video {
  background: #000;
}

/* line 1189, app/assets/stylesheets/content_show.scss */
.content-card:hover .card-thumbnail img, .content-card:hover .card-thumbnail video {
  transform: scale(1.05);
}

/* line 1195, app/assets/stylesheets/content_show.scss */
.thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

/* line 1203, app/assets/stylesheets/content_show.scss */
.thumbnail-placeholder i {
  font-size: 60px;
  color: #8e8e8e;
}

/* line 1210, app/assets/stylesheets/content_show.scss */
.locked-content-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.06) 0%, transparent 60%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
}

/* line 1219, app/assets/stylesheets/content_show.scss */
.locked-content-bg.has-blur {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 1226, app/assets/stylesheets/content_show.scss */
.locked-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* line 1235, app/assets/stylesheets/content_show.scss */
.locked-overlay svg {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* line 1242, app/assets/stylesheets/content_show.scss */
.locked-overlay i {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* line 1251, app/assets/stylesheets/content_show.scss */
.content-card.locked .card-thumbnail {
  background: radial-gradient(ellipse 150% 100% at 10% 100%, rgba(255, 0, 116, 0.12) 0%, transparent 50%), radial-gradient(ellipse 120% 80% at 90% 0%, rgba(255, 0, 116, 0.08) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.04) 0%, transparent 70%), linear-gradient(160deg, #0d0d0d 0%, #12080f 25%, #160a12 50%, #12080f 75%, #0d0d0d 100%);
}

/* line 1260, app/assets/stylesheets/content_show.scss */
.gallery-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1277, app/assets/stylesheets/content_show.scss */
.gallery-badge svg {
  width: 12px;
  height: 12px;
}

/* line 1284, app/assets/stylesheets/content_show.scss */
.content-type-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* line 1301, app/assets/stylesheets/content_show.scss */
.content-type-indicator svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* line 1307, app/assets/stylesheets/content_show.scss */
.content-type-indicator span {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* line 1313, app/assets/stylesheets/content_show.scss */
.gallery-indicator {
  background: rgba(156, 39, 176, 0.9);
  border-color: rgba(186, 104, 200, 0.5);
}

/* line 1318, app/assets/stylesheets/content_show.scss */
.video-indicator {
  background: rgba(244, 67, 54, 0.9);
  border-color: rgba(255, 138, 128, 0.5);
}

/* line 1323, app/assets/stylesheets/content_show.scss */
.image-indicator {
  background: rgba(33, 150, 243, 0.9);
  border-color: rgba(100, 181, 246, 0.5);
}

/* line 1328, app/assets/stylesheets/content_show.scss */
.card-content {
  padding: 16px;
}

/* line 1332, app/assets/stylesheets/content_show.scss */
.card-title {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* line 1344, app/assets/stylesheets/content_show.scss */
.card-date {
  color: #8e8e8e;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* line 1351, app/assets/stylesheets/content_show.scss */
.card-date i {
  font-size: 12px;
}

/* line 1357, app/assets/stylesheets/content_show.scss */
.restricted-preview {
  position: relative;
  min-height: 500px;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.15) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.05) 0%, transparent 60%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
}

/* line 1371, app/assets/stylesheets/content_show.scss */
.preview-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.06) 0%, transparent 60%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  z-index: 0;
}

/* line 1381, app/assets/stylesheets/content_show.scss */
.preview-bg.has-blur {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 1388, app/assets/stylesheets/content_show.scss */
.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
  opacity: 0.4;
}

/* line 1396, app/assets/stylesheets/content_show.scss */
.preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* line 1404, app/assets/stylesheets/content_show.scss */
.preview-placeholder i {
  font-size: 100px;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.3;
}

/* line 1411, app/assets/stylesheets/content_show.scss */
.restricted-overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 10, 18, 0.95) 0%, rgba(15, 8, 14, 0.98) 100%);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  border-radius: 12px;
  min-height: 500px;
  box-shadow: inset 0 0 80px rgba(255, 0, 116, 0.03);
}

/* line 1428, app/assets/stylesheets/content_show.scss */
.lock-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 64, 129, 0.15);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* line 1439, app/assets/stylesheets/content_show.scss */
.lock-icon i {
  font-size: 50px;
  color: #ff4081;
}

/* line 1445, app/assets/stylesheets/content_show.scss */
.restricted-title {
  font-size: 32px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

/* line 1453, app/assets/stylesheets/content_show.scss */
.restricted-subtitle {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 40px;
  max-width: 600px;
  line-height: 1.6;
}

/* line 1461, app/assets/stylesheets/content_show.scss */
.access-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* line 1470, app/assets/stylesheets/content_show.scss */
.access-options.ppv-only {
  grid-template-columns: 1fr;
  max-width: 380px;
}

/* line 1475, app/assets/stylesheets/content_show.scss */
.access-options.subscription-only {
  grid-template-columns: 1fr;
  max-width: 380px;
}

/* line 1482, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* line 1491, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion .suggestion-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-bottom: 12px;
}

/* line 1496, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion .suggestion-text strong {
  color: rgba(255, 255, 255, 0.7);
}

/* line 1501, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion .suggestion-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 1515, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion .suggestion-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 64, 129, 0.4);
  color: rgba(255, 255, 255, 0.85);
}

/* line 1521, app/assets/stylesheets/content_show.scss */
.subscribe-suggestion .suggestion-btn svg {
  color: #ff4081;
  opacity: 0.7;
}

/* line 1528, app/assets/stylesheets/content_show.scss */
.access-option {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* line 1539, app/assets/stylesheets/content_show.scss */
.access-option:hover {
  border-color: rgba(255, 64, 129, 0.5);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.2);
}

/* line 1547, app/assets/stylesheets/content_show.scss */
.option-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 64, 129, 0.1);
  border-radius: 12px;
}

/* line 1557, app/assets/stylesheets/content_show.scss */
.option-icon i {
  font-size: 32px;
  color: #ff4081;
}

/* line 1563, app/assets/stylesheets/content_show.scss */
.option-title {
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* line 1570, app/assets/stylesheets/content_show.scss */
.option-price {
  font-size: 28px;
  font-weight: 700;
  color: #ff4081;
  margin-bottom: 12px;
  font-family: inherit;
}

/* line 1578, app/assets/stylesheets/content_show.scss */
.option-description {
  color: #8e8e8e;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* line 1585, app/assets/stylesheets/content_show.scss */
.login-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* line 1590, app/assets/stylesheets/content_show.scss */
.login-actions .access-btn {
  max-width: 280px;
}

/* line 1595, app/assets/stylesheets/content_show.scss */
.access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
}

/* line 1612, app/assets/stylesheets/content_show.scss */
.access-btn i {
  font-size: 16px;
}

/* line 1616, app/assets/stylesheets/content_show.scss */
.access-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
  border-color: #ff4081;
  color: white;
}

/* line 1623, app/assets/stylesheets/content_show.scss */
.access-btn:active {
  transform: translateY(-1px);
}

/* line 1627, app/assets/stylesheets/content_show.scss */
.access-btn.secondary-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #8e8e8e;
}

/* line 1632, app/assets/stylesheets/content_show.scss */
.access-btn.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f5f5f5;
  box-shadow: none;
}

/* line 1642, app/assets/stylesheets/content_show.scss */
.access-option.primary-option {
  border-color: rgba(255, 64, 129, 0.3);
  background: rgba(255, 64, 129, 0.05);
}

/* line 1648, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  padding: 24px 20px;
}

/* line 1653, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option .option-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
}

/* line 1658, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option .option-icon i {
  font-size: 24px;
  color: #8e8e8e;
}

/* line 1664, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option .option-title {
  font-size: 15px;
  color: #aaa;
}

/* line 1669, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option .option-price {
  font-size: 20px;
  color: #8e8e8e;
}

/* line 1674, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option .option-description {
  font-size: 13px;
}

/* line 1678, app/assets/stylesheets/content_show.scss */
.access-option.secondary-option:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: none;
  box-shadow: none;
}

/* line 1685, app/assets/stylesheets/content_show.scss */
.login-prompt {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  margin-top: 24px;
  transition: all 0.3s ease;
}

/* line 1694, app/assets/stylesheets/content_show.scss */
.login-prompt:hover {
  border-color: rgba(255, 64, 129, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

/* line 1700, app/assets/stylesheets/content_show.scss */
.login-prompt-text {
  color: #8e8e8e;
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* line 1707, app/assets/stylesheets/content_show.scss */
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 0 8px;
}

/* line 1721, app/assets/stylesheets/content_show.scss */
.login-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  color: white;
}

/* line 1727, app/assets/stylesheets/content_show.scss */
.login-btn.primary {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 1731, app/assets/stylesheets/content_show.scss */
.login-btn.primary:hover {
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.5);
}

@media (max-width: 1200px) {
  /* line 1739, app/assets/stylesheets/content_show.scss */
  .content-show-page .social-layout {
    grid-template-columns: 200px 1fr 300px;
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  /* line 1747, app/assets/stylesheets/content_show.scss */
  .content-show-page .social-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    padding-bottom: 100px;
  }
  /* line 1753, app/assets/stylesheets/content_show.scss */
  .content-show-page .main-feed {
    padding-bottom: 20px;
  }
  /* line 1758, app/assets/stylesheets/content_show.scss */
  .content-header {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 12px;
  }
  /* line 1764, app/assets/stylesheets/content_show.scss */
  .header-top {
    margin-bottom: 16px;
    padding-bottom: 16px;
    gap: 12px;
  }
  /* line 1770, app/assets/stylesheets/content_show.scss */
  .back-link {
    font-size: 13px;
    padding: 6px 10px;
  }
  /* line 1774, app/assets/stylesheets/content_show.scss */
  .back-link svg {
    width: 16px;
    height: 16px;
  }
  /* line 1780, app/assets/stylesheets/content_show.scss */
  .content-title {
    font-size: 24px;
  }
  /* line 1784, app/assets/stylesheets/content_show.scss */
  .meta-wrapper {
    gap: 12px;
  }
  /* line 1788, app/assets/stylesheets/content_show.scss */
  .meta-item {
    font-size: 12px;
    gap: 6px;
    padding: 5px 10px;
  }
  /* line 1793, app/assets/stylesheets/content_show.scss */
  .meta-item svg {
    width: 14px;
    height: 14px;
  }
  /* line 1798, app/assets/stylesheets/content_show.scss */
  .meta-item span {
    font-size: 12px;
  }
  /* line 1803, app/assets/stylesheets/content_show.scss */
  .content-type-badge {
    font-size: 10px;
    padding: 6px 12px;
  }
  /* line 1807, app/assets/stylesheets/content_show.scss */
  .content-type-badge svg {
    width: 12px;
    height: 12px;
  }
  /* line 1813, app/assets/stylesheets/content_show.scss */
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  /* line 1818, app/assets/stylesheets/content_show.scss */
  .description-title {
    font-size: 18px;
  }
  /* line 1822, app/assets/stylesheets/content_show.scss */
  .section-title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  /* line 1828, app/assets/stylesheets/content_show.scss */
  .content-show-page {
    min-height: calc(100vh - 70px);
  }
  /* line 1831, app/assets/stylesheets/content_show.scss */
  .content-show-page .social-layout {
    padding: 16px 12px;
    padding-bottom: 100px;
  }
  /* line 1837, app/assets/stylesheets/content_show.scss */
  .content-header {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 12px;
    display: flow;
  }
  /* line 1844, app/assets/stylesheets/content_show.scss */
  .header-top {
    margin-bottom: 14px;
    padding-bottom: 14px;
    gap: 10px;
  }
  /* line 1850, app/assets/stylesheets/content_show.scss */
  .back-link {
    font-size: 12px;
    padding: 6px 8px;
  }
  /* line 1854, app/assets/stylesheets/content_show.scss */
  .back-link svg {
    width: 16px;
    height: 16px;
  }
  /* line 1859, app/assets/stylesheets/content_show.scss */
  .back-link span {
    display: none;
  }
  /* line 1864, app/assets/stylesheets/content_show.scss */
  .content-title {
    font-size: 20px;
    line-height: 1.3;
  }
  /* line 1869, app/assets/stylesheets/content_show.scss */
  .meta-wrapper {
    gap: 8px;
  }
  /* line 1873, app/assets/stylesheets/content_show.scss */
  .meta-item {
    font-size: 11px;
    gap: 5px;
    padding: 4px 8px;
  }
  /* line 1878, app/assets/stylesheets/content_show.scss */
  .meta-item svg {
    width: 13px;
    height: 13px;
  }
  /* line 1883, app/assets/stylesheets/content_show.scss */
  .meta-item span {
    font-size: 11px;
  }
  /* line 1888, app/assets/stylesheets/content_show.scss */
  .content-type-badge {
    font-size: 10px;
    padding: 5px 10px;
  }
  /* line 1892, app/assets/stylesheets/content_show.scss */
  .content-type-badge svg {
    width: 11px;
    height: 11px;
  }
  /* line 1898, app/assets/stylesheets/content_show.scss */
  .media-container {
    margin-bottom: 20px;
    border-radius: 8px;
  }
  /* line 1903, app/assets/stylesheets/content_show.scss */
  .media-video {
    max-height: 500px;
  }
  /* line 1907, app/assets/stylesheets/content_show.scss */
  .content-description {
    padding: 20px 16px;
    margin-bottom: 20px;
  }
  /* line 1912, app/assets/stylesheets/content_show.scss */
  .description-title {
    font-size: 17px;
    margin-bottom: 12px;
  }
  /* line 1917, app/assets/stylesheets/content_show.scss */
  .description-text {
    font-size: 14px;
    line-height: 1.6;
  }
  /* line 1922, app/assets/stylesheets/content_show.scss */
  .content-actions {
    border-radius: 12px;
    margin-bottom: 20px;
  }
  /* line 1927, app/assets/stylesheets/content_show.scss */
  .content-actions-primary {
    padding: 16px 18px;
    gap: 10px;
  }
  /* line 1932, app/assets/stylesheets/content_show.scss */
  .content-stats {
    gap: 20px;
    padding: 14px 18px;
    flex-wrap: wrap;
  }
  /* line 1938, app/assets/stylesheets/content_show.scss */
  .stat-item {
    font-size: 13px;
  }
  /* line 1941, app/assets/stylesheets/content_show.scss */
  .stat-item svg {
    width: 15px;
    height: 15px;
  }
  /* line 1947, app/assets/stylesheets/content_show.scss */
  .more-content {
    margin-top: 40px;
    padding-top: 30px;
  }
  /* line 1952, app/assets/stylesheets/content_show.scss */
  .section-title {
    font-size: 19px;
    margin-bottom: 20px;
  }
  /* line 1956, app/assets/stylesheets/content_show.scss */
  .section-title svg {
    width: 20px;
    height: 20px;
  }
  /* line 1962, app/assets/stylesheets/content_show.scss */
  .content-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* line 1967, app/assets/stylesheets/content_show.scss */
  .card-content {
    padding: 14px;
  }
  /* line 1971, app/assets/stylesheets/content_show.scss */
  .card-title {
    font-size: 15px;
  }
  /* line 1975, app/assets/stylesheets/content_show.scss */
  .restricted-preview {
    min-height: auto;
  }
  /* line 1979, app/assets/stylesheets/content_show.scss */
  .restricted-overlay {
    padding: 40px 24px;
    min-height: auto;
  }
  /* line 1984, app/assets/stylesheets/content_show.scss */
  .restricted-title {
    font-size: 26px;
  }
  /* line 1988, app/assets/stylesheets/content_show.scss */
  .restricted-subtitle {
    font-size: 15px;
  }
  /* line 1992, app/assets/stylesheets/content_show.scss */
  .access-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  /* line 1999, app/assets/stylesheets/content_show.scss */
  .content-show-page .social-layout {
    padding: 12px 10px;
    padding-bottom: 100px;
  }
  /* line 2004, app/assets/stylesheets/content_show.scss */
  .content-header {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 10px;
  }
  /* line 2010, app/assets/stylesheets/content_show.scss */
  .header-top {
    margin-bottom: 12px;
    padding-bottom: 12px;
    gap: 8px;
  }
  /* line 2016, app/assets/stylesheets/content_show.scss */
  .back-link {
    font-size: 11px;
    padding: 5px 8px;
  }
  /* line 2020, app/assets/stylesheets/content_show.scss */
  .back-link svg {
    width: 14px;
    height: 14px;
  }
  /* line 2025, app/assets/stylesheets/content_show.scss */
  .back-link span {
    display: none;
  }
  /* line 2030, app/assets/stylesheets/content_show.scss */
  .content-title {
    font-size: 18px;
    letter-spacing: -0.3px;
    line-height: 1.3;
  }
  /* line 2036, app/assets/stylesheets/content_show.scss */
  .meta-wrapper {
    gap: 6px;
  }
  /* line 2040, app/assets/stylesheets/content_show.scss */
  .meta-item {
    font-size: 10px;
    gap: 4px;
    padding: 4px 6px;
  }
  /* line 2045, app/assets/stylesheets/content_show.scss */
  .meta-item svg {
    width: 12px;
    height: 12px;
  }
  /* line 2050, app/assets/stylesheets/content_show.scss */
  .meta-item span {
    font-size: 10px;
  }
  /* line 2055, app/assets/stylesheets/content_show.scss */
  .content-type-badge {
    font-size: 9px;
    padding: 4px 8px;
    gap: 3px;
  }
  /* line 2060, app/assets/stylesheets/content_show.scss */
  .content-type-badge svg {
    width: 10px;
    height: 10px;
  }
  /* line 2066, app/assets/stylesheets/content_show.scss */
  .media-container {
    border-radius: 6px;
    margin-bottom: 16px;
  }
  /* line 2071, app/assets/stylesheets/content_show.scss */
  .media-video {
    max-height: 400px;
  }
  /* line 2075, app/assets/stylesheets/content_show.scss */
  .content-description {
    padding: 16px 12px;
    margin-bottom: 16px;
    border-radius: 8px;
  }
  /* line 2081, app/assets/stylesheets/content_show.scss */
  .description-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  /* line 2086, app/assets/stylesheets/content_show.scss */
  .description-text {
    font-size: 13px;
    line-height: 1.5;
  }
  /* line 2091, app/assets/stylesheets/content_show.scss */
  .content-actions {
    border-radius: 10px;
    margin-bottom: 16px;
  }
  /* line 2096, app/assets/stylesheets/content_show.scss */
  .content-actions-primary {
    padding: 14px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* line 2102, app/assets/stylesheets/content_show.scss */
  .content-stats {
    gap: 14px;
    padding: 12px 14px;
  }
  /* line 2107, app/assets/stylesheets/content_show.scss */
  .stat-item {
    font-size: 12px;
  }
  /* line 2110, app/assets/stylesheets/content_show.scss */
  .stat-item svg {
    width: 14px;
    height: 14px;
  }
  /* line 2116, app/assets/stylesheets/content_show.scss */
  .more-content {
    margin-top: 32px;
    padding-top: 24px;
  }
  /* line 2121, app/assets/stylesheets/content_show.scss */
  .section-title {
    font-size: 17px;
    margin-bottom: 16px;
    gap: 8px;
  }
  /* line 2126, app/assets/stylesheets/content_show.scss */
  .section-title svg {
    width: 18px;
    height: 18px;
  }
  /* line 2132, app/assets/stylesheets/content_show.scss */
  .content-grid {
    gap: 12px;
  }
  /* line 2136, app/assets/stylesheets/content_show.scss */
  .card-content {
    padding: 12px;
  }
  /* line 2140, app/assets/stylesheets/content_show.scss */
  .card-title {
    font-size: 14px;
    -webkit-line-clamp: 1;
  }
  /* line 2145, app/assets/stylesheets/content_show.scss */
  .card-date {
    font-size: 12px;
  }
  /* line 2149, app/assets/stylesheets/content_show.scss */
  .restricted-preview {
    min-height: auto;
  }
  /* line 2153, app/assets/stylesheets/content_show.scss */
  .restricted-overlay {
    padding: 32px 20px;
    min-height: auto;
  }
  /* line 2158, app/assets/stylesheets/content_show.scss */
  .lock-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
  }
  /* line 2163, app/assets/stylesheets/content_show.scss */
  .lock-icon i {
    font-size: 40px;
  }
  /* line 2168, app/assets/stylesheets/content_show.scss */
  .restricted-title {
    font-size: 22px;
    margin-bottom: 12px;
  }
  /* line 2173, app/assets/stylesheets/content_show.scss */
  .restricted-subtitle {
    font-size: 14px;
    margin-bottom: 32px;
  }
  /* line 2178, app/assets/stylesheets/content_show.scss */
  .access-option {
    padding: 24px 20px;
  }
  /* line 2182, app/assets/stylesheets/content_show.scss */
  .option-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
  }
  /* line 2187, app/assets/stylesheets/content_show.scss */
  .option-icon i {
    font-size: 26px;
  }
  /* line 2192, app/assets/stylesheets/content_show.scss */
  .option-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  /* line 2197, app/assets/stylesheets/content_show.scss */
  .option-price {
    font-size: 24px;
    margin-bottom: 10px;
  }
  /* line 2202, app/assets/stylesheets/content_show.scss */
  .option-description {
    font-size: 13px;
    margin-bottom: 20px;
  }
  /* line 2207, app/assets/stylesheets/content_show.scss */
  .access-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
  /* line 2212, app/assets/stylesheets/content_show.scss */
  .login-prompt {
    padding: 24px 16px;
    margin-top: 20px;
  }
}
/* Auth Modal - Registration & Login */
/* line 2, app/assets/stylesheets/auth_modal.scss */
.enter_login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #000;
  padding: 40px 20px;
}

/* Logo */
/* line 13, app/assets/stylesheets/auth_modal.scss */
.enter__logo {
  width: 200px;
  height: auto;
  margin-bottom: 40px;
  display: block;
}

/* Modal Container */
/* line 21, app/assets/stylesheets/auth_modal.scss */
.enter_login {
  max-width: 100%;
  width: 100%;
}

/* line 26, app/assets/stylesheets/auth_modal.scss */
.enter__wrapper {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 48px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* Header Section */
/* line 38, app/assets/stylesheets/auth_modal.scss */
.enter__divider {
  margin-bottom: 32px;
  text-align: left;
}

/* line 43, app/assets/stylesheets/auth_modal.scss */
.enter__divider h4 {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 8px;
  text-transform: none;
}

/* line 51, app/assets/stylesheets/auth_modal.scss */
.enter__divider p {
  font-size: 14px;
  color: #8e8e8e;
  margin: 0;
}

/* Input Groups */
/* line 58, app/assets/stylesheets/auth_modal.scss */
.input-group {
  margin-bottom: 24px;
}

/* line 62, app/assets/stylesheets/auth_modal.scss */
.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #8e8e8e;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 72, app/assets/stylesheets/auth_modal.scss */
.input-group em {
  color: #8e8e8e;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* line 81, app/assets/stylesheets/auth_modal.scss */
.textfield {
  width: 100%;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f5f5f5;
  font-size: 16px;
  transition: all 0.2s ease;
  font-family: inherit;
}

/* line 93, app/assets/stylesheets/auth_modal.scss */
.textfield:focus {
  outline: none;
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 100, app/assets/stylesheets/auth_modal.scss */
.textfield::placeholder {
  color: #5a5a5a;
}

/* Toggle Password Button */
/* line 105, app/assets/stylesheets/auth_modal.scss */
.toggle-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8e8e8e;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 10;
}

/* line 122, app/assets/stylesheets/auth_modal.scss */
.toggle-password-btn:hover {
  color: #f5f5f5;
}

/* line 126, app/assets/stylesheets/auth_modal.scss */
.toggle-password-btn:focus {
  outline: none;
}

/* line 130, app/assets/stylesheets/auth_modal.scss */
.eye-icon {
  width: 20px;
  height: 20px;
}

/* Actions */
/* line 136, app/assets/stylesheets/auth_modal.scss */
.actions {
  margin-top: 32px;
}

/* line 140, app/assets/stylesheets/auth_modal.scss */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

/* line 155, app/assets/stylesheets/auth_modal.scss */
.btn--primary {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
}

/* line 160, app/assets/stylesheets/auth_modal.scss */
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 64, 129, 0.35);
}

/* line 165, app/assets/stylesheets/auth_modal.scss */
.btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}

/* line 171, app/assets/stylesheets/auth_modal.scss */
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

/* line 176, app/assets/stylesheets/auth_modal.scss */
.btn--large {
  padding: 18px 36px;
  font-size: 16px;
}

/* line 181, app/assets/stylesheets/auth_modal.scss */
.btn--fluid {
  width: 100%;
}

/* Flash Messages */
/* line 186, app/assets/stylesheets/auth_modal.scss */
.flash-message {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* line 194, app/assets/stylesheets/auth_modal.scss */
.flash-message p {
  margin: 0;
  color: #f5f5f5;
}

/* line 199, app/assets/stylesheets/auth_modal.scss */
.flash-alert,
.flash-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* line 205, app/assets/stylesheets/auth_modal.scss */
.flash-alert p,
.flash-error p {
  color: #fca5a5;
}

/* line 210, app/assets/stylesheets/auth_modal.scss */
.flash-notice,
.flash-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* line 216, app/assets/stylesheets/auth_modal.scss */
.flash-notice p,
.flash-success p {
  color: #86efac;
}

/* Error Messages */
/* line 222, app/assets/stylesheets/auth_modal.scss */
#error_explanation {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

/* line 230, app/assets/stylesheets/auth_modal.scss */
#error_explanation h2 {
  color: #ef4444;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* line 237, app/assets/stylesheets/auth_modal.scss */
#error_explanation ul {
  margin: 0;
  padding-left: 20px;
}

/* line 242, app/assets/stylesheets/auth_modal.scss */
#error_explanation li {
  color: #fca5a5;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Links */
/* line 249, app/assets/stylesheets/auth_modal.scss */
.enter_login a:not(.btn):not(.enter__logo) {
  color: #ff4081;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

/* line 256, app/assets/stylesheets/auth_modal.scss */
.enter_login a:not(.btn):not(.enter__logo):hover {
  color: #f50057;
}

/* Forgot Password Link */
/* line 261, app/assets/stylesheets/auth_modal.scss */
.forgot-password-link {
  display: block;
  width: fit-content;
  margin-top: 8px;
  margin-left: auto;
  padding: 10px 4px;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Remember Me Checkbox */
/* line 274, app/assets/stylesheets/auth_modal.scss */
.remember-me {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 8px;
}

/* line 281, app/assets/stylesheets/auth_modal.scss */
.remember-me input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: #ff4081;
  cursor: pointer;
}

/* line 289, app/assets/stylesheets/auth_modal.scss */
.remember-me label {
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

/* Close Button */
/* line 300, app/assets/stylesheets/auth_modal.scss */
.enter__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1000;
}

/* line 317, app/assets/stylesheets/auth_modal.scss */
.enter__close:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Signup Section */
/* line 325, app/assets/stylesheets/auth_modal.scss */
.enter__signup {
  margin-bottom: 28px;
}

/* Responsive */
@media (max-width: 768px) {
  /* line 331, app/assets/stylesheets/auth_modal.scss */
  .enter_login {
    padding: 20px;
  }
  /* line 335, app/assets/stylesheets/auth_modal.scss */
  .enter__wrapper {
    padding: 36px 24px;
    max-width: 100%;
  }
  /* line 340, app/assets/stylesheets/auth_modal.scss */
  .enter__logo {
    width: 160px;
    margin-bottom: 32px;
  }
  /* line 345, app/assets/stylesheets/auth_modal.scss */
  .enter__divider h4 {
    font-size: 20px;
  }
  /* line 349, app/assets/stylesheets/auth_modal.scss */
  .textfield {
    padding: 14px 16px;
    font-size: 15px;
  }
  /* line 354, app/assets/stylesheets/auth_modal.scss */
  .btn--large {
    padding: 16px 28px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  /* line 361, app/assets/stylesheets/auth_modal.scss */
  .enter__wrapper {
    padding: 28px 20px;
  }
  /* line 365, app/assets/stylesheets/auth_modal.scss */
  .textfield {
    padding: 14px;
    font-size: 14px;
  }
}

/* Additional Devise Links */
/* line 372, app/assets/stylesheets/auth_modal.scss */
.devise-links {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 379, app/assets/stylesheets/auth_modal.scss */
.devise-links a {
  color: #ff4081;
  text-decoration: none;
  font-size: 14px;
  margin: 0 8px;
  transition: color 0.2s ease;
}

/* line 387, app/assets/stylesheets/auth_modal.scss */
.devise-links a:hover {
  color: #f50057;
}
/* ========================================
   PAGINATION - Estilo Switch Pro
   SOLO para vistas con .pagination-wrapper
   ======================================== */
/* line 25, app/assets/stylesheets/pagination.scss */
.pagination-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 34, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 43, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a,
.pagination-wrapper .pagination span,
.pagination-wrapper .pagination .page a,
.pagination-wrapper .pagination .page span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* line 63, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a:hover,
.pagination-wrapper .pagination span:hover,
.pagination-wrapper .pagination .page a:hover,
.pagination-wrapper .pagination .page span:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* line 70, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a.current,
.pagination-wrapper .pagination span.current,
.pagination-wrapper .pagination .page a.current,
.pagination-wrapper .pagination .page span.current {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-color: rgba(255, 64, 129, 0.5);
  color: white;
  cursor: default;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 77, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a.current:hover,
.pagination-wrapper .pagination span.current:hover,
.pagination-wrapper .pagination .page a.current:hover,
.pagination-wrapper .pagination .page span.current:hover {
  transform: none;
}

/* line 82, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a.disabled,
.pagination-wrapper .pagination span.disabled,
.pagination-wrapper .pagination .page a.disabled,
.pagination-wrapper .pagination .page span.disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.5;
}

/* line 89, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination a.disabled:hover,
.pagination-wrapper .pagination span.disabled:hover,
.pagination-wrapper .pagination .page a.disabled:hover,
.pagination-wrapper .pagination .page span.disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

/* line 102, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .first a,
.pagination-wrapper .pagination .first span,
.pagination-wrapper .pagination .prev a,
.pagination-wrapper .pagination .prev span,
.pagination-wrapper .pagination .next a,
.pagination-wrapper .pagination .next span,
.pagination-wrapper .pagination .last a,
.pagination-wrapper .pagination .last span {
  font-size: 13px;
  padding: 8px 16px;
  gap: 6px;
}

/* line 110, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .first a::before,
.pagination-wrapper .pagination .first span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 3v10M12 12l-4-4 4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 3v10M12 12l-4-4 4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-right: 4px;
}

/* line 116, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .prev a::before,
.pagination-wrapper .pagination .prev span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 12L6 8l4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 12L6 8l4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-right: 4px;
}

/* line 122, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .next a::after,
.pagination-wrapper .pagination .next span::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-left: 4px;
}

/* line 128, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .last a::after,
.pagination-wrapper .pagination .last span::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3v10M4 12l4-4-4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3v10M4 12l4-4-4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-left: 4px;
}

/* line 136, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .gap span {
  background: transparent;
  border: none;
  color: #666;
  cursor: default;
  min-width: 32px;
}

/* line 143, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .gap span:hover {
  transform: none;
  background: transparent;
  border: none;
}

/* line 153, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination .page a {
  font-variant-numeric: tabular-nums;
}

/* line 160, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination.compact {
  gap: 4px;
}

/* line 163, app/assets/stylesheets/pagination.scss */
.pagination-wrapper .pagination.compact a,
.pagination-wrapper .pagination.compact span {
  min-width: 36px;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

/* line 173, app/assets/stylesheets/pagination.scss */
.pagination-info {
  text-align: center;
  color: #8e8e8e;
  font-size: 13px;
  margin-top: 16px;
  font-weight: 500;
}

/* line 180, app/assets/stylesheets/pagination.scss */
.pagination-info strong {
  color: #ff4081;
  font-weight: 700;
}

/* line 187, app/assets/stylesheets/pagination.scss */
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 40px 0;
}

/* line 196, app/assets/stylesheets/pagination.scss */
.pagination-wrapper.with-background {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
}

/* line 204, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* line 210, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* line 226, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page:hover:not(.active):not(.disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* line 233, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-color: rgba(255, 64, 129, 0.5);
  color: white;
  cursor: default;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 241, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page.disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.5;
}

/* line 249, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page.prev, .pagination-wrapper nav.pagy-nav .page.next {
  padding: 8px 16px;
}

/* line 254, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page.prev::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 12L6 8l4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 12L6 8l4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-right: 4px;
}

/* line 259, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .page.next::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center/contain;
  flex-shrink: 0;
  margin-left: 4px;
}

/* line 265, app/assets/stylesheets/pagination.scss */
.pagination-wrapper nav.pagy-nav .gap {
  color: #666;
  padding: 0 8px;
}

@media (max-width: 768px) {
  /* line 273, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  /* line 278, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination {
    gap: 4px;
    flex-wrap: wrap;
  }
  /* line 282, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination a,
.pagination-wrapper .pagination span {
    min-width: 36px;
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;
  }
  /* line 291, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination .first,
.pagination-wrapper .pagination .last {
    display: none;
  }
  /* line 299, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination .prev a,
.pagination-wrapper .pagination .prev span,
.pagination-wrapper .pagination .next a,
.pagination-wrapper .pagination .next span {
    padding: 6px 12px;
    font-size: 0;
  }
  /* line 304, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination .prev a::before, .pagination-wrapper .pagination .prev a::after,
.pagination-wrapper .pagination .prev span::before,
.pagination-wrapper .pagination .prev span::after,
.pagination-wrapper .pagination .next a::before,
.pagination-wrapper .pagination .next a::after,
.pagination-wrapper .pagination .next span::before,
.pagination-wrapper .pagination .next span::after {
    width: 14px;
    height: 14px;
    margin: 0;
  }
  /* line 315, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper nav.pagy-nav .page {
    min-width: 36px;
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;
  }
  /* line 321, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper nav.pagy-nav .page.prev, .pagination-wrapper nav.pagy-nav .page.next {
    padding: 6px 12px;
  }
  /* line 328, app/assets/stylesheets/pagination.scss */
  .pagination-info {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  /* line 335, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper .pagination a,
.pagination-wrapper .pagination span {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
  }
  /* line 346, app/assets/stylesheets/pagination.scss */
  .pagination-wrapper nav.pagy-nav .page {
    min-width: 32px;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
  }
}
/* Comments Section - Luxury Editorial Design */
/* line 3, app/assets/stylesheets/content_comments.scss */
.comments-section {
  margin-top: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* line 13, app/assets/stylesheets/content_comments.scss */
.comments-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 64, 129, 0.4) 50%, transparent 100%);
}

/* line 24, app/assets/stylesheets/content_comments.scss */
.comments-header {
  margin: 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.25s ease;
}

/* line 36, app/assets/stylesheets/content_comments.scss */
.comments-header:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* line 39, app/assets/stylesheets/content_comments.scss */
.comments-header:hover .toggle-comments-btn {
  background: rgba(255, 64, 129, 0.15);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 43, app/assets/stylesheets/content_comments.scss */
.comments-header:hover .toggle-comments-btn svg {
  color: #ff4081;
}

/* line 49, app/assets/stylesheets/content_comments.scss */
.comments-header .section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* line 60, app/assets/stylesheets/content_comments.scss */
.comments-header .section-title svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: #ff4081;
  filter: drop-shadow(0 0 4px rgba(255, 64, 129, 0.4));
}

/* line 69, app/assets/stylesheets/content_comments.scss */
.comments-header .section-title span {
  color: #ff4081;
  font-weight: 800;
}

/* line 75, app/assets/stylesheets/content_comments.scss */
.comments-header .toggle-comments-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 87, app/assets/stylesheets/content_comments.scss */
.comments-header .toggle-comments-btn svg {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 16px;
  height: 16px;
}

/* line 93, app/assets/stylesheets/content_comments.scss */
.comments-header .toggle-comments-btn:hover {
  background: rgba(255, 64, 129, 0.1);
  border-color: rgba(255, 64, 129, 0.3);
  color: #ff4081;
}

/* line 100, app/assets/stylesheets/content_comments.scss */
.comments-header .toggle-comments-btn.expanded {
  background: rgba(255, 64, 129, 0.1);
  border-color: rgba(255, 64, 129, 0.3);
}

/* line 104, app/assets/stylesheets/content_comments.scss */
.comments-header .toggle-comments-btn.expanded svg {
  transform: rotate(90deg);
  color: #ff4081;
}

/* line 113, app/assets/stylesheets/content_comments.scss */
.comments-section [data-comments-toggle-target="container"] {
  padding: 24px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* Login Prompt */
/* line 120, app/assets/stylesheets/content_comments.scss */
.login-prompt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
}

/* line 128, app/assets/stylesheets/content_comments.scss */
.login-prompt p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: #8e8e8e;
}

/* line 137, app/assets/stylesheets/content_comments.scss */
.login-prompt p svg {
  fill: #ff4081;
  flex-shrink: 0;
}

/* line 143, app/assets/stylesheets/content_comments.scss */
.login-prompt .login-link {
  color: #ff4081;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* line 149, app/assets/stylesheets/content_comments.scss */
.login-prompt .login-link:hover {
  color: #f50057;
}

/* Comment Form Container */
/* line 156, app/assets/stylesheets/content_comments.scss */
.comment-form-container {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 162, app/assets/stylesheets/content_comments.scss */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 167, app/assets/stylesheets/content_comments.scss */
.comment-form .emoji-bar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

/* line 176, app/assets/stylesheets/content_comments.scss */
.comment-form .emoji-picker-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* line 181, app/assets/stylesheets/content_comments.scss */
.comment-form .emoji-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #00bcd4;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 194, app/assets/stylesheets/content_comments.scss */
.comment-form .emoji-trigger-btn:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.1);
}

/* line 199, app/assets/stylesheets/content_comments.scss */
.comment-form .emoji-trigger-btn svg {
  width: 22px;
  height: 22px;
}

/* line 205, app/assets/stylesheets/content_comments.scss */
.comment-form .form-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* line 211, app/assets/stylesheets/content_comments.scss */
.comment-form .user-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* line 216, app/assets/stylesheets/content_comments.scss */
.comment-form .user-avatar .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 224, app/assets/stylesheets/content_comments.scss */
.comment-form .user-avatar .avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 239, app/assets/stylesheets/content_comments.scss */
.comment-form .input-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 4px 8px 4px 16px;
  transition: all 0.2s ease;
}

/* line 250, app/assets/stylesheets/content_comments.scss */
.comment-form .input-row:focus-within {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1);
}

/* line 257, app/assets/stylesheets/content_comments.scss */
.comment-form .comment-textarea {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 0;
  background: transparent;
  border: none;
  color: #f5f5f5;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
}

/* line 270, app/assets/stylesheets/content_comments.scss */
.comment-form .comment-textarea::placeholder {
  color: #8e8e8e;
}

/* line 274, app/assets/stylesheets/content_comments.scss */
.comment-form .comment-textarea:focus {
  outline: none;
}

/* line 279, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* line 293, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn-icon:hover {
  color: #ff4081;
}

/* line 297, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn-icon svg {
  width: 20px;
  height: 20px;
}

/* line 303, app/assets/stylesheets/content_comments.scss */
.comment-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

/* line 308, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 319, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 324, app/assets/stylesheets/content_comments.scss */
.comment-form .submit-btn:active {
  transform: translateY(0);
}

/* Quick Emoji Bar */
/* line 331, app/assets/stylesheets/content_comments.scss */
.quick-emoji-bar {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
}

/* line 338, app/assets/stylesheets/content_comments.scss */
.quick-emoji-bar::-webkit-scrollbar {
  display: none;
}

/* line 343, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

/* line 357, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.15);
}

/* line 362, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn:active {
  transform: scale(0.95);
}

/* Emoji Picker Dropdown */
/* line 368, app/assets/stylesheets/content_comments.scss */
.emoji-picker-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  width: 320px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
}

/* line 382, app/assets/stylesheets/content_comments.scss */
.emoji-picker-content {
  display: flex;
  flex-direction: column;
}

/* line 387, app/assets/stylesheets/content_comments.scss */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
  max-height: 220px;
  overflow-y: auto;
}

/* line 395, app/assets/stylesheets/content_comments.scss */
.emoji-grid::-webkit-scrollbar {
  width: 6px;
}

/* line 399, app/assets/stylesheets/content_comments.scss */
.emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

/* line 403, app/assets/stylesheets/content_comments.scss */
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* line 407, app/assets/stylesheets/content_comments.scss */
.emoji-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* line 413, app/assets/stylesheets/content_comments.scss */
.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

/* line 427, app/assets/stylesheets/content_comments.scss */
.emoji-item:hover {
  background: rgba(255, 64, 129, 0.2);
  transform: scale(1.2);
}

/* line 432, app/assets/stylesheets/content_comments.scss */
.emoji-item:active {
  transform: scale(0.9);
}

/* line 437, app/assets/stylesheets/content_comments.scss */
.emoji-categories-bar {
  display: flex;
  justify-content: space-around;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 445, app/assets/stylesheets/content_comments.scss */
.emoji-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
  padding: 0;
}

/* line 460, app/assets/stylesheets/content_comments.scss */
.emoji-category-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* line 465, app/assets/stylesheets/content_comments.scss */
.emoji-category-btn.active {
  opacity: 1;
  background: rgba(255, 64, 129, 0.2);
}

/* Comments List */
/* line 472, app/assets/stylesheets/content_comments.scss */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  max-width: 100%;
}

/* Comment Card */
/* line 481, app/assets/stylesheets/content_comments.scss */
.comment-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0;
  transition: background 0.2s ease;
  overflow: hidden;
  max-width: 100%;
}

/* line 490, app/assets/stylesheets/content_comments.scss */
.comment-card:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* line 494, app/assets/stylesheets/content_comments.scss */
.comment-card.reply-indent {
  margin-left: 48px;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 64, 129, 0.2);
}

/* line 501, app/assets/stylesheets/content_comments.scss */
.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

/* line 508, app/assets/stylesheets/content_comments.scss */
.user-avatar-small {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* line 513, app/assets/stylesheets/content_comments.scss */
.user-avatar-small .avatar-img-small {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 521, app/assets/stylesheets/content_comments.scss */
.user-avatar-small .avatar-placeholder-small {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 536, app/assets/stylesheets/content_comments.scss */
.comment-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* line 542, app/assets/stylesheets/content_comments.scss */
.comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 2px;
}

/* line 551, app/assets/stylesheets/content_comments.scss */
.comment-author .creator-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.5px;
}

/* line 565, app/assets/stylesheets/content_comments.scss */
.comment-timestamp {
  font-size: 12px;
  color: #8e8e8e;
}

/* line 570, app/assets/stylesheets/content_comments.scss */
.comment-options {
  margin-left: auto;
}

/* line 573, app/assets/stylesheets/content_comments.scss */
.comment-options .delete-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #8e8e8e;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 584, app/assets/stylesheets/content_comments.scss */
.comment-options .delete-btn:hover {
  color: #ff4444;
}

/* line 588, app/assets/stylesheets/content_comments.scss */
.comment-options .delete-btn svg {
  width: 16px;
  height: 16px;
}

/* line 595, app/assets/stylesheets/content_comments.scss */
.comment-content {
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
  margin-left: 42px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  overflow: hidden;
}

/* line 608, app/assets/stylesheets/content_comments.scss */
.comment-content p {
  margin: 0 0 4px 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* line 613, app/assets/stylesheets/content_comments.scss */
.comment-content p:last-child {
  margin-bottom: 0;
}

/* Comment Actions */
/* line 620, app/assets/stylesheets/content_comments.scss */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 42px;
  padding-top: 2px;
}

/* line 628, app/assets/stylesheets/content_comments.scss */
.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #8e8e8e;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 642, app/assets/stylesheets/content_comments.scss */
.action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* line 648, app/assets/stylesheets/content_comments.scss */
.action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
}

/* line 655, app/assets/stylesheets/content_comments.scss */
.like-btn.liked {
  background: transparent;
  color: #ff4081;
}

/* line 659, app/assets/stylesheets/content_comments.scss */
.like-btn.liked svg {
  fill: #ff4081;
}

/* line 664, app/assets/stylesheets/content_comments.scss */
.like-btn:hover:not(.liked) {
  color: #ff4081;
}

/* line 670, app/assets/stylesheets/content_comments.scss */
.reply-btn:hover {
  color: #ff4081;
}

/* line 675, app/assets/stylesheets/content_comments.scss */
.like-count {
  font-weight: 600;
}

/* Reply Form */
/* line 680, app/assets/stylesheets/content_comments.scss */
.reply-form-wrapper {
  margin-top: 8px;
}

/* line 684, app/assets/stylesheets/content_comments.scss */
.reply-form-container {
  padding-top: 8px;
  margin-left: 42px;
}

/* line 690, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-form-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* line 696, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 703, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
  transition: all 0.2s ease;
}

/* line 713, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-input-row:focus-within {
  border-color: #ff4081;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 2px rgba(255, 64, 129, 0.1);
}

/* line 720, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-textarea {
  flex: 1;
  min-height: 28px;
  max-height: 100px;
  padding: 6px 0;
  background: transparent;
  border: none;
  color: #f5f5f5;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
}

/* line 733, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-textarea::placeholder {
  color: #8e8e8e;
}

/* line 737, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-textarea:focus {
  outline: none;
}

/* line 742, app/assets/stylesheets/content_comments.scss */
.reply-form .emoji-trigger-btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* line 756, app/assets/stylesheets/content_comments.scss */
.reply-form .emoji-trigger-btn-small:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.1);
}

/* line 761, app/assets/stylesheets/content_comments.scss */
.reply-form .emoji-trigger-btn-small svg {
  width: 18px;
  height: 18px;
}

/* line 767, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* line 781, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.4);
}

/* line 786, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn-icon:active {
  transform: scale(0.95);
}

/* line 790, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn-icon svg {
  width: 14px;
  height: 14px;
}

/* line 796, app/assets/stylesheets/content_comments.scss */
.reply-form .cancel-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 50%;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* line 810, app/assets/stylesheets/content_comments.scss */
.reply-form .cancel-btn-icon:hover {
  background: rgba(255, 68, 68, 0.15);
  color: #ff4444;
}

/* line 815, app/assets/stylesheets/content_comments.scss */
.reply-form .cancel-btn-icon svg {
  width: 14px;
  height: 14px;
}

/* line 821, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* line 827, app/assets/stylesheets/content_comments.scss */
.reply-form .cancel-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #8e8e8e;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 838, app/assets/stylesheets/content_comments.scss */
.reply-form .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
}

/* line 844, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 855, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.3);
}

/* line 860, app/assets/stylesheets/content_comments.scss */
.reply-form .reply-submit-btn:active {
  transform: translateY(0);
}

/* Quick Emoji Bar for Reply */
/* line 867, app/assets/stylesheets/content_comments.scss */
.quick-emoji-bar-reply {
  padding: 2px 0;
}

/* line 871, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

/* line 885, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn-small:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.15);
}

/* line 890, app/assets/stylesheets/content_comments.scss */
.quick-emoji-btn-small:active {
  transform: scale(0.95);
}

/* Emoji Picker for Reply - positioned above */
/* line 896, app/assets/stylesheets/content_comments.scss */
.emoji-picker-dropdown-reply {
  bottom: auto;
  top: 100%;
  margin-top: 8px;
  margin-bottom: 0;
  width: 280px;
}

/* Replies Container */
/* line 905, app/assets/stylesheets/content_comments.scss */
.replies-container {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  max-width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* line 916, app/assets/stylesheets/content_comments.scss */
  .comments-section {
    margin-top: 0;
    border-radius: 12px;
  }
  /* line 921, app/assets/stylesheets/content_comments.scss */
  .comments-header {
    padding: 16px 18px;
  }
  /* line 924, app/assets/stylesheets/content_comments.scss */
  .comments-header .section-title {
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  /* line 928, app/assets/stylesheets/content_comments.scss */
  .comments-header .section-title svg {
    width: 18px;
    height: 18px;
  }
  /* line 934, app/assets/stylesheets/content_comments.scss */
  .comments-header .toggle-comments-btn {
    padding: 8px 12px;
    border-radius: 8px;
  }
  /* line 938, app/assets/stylesheets/content_comments.scss */
  .comments-header .toggle-comments-btn svg {
    width: 14px;
    height: 14px;
  }
  /* line 945, app/assets/stylesheets/content_comments.scss */
  .comments-section [data-comments-toggle-target="container"] {
    padding: 18px;
  }
  /* line 949, app/assets/stylesheets/content_comments.scss */
  .comment-card {
    padding: 10px 0;
  }
  /* line 952, app/assets/stylesheets/content_comments.scss */
  .comment-card.reply-indent {
    margin-left: 36px;
    padding-left: 12px;
  }
  /* line 959, app/assets/stylesheets/content_comments.scss */
  .comment-form .user-avatar {
    width: 36px;
    height: 36px;
  }
  /* line 964, app/assets/stylesheets/content_comments.scss */
  .comment-form .input-row {
    padding: 3px 6px 3px 12px;
  }
  /* line 968, app/assets/stylesheets/content_comments.scss */
  .comment-form .comment-textarea {
    font-size: 13px;
    min-height: 32px;
  }
  /* line 973, app/assets/stylesheets/content_comments.scss */
  .comment-form .emoji-trigger-btn {
    width: 32px;
    height: 32px;
  }
  /* line 977, app/assets/stylesheets/content_comments.scss */
  .comment-form .emoji-trigger-btn svg {
    width: 20px;
    height: 20px;
  }
  /* line 983, app/assets/stylesheets/content_comments.scss */
  .comment-form .submit-btn-icon {
    width: 32px;
    height: 32px;
  }
  /* line 987, app/assets/stylesheets/content_comments.scss */
  .comment-form .submit-btn-icon svg {
    width: 16px;
    height: 16px;
  }
  /* line 993, app/assets/stylesheets/content_comments.scss */
  .comment-form .submit-btn {
    padding: 8px 20px;
    font-size: 13px;
  }
  /* line 999, app/assets/stylesheets/content_comments.scss */
  .quick-emoji-bar {
    gap: 1px;
  }
  /* line 1003, app/assets/stylesheets/content_comments.scss */
  .quick-emoji-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  /* line 1009, app/assets/stylesheets/content_comments.scss */
  .emoji-picker-dropdown {
    width: 280px;
    right: -20px;
  }
  /* line 1014, app/assets/stylesheets/content_comments.scss */
  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
    max-height: 180px;
    padding: 10px;
  }
  /* line 1020, app/assets/stylesheets/content_comments.scss */
  .emoji-item {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  /* line 1026, app/assets/stylesheets/content_comments.scss */
  .emoji-category-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  /* line 1032, app/assets/stylesheets/content_comments.scss */
  .user-avatar-small {
    width: 28px;
    height: 28px;
  }
  /* line 1037, app/assets/stylesheets/content_comments.scss */
  .comment-author {
    font-size: 13px;
  }
  /* line 1040, app/assets/stylesheets/content_comments.scss */
  .comment-author .creator-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
  /* line 1046, app/assets/stylesheets/content_comments.scss */
  .comment-content {
    font-size: 13px;
    margin-left: 38px;
  }
  /* line 1051, app/assets/stylesheets/content_comments.scss */
  .comment-actions {
    gap: 10px;
    margin-left: 38px;
  }
  /* line 1056, app/assets/stylesheets/content_comments.scss */
  .action-btn {
    padding: 4px 6px;
    font-size: 11px;
    gap: 4px;
  }
  /* line 1061, app/assets/stylesheets/content_comments.scss */
  .action-btn svg {
    width: 12px;
    height: 12px;
  }
  /* line 1067, app/assets/stylesheets/content_comments.scss */
  .reply-form-container {
    margin-left: 38px;
  }
  /* line 1072, app/assets/stylesheets/content_comments.scss */
  .reply-form .reply-input-row {
    padding: 3px 4px 3px 10px;
  }
  /* line 1076, app/assets/stylesheets/content_comments.scss */
  .reply-form .emoji-trigger-btn-small,
.reply-form .reply-submit-btn-icon,
.reply-form .cancel-btn-icon {
    width: 26px;
    height: 26px;
  }
  /* line 1084, app/assets/stylesheets/content_comments.scss */
  .quick-emoji-bar-reply {
    display: none;
  }
}

@media (max-width: 480px) {
  /* line 1090, app/assets/stylesheets/content_comments.scss */
  .comments-section {
    border-radius: 10px;
  }
  /* line 1094, app/assets/stylesheets/content_comments.scss */
  .comments-header {
    padding: 14px 14px;
  }
  /* line 1097, app/assets/stylesheets/content_comments.scss */
  .comments-header .section-title {
    font-size: 12px;
    gap: 8px;
  }
  /* line 1101, app/assets/stylesheets/content_comments.scss */
  .comments-header .section-title svg {
    width: 16px;
    height: 16px;
  }
  /* line 1107, app/assets/stylesheets/content_comments.scss */
  .comments-header .toggle-comments-btn {
    padding: 6px 10px;
  }
  /* line 1110, app/assets/stylesheets/content_comments.scss */
  .comments-header .toggle-comments-btn svg {
    width: 12px;
    height: 12px;
  }
  /* line 1117, app/assets/stylesheets/content_comments.scss */
  .comments-section [data-comments-toggle-target="container"] {
    padding: 14px;
  }
  /* line 1121, app/assets/stylesheets/content_comments.scss */
  .comment-card.reply-indent {
    margin-left: 24px;
    padding-left: 10px;
  }
  /* line 1127, app/assets/stylesheets/content_comments.scss */
  .comment-form .form-content {
    gap: 8px;
  }
  /* line 1131, app/assets/stylesheets/content_comments.scss */
  .comment-form .user-avatar {
    width: 32px;
    height: 32px;
  }
  /* line 1136, app/assets/stylesheets/content_comments.scss */
  .comment-form .input-row {
    padding: 2px 4px 2px 10px;
    gap: 4px;
  }
  /* line 1141, app/assets/stylesheets/content_comments.scss */
  .comment-form .emoji-trigger-btn {
    width: 28px;
    height: 28px;
  }
  /* line 1145, app/assets/stylesheets/content_comments.scss */
  .comment-form .emoji-trigger-btn svg {
    width: 18px;
    height: 18px;
  }
  /* line 1151, app/assets/stylesheets/content_comments.scss */
  .comment-form .submit-btn-icon {
    width: 28px;
    height: 28px;
  }
  /* line 1155, app/assets/stylesheets/content_comments.scss */
  .comment-form .submit-btn-icon svg {
    width: 14px;
    height: 14px;
  }
  /* line 1162, app/assets/stylesheets/content_comments.scss */
  .quick-emoji-bar {
    display: none;
  }
  /* line 1166, app/assets/stylesheets/content_comments.scss */
  .emoji-picker-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    margin-bottom: 0;
  }
  /* line 1177, app/assets/stylesheets/content_comments.scss */
  .emoji-grid {
    grid-template-columns: repeat(8, 1fr);
    max-height: 200px;
  }
  /* line 1182, app/assets/stylesheets/content_comments.scss */
  .comment-content {
    margin-left: 32px;
  }
  /* line 1186, app/assets/stylesheets/content_comments.scss */
  .comment-actions {
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 32px;
  }
  /* line 1192, app/assets/stylesheets/content_comments.scss */
  .reply-form-container {
    margin-left: 32px;
  }
  /* line 1197, app/assets/stylesheets/content_comments.scss */
  .reply-form .user-avatar-small {
    display: none;
  }
  /* line 1201, app/assets/stylesheets/content_comments.scss */
  .reply-form .reply-input-row {
    gap: 4px;
  }
  /* line 1206, app/assets/stylesheets/content_comments.scss */
  .emoji-picker-dropdown-reply {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    margin-top: 0;
  }
}
/* Stories Modal - Fullscreen Viewer */
/* line 2, app/assets/stylesheets/stories.scss */
.stories-modal {
  /* inset: 0 (not width/height: 100%) forces the browser to use the
     visual viewport, which adapts dynamically to Chrome mobile URL bar
     show/hide. Avoids content being clipped behind the URL bar. */
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

/* line 14, app/assets/stylesheets/stories.scss */
.stories-modal.active {
  display: flex;
}

/* line 18, app/assets/stylesheets/stories.scss */
.stories-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

/* line 28, app/assets/stylesheets/stories.scss */
.stories-modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100%;
  max-height: 900px;
  background: #000;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Progress Bars */
/* line 41, app/assets/stylesheets/stories.scss */
.story-progress-container {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
}

/* line 49, app/assets/stylesheets/stories.scss */
.story-progress-bars {
  display: flex;
  gap: 4px;
}

/* line 54, app/assets/stylesheets/stories.scss */
.story-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

/* line 62, app/assets/stylesheets/stories.scss */
.story-progress-fill {
  height: 100%;
  background: #fff;
  width: 0%;
  border-radius: 2px;
}

/* line 69, app/assets/stylesheets/stories.scss */
.story-progress-fill.active {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* Header */
/* line 74, app/assets/stylesheets/stories.scss */
.story-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 48px 16px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

/* line 87, app/assets/stylesheets/stories.scss */
.story-creator-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 93, app/assets/stylesheets/stories.scss */
.story-creator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 64, 129, 0.5);
}

/* line 101, app/assets/stylesheets/stories.scss */
.story-creator-name {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* line 108, app/assets/stylesheets/stories.scss */
.story-timestamp {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* line 114, app/assets/stylesheets/stories.scss */
.story-close-btn {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

/* line 128, app/assets/stylesheets/stories.scss */
.story-close-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

/* Media Container */
/* line 134, app/assets/stylesheets/stories.scss */
.story-media-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* line 144, app/assets/stylesheets/stories.scss */
.story-image,
.story-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* line 153, app/assets/stylesheets/stories.scss */
.story-image.hidden,
.story-video.hidden {
  display: none;
}

/* Caption */
/* line 159, app/assets/stylesheets/stories.scss */
.story-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 20px 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  z-index: 10;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* line 174, app/assets/stylesheets/stories.scss */
.story-caption.hidden {
  display: none;
}

/* Navigation Areas */
/* line 179, app/assets/stylesheets/stories.scss */
.story-nav-left,
.story-nav-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 5;
  cursor: pointer;
}

/* line 189, app/assets/stylesheets/stories.scss */
.story-nav-left {
  left: 0;
}

/* line 193, app/assets/stylesheets/stories.scss */
.story-nav-right {
  right: 0;
}

/* Views Count (for creator only) */
/* line 198, app/assets/stylesheets/stories.scss */
.story-views {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  backdrop-filter: blur(10px);
}

/* line 215, app/assets/stylesheets/stories.scss */
.story-views.hidden {
  display: none;
}

/* line 219, app/assets/stylesheets/stories.scss */
.story-views svg {
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  /* line 225, app/assets/stylesheets/stories.scss */
  .stories-modal-content {
    max-width: 100%;
    height: 100%;
    max-height: none;
  }
  /* line 231, app/assets/stylesheets/stories.scss */
  .story-progress-container {
    top: 8px;
    left: 8px;
    right: 8px;
  }
  /* line 237, app/assets/stylesheets/stories.scss */
  .story-header {
    padding: 40px 12px 12px;
  }
  /* line 241, app/assets/stylesheets/stories.scss */
  .story-creator-avatar {
    width: 36px;
    height: 36px;
  }
  /* line 246, app/assets/stylesheets/stories.scss */
  .story-creator-name {
    font-size: 13px;
  }
  /* line 250, app/assets/stylesheets/stories.scss */
  .story-timestamp {
    font-size: 11px;
  }
  /* line 254, app/assets/stylesheets/stories.scss */
  .story-close-btn {
    width: 32px;
    height: 32px;
  }
  /* line 259, app/assets/stylesheets/stories.scss */
  .story-caption {
    padding: 40px 16px 16px;
    font-size: 13px;
  }
  /* line 264, app/assets/stylesheets/stories.scss */
  .story-views {
    bottom: 16px;
    right: 16px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 284, app/assets/stylesheets/stories.scss */
.stories-modal.active .stories-modal-content {
  animation: slideUp 0.3s ease;
}

/* Loading State */
/* line 289, app/assets/stylesheets/stories.scss */
.story-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ff4081;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Story Actions (Like Button) */
/* line 309, app/assets/stylesheets/stories.scss */
.story-actions {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  gap: 12px;
}

/* line 318, app/assets/stylesheets/stories.scss */
.story-like-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

/* line 334, app/assets/stylesheets/stories.scss */
.story-like-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 64, 129, 0.5);
  transform: scale(1.05);
}

/* line 340, app/assets/stylesheets/stories.scss */
.story-like-btn .heart-outline {
  display: block;
  color: #fff;
}

/* line 345, app/assets/stylesheets/stories.scss */
.story-like-btn .heart-filled {
  display: none;
  color: #ff4081;
}

/* line 350, app/assets/stylesheets/stories.scss */
.story-like-btn.liked {
  background: rgba(255, 64, 129, 0.2);
  border-color: #ff4081;
}

/* line 355, app/assets/stylesheets/stories.scss */
.story-like-btn.liked .heart-outline {
  display: none;
}

/* line 359, app/assets/stylesheets/stories.scss */
.story-like-btn.liked .heart-filled {
  display: block;
  animation: heartBeat 0.3s ease;
}

/* line 364, app/assets/stylesheets/stories.scss */
.story-like-btn .likes-count {
  font-size: 14px;
  font-weight: 700;
}

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
}

/* Responsive for Actions */
@media (max-width: 768px) {
  /* line 386, app/assets/stylesheets/stories.scss */
  .story-actions {
    bottom: 16px;
    left: 16px;
  }
  /* line 391, app/assets/stylesheets/stories.scss */
  .story-like-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  /* line 396, app/assets/stylesheets/stories.scss */
  .story-like-btn svg {
    width: 24px;
    height: 24px;
  }
}
@charset "UTF-8";
/* ========================================
   MOBILE NAVIGATION - Instagram/OnlyFans Style
   ======================================== */
/* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
/* line 6, app/assets/stylesheets/mobile_navigation.scss */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* line 19, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 8px;
}

/* line 28, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #a0a0a0;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  flex: 1;
  max-width: 75px;
  min-height: 50px;
}

/* line 45, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item:active {
  transform: scale(0.95);
}

/* line 49, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item.active {
  color: #ff0074;
}

/* line 53, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  stroke-width: 1.5;
}

/* Active state: inherits magenta via currentColor on both stroke and fill
   of the SVG. Do NOT set fill explicitly here — outline icons use fill="none"
   and need it preserved, while filled icons use fill="currentColor". */
/* line 63, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item.active svg {
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.35));
}

/* Label text bajo el icono */
/* line 69, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item > span.mobile-nav-label,
.mobile-nav-item > span:last-of-type:not(.mobile-nav-badge) {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Badge wrapper - transparente en el layout */
/* line 77, app/assets/stylesheets/mobile_navigation.scss */
#mobile_messages_badge {
  display: contents !important;
}

/* ===== BADGE DE MENSAJES - Estilo Premium ===== */
/* line 82, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-badge {
  position: absolute !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: 2px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 9px;
  border: 2px solid #000;
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.5);
  z-index: 100;
  box-sizing: border-box;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(255, 64, 129, 0.5);
  }
  50% {
    box-shadow: 0 2px 12px rgba(255, 64, 129, 0.8);
  }
}

/* Avatar en el bottom nav */
/* line 116, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #a0a0a0;
  transition: border-color 0.2s ease;
}

/* line 125, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item.active .mobile-nav-avatar {
  border-color: #fff;
}

/* line 129, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-avatar-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
  border: 2px solid #a0a0a0;
  transition: border-color 0.2s ease;
}

/* line 144, app/assets/stylesheets/mobile_navigation.scss */
.mobile-nav-item.active .mobile-nav-avatar-placeholder {
  border-color: #fff;
}

/* ===== MOBILE HEADER ACTIONS ===== */
/* line 149, app/assets/stylesheets/mobile_navigation.scss */
.mobile-header-actions {
  display: none;
}

@media (max-width: 1024px) {
  /* line 154, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  /* line 160, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-header-icon {
    position: relative;
    background: none;
    border: none;
    color: #f5f5f5;
    padding: 8px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  /* line 174, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-header-icon:active {
    transform: scale(0.9);
  }
  /* line 178, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-header-icon svg {
    width: 24px;
    height: 24px;
  }
  /* Wrapper para el badge de notificaciones */
  /* line 184, app/assets/stylesheets/mobile_navigation.scss */
  #mobile_notification_badge {
    display: contents;
  }
  /* line 188, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-header-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff4081;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    z-index: 10;
  }
}

/* ===== MOBILE HAMBURGER MENU ===== */
/* line 205, app/assets/stylesheets/mobile_navigation.scss */
.mobile-hamburger-menu {
  display: none;
}

/* line 209, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* line 224, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* line 229, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  height: 100dvh;
  /* Dynamic viewport height for mobile */
  background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.6);
}

/* line 245, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-panel.active {
  right: 0;
}

/* Header with Logo */
/* line 250, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-header {
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  position: relative;
  /* Subtle gradient line */
}

/* line 261, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.5) 0%, rgba(255, 0, 116, 0.2) 50%, transparent 100%);
}

/* line 276, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* line 281, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255, 0, 116, 0.15));
}

/* line 288, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.2s ease;
}

/* line 301, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* line 305, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-close-btn:active {
  background: rgba(255, 0, 116, 0.15);
  border-color: rgba(255, 0, 116, 0.3);
  transform: scale(0.95);
}

/* line 311, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-close-btn svg {
  width: 20px;
  height: 20px;
}

/* Scrollable content area */
/* line 317, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 20px));
  -webkit-overflow-scrolling: touch;
}

/* line 325, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  color: #f5f5f5;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s ease;
  margin-bottom: 4px;
  font-size: 16px;
}

/* line 338, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item:active {
  transform: scale(0.98);
}

/* line 342, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* line 346, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  font-weight: 600;
}

/* line 351, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 357, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item .badge {
  margin-left: auto;
  background: #ff4081;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* line 367, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 16px;
}

/* Section grouping in hamburger */
/* line 374, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-section {
  display: flex;
  flex-direction: column;
}

/* line 379, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-section-label {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Montserrat', sans-serif;
}

/* button_to wrapper reset inside the drawer (form element) */
/* line 390, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items > form,
.hamburger-section > form {
  margin: 0;
  padding: 0;
  display: block;
}

/* Language selector behaves like a menu item inside the account section */
/* line 398, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items .language-selector-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 4px;
  width: 100%;
  color: #f5f5f5;
  background: transparent;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 415, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items .language-selector-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* line 419, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items .language-selector-btn:active {
  transform: scale(0.98);
}

/* line 423, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items .language-selector-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 429, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-items .language-selector-btn span {
  font-weight: 500;
}

/* User Profile in Hamburger */
/* line 435, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-user-profile {
  flex-shrink: 0;
  padding: 16px;
  background: rgba(255, 0, 116, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 442, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

/* line 454, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 459, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-link:active {
  transform: scale(0.98);
}

/* line 463, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 0, 116, 0.5);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.2);
}

/* line 473, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-avatar-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074 0%, #ff2d8a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.3);
}

/* line 488, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-info {
  flex: 1;
  min-width: 0;
}

/* line 493, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 503, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-username {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* View Profile indicator */
/* line 512, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-link::after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* line 523, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-profile-link:hover::after {
  opacity: 0.8;
}

/* Creator CTA */
/* line 528, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item.hamburger-cta {
  background: linear-gradient(135deg, #ff0074 0%, #ff2d8a 100%);
  font-weight: 600;
  margin: 8px 0;
  border: none;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.25);
}

/* line 536, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item.hamburger-cta:hover {
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.35);
  transform: translateY(-1px);
}

/* Logout item styling */
/* line 542, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item[data-turbo-method="delete"] {
  color: rgba(255, 255, 255, 0.6);
}

/* line 545, app/assets/stylesheets/mobile_navigation.scss */
.hamburger-menu-item[data-turbo-method="delete"]:hover {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 1024px) {
  /* line 553, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-bottom-nav {
    display: block;
  }
  /* line 557, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-hamburger-menu {
    display: block;
  }
  /* Add padding to main content for bottom nav */
  /* line 562, app/assets/stylesheets/mobile_navigation.scss */
  .main-feed {
    padding-bottom: 80px;
  }
  /* Adjust header for mobile */
  /* line 567, app/assets/stylesheets/mobile_navigation.scss */
  .switch-pro-header .logo-section {
    flex: 0 0 auto;
  }
  /* line 571, app/assets/stylesheets/mobile_navigation.scss */
  .switch-pro-header .search-section {
    flex: 1;
  }
}

@media (max-width: 768px) {
  /* line 577, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-items {
    padding: 0 4px;
  }
  /* line 581, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-item {
    max-width: 70px;
    padding: 6px 4px;
  }
  /* line 586, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-item svg {
    width: 24px;
    height: 24px;
  }
  /* line 591, app/assets/stylesheets/mobile_navigation.scss */
  .hamburger-panel {
    width: 280px;
  }
}

@media (max-width: 480px) {
  /* Ocultar solo el label "Messages", NO el badge */
  /* line 598, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-item > span:last-of-type:not(.mobile-nav-badge) {
    display: none;
  }
  /* line 602, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-item {
    min-height: 48px;
  }
  /* Asegurar que el badge siempre sea visible */
  /* line 607, app/assets/stylesheets/mobile_navigation.scss */
  .mobile-nav-badge {
    display: flex !important;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · MOBILE HAMBURGER MENU OVERRIDE
   -----------------------------------------------------------------
   Override visual del drawer mobile autenticado (fan + creator).
   Mantiene los selectores legacy `.hamburger-*` de mobile_navigation.scss
   (preservando estructura HTML, JS, button_to forms, language-selector).

   Patrón: glass blur + radial glow brand + stagger reveal,
   item activo con border-left + arrow + glow, CTA con sheen sweep.
   Consistente con `_components.exo-mobile-menu.scss` del landing.

   Carga DESPUÉS de mobile_navigation.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   BACKDROP
   ----------------------------------------------------------------- */
/* line 19, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-backdrop {
  background: rgba(5, 3, 8, 0.78) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* -----------------------------------------------------------------
   PANEL · glass blur + radial glow brand
   ----------------------------------------------------------------- */
/* line 32, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6) !important;
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
  isolation: isolate;
  position: fixed;
}

/* Radial glow brand sutil en esquina superior derecha */
/* line 45, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 70%;
  height: 50%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* -----------------------------------------------------------------
   HEADER (logo + close)
   ----------------------------------------------------------------- */
/* line 61, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 16px 20px !important;
  /* Línea brand top (firma del modal) */
  /* La línea inferior (firma sutil) */
}

/* line 67, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.6) 50%, transparent 100%);
  pointer-events: none;
}

/* line 79, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-header::after {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 0, 255, 0.18) 35%, rgba(255, 0, 116, 0.22) 65%, transparent 100%) !important;
}

/* line 90, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-logo img {
  height: 48px !important;
  width: auto !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.45)) drop-shadow(0 0 32px rgba(180, 0, 255, 0.25)) !important;
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* line 97, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-logo:hover img {
  filter: drop-shadow(0 0 22px rgba(255, 0, 116, 0.7)) drop-shadow(0 0 48px rgba(180, 0, 255, 0.4)) !important;
  transform: scale(1.04);
}

/* line 103, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-close-btn {
  display: grid !important;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 119, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-close-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* line 121, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-close-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.35) !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
}

/* line 128, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-close-btn:active {
  background: rgba(255, 0, 116, 0.15) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
}

/* -----------------------------------------------------------------
   USER PROFILE (avatar + name + handle)
   ----------------------------------------------------------------- */
/* line 138, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-user-profile {
  margin: 16px 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 146, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-user-profile:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* line 151, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-user-profile img,
.hamburger-profile-avatar-placeholder {
  border: 2px solid transparent !important;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box, linear-gradient(135deg, #ff0074, #ff3d9a, #b000ff) border-box !important;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.3);
}

/* line 160, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-profile-avatar-placeholder {
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* line 166, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-profile-name {
  color: #f5f5f5 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* line 173, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-profile-username {
  color: #d8b4fe !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* -----------------------------------------------------------------
   SECTION LABELS (DESCUBRIR / CUENTA / DISCOVER / CREATE / MY STUDIO)
   ----------------------------------------------------------------- */
/* line 183, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-section-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.35) !important;
  padding: 16px 16px 6px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Línea sutil al lado derecho */
}

/* line 196, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
}

/* La primera section label sin padding-top extra */
/* line 205, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-items > .hamburger-section:first-child .hamburger-section-label,
.hamburger-section:first-of-type .hamburger-section-label {
  padding-top: 4px !important;
}

/* -----------------------------------------------------------------
   DIVIDER
   ----------------------------------------------------------------- */
/* line 214, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-divider {
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 8px 16px !important;
}

/* -----------------------------------------------------------------
   MENU ITEMS (navegación)
   ----------------------------------------------------------------- */
/* line 223, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item {
  position: relative;
  padding: 14px 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* Stagger reveal cuando .active el panel */
  opacity: 0;
  transform: translateX(20px);
}

/* line 246, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Stagger por nth-of-type para no contar dividers/labels (que son <div>) */
/* line 257, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(1),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(1) {
  transition-delay: 80ms;
}

/* line 259, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(2),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(2) {
  transition-delay: 130ms;
}

/* line 261, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(3),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(3) {
  transition-delay: 180ms;
}

/* line 263, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(4),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(4) {
  transition-delay: 230ms;
}

/* line 265, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(5),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(5) {
  transition-delay: 280ms;
}

/* line 267, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(6),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(6) {
  transition-delay: 330ms;
}

/* line 269, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(7),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(7) {
  transition-delay: 380ms;
}

/* line 271, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(8),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(8) {
  transition-delay: 430ms;
}

/* line 273, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(9),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(9) {
  transition-delay: 480ms;
}

/* line 275, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-panel.active .hamburger-menu-items a:nth-of-type(10),
.hamburger-panel.active .hamburger-menu-items button:nth-of-type(10) {
  transition-delay: 530ms;
}

/* line 278, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}

/* Arrow indicator al final del item */
/* line 287, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* line 300, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* line 305, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item:hover svg {
  opacity: 1;
}

/* line 307, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* line 312, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item:active {
  transform: scale(0.98);
}

/* Active state (item navegacional actual) · border-left brand + glow halo */
/* line 317, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.active {
  color: #fff !important;
  background: linear-gradient(95deg, rgba(255, 0, 116, 0.2) 0%, rgba(180, 0, 255, 0.08) 100%) !important;
  box-shadow: inset 3px 0 0 #ff0074, 0 0 20px rgba(255, 0, 116, 0.1) !important;
  font-weight: 600 !important;
}

/* line 325, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.active svg {
  color: #ff3d9a !important;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.55));
}

/* line 331, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.active::after {
  opacity: 1;
  transform: translateX(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3d9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------
   CTA · "Ser Creador" / "Únete" · gradient brand lleno + sheen
   ----------------------------------------------------------------- */
/* line 342, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  /* Sheen sweep al hover (delight CTA) */
}

/* line 351, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: -1;
}

/* line 362, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta svg {
  color: #fff !important;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* line 368, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta::after {
  opacity: 1;
  transform: translateX(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* line 374, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
}

/* line 382, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item.hamburger-cta:hover::before {
  transform: translateX(120%);
}

/* -----------------------------------------------------------------
   BADGE (notificaciones / mensajes count)
   ----------------------------------------------------------------- */
/* line 389, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item .badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.35) !important;
  /* Reset el margin-left del legacy porque ahora hay arrow después */
  margin-left: auto !important;
}

/* Si hay badge + arrow juntos: mover el arrow detrás del badge */
/* line 403, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-item .badge + .hamburger-menu-item-arrow,
.hamburger-menu-item:has(.badge)::after {
  margin-left: 8px !important;
}

/* -----------------------------------------------------------------
   LANGUAGE SELECTOR (botón en sección Cuenta)
   ----------------------------------------------------------------- */
/* line 412, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.language-selector-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 12px !important;
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 421, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.language-selector-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* line 426, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.language-selector-btn svg {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

/* line 433, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.language-selector-btn:hover svg {
  opacity: 1;
}

/* -----------------------------------------------------------------
   button_to forms (logout, etc) wrapper
   ----------------------------------------------------------------- */
/* line 440, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-items > form,
.hamburger-section > form {
  /* Asegurar que los buttons dentro reciban estilos del item */
}

/* line 443, app/assets/stylesheets/_components.exo-hamburger-menu.scss */
.hamburger-menu-items > form button.hamburger-menu-item,
.hamburger-section > form button.hamburger-menu-item {
  width: 100%;
  cursor: pointer;
  border: none;
  text-align: left;
  font-family: inherit;
}
/* Flash Toast Notifications - Exotha Design System */
/* line 3, app/assets/stylesheets/toast_notifications.scss */
.flash-toast {
  position: fixed;
  bottom: 30px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 16px;
  min-width: 280px;
  max-width: 400px;
  background: var(--color-gray-02, #282828);
  border: 1px solid var(--color-gray-03, #363636);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--font-secondary, "Rubik"), sans-serif;
  overflow: hidden;
  /* Entrance: start invisible + shifted down */
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: none;
}

/* line 27, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--visible {
  animation: flashToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* line 31, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--exit {
  animation: flashToastOut 0.3s ease forwards;
}

/* Icon circle */
/* line 36, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 46, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--notice .flash-toast__icon {
  background: linear-gradient(135deg, var(--color-primary-01, #ff0074), var(--color-primary-02, #ff3d9a));
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.3);
}

/* line 51, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--alert .flash-toast__icon {
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  box-shadow: 0 0 16px rgba(220, 53, 69, 0.3);
}

/* line 56, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Text */
/* line 67, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f5;
  line-height: 1.4;
}

/* Close button */
/* line 76, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-gray-05, #949494);
  transition: color 0.2s ease;
  line-height: 0;
}

/* line 87, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__close:hover {
  color: #f5f5f5;
}

/* line 91, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Progress bar */
/* line 100, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(1);
  border-radius: 0 0 12px 12px;
}

/* line 111, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--notice .flash-toast__progress {
  background: linear-gradient(90deg, var(--color-primary-01, #ff0074), var(--color-primary-02, #ff3d9a));
}

/* line 115, app/assets/stylesheets/toast_notifications.scss */
.flash-toast--alert .flash-toast__progress {
  background: linear-gradient(90deg, #dc3545, #ff6b6b);
}

/* line 119, app/assets/stylesheets/toast_notifications.scss */
.flash-toast__progress--active {
  animation: flashToastProgress linear forwards;
}

/* Animations */
@keyframes flashToastIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes flashToastOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

@keyframes flashToastProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* line 157, app/assets/stylesheets/toast_notifications.scss */
  .flash-toast {
    bottom: 90px;
    right: 12px;
    left: 12px;
    min-width: auto;
    max-width: none;
  }
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/creator_profile.scss */
.creator-profile {
  background: #000;
}

/* Cover/Banner Section */
/* line 6, app/assets/stylesheets/creator_profile.scss */
.profile-cover {
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

/* line 14, app/assets/stylesheets/creator_profile.scss */
.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 20, app/assets/stylesheets/creator_profile.scss */
.profile-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Profile Header Container */
/* line 27, app/assets/stylesheets/creator_profile.scss */
.profile-header {
  max-width: 935px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Avatar Section - Overlapping cover */
/* line 35, app/assets/stylesheets/creator_profile.scss */
.profile-avatar-section {
  position: relative;
  margin-top: -70px;
  margin-bottom: 20px;
}

/* line 41, app/assets/stylesheets/creator_profile.scss */
.profile-avatar {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid #000;
  overflow: visible;
}

/* line 50, app/assets/stylesheets/creator_profile.scss */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* line 57, app/assets/stylesheets/creator_profile.scss */
.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}

/* line 70, app/assets/stylesheets/creator_profile.scss */
.online-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: #28a745;
  border-radius: 50%;
  border: 4px solid #000;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.6);
}

/* Mobile action buttons - hidden on desktop */
/* line 84, app/assets/stylesheets/creator_profile.scss */
.mobile-action-buttons {
  display: none;
}

/* Profile Info */
/* line 89, app/assets/stylesheets/creator_profile.scss */
.profile-info-section {
  margin-bottom: 24px;
}

/* line 93, app/assets/stylesheets/creator_profile.scss */
.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 20px;
  flex-wrap: wrap;
}

/* line 102, app/assets/stylesheets/creator_profile.scss */
.profile-name-details {
  flex: 1;
  min-width: 0;
}

/* line 107, app/assets/stylesheets/creator_profile.scss */
.creator-name {
  font-size: 26px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 4px;
  margin-right: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* line 117, app/assets/stylesheets/creator_profile.scss */
.creator-username {
  font-size: 15px;
  font-weight: 400;
  color: #8e8e8e;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* line 125, app/assets/stylesheets/creator_profile.scss */
.profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* line 132, app/assets/stylesheets/creator_profile.scss */
.profile-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #b0b0b0;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 145, app/assets/stylesheets/creator_profile.scss */
.profile-icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* line 152, app/assets/stylesheets/creator_profile.scss */
.creator-bio {
  color: #f5f5f5;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 15px;
}

/* line 162, app/assets/stylesheets/creator_profile.scss */
.profile-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: none;
  flex-wrap: wrap;
}

/* Social Media Badges */
/* line 172, app/assets/stylesheets/creator_profile.scss */
.social-badges {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 180, app/assets/stylesheets/creator_profile.scss */
.social-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #8e8e8e;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* line 193, app/assets/stylesheets/creator_profile.scss */
.social-badge:hover {
  transform: translateY(-2px);
}

/* line 197, app/assets/stylesheets/creator_profile.scss */
.social-badge.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.4);
}

/* line 203, app/assets/stylesheets/creator_profile.scss */
.social-badge.twitter:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* line 209, app/assets/stylesheets/creator_profile.scss */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* line 216, app/assets/stylesheets/creator_profile.scss */
.stat-item svg {
  display: none;
}

/* line 220, app/assets/stylesheets/creator_profile.scss */
.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
}

/* line 226, app/assets/stylesheets/creator_profile.scss */
.stat-label {
  color: #8e8e8e;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* line 234, app/assets/stylesheets/creator_profile.scss */
.subscribe-btn {
  padding: 7px 16px;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

/* line 247, app/assets/stylesheets/creator_profile.scss */
.subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 64, 129, 0.3);
}

/* line 252, app/assets/stylesheets/creator_profile.scss */
.subscribed-btn {
  background: var(--color-gray-03);
  cursor: default;
}

/* line 257, app/assets/stylesheets/creator_profile.scss */
.subscribed-btn:hover {
  transform: none;
  box-shadow: none;
}

/* line 262, app/assets/stylesheets/creator_profile.scss */
.chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  border: 2px solid var(--color-gray-03);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  margin-top: 10px;
  transition: all 0.3s ease;
}

/* line 278, app/assets/stylesheets/creator_profile.scss */
.chat-btn:hover {
  background: var(--color-gray-03);
  border-color: var(--color-gray-04);
  transform: translateY(-2px);
}

/* line 284, app/assets/stylesheets/creator_profile.scss */
.chat-btn svg {
  width: 20px;
  height: 20px;
}

/* Profile Actions for Own Profile */
/* line 290, app/assets/stylesheets/creator_profile.scss */
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 296, app/assets/stylesheets/creator_profile.scss */
.dashboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--color-primary-01) 0%, var(--color-primary-02) 100%);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* line 311, app/assets/stylesheets/creator_profile.scss */
.dashboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(223, 76, 66, 0.3);
}

/* line 316, app/assets/stylesheets/creator_profile.scss */
.dashboard-btn svg {
  width: 20px;
  height: 20px;
}

/* line 321, app/assets/stylesheets/creator_profile.scss */
.unsubscribe-btn {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-primary-02);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* line 330, app/assets/stylesheets/creator_profile.scss */
.unsubscribe-btn:hover {
  color: var(--color-primary-01);
}

/* line 334, app/assets/stylesheets/creator_profile.scss */
.subscription-price {
  color: var(--color-gray-05);
  font-size: 14px;
  margin-top: 10px;
}

/* line 340, app/assets/stylesheets/creator_profile.scss */
.content-section {
  max-width: 935px;
  margin: 0 auto;
  padding: 0 20px;
}

/* line 346, app/assets/stylesheets/creator_profile.scss */
.section-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0;
  position: relative;
}

/* line 356, app/assets/stylesheets/creator_profile.scss */
.section-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: #8e8e8e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid transparent;
  margin-top: -1px;
  transition: all 0.2s;
}

/* line 372, app/assets/stylesheets/creator_profile.scss */
.section-tab.active {
  color: #f5f5f5;
  border-top-color: #f5f5f5;
}

/* line 377, app/assets/stylesheets/creator_profile.scss */
.section-tab svg {
  width: 12px;
  height: 12px;
}

/* line 382, app/assets/stylesheets/creator_profile.scss */
.view-toggles {
  position: absolute;
  right: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

/* line 390, app/assets/stylesheets/creator_profile.scss */
.view-toggle-btn {
  background: none;
  border: none;
  color: #8e8e8e;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

/* line 402, app/assets/stylesheets/creator_profile.scss */
.view-toggle-btn:hover {
  color: #f5f5f5;
}

/* line 406, app/assets/stylesheets/creator_profile.scss */
.view-toggle-btn.active {
  color: #f5f5f5;
}

/* line 410, app/assets/stylesheets/creator_profile.scss */
.view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* line 415, app/assets/stylesheets/creator_profile.scss */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* line 422, app/assets/stylesheets/creator_profile.scss */
.section-title {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

/* line 429, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 24px;
  transition: all 0.3s ease;
}

/* Vista lineal - estilo OnlyFans */
/* line 438, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view {
  grid-template-columns: 1fr;
  gap: 24px;
}

/* line 443, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .profile-content-item {
  aspect-ratio: auto;
  max-width: 100%;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding-bottom: 0;
  overflow: hidden;
}

/* Mostrar header en vista lista */
/* line 454, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .list-view-header {
  display: flex;
}

/* Mostrar descripción en vista lista */
/* line 459, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .list-view-caption {
  display: block;
}

/* line 463, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .profile-content-image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
}

/* line 471, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .profile-content-image a {
  width: 100%;
  height: auto;
}

/* line 476, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .profile-content-image img,
.creator-profile .content-grid.list-view .profile-content-image video {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

/* line 484, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .hover-overlay {
  display: none;
}

/* line 488, app/assets/stylesheets/creator_profile.scss */
.creator-profile .content-grid.list-view .list-view-footer {
  display: flex;
}

@media (max-width: 768px) {
  /* line 493, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid.list-view {
    gap: 16px;
  }
  /* line 497, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid.list-view .profile-content-item {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  /* line 503, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid.list-view .profile-content-image {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  /* line 509, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid.list-view .profile-content-image img,
.creator-profile .content-grid.list-view .profile-content-image video {
    max-height: 500px;
  }
}

@media (max-width: 768px) {
  /* line 516, app/assets/stylesheets/creator_profile.scss */
  .profile-cover {
    height: 180px;
  }
  /* Avatar con botones a la derecha - estilo Fansly */
  /* line 521, app/assets/stylesheets/creator_profile.scss */
  .profile-avatar-section {
    margin-top: -50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 0;
  }
  /* line 529, app/assets/stylesheets/creator_profile.scss */
  .profile-avatar {
    width: 100px;
    height: 100px;
    border-width: 3px;
    border-color: transparent;
    background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #ff0074 0%, #ff4081 50%, #ff0074 100%) border-box;
    box-shadow: 0 4px 20px rgba(255, 0, 116, 0.25);
  }
  /* line 539, app/assets/stylesheets/creator_profile.scss */
  .avatar-placeholder {
    font-size: 40px;
  }
  /* line 543, app/assets/stylesheets/creator_profile.scss */
  .online-badge {
    width: 18px;
    height: 18px;
    bottom: 8px;
    right: 8px;
    border-width: 3px;
    border-color: #1a1a1a;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6), 0 0 16px rgba(255, 0, 116, 0.2);
  }
  /* Botones de acción a la derecha del avatar */
  /* line 554, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-buttons {
    display: flex !important;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
  }
  /* line 561, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 0, 116, 0.08);
    border: 1px solid rgba(255, 0, 116, 0.2);
    color: #f5f5f5;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  /* line 575, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn:hover {
    background: rgba(255, 0, 116, 0.15);
    border-color: rgba(255, 64, 129, 0.4);
    box-shadow: 0 0 12px rgba(255, 0, 116, 0.2);
  }
  /* line 581, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn svg {
    width: 20px;
    height: 20px;
  }
  /* line 586, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.primary {
    background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
    border: none;
    width: auto;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
  }
  /* line 597, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
  }
  /* line 602, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.unsubscribe-trigger {
    background: rgba(255, 255, 255, 0.08);
  }
  /* line 606, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.unsubscribe-trigger:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
  }
  /* Mobile cancelled badge */
  /* line 613, app/assets/stylesheets/creator_profile.scss */
  .mobile-cancelled-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 193, 7, 0.3);
  }
  /* line 626, app/assets/stylesheets/creator_profile.scss */
  .mobile-cancelled-badge svg {
    flex-shrink: 0;
  }
  /* Renew button style */
  /* line 631, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.renew-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
  }
  /* line 636, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.renew-btn:hover {
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.4);
  }
  /* Promo ribbon — compact horizontal strip below avatar row */
  /* line 641, app/assets/stylesheets/creator_profile.scss */
  .promo-ribbon--mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 16px 0;
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(255, 0, 116, 0.12) 0%, rgba(255, 61, 154, 0.06) 100%);
    border: 1px solid rgba(255, 0, 116, 0.2);
    border-radius: 8px;
    animation: promoPulse 2.5s ease-in-out infinite;
    margin-bottom: 5px;
  }
  /* line 654, app/assets/stylesheets/creator_profile.scss */
  .promo-ribbon--mobile .promo-ribbon__discount {
    font-size: 11px;
    font-weight: 700;
    color: #ff4081;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* line 662, app/assets/stylesheets/creator_profile.scss */
  .promo-ribbon--mobile .promo-ribbon__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 0, 116, 0.3);
  }
  /* line 668, app/assets/stylesheets/creator_profile.scss */
  .promo-ribbon--mobile .promo-ribbon__code {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: 1.5px;
    background: rgba(255, 0, 116, 0.15);
    padding: 2px 10px;
    border-radius: 4px;
  }
  /* Info section más compacta */
  /* line 681, app/assets/stylesheets/creator_profile.scss */
  .profile-info-section {
    margin-bottom: 16px;
  }
  /* line 685, app/assets/stylesheets/creator_profile.scss */
  .profile-name-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
  }
  /* line 692, app/assets/stylesheets/creator_profile.scss */
  .profile-name-details {
    width: 100%;
  }
  /* Nombre y username en formato compacto */
  /* line 697, app/assets/stylesheets/creator_profile.scss */
  .creator-name {
    font-size: 20px;
    margin-bottom: 2px;
  }
  /* line 702, app/assets/stylesheets/creator_profile.scss */
  .creator-username {
    font-size: 14px;
    display: inline;
    background: linear-gradient(90deg, #8e8e8e 0%, #ff4081 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  /* Ocultar botones desktop en mobile */
  /* line 712, app/assets/stylesheets/creator_profile.scss */
  .profile-actions {
    display: none !important;
  }
  /* Stats inline con iconos - estilo compacto */
  /* line 717, app/assets/stylesheets/creator_profile.scss */
  .profile-stats {
    flex-direction: row;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 0, 116, 0.3) 0%, rgba(255, 64, 129, 0.1) 50%, transparent 100%) 1;
  }
  /* line 726, app/assets/stylesheets/creator_profile.scss */
  .stat-item {
    flex-direction: row;
    gap: 5px;
    align-items: center;
  }
  /* line 732, app/assets/stylesheets/creator_profile.scss */
  .stat-item svg {
    display: block;
    flex-shrink: 0;
    color: #ff4081;
  }
  /* line 738, app/assets/stylesheets/creator_profile.scss */
  .stat-value {
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #f5f5f5 0%, #ff4081 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  /* line 747, app/assets/stylesheets/creator_profile.scss */
  .stat-label {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: #8e8e8e;
  }
  /* Social badges más compactos */
  /* line 755, app/assets/stylesheets/creator_profile.scss */
  .social-badges {
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, rgba(255, 64, 129, 0.15) 50%, transparent 100%) 1;
  }
  /* line 763, app/assets/stylesheets/creator_profile.scss */
  .social-badge {
    width: 32px;
    height: 32px;
    background: rgba(255, 0, 116, 0.08);
    border: 1px solid rgba(255, 0, 116, 0.15);
  }
  /* line 770, app/assets/stylesheets/creator_profile.scss */
  .social-badge svg {
    width: 16px;
    height: 16px;
    color: #ff4081;
  }
  /* Bio más compacto */
  /* line 777, app/assets/stylesheets/creator_profile.scss */
  .creator-bio {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}

/* Mobile Edge-to-Edge Layout - OnlyFans Style */
@media (max-width: 1024px) {
  /* Override social-layout padding for creator profiles */
  /* line 787, app/assets/stylesheets/creator_profile.scss */
  .social-layout {
    padding: 0 !important;
    gap: 0 !important;
  }
  /* line 792, app/assets/stylesheets/creator_profile.scss */
  .main-feed {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  /* line 800, app/assets/stylesheets/creator_profile.scss */
  .creator-profile {
    margin: 0;
    width: 100%;
    overflow: hidden;
  }
  /* line 806, app/assets/stylesheets/creator_profile.scss */
  .profile-cover {
    border-radius: 0;
  }
  /* line 810, app/assets/stylesheets/creator_profile.scss */
  .profile-header {
    padding: 0 16px;
  }
  /* line 814, app/assets/stylesheets/creator_profile.scss */
  .content-section {
    padding: 0;
  }
  /* line 818, app/assets/stylesheets/creator_profile.scss */
  .section-tabs {
    padding: 0 16px;
    margin-bottom: 0;
  }
  /* line 823, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 0;
    border-radius: 0;
  }
  /* line 830, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid .profile-content-item {
    border-radius: 0;
  }
  /* line 834, app/assets/stylesheets/creator_profile.scss */
  .view-toggles {
    right: 16px;
  }
}

@media (max-width: 480px) {
  /* line 840, app/assets/stylesheets/creator_profile.scss */
  .profile-header {
    padding: 0 12px;
  }
  /* line 844, app/assets/stylesheets/creator_profile.scss */
  .profile-cover {
    height: 150px;
  }
  /* line 848, app/assets/stylesheets/creator_profile.scss */
  .profile-avatar {
    width: 85px;
    height: 85px;
    box-shadow: 0 4px 16px rgba(255, 0, 116, 0.2);
  }
  /* line 854, app/assets/stylesheets/creator_profile.scss */
  .avatar-placeholder {
    font-size: 32px;
  }
  /* line 858, app/assets/stylesheets/creator_profile.scss */
  .profile-avatar-section {
    margin-top: -39px;
  }
  /* line 862, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-buttons {
    gap: 6px;
  }
  /* line 866, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn {
    width: 36px;
    height: 36px;
  }
  /* line 871, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn svg {
    width: 18px;
    height: 18px;
  }
  /* line 876, app/assets/stylesheets/creator_profile.scss */
  .mobile-action-btn.primary {
    padding: 0 12px;
    font-size: 12px;
    height: 36px;
    box-shadow: 0 2px 8px rgba(255, 0, 116, 0.3);
  }
  /* line 883, app/assets/stylesheets/creator_profile.scss */
  .mobile-cancelled-badge {
    font-size: 9px;
    padding: 3px 8px;
  }
  /* line 888, app/assets/stylesheets/creator_profile.scss */
  .creator-name {
    font-size: 18px;
  }
  /* line 892, app/assets/stylesheets/creator_profile.scss */
  .creator-username {
    font-size: 13px;
  }
  /* line 896, app/assets/stylesheets/creator_profile.scss */
  .stat-value {
    font-size: 14px;
  }
  /* line 900, app/assets/stylesheets/creator_profile.scss */
  .stat-item svg {
    width: 14px;
    height: 14px;
  }
  /* line 905, app/assets/stylesheets/creator_profile.scss */
  .section-tabs {
    padding: 0 12px;
  }
  /* line 909, app/assets/stylesheets/creator_profile.scss */
  .creator-profile .content-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0px;
  }
  /* line 915, app/assets/stylesheets/creator_profile.scss */
  .view-toggles {
    right: 12px;
  }
  /* Stats más compactos */
  /* line 920, app/assets/stylesheets/creator_profile.scss */
  .profile-stats {
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  /* line 926, app/assets/stylesheets/creator_profile.scss */
  .stat-value {
    font-size: 14px;
  }
  /* line 930, app/assets/stylesheets/creator_profile.scss */
  .stat-label {
    font-size: 11px;
  }
  /* Social badges aún más compactos */
  /* line 935, app/assets/stylesheets/creator_profile.scss */
  .social-badges {
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  /* line 941, app/assets/stylesheets/creator_profile.scss */
  .social-badge {
    width: 30px;
    height: 30px;
  }
  /* line 946, app/assets/stylesheets/creator_profile.scss */
  .social-badge svg {
    width: 14px;
    height: 14px;
  }
  /* Bio más compacto */
  /* line 952, app/assets/stylesheets/creator_profile.scss */
  .creator-bio {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Profile Menu (three dots dropdown) */
/* line 960, app/assets/stylesheets/creator_profile.scss */
.profile-menu-container {
  position: relative;
}

/* line 964, app/assets/stylesheets/creator_profile.scss */
.profile-menu-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-gray-05, #8e8e8e);
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 977, app/assets/stylesheets/creator_profile.scss */
.profile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* line 982, app/assets/stylesheets/creator_profile.scss */
.profile-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--color-gray-02, #1f1f1f);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  min-width: 160px;
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}

/* line 997, app/assets/stylesheets/creator_profile.scss */
.profile-menu-dropdown.active {
  display: block;
  animation: fadeIn 0.15s ease;
}

/* line 1002, app/assets/stylesheets/creator_profile.scss */
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--color-gray-06, #c9c9c9);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* line 1017, app/assets/stylesheets/creator_profile.scss */
.profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* line 1022, app/assets/stylesheets/creator_profile.scss */
.profile-menu-item-danger {
  color: #dc3545;
}

/* line 1026, app/assets/stylesheets/creator_profile.scss */
.profile-menu-item-danger:hover {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* line 1031, app/assets/stylesheets/creator_profile.scss */
.share-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f1f1f;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  border: 1px solid rgba(255, 0, 116, 0.3);
  animation: toastIn 0.2s ease;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* line 1053, app/assets/stylesheets/creator_profile.scss */
.promo-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.25);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ff4081;
  animation: promoPulse 2s ease-in-out infinite;
}

/* line 1066, app/assets/stylesheets/creator_profile.scss */
.promo-profile-badge svg {
  flex-shrink: 0;
  stroke: #ff4081;
}

/* line 1072, app/assets/stylesheets/creator_profile.scss */
.promo-profile-code {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(255, 0, 116, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* line 1084, app/assets/stylesheets/creator_profile.scss */
.promo-ribbon {
  display: none;
}

/* line 1088, app/assets/stylesheets/creator_profile.scss */
.promo-ribbon--mobile {
  display: none;
}

@keyframes promoPulse {
  0%, 100% {
    border-color: rgba(255, 0, 116, 0.25);
  }
  50% {
    border-color: rgba(255, 0, 116, 0.5);
    box-shadow: 0 0 12px rgba(255, 0, 116, 0.12);
  }
}

/* ========================================
   PINNED CONTENT CAROUSEL
   OnlyFans-style horizontal scroll
   ======================================== */
/* line 1102, app/assets/stylesheets/creator_profile.scss */
.pinned-carousel-section {
  padding: 16px 20px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 1107, app/assets/stylesheets/creator_profile.scss */
.pinned-carousel-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

/* line 1117, app/assets/stylesheets/creator_profile.scss */
.pinned-carousel-scroll::-webkit-scrollbar {
  display: none;
}

/* line 1122, app/assets/stylesheets/creator_profile.scss */
.pinned-card {
  flex: 0 0 auto;
  width: 140px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s ease;
  text-align: left;
}

/* line 1133, app/assets/stylesheets/creator_profile.scss */
.pinned-card:hover {
  transform: scale(1.03);
}

/* line 1137, app/assets/stylesheets/creator_profile.scss */
.pinned-card:active {
  transform: scale(0.98);
}

/* line 1142, app/assets/stylesheets/creator_profile.scss */
.pinned-card__media {
  position: relative;
  width: 140px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1a;
}

/* line 1150, app/assets/stylesheets/creator_profile.scss */
.pinned-card__media img, .pinned-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 1157, app/assets/stylesheets/creator_profile.scss */
.pinned-card__media img.blurred {
  filter: blur(4px);
  transform: scale(1.05);
}

/* line 1163, app/assets/stylesheets/creator_profile.scss */
.pinned-card__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 1177, app/assets/stylesheets/creator_profile.scss */
.pinned-card__gallery-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
}

/* line 1194, app/assets/stylesheets/creator_profile.scss */
.pinned-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
}

/* line 1201, app/assets/stylesheets/creator_profile.scss */
.pinned-card__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* line 1209, app/assets/stylesheets/creator_profile.scss */
.pinned-card__title {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #c9c9c9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

@media (max-width: 768px) {
  /* line 1221, app/assets/stylesheets/creator_profile.scss */
  .pinned-carousel-section {
    padding: 12px 12px 6px;
  }
  /* line 1225, app/assets/stylesheets/creator_profile.scss */
  .pinned-carousel-scroll {
    gap: 6px;
  }
  /* line 1229, app/assets/stylesheets/creator_profile.scss */
  .pinned-card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  /* line 1235, app/assets/stylesheets/creator_profile.scss */
  .pinned-card__media {
    width: 100%;
    height: 155px;
  }
}

/* ========================================
   PINNED CONTENT VIEWER (Story-like)
   ======================================== */
/* line 1245, app/assets/stylesheets/creator_profile.scss */
.pv-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* line 1256, app/assets/stylesheets/creator_profile.scss */
.pv-modal.active {
  opacity: 1;
  visibility: visible;
}

/* line 1262, app/assets/stylesheets/creator_profile.scss */
.pv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
}

/* line 1269, app/assets/stylesheets/creator_profile.scss */
.pv-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: pvSlideUp 0.3s ease;
}

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

/* line 1294, app/assets/stylesheets/creator_profile.scss */
.pv-progress {
  display: flex;
  gap: 3px;
  padding: 10px 12px 0;
  position: relative;
  z-index: 5;
}

/* line 1302, app/assets/stylesheets/creator_profile.scss */
.pv-progress-bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

/* line 1311, app/assets/stylesheets/creator_profile.scss */
.pv-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #ff0074;
}

/* line 1321, app/assets/stylesheets/creator_profile.scss */
.pv-progress-bar.completed .pv-progress-fill {
  width: 100%;
  background: #f5f5f5;
}

/* line 1326, app/assets/stylesheets/creator_profile.scss */
.pv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  position: relative;
  z-index: 5;
}

/* line 1335, app/assets/stylesheets/creator_profile.scss */
.pv-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 1341, app/assets/stylesheets/creator_profile.scss */
.pv-creator-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
}

/* line 1348, app/assets/stylesheets/creator_profile.scss */
.pv-timestamp {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
}

/* line 1354, app/assets/stylesheets/creator_profile.scss */
.pv-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

/* line 1368, app/assets/stylesheets/creator_profile.scss */
.pv-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* line 1373, app/assets/stylesheets/creator_profile.scss */
.pv-media {
  position: relative;
  width: 100%;
  max-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* line 1383, app/assets/stylesheets/creator_profile.scss */
.pv-media img, .pv-media video {
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

/* line 1390, app/assets/stylesheets/creator_profile.scss */
.pv-gallery-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
}

/* line 1404, app/assets/stylesheets/creator_profile.scss */
.pv-caption {
  padding: 12px 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #c9c9c9;
  line-height: 1.5;
  max-height: 80px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 1415, app/assets/stylesheets/creator_profile.scss */
.pv-nav-left,
.pv-nav-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  cursor: pointer;
  z-index: 2;
}

/* line 1425, app/assets/stylesheets/creator_profile.scss */
.pv-nav-left {
  left: 0;
}

/* line 1429, app/assets/stylesheets/creator_profile.scss */
.pv-nav-right {
  right: 0;
}

@media (max-width: 768px) {
  /* line 1434, app/assets/stylesheets/creator_profile.scss */
  .pv-container {
    max-width: 100%;
    /* 100% (not 100vh) inherits the parent .pv-modal visible size,
       which follows mobile Chrome URL bar show/hide. */
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  /* line 1443, app/assets/stylesheets/creator_profile.scss */
  .pv-media {
    /* flex: 1 + min-height: 0 lets the media fill remaining space
       without overflowing. No 100vh math needed. */
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  /* line 1450, app/assets/stylesheets/creator_profile.scss */
  .pv-media img, .pv-media video {
    max-height: 100%;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · CREATOR PROFILE OVERRIDE
   -----------------------------------------------------------------
   Override visual del perfil /@username.
   Mantiene los selectores legacy de creator_profile.scss (preservando
   estructura HTML, lógica de subscriptions, promociones, polls, etc).
   Solo redibuja: cover, avatar, identity, subscribe button, stats,
   social badges, tabs y modales (tip + unsubscribe).

   Carga DESPUÉS de creator_profile.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   BASE
   ----------------------------------------------------------------- */
/* line 17, app/assets/stylesheets/_components.exo-creator-profile.scss */
.creator-profile {
  background: #0a0a0a !important;
  position: relative;
}

/* -----------------------------------------------------------------
   COVER · tratamiento neón con gradient brand
   ----------------------------------------------------------------- */
/* line 26, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-cover {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a0820 0%, #12050d 50%, #0d0812 100%) !important;
  isolation: isolate;
}

/* Glow brand muy sutil desde las esquinas inferiores (atmósfera, no overlay) */
/* line 34, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 80% 100%, rgba(180, 0, 255, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 15% 100%, rgba(255, 0, 116, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Línea brand sutil en el borde inferior del cover */
/* line 46, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-cover::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(180, 0, 255, 0.18) 40%, rgba(255, 0, 116, 0.22) 60%, transparent 100%);
  z-index: 2;
}

/* line 63, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-cover img {
  filter: saturate(0.95) brightness(0.85);
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 68, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-cover-placeholder {
  background: linear-gradient(135deg, #1a0820 0%, #12050d 50%, #0d0812 100%) !important;
}

/* -----------------------------------------------------------------
   AVATAR · ring gradient brand + glow halo
   ----------------------------------------------------------------- */
/* line 76, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-avatar {
  position: relative;
  border: 4px solid #0a0a0a !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%);
  padding: 4px;
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.3), 0 0 64px rgba(180, 0, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* line 88, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-avatar:hover {
  box-shadow: 0 0 48px rgba(255, 0, 116, 0.5), 0 0 96px rgba(180, 0, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* line 95, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-avatar .avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0a0a0a;
  background: #0a0a0a;
}

/* line 104, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-avatar .avatar-placeholder {
  background: linear-gradient(135deg, #ff0074 0%, #b000ff 100%) !important;
  border: 3px solid #0a0a0a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Online badge con pulse */
/* line 113, app/assets/stylesheets/_components.exo-creator-profile.scss */
.online-badge {
  background: #22c55e !important;
  border: 3px solid #0a0a0a !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 0 12px rgba(34, 197, 94, 0.6) !important;
  animation: exo-online-pulse 2s ease-out infinite;
}

@keyframes exo-online-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 0 12px rgba(34, 197, 94, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0), 0 0 12px rgba(34, 197, 94, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 12px rgba(34, 197, 94, 0.6);
  }
}

/* -----------------------------------------------------------------
   IDENTITY (name + username)
   ----------------------------------------------------------------- */
/* line 132, app/assets/stylesheets/_components.exo-creator-profile.scss */
.creator-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* line 145, app/assets/stylesheets/_components.exo-creator-profile.scss */
.creator-username {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 14px !important;
  color: #d8b4fe !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}

/* -----------------------------------------------------------------
   SUBSCRIBE BUTTON · estilo premium con sheen sweep + glow
   ----------------------------------------------------------------- */
/* line 157, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Sheen sweep al hover */
/* line 185, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 195, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 202, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn:hover::after {
  transform: translateX(120%);
}

/* Variantes que NO son primary (cancelar, edit profile, etc): neutral */
/* line 205, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn[style*="background"][style*="262626"],
.subscribe-btn[style*="background"][style*="#262626"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

/* line 211, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn[style*="background"][style*="262626"]:hover,
.subscribe-btn[style*="background"][style*="#262626"]:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
}

/* line 216, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn[style*="background"][style*="262626"]::after,
.subscribe-btn[style*="background"][style*="#262626"]::after {
  display: none;
}

/* line 219, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn.tip-trigger {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.35) !important;
  color: #ff7eb8 !important;
  box-shadow: none !important;
}

/* line 225, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn.tip-trigger:hover {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 24px rgba(255, 0, 116, 0.4) !important;
}

/* line 233, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn.unsubscribe-trigger {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}

/* line 239, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn.unsubscribe-trigger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

/* line 244, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscribe-btn.unsubscribe-trigger::after {
  display: none;
}

/* -----------------------------------------------------------------
   JERARQUÍA DE BOTONES EN DESKTOP (.profile-actions)
   ---------------------------------------------------------------
   El partial usa .subscribe-btn para todo (Suscribirme/Mensajes/
   Regalar/Cancelar). Diferenciamos por atributos del HTML para
   evitar que 4 botones gradient brand peleen entre sí:

   1. Suscribirme primary (data-controller sin gift) → gradient brand
      (ya cubierto por .subscribe-btn base arriba)
   2. Mensajes (link_to sin data-controller) → ghost neutral
   3. Regalar (open-gift-value="true") → ghost copper champagne
   4. Tip / Unsubscribe → mantienen sus modifiers ya definidos
   ----------------------------------------------------------------- */
/* Mensajes (link_to sin controller) → ghost glass con hover magenta */
/* line 263, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions a.subscribe-btn:not([data-controller]):not(.tip-trigger):not(.unsubscribe-trigger) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f5f5f5 !important;
  box-shadow: none !important;
}

/* line 269, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions a.subscribe-btn:not([data-controller]):not(.tip-trigger):not(.unsubscribe-trigger)::after {
  display: none;
}

/* line 271, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions a.subscribe-btn:not([data-controller]):not(.tip-trigger):not(.unsubscribe-trigger):hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #ff7eb8 !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* Regalar (open-gift-value="true") → ghost copper champagne (acento warm) */
/* line 281, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions .subscribe-btn[data-creator-subscribe-open-gift-value="true"] {
  background: rgba(212, 163, 115, 0.1) !important;
  border: 1px solid rgba(212, 163, 115, 0.35) !important;
  color: #e8c79e !important;
  box-shadow: none !important;
}

/* line 287, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions .subscribe-btn[data-creator-subscribe-open-gift-value="true"]::after {
  display: none;
}

/* line 289, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-actions .subscribe-btn[data-creator-subscribe-open-gift-value="true"]:hover {
  background: rgba(212, 163, 115, 0.18) !important;
  border-color: rgba(212, 163, 115, 0.55) !important;
  color: #f5e0c8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(212, 163, 115, 0.25) !important;
}

/* -----------------------------------------------------------------
   PROFILE ICON BUTTONS (mensaje, share, etc)
   ----------------------------------------------------------------- */
/* line 302, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-icon-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 315, app/assets/stylesheets/_components.exo-creator-profile.scss */
.profile-icon-btn:hover {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* -----------------------------------------------------------------
   BIO
   ----------------------------------------------------------------- */
/* line 327, app/assets/stylesheets/_components.exo-creator-profile.scss */
.creator-bio {
  font-family: 'Rubik', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* -----------------------------------------------------------------
   STATS · números con gradient brand + label tracked
   ----------------------------------------------------------------- */
/* line 338, app/assets/stylesheets/_components.exo-creator-profile.scss */
.stat-value {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* line 351, app/assets/stylesheets/_components.exo-creator-profile.scss */
.stat-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* -----------------------------------------------------------------
   SOCIAL BADGES · hover con peso
   ----------------------------------------------------------------- */
/* line 364, app/assets/stylesheets/_components.exo-creator-profile.scss */
.social-badge {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Instagram preserva su brand color */
  /* Twitter/X negro con glow */
}

/* line 376, app/assets/stylesheets/_components.exo-creator-profile.scss */
.social-badge:hover {
  transform: translateY(-3px) !important;
}

/* line 381, app/assets/stylesheets/_components.exo-creator-profile.scss */
.social-badge.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(225, 48, 108, 0.45) !important;
}

/* line 389, app/assets/stylesheets/_components.exo-creator-profile.scss */
.social-badge.twitter:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

/* -----------------------------------------------------------------
   TABS (CONTENT / CLIPS / etc)
   ----------------------------------------------------------------- */
/* line 401, app/assets/stylesheets/_components.exo-creator-profile.scss */
.section-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* line 405, app/assets/stylesheets/_components.exo-creator-profile.scss */
.section-tab {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-top: 2px solid transparent !important;
  margin-top: -1px !important;
  position: relative;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Línea brand glow para active tab */
}

/* line 417, app/assets/stylesheets/_components.exo-creator-profile.scss */
.section-tab:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* line 419, app/assets/stylesheets/_components.exo-creator-profile.scss */
.section-tab.active {
  color: #ff3d9a !important;
  border-top-color: transparent !important;
}

/* line 425, app/assets/stylesheets/_components.exo-creator-profile.scss */
.section-tab.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff0074 0%, #ff3d9a 100%);
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.5);
}

/* line 437, app/assets/stylesheets/_components.exo-creator-profile.scss */
.view-toggle-btn {
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color 0.3s ease !important;
}

/* line 441, app/assets/stylesheets/_components.exo-creator-profile.scss */
.view-toggle-btn:hover {
  color: #ff3d9a !important;
}

/* line 442, app/assets/stylesheets/_components.exo-creator-profile.scss */
.view-toggle-btn.active {
  color: #f5f5f5 !important;
}

/* -----------------------------------------------------------------
   MOBILE ACTION BUTTONS · preserva distribución, redibuja visuales
   ----------------------------------------------------------------- */
/* line 449, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Variante primary (Subscribe) */
}

/* line 459, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn:hover, .mobile-action-btn:active {
  background: rgba(255, 0, 116, 0.1) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* line 468, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn.primary {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* line 476, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn.primary:hover, .mobile-action-btn.primary:active {
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.5) !important;
}

/* line 482, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn.renew-btn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #4ade80 !important;
}

/* line 487, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn.renew-btn:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
}

/* line 493, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-action-btn.unsubscribe-trigger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

/* line 500, app/assets/stylesheets/_components.exo-creator-profile.scss */
.mobile-cancelled-badge {
  background: rgba(234, 179, 8, 0.1) !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  color: #facc15 !important;
  font-family: 'Rubik', sans-serif !important;
}

/* -----------------------------------------------------------------
   PROMO RIBBON (descuentos)
   ----------------------------------------------------------------- */
/* line 511, app/assets/stylesheets/_components.exo-creator-profile.scss */
.promo-ribbon {
  background: linear-gradient(100deg, #2a0014 0%, #34004e 100%) !important;
  border: 1px solid rgba(180, 0, 255, 0.35) !important;
}

/* line 515, app/assets/stylesheets/_components.exo-creator-profile.scss */
.promo-ribbon .promo-ribbon__discount {
  color: #ff7eb8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* line 523, app/assets/stylesheets/_components.exo-creator-profile.scss */
.promo-ribbon .promo-ribbon__divider {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* line 527, app/assets/stylesheets/_components.exo-creator-profile.scss */
.promo-ribbon .promo-ribbon__code {
  color: #d8b4fe !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.08em !important;
}

/* -----------------------------------------------------------------
   SUBSCRIPTION INFO CARD (cancelado con acceso restante)
   ----------------------------------------------------------------- */
/* line 539, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscription-cancelled-info .cancelled-badge {
  background: rgba(234, 179, 8, 0.1) !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  color: #facc15 !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

/* line 551, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscription-info-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* line 556, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscription-info-card .info-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* line 565, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscription-info-card .info-value {
  color: #f5f5f5 !important;
  font-family: 'Rubik', sans-serif !important;
}

/* line 569, app/assets/stylesheets/_components.exo-creator-profile.scss */
.subscription-info-card .info-value.highlight {
  background: linear-gradient(135deg, #fff 0%, #ff7eb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* -----------------------------------------------------------------
   TIP MODAL · backdrop blur + radial glow brand
   ----------------------------------------------------------------- */
/* line 584, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-backdrop {
  background: rgba(5, 3, 8, 0.78) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

/* line 590, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-content {
  background: linear-gradient(180deg, #14121a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 80px rgba(255, 0, 116, 0.1) !important;
  /* Radial glow brand desde esquina superior izquierda */
  /* Línea brand top */
}

/* line 602, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-content::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 615, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

/* line 627, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-hero-icon {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.5) !important;
  animation: exo-tip-pulse 2.6s ease-in-out infinite;
}

@keyframes exo-tip-pulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(255, 0, 116, 0.4);
  }
  50% {
    box-shadow: 0 0 48px rgba(255, 0, 116, 0.65);
  }
}

/* line 638, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-modal-hero-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* line 647, app/assets/stylesheets/_components.exo-creator-profile.scss */
.modal-title-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* line 653, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-amount-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 665, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-amount-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 0, 116, 0.45) !important;
  background: rgba(255, 0, 116, 0.08) !important;
}

/* line 671, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-amount-btn.active {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.4) !important;
}

/* line 679, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-custom-amount {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-variant-numeric: tabular-nums;
}

/* line 686, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-custom-amount:focus {
  outline: none;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* line 693, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-custom-amount-prefix,
.tip-custom-amount-suffix {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* line 699, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-message-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  border-radius: 10px !important;
}

/* line 706, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-message-input:focus {
  outline: none;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}

/* line 713, app/assets/stylesheets/_components.exo-creator-profile.scss */
.tip-section-optional {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
}

/* line 719, app/assets/stylesheets/_components.exo-creator-profile.scss */
.modal-label {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* line 728, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-send-tip {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 742, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-send-tip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 752, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-send-tip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* line 756, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-send-tip:hover::after {
  transform: translateX(120%);
}

/* line 759, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-cancel,
.btn-close {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 769, app/assets/stylesheets/_components.exo-creator-profile.scss */
.btn-cancel:hover,
.btn-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* -----------------------------------------------------------------
   UNSUBSCRIBE MODAL · idem visual al tip modal pero con tono de aviso
   ----------------------------------------------------------------- */
/* line 780, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-modal-backdrop {
  background: rgba(5, 3, 8, 0.78) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

/* line 786, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-modal-content {
  background: linear-gradient(180deg, #14121a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 80px rgba(239, 68, 68, 0.08) !important;
}

/* line 797, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-modal-content::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 60%;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* line 809, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-modal-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(234, 179, 8, 0.4) 50%, transparent 100%);
  pointer-events: none;
}

/* line 821, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-modal-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.02em !important;
}

/* line 828, app/assets/stylesheets/_components.exo-creator-profile.scss */
.warning-text,
.unsubscribe-warning {
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  color: #facc15 !important;
  border-radius: 12px !important;
  font-family: 'Rubik', sans-serif !important;
}

/* line 837, app/assets/stylesheets/_components.exo-creator-profile.scss */
.time-remaining {
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}

/* line 843, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-btn-confirm {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 854, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-btn-confirm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.5) !important;
}

/* line 860, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-btn-cancel,
.unsubscribe-btn-close {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 870, app/assets/stylesheets/_components.exo-creator-profile.scss */
.unsubscribe-btn-cancel:hover,
.unsubscribe-btn-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* line 877, app/assets/stylesheets/_components.exo-creator-profile.scss */
.other-reason-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  border-radius: 10px !important;
}

/* line 884, app/assets/stylesheets/_components.exo-creator-profile.scss */
.other-reason-input:focus {
  outline: none;
  border-color: #ff3d9a !important;
  box-shadow: 0 0 0 1px #ff3d9a, 0 0 24px rgba(255, 0, 116, 0.18) !important;
}
@charset "UTF-8";
/* ========================================
   TIP MODAL — Exotha visual language
   Dark gradient card, magenta accents, soft glow.
   ======================================== */
/* line 5, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

/* line 17, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* line 22, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.94);
  width: 460px;
  max-width: calc(100vw - 32px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* line 37, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-container.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* line 43, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content {
  position: relative;
  background: linear-gradient(180deg, #1f1f1f 0%, #161616 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 64, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 28px 28px 24px;
  overflow: hidden;
}

/* Subtle magenta glow in top-left corner for brand depth */
/* line 56, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 64, 129, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Close button (top-right ghost circle) ---- */
/* line 69, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: all 0.15s ease;
}

/* line 88, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content .btn-close:hover {
  background: rgba(255, 64, 129, 0.15);
  border-color: rgba(255, 64, 129, 0.35);
  color: #fff;
  transform: rotate(90deg);
}

/* ---- Hero header (icon circle + creator name) ---- */
/* line 96, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 20px;
  z-index: 1;
}

/* line 106, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 10px 28px rgba(255, 64, 129, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: tip-hero-pulse 2.8s ease-in-out infinite;
}

@keyframes tip-hero-pulse {
  0%, 100% {
    box-shadow: 0 10px 28px rgba(255, 64, 129, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 10px 36px rgba(255, 64, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* line 126, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-hero-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* line 135, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content .modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* line 144, app/assets/stylesheets/creator_profile_modals.scss */
.modal-title-name {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Body ---- */
/* line 153, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content .modal-body {
  padding: 6px 0 0;
  position: relative;
  z-index: 1;
}

/* line 159, app/assets/stylesheets/creator_profile_modals.scss */
.tip-section {
  margin-bottom: 22px;
}

/* line 163, app/assets/stylesheets/creator_profile_modals.scss */
.tip-section:last-child {
  margin-bottom: 4px;
}

/* line 167, app/assets/stylesheets/creator_profile_modals.scss */
.modal-label {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* line 178, app/assets/stylesheets/creator_profile_modals.scss */
.modal-label svg {
  color: #ff4081;
  flex-shrink: 0;
}

/* line 184, app/assets/stylesheets/creator_profile_modals.scss */
.tip-section-optional {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* ---- Preset amount buttons ---- */
/* line 194, app/assets/stylesheets/creator_profile_modals.scss */
.tip-amount-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

/* line 201, app/assets/stylesheets/creator_profile_modals.scss */
.tip-amount-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  padding: 14px 8px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.18s ease;
  cursor: pointer;
  position: relative;
}

/* line 215, app/assets/stylesheets/creator_profile_modals.scss */
.tip-amount-btn:hover {
  background: rgba(255, 64, 129, 0.08);
  border-color: rgba(255, 64, 129, 0.35);
  transform: translateY(-1px);
}

/* line 221, app/assets/stylesheets/creator_profile_modals.scss */
.tip-amount-btn.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 64, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ---- Custom amount input with prefix/suffix ---- */
/* line 231, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.18s ease;
  overflow: hidden;
}

/* line 241, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 245, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount-wrapper:focus-within {
  background: rgba(255, 64, 129, 0.05);
  border-color: rgba(255, 64, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.12);
}

/* line 252, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount-prefix {
  padding: 0 0 0 16px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
}

/* line 260, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  /* Remove number input spinners */
  -moz-appearance: textfield;
}

/* line 270, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount:focus {
  outline: none;
}

/* line 274, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* line 279, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount::-webkit-outer-spin-button, .tip-custom-amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* line 287, app/assets/stylesheets/creator_profile_modals.scss */
.tip-custom-amount-suffix {
  padding: 0 16px 0 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* ---- Message textarea ---- */
/* line 297, app/assets/stylesheets/creator_profile_modals.scss */
.tip-message-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  width: 100%;
  resize: none;
  min-height: 86px;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

/* line 313, app/assets/stylesheets/creator_profile_modals.scss */
.tip-message-input:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* line 317, app/assets/stylesheets/creator_profile_modals.scss */
.tip-message-input:focus {
  outline: none;
  background: rgba(255, 64, 129, 0.05);
  border-color: rgba(255, 64, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.12);
}

/* line 324, app/assets/stylesheets/creator_profile_modals.scss */
.tip-message-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ---- Footer actions ---- */
/* line 329, app/assets/stylesheets/creator_profile_modals.scss */
.tip-modal-content .modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px 0 0;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

/* line 339, app/assets/stylesheets/creator_profile_modals.scss */
.btn-cancel {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 13px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* line 353, app/assets/stylesheets/creator_profile_modals.scss */
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* line 358, app/assets/stylesheets/creator_profile_modals.scss */
.btn-send-tip {
  flex: 1;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  border: none;
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 6px 18px rgba(255, 64, 129, 0.35);
  letter-spacing: 0.2px;
}

/* line 378, app/assets/stylesheets/creator_profile_modals.scss */
.btn-send-tip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 64, 129, 0.5);
  filter: brightness(1.05);
}

/* line 384, app/assets/stylesheets/creator_profile_modals.scss */
.btn-send-tip:active {
  transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  /* line 390, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-modal-container {
    width: calc(100vw - 24px);
  }
  /* line 394, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-modal-content {
    padding: 24px 20px 20px;
    border-radius: 20px;
  }
  /* line 399, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-amount-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  /* line 404, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-amount-btn {
    padding: 12px 4px;
    font-size: 14px;
  }
  /* line 409, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-modal-hero-icon {
    width: 52px;
    height: 52px;
  }
  /* line 414, app/assets/stylesheets/creator_profile_modals.scss */
  .tip-modal-content .modal-title {
    font-size: 18px;
  }
}

/* Unsubscribe Modal Styles */
/* line 420, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* line 433, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* line 438, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 453, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-container.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* line 459, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-content {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 16px;
  overflow: hidden;
}

/* line 466, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-header {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 474, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 484, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  transition: all 0.2s ease;
}

/* line 499, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* line 503, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-body {
  padding: 24px;
}

/* line 507, app/assets/stylesheets/creator_profile_modals.scss */
.subscription-info-card {
  background: #262626;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

/* line 514, app/assets/stylesheets/creator_profile_modals.scss */
.subscription-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 522, app/assets/stylesheets/creator_profile_modals.scss */
.subscription-info-row:last-child {
  border-bottom: none;
}

/* line 526, app/assets/stylesheets/creator_profile_modals.scss */
.subscription-info-row.highlight {
  background: rgba(255, 193, 7, 0.1);
  margin: 10px -16px -16px -16px;
  padding: 14px 16px;
  border-radius: 0 0 12px 12px;
  border-bottom: none;
}

/* line 534, app/assets/stylesheets/creator_profile_modals.scss */
.info-label {
  color: #8e8e8e;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 542, app/assets/stylesheets/creator_profile_modals.scss */
.info-value {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* line 548, app/assets/stylesheets/creator_profile_modals.scss */
.time-remaining {
  color: #ffc107;
}

/* line 552, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-warning {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

/* line 562, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-warning svg {
  color: #dc3545;
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 568, app/assets/stylesheets/creator_profile_modals.scss */
.warning-text {
  flex: 1;
}

/* line 572, app/assets/stylesheets/creator_profile_modals.scss */
.warning-text strong {
  color: #dc3545;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

/* line 579, app/assets/stylesheets/creator_profile_modals.scss */
.warning-text p {
  color: #ccc;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* line 586, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-reason-section {
  margin-top: 20px;
}

/* line 590, app/assets/stylesheets/creator_profile_modals.scss */
.reason-label {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

/* line 598, app/assets/stylesheets/creator_profile_modals.scss */
.reason-select {
  width: 100%;
  background: #262626;
  border: 2px solid #333;
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238e8e8e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* line 615, app/assets/stylesheets/creator_profile_modals.scss */
.reason-select:focus {
  outline: none;
  border-color: #dc3545;
}

/* line 620, app/assets/stylesheets/creator_profile_modals.scss */
.reason-select option {
  background: #262626;
  color: #fff;
  padding: 10px;
}

/* line 626, app/assets/stylesheets/creator_profile_modals.scss */
.other-reason-container {
  margin-top: 16px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 642, app/assets/stylesheets/creator_profile_modals.scss */
.other-reason-input {
  width: 100%;
  background: #262626;
  border: 2px solid #333;
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  resize: none;
  transition: all 0.3s ease;
}

/* line 654, app/assets/stylesheets/creator_profile_modals.scss */
.other-reason-input:focus {
  outline: none;
  border-color: #dc3545;
}

/* line 659, app/assets/stylesheets/creator_profile_modals.scss */
.other-reason-input::placeholder {
  color: #666;
}

/* line 663, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-modal-footer {
  background: #262626;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* line 672, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-cancel {
  background: transparent;
  border: 2px solid #444;
  color: #8e8e8e;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 684, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #28a745;
  color: #28a745;
}

/* line 690, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-confirm {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* line 706, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

/* line 711, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-confirm:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* line 717, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-btn-confirm .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Subscription cancelled info */
/* line 731, app/assets/stylesheets/creator_profile_modals.scss */
.subscription-cancelled-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* line 738, app/assets/stylesheets/creator_profile_modals.scss */
.cancelled-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* line 750, app/assets/stylesheets/creator_profile_modals.scss */
.cancelled-badge i {
  font-size: 14px;
}

/* Unsubscribe trigger button style */
/* line 755, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-trigger {
  background: #262626 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* line 762, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-trigger:hover {
  background: rgba(220, 53, 69, 0.2) !important;
  color: #dc3545 !important;
}

/* line 767, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-trigger i {
  font-size: 14px;
}

/* Toast Notifications */
/* line 772, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 10000;
  background: #1a1a1a;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s ease;
}

/* line 786, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* line 791, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast-success {
  border: 1px solid rgba(40, 167, 69, 0.5);
}

/* line 795, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast-error {
  border: 1px solid rgba(220, 53, 69, 0.5);
}

/* line 799, app/assets/stylesheets/creator_profile_modals.scss */
.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 805, app/assets/stylesheets/creator_profile_modals.scss */
.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* line 815, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast-success .toast-icon {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

/* line 820, app/assets/stylesheets/creator_profile_modals.scss */
.unsubscribe-toast-error .toast-icon {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

/* line 825, app/assets/stylesheets/creator_profile_modals.scss */
.toast-message {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 576px) {
  /* line 832, app/assets/stylesheets/creator_profile_modals.scss */
  .unsubscribe-modal-container {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  /* line 839, app/assets/stylesheets/creator_profile_modals.scss */
  .unsubscribe-modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  /* line 844, app/assets/stylesheets/creator_profile_modals.scss */
  .unsubscribe-modal-footer {
    flex-direction: column;
  }
  /* line 848, app/assets/stylesheets/creator_profile_modals.scss */
  .unsubscribe-btn-cancel,
.unsubscribe-btn-confirm {
    width: 100%;
    justify-content: center;
  }
}
@charset "UTF-8";
/* line 1, app/assets/stylesheets/profile_content_card.scss */
.profile-content-item {
  position: relative;
  aspect-ratio: 1;
  background: #0a0a0a;
  overflow: hidden;
}

/* Locked item premium background */
/* line 9, app/assets/stylesheets/profile_content_card.scss */
.profile-content-item.locked {
  background: radial-gradient(ellipse 150% 100% at 10% 100%, rgba(255, 0, 116, 0.12) 0%, transparent 50%), radial-gradient(ellipse 120% 80% at 90% 0%, rgba(255, 0, 116, 0.08) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 0, 116, 0.04) 0%, transparent 70%), linear-gradient(160deg, #0d0d0d 0%, #12080f 25%, #160a12 50%, #12080f 75%, #0d0d0d 100%);
}

/* line 17, app/assets/stylesheets/profile_content_card.scss */
.profile-content-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* line 24, app/assets/stylesheets/profile_content_card.scss */
.profile-content-image {
  position: relative;
  width: 100%;
  height: 100%;
}

/* line 30, app/assets/stylesheets/profile_content_card.scss */
.profile-content-image a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* line 37, app/assets/stylesheets/profile_content_card.scss */
.profile-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 43, app/assets/stylesheets/profile_content_card.scss */
.profile-content-image .content-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #262626;
  font-size: 48px;
}

/* line 53, app/assets/stylesheets/profile_content_card.scss */
.video-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
}

/* Grid View - Video icon más pequeño */
/* line 61, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .video-icon {
  top: 6px;
  right: 6px;
}

/* line 66, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .video-icon svg {
  width: 14px;
  height: 14px;
}

/* Gallery Type Badge - Same style as switch_pro feed */
/* line 72, app/assets/stylesheets/profile_content_card.scss */
.gallery-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 12;
}

/* line 90, app/assets/stylesheets/profile_content_card.scss */
.gallery-type-badge svg {
  flex-shrink: 0;
}

/* line 94, app/assets/stylesheets/profile_content_card.scss */
.gallery-badge-count {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

/* line 102, app/assets/stylesheets/profile_content_card.scss */
.gallery-badge-details {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* line 111, app/assets/stylesheets/profile_content_card.scss */
.gallery-badge-details svg {
  opacity: 0.9;
}

/* Grid View - Badge más compacto */
/* line 116, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .gallery-type-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  gap: 4px;
  top: 6px;
  right: 6px;
}

/* line 125, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .gallery-type-badge svg {
  width: 10px;
  height: 10px;
}

/* line 130, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .gallery-badge-count {
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
}

/* line 136, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .gallery-badge-details {
  display: none;
}

/* line 140, app/assets/stylesheets/profile_content_card.scss */
.locked-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* line 148, app/assets/stylesheets/profile_content_card.scss */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

/* line 165, app/assets/stylesheets/profile_content_card.scss */
.profile-content-item:hover .hover-overlay {
  opacity: 1;
}

/* line 169, app/assets/stylesheets/profile_content_card.scss */
.stat-icon {
  display: contents;
}

/* line 173, app/assets/stylesheets/profile_content_card.scss */
.hover-overlay svg {
  fill: white;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* line 180, app/assets/stylesheets/profile_content_card.scss */
.hover-overlay span {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

/* Header solo para vista de lista (estilo OnlyFans) */
/* line 187, app/assets/stylesheets/profile_content_card.scss */
.list-view-header {
  display: none;
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
}

/* line 194, app/assets/stylesheets/profile_content_card.scss */
.list-header-left {
  display: flex;
  align-items: center;
}

/* line 199, app/assets/stylesheets/profile_content_card.scss */
.list-post-timestamp {
  color: #8e8e8e;
  font-size: 12px;
  white-space: nowrap;
}

/* line 205, app/assets/stylesheets/profile_content_card.scss */
.list-creator-username {
  color: #8e8e8e;
  font-size: 13px;
}

/* Descripción antes del media (solo vista lista) */
/* line 211, app/assets/stylesheets/profile_content_card.scss */
.list-view-caption {
  display: none;
  padding: 0 16px 14px;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.5;
}

/* line 219, app/assets/stylesheets/profile_content_card.scss */
.list-view-caption span {
  display: inline;
}

/* Footer solo para vista de lista */
/* line 224, app/assets/stylesheets/profile_content_card.scss */
.list-view-footer {
  display: none;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 230, app/assets/stylesheets/profile_content_card.scss */
.list-creator-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* line 237, app/assets/stylesheets/profile_content_card.scss */
.list-creator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 245, app/assets/stylesheets/profile_content_card.scss */
.list-creator-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081, #f50057);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* line 259, app/assets/stylesheets/profile_content_card.scss */
.list-creator-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 265, app/assets/stylesheets/profile_content_card.scss */
.list-creator-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 15px;
}

/* line 271, app/assets/stylesheets/profile_content_card.scss */
.list-post-time {
  color: #8e8e8e;
  font-size: 13px;
}

/* ========================================
   LIST ACTIONS - Premium Action Bar
   Refined, minimal, cohesive design
   ======================================== */
/* line 281, app/assets/stylesheets/profile_content_card.scss */
.list-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Base Action Button */
/* line 288, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}

/* line 305, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn:hover {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.06);
}

/* line 310, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn:active {
  transform: scale(0.96);
}

/* line 314, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* line 321, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn:hover svg {
  transform: scale(1.1);
}

/* line 325, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn span {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tip Button - Elegant CTA */
/* line 331, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn.send-tip-btn {
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.2);
  color: #ff4081;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 344, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn.send-tip-btn:hover {
  background: rgba(255, 0, 116, 0.15);
  border-color: rgba(255, 0, 116, 0.4);
  color: #ff6ba5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.2);
}

/* line 352, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn.send-tip-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* line 357, app/assets/stylesheets/profile_content_card.scss */
.list-action-btn.send-tip-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* Like Button Integration - Premium Style */
/* line 364, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button-container {
  display: inline-flex;
}

/* Comment Button Container - Same pattern as like button */
/* line 369, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button-container {
  display: inline-flex;
}

/* line 373, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* line 389, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button:hover {
  color: #00b4d8;
  background: rgba(0, 180, 216, 0.08);
}

/* line 394, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button:active {
  transform: scale(0.96);
}

/* line 398, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* line 405, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button:hover svg {
  transform: scale(1.15);
  fill: #00b4d8;
}

/* line 410, app/assets/stylesheets/profile_content_card.scss */
.list-actions .comment-button .comment-count {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* line 415, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* line 431, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button:hover {
  color: #ff4081;
  background: rgba(255, 64, 129, 0.08);
}

/* line 436, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button:active {
  transform: scale(0.96);
}

/* line 440, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button.liked {
  color: #ff4081;
}

/* line 444, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button.liked:hover {
  color: #ff6ba5;
  background: rgba(255, 64, 129, 0.12);
}

/* line 449, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* line 456, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button:hover svg {
  transform: scale(1.15);
}

/* line 460, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button:active svg {
  transform: scale(0.9);
}

/* line 464, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-button span {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* line 469, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-count {
  font-weight: 500;
}

/* line 473, app/assets/stylesheets/profile_content_card.scss */
.list-actions .like-count {
  font-weight: 400;
}

/* Profile Content Locked State */
/* line 478, app/assets/stylesheets/profile_content_card.scss */
.profile-content-item.locked .profile-content-image {
  min-height: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Grid View - Elementos más compactos */
/* line 488, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .profile-content-item.locked .profile-content-image {
  min-height: auto;
  height: 100%;
  aspect-ratio: 1;
}

/* Locked Preview - Blur Background */
/* line 495, app/assets/stylesheets/profile_content_card.scss */
.locked-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* line 504, app/assets/stylesheets/profile_content_card.scss */
.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Premium gradient as fallback - always visible if image fails to load */
  background-color: #0c0c0c;
  background-image: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 40%, rgba(255, 0, 116, 0.08) 0%, transparent 50%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  background-size: cover;
  background-position: center;
}

/* line 521, app/assets/stylesheets/profile_content_card.scss */
.blur-bg.default-blur {
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 40%, rgba(255, 0, 116, 0.08) 0%, transparent 50%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  filter: none !important;
  transform: none;
  animation: lockedPulse 6s ease-in-out infinite;
}

/* line 532, app/assets/stylesheets/profile_content_card.scss */
.blur-bg.default-blur::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 0, 116, 0.06) 0%, transparent 30%), radial-gradient(circle at 80% 20%, rgba(255, 61, 154, 0.04) 0%, transparent 25%);
  animation: lockedFloat 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lockedPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

@keyframes lockedFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -1%) scale(1.02);
  }
  66% {
    transform: translate(-1%, 2%) scale(0.98);
  }
}

/* Degradado sutil sobre la imagen - reduced for default-blur visibility */
/* line 558, app/assets/stylesheets/profile_content_card.scss */
.locked-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* When using default blur, no additional overlay needed */
/* line 576, app/assets/stylesheets/profile_content_card.scss */
.locked-preview:has(.default-blur)::after {
  display: none;
}

/* Unlock Overlay - Centrado Perfecto */
/* line 581, app/assets/stylesheets/profile_content_card.scss */
.unlock-overlay {
  position: absolute;
  top: 39%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Grid View - Overlay más compacto */
/* line 597, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .unlock-overlay {
  top: 50%;
  padding: 12px 8px;
  gap: 4px;
}

/* line 603, app/assets/stylesheets/profile_content_card.scss */
.lock-icon-container {
  margin-bottom: 16px;
  width: 64px;
  height: 64px;
  background: rgba(31, 31, 31, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Grid View - Icono más pequeño */
/* line 618, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .lock-icon-container {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-width: 1px;
}

/* line 625, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .lock-icon-container svg {
  width: 16px;
  height: 16px;
}

/* line 630, app/assets/stylesheets/profile_content_card.scss */
.unlock-message {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  text-align: center;
  padding: 0 20px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  margin: 0 0 20px 0;
}

/* Grid View - Ocultar mensaje para mantener compacto */
/* line 644, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .unlock-message {
  display: none;
}

/* Unlock Buttons */
/* line 649, app/assets/stylesheets/profile_content_card.scss */
.btn-unlock,
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: auto;
  max-width: 200px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Grid View - Botones más compactos */
/* line 670, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .btn-unlock,
.content-grid:not(.list-view) .btn-subscribe {
  padding: 8px 14px;
  font-size: 11px;
  gap: 4px;
  max-width: 140px;
  border-radius: 6px;
}

/* line 679, app/assets/stylesheets/profile_content_card.scss */
.btn-unlock svg,
.btn-subscribe svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Grid View - SVGs más pequeños */
/* line 687, app/assets/stylesheets/profile_content_card.scss */
.content-grid:not(.list-view) .btn-unlock svg,
.content-grid:not(.list-view) .btn-subscribe svg {
  width: 12px;
  height: 12px;
}

/* line 693, app/assets/stylesheets/profile_content_card.scss */
.btn-unlock {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 699, app/assets/stylesheets/profile_content_card.scss */
.btn-unlock:hover {
  background: linear-gradient(135deg, #ff4081 0%, #fd2f77 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 64, 129, 0.4);
}

/* line 705, app/assets/stylesheets/profile_content_card.scss */
.btn-unlock:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.3);
}

/* line 710, app/assets/stylesheets/profile_content_card.scss */
.btn-subscribe {
  background: #363636;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* line 716, app/assets/stylesheets/profile_content_card.scss */
.btn-subscribe:hover {
  background: #535353;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* line 722, app/assets/stylesheets/profile_content_card.scss */
.btn-subscribe:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  /* List View en móvil - Centrado */
  /* line 730, app/assets/stylesheets/profile_content_card.scss */
  .content-grid.list-view .unlock-overlay {
    top: 50%;
  }
  /* line 734, app/assets/stylesheets/profile_content_card.scss */
  .content-grid.list-view .unlock-message {
    font-size: 14px;
  }
  /* line 738, app/assets/stylesheets/profile_content_card.scss */
  .btn-unlock,
.btn-subscribe {
    padding: 12px 24px;
    font-size: 14px;
    min-width: auto;
    max-width: 180px;
  }
  /* line 746, app/assets/stylesheets/profile_content_card.scss */
  .btn-unlock svg,
.btn-subscribe svg {
    width: 16px;
    height: 16px;
  }
  /* line 752, app/assets/stylesheets/profile_content_card.scss */
  .lock-icon-container {
    width: 56px;
    height: 56px;
  }
  /* line 757, app/assets/stylesheets/profile_content_card.scss */
  .lock-icon-container svg {
    width: 24px;
    height: 24px;
  }
  /* Grid View en móvil - Más compacto */
  /* line 763, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .unlock-overlay {
    top: 50%;
    padding: 16px 10px;
  }
  /* line 768, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .lock-icon-container {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }
  /* line 774, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .lock-icon-container svg {
    width: 18px;
    height: 18px;
  }
  /* line 779, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .unlock-message {
    display: none;
  }
  /* line 783, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .btn-unlock,
.content-grid:not(.list-view) .btn-subscribe {
    padding: 6px 10px;
    font-size: 10px;
    gap: 3px;
    max-width: 100%;
    width: auto;
  }
  /* line 792, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .btn-unlock svg,
.content-grid:not(.list-view) .btn-subscribe svg {
    width: 11px;
    height: 11px;
    display: none;
    /* Hide icon on mobile grid */
  }
  /* line 799, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .btn-unlock span,
.content-grid:not(.list-view) .btn-subscribe span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  /* line 810, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .btn-unlock,
.content-grid:not(.list-view) .btn-subscribe {
    padding: 5px 8px;
    font-size: 9px;
  }
  /* line 816, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .lock-icon-container {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
  }
  /* line 822, app/assets/stylesheets/profile_content_card.scss */
  .content-grid:not(.list-view) .lock-icon-container svg {
    width: 14px;
    height: 14px;
  }
}
@charset "UTF-8";
/* ========================================
   INSTAGRAM/ONLYFANS INSPIRED LAYOUT
   ======================================== */
/* Reset del container */
/* line 6, app/assets/stylesheets/feed.scss */
.switch-pro-container {
  background: #000 !important;
  padding-top: 0 !important;
  min-height: 100vh;
}

/* Main Layout - 3 Columnas */
/* line 13, app/assets/stylesheets/feed.scss */
.social-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 70px);
}

/* ===== SIDEBAR IZQUIERDO ===== */
/* line 24, app/assets/stylesheets/feed.scss */
.left-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

/* line 30, app/assets/stylesheets/feed.scss */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 36, app/assets/stylesheets/feed.scss */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.2s ease;
}

/* line 49, app/assets/stylesheets/feed.scss */
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* line 53, app/assets/stylesheets/feed.scss */
.sidebar-nav-item.active {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  font-weight: 600;
}

/* line 58, app/assets/stylesheets/feed.scss */
.sidebar-nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 64, app/assets/stylesheets/feed.scss */
.sidebar-nav-item .badge {
  margin-left: auto;
  background: #ff4081;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* User Profile Section */
/* line 75, app/assets/stylesheets/feed.scss */
.sidebar-user-profile {
  margin-bottom: 12px;
}

/* line 79, app/assets/stylesheets/feed.scss */
.sidebar-profile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 89, app/assets/stylesheets/feed.scss */
.sidebar-profile-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* line 93, app/assets/stylesheets/feed.scss */
.sidebar-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 102, app/assets/stylesheets/feed.scss */
.sidebar-profile-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  border: 2px solid #ff4081;
  flex-shrink: 0;
}

/* line 117, app/assets/stylesheets/feed.scss */
.sidebar-profile-info {
  flex: 1;
  min-width: 0;
}

/* line 122, app/assets/stylesheets/feed.scss */
.sidebar-profile-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 132, app/assets/stylesheets/feed.scss */
.sidebar-profile-username {
  color: #8e8e8e;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Divider */
/* line 141, app/assets/stylesheets/feed.scss */
.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

/* Special Button Styles */
/* line 148, app/assets/stylesheets/feed.scss */
.sidebar-nav-item.sidebar-cta {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  font-weight: 600;
  margin: 8px 0;
}

/* line 154, app/assets/stylesheets/feed.scss */
.sidebar-nav-item.sidebar-cta:hover {
  background: linear-gradient(135deg, #f50057 0%, #ff4081 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.3);
}

/* line 160, app/assets/stylesheets/feed.scss */
.sidebar-nav-item.sidebar-login {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

/* line 166, app/assets/stylesheets/feed.scss */
.sidebar-nav-item.sidebar-login:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== FEED CENTRAL ===== */
/* line 172, app/assets/stylesheets/feed.scss */
.main-feed {
  max-width: 630px;
  margin: 0 auto;
}

/* Stories Bar - Estilo Instagram/OnlyFans */
/* line 178, app/assets/stylesheets/feed.scss */
.stories-bar {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* line 188, app/assets/stylesheets/feed.scss */
.stories-bar::-webkit-scrollbar {
  display: none;
}

/* line 192, app/assets/stylesheets/feed.scss */
.stories-list {
  display: flex;
  gap: 16px;
}

/* line 197, app/assets/stylesheets/feed.scss */
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 70px;
  cursor: pointer;
}

/* line 207, app/assets/stylesheets/feed.scss */
.story-avatar {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.2s;
}

/* Stories activos con gradiente rosa */
/* line 218, app/assets/stylesheets/feed.scss */
.story-item.has-stories .story-avatar {
  background: linear-gradient(135deg, #ff4081, #f50057);
  padding: 3px;
}

/* Stories vistos (gris) */
/* line 224, app/assets/stylesheets/feed.scss */
.story-item.has-stories:not(.unviewed) .story-avatar {
  background: rgba(255, 255, 255, 0.3);
}

/* line 228, app/assets/stylesheets/feed.scss */
.story-avatar:hover {
  transform: scale(1.05);
}

/* line 232, app/assets/stylesheets/feed.scss */
.story-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #000;
}

/* line 240, app/assets/stylesheets/feed.scss */
.story-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  border: 3px solid #000;
}

/* Badge contador de stories */
/* line 254, app/assets/stylesheets/feed.scss */
.story-count-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: #ff4081;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
}

/* line 271, app/assets/stylesheets/feed.scss */
.story-username {
  font-size: 12px;
  color: #b3b3b3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 70px;
  font-weight: 400;
}

/* Username más visible para stories sin ver */
/* line 282, app/assets/stylesheets/feed.scss */
.story-item.unviewed .story-username {
  color: #f5f5f5;
  font-weight: 500;
}

/* Feed Posts - Estilo Instagram */
/* line 288, app/assets/stylesheets/feed.scss */
.feed-posts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Empty State */
/* line 295, app/assets/stylesheets/feed.scss */
.feed-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/* line 306, app/assets/stylesheets/feed.scss */
.feed-empty-state svg {
  margin-bottom: 20px;
  opacity: 0.7;
}

/* line 311, app/assets/stylesheets/feed.scss */
.feed-empty-state h3 {
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* line 318, app/assets/stylesheets/feed.scss */
.feed-empty-state p {
  color: #8e8e8e;
  font-size: 14px;
  margin: 0 0 24px;
}

/* line 325, app/assets/stylesheets/feed.scss */
.feed-empty-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: linear-gradient(135deg, #ff0074 0%, #ff2d8a 100%);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(255, 0, 116, 0.35);
}

/* line 338, app/assets/stylesheets/feed.scss */
.feed-empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 0, 116, 0.45);
}

/* line 344, app/assets/stylesheets/feed.scss */
.feed-post {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

/* Post Header */
/* line 352, app/assets/stylesheets/feed.scss */
.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

/* line 359, app/assets/stylesheets/feed.scss */
.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* line 366, app/assets/stylesheets/feed.scss */
.post-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
}

/* line 374, app/assets/stylesheets/feed.scss */
.post-author-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* line 379, app/assets/stylesheets/feed.scss */
.post-online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #28a745;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
}

/* line 390, app/assets/stylesheets/feed.scss */
.post-author-info {
  display: flex;
  flex-direction: column;
}

/* line 395, app/assets/stylesheets/feed.scss */
.post-author-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 401, app/assets/stylesheets/feed.scss */
.post-author-username {
  color: #8e8e8e;
  font-size: 12px;
}

/* Header Right - timestamp + menu */
/* line 407, app/assets/stylesheets/feed.scss */
.post-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 413, app/assets/stylesheets/feed.scss */
.post-timestamp {
  color: #8e8e8e;
  font-size: 12px;
  white-space: nowrap;
}

/* Caption before media (OnlyFans style) */
/* line 420, app/assets/stylesheets/feed.scss */
.post-caption-top {
  padding: 0 16px 14px;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.5;
}

/* line 427, app/assets/stylesheets/feed.scss */
.post-caption-top span {
  display: inline;
}

/* line 431, app/assets/stylesheets/feed.scss */
.post-caption-top br {
  display: block;
  content: "";
  margin-top: 4px;
}

/* line 437, app/assets/stylesheets/feed.scss */
.post-menu {
  position: relative;
}

/* line 441, app/assets/stylesheets/feed.scss */
.post-menu-btn {
  background: none;
  border: none;
  color: #8e8e8e;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* line 451, app/assets/stylesheets/feed.scss */
.post-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

/* Dropdown Menu Styles */
/* line 457, app/assets/stylesheets/feed.scss */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.15s ease;
  z-index: 100;
  overflow: hidden;
}

/* line 474, app/assets/stylesheets/feed.scss */
.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* line 480, app/assets/stylesheets/feed.scss */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #f5f5f5;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
}

/* line 496, app/assets/stylesheets/feed.scss */
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* line 500, app/assets/stylesheets/feed.scss */
.dropdown-item svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* line 507, app/assets/stylesheets/feed.scss */
.dropdown-item span {
  font-weight: 500;
}

/* line 511, app/assets/stylesheets/feed.scss */
.dropdown-item-danger:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* Post Media */
/* line 517, app/assets/stylesheets/feed.scss */
.post-media {
  position: relative;
  width: 100%;
  background: #262626;
}

/* line 523, app/assets/stylesheets/feed.scss */
.post-media img,
.post-media video {
  width: 100%;
  display: block;
}

/* Content card overrides inside post media */
/* line 530, app/assets/stylesheets/feed.scss */
.post-media .content-media,
.post-media .content-image,
.post-media .content-card,
.post-media .locked-content-wrapper {
  border-radius: 0;
  margin-bottom: 0;
}

/* line 538, app/assets/stylesheets/feed.scss */
.post-media .content-image {
  max-height: none;
  object-fit: cover;
}

/* Post Actions */
/* line 544, app/assets/stylesheets/feed.scss */
.post-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

/* line 551, app/assets/stylesheets/feed.scss */
.action-btn {
  background: none;
  border: none;
  color: #f5f5f5;
  cursor: pointer;
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

/* line 567, app/assets/stylesheets/feed.scss */
.action-btn:hover {
  color: #ff4081;
  transform: scale(1.1);
}

/* line 572, app/assets/stylesheets/feed.scss */
.action-btn.liked {
  color: #ff4081;
  animation: likeAnimation 0.3s ease;
}

/* line 577, app/assets/stylesheets/feed.scss */
.action-btn svg {
  width: 24px;
  height: 24px;
}

/* line 582, app/assets/stylesheets/feed.scss */
.action-btn-save {
  margin-left: auto;
}

/* ===== ACCESS BADGES (Free / Price / Locked) ===== */
/* line 587, app/assets/stylesheets/feed.scss */
.content-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

/* line 603, app/assets/stylesheets/feed.scss */
.content-access-badge--free {
  color: #ff3d9a;
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.25);
}

/* line 609, app/assets/stylesheets/feed.scss */
.content-access-badge--price {
  color: #fff;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.25);
  letter-spacing: 0.2px;
}

/* line 616, app/assets/stylesheets/feed.scss */
.content-access-badge--price:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35);
}

/* line 621, app/assets/stylesheets/feed.scss */
.content-access-badge--locked {
  color: #8e8e8e;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 8px;
}

/* ===== SIDEBAR DERECHO ===== */
/* line 629, app/assets/stylesheets/feed.scss */
.right-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

/* Perfil Sugerido */
/* line 636, app/assets/stylesheets/feed.scss */
.profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 643, app/assets/stylesheets/feed.scss */
.profile-widget-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff4081;
}

/* line 651, app/assets/stylesheets/feed.scss */
.profile-widget-info {
  flex: 1;
}

/* line 655, app/assets/stylesheets/feed.scss */
.profile-widget-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
}

/* line 661, app/assets/stylesheets/feed.scss */
.profile-widget-username {
  color: #8e8e8e;
  font-size: 12px;
}

/* Suggestions Section */
/* line 667, app/assets/stylesheets/feed.scss */
.suggestions-section {
  margin-bottom: 24px;
}

/* line 671, app/assets/stylesheets/feed.scss */
.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* line 678, app/assets/stylesheets/feed.scss */
.suggestions-title {
  color: #8e8e8e;
  font-weight: 600;
  font-size: 14px;
}

/* line 684, app/assets/stylesheets/feed.scss */
.see-all-btn {
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* line 691, app/assets/stylesheets/feed.scss */
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 698, app/assets/stylesheets/feed.scss */
.suggestion-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 705, app/assets/stylesheets/feed.scss */
.suggestion-info {
  flex: 1;
  min-width: 0;
}

/* line 710, app/assets/stylesheets/feed.scss */
.suggestion-name {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: block;
}

/* line 718, app/assets/stylesheets/feed.scss */
.suggestion-meta {
  color: #8e8e8e;
  font-size: 12px;
}

/* line 723, app/assets/stylesheets/feed.scss */
.suggestion-follow-btn {
  background: none;
  border: none;
  color: #ff0074;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

/* Footer */
/* line 733, app/assets/stylesheets/feed.scss */
.sidebar-footer {
  color: #8e8e8e;
  font-size: 11px;
  line-height: 1.6;
}

/* line 739, app/assets/stylesheets/feed.scss */
.sidebar-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* line 746, app/assets/stylesheets/feed.scss */
.sidebar-footer-link {
  color: #8e8e8e;
  text-decoration: none;
}

/* line 751, app/assets/stylesheets/feed.scss */
.sidebar-footer-link:hover {
  text-decoration: underline;
}

/* Like Button Integration */
/* line 756, app/assets/stylesheets/feed.scss */
.post-actions .like-button-container {
  display: inline-flex;
}

/* line 760, app/assets/stylesheets/feed.scss */
.post-actions .like-button {
  background: none;
  border: none;
  color: #f5f5f5;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

/* line 773, app/assets/stylesheets/feed.scss */
.post-actions .like-button:hover {
  color: #ff4081;
  transform: scale(1.1);
}

/* line 778, app/assets/stylesheets/feed.scss */
.post-actions .like-button.liked {
  color: #ff4081;
  animation: likeAnimation 0.3s ease;
}

/* line 783, app/assets/stylesheets/feed.scss */
.post-actions .like-button svg {
  width: 24px;
  height: 24px;
}

/* line 788, app/assets/stylesheets/feed.scss */
.post-actions .like-button .like-count {
  font-weight: 400;
  color: inherit;
}

/* line 793, app/assets/stylesheets/feed.scss */
.post-actions .like-button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* line 798, app/assets/stylesheets/feed.scss */
.post-actions .like-button.login-required {
  text-decoration: none;
  color: #f5f5f5;
}

/* line 803, app/assets/stylesheets/feed.scss */
.post-actions .like-button.login-required:hover {
  color: #ff4081;
}

/* Comment Button Integration - mismo patrón que like button */
/* line 808, app/assets/stylesheets/feed.scss */
.post-actions .comment-button-container {
  display: inline-flex;
}

/* line 812, app/assets/stylesheets/feed.scss */
.post-actions .comment-button {
  background: none;
  border: none;
  color: #f5f5f5;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;
  text-decoration: none;
}

/* line 826, app/assets/stylesheets/feed.scss */
.post-actions .comment-button:hover {
  color: #ff4081;
  transform: scale(1.1);
}

/* line 831, app/assets/stylesheets/feed.scss */
.post-actions .comment-button svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* line 837, app/assets/stylesheets/feed.scss */
.post-actions .comment-button .comment-count {
  font-weight: 400;
  color: inherit;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  /* line 845, app/assets/stylesheets/feed.scss */
  .social-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  /* line 850, app/assets/stylesheets/feed.scss */
  .left-sidebar {
    display: none;
  }
  /* line 854, app/assets/stylesheets/feed.scss */
  .main-feed {
    width: 100%;
    max-width: 630px;
  }
}

@media (max-width: 768px) {
  /* line 861, app/assets/stylesheets/feed.scss */
  .main-feed {
    max-width: 100%;
  }
  /* line 865, app/assets/stylesheets/feed.scss */
  .stories-bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  /* line 871, app/assets/stylesheets/feed.scss */
  .feed-post {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* ========================================
   LOCKED CONTENT - SERVER-SIDE BLUR
   Secure preview for non-accessible content
   ======================================== */
/* Blurred preview image (already blurred server-side) */
/* line 884, app/assets/stylesheets/feed.scss */
.post-media .blurred-preview {
  width: 100%;
  height: auto;
  display: block;
  /* Small additional blur for extra obscurity */
  filter: brightness(0.6) saturate(0.8);
}

/* Placeholder for videos and non-image content */
/* line 893, app/assets/stylesheets/feed.scss */
.post-media .locked-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 280px;
  background: radial-gradient(ellipse 180% 120% at 0% 100%, rgba(255, 0, 116, 0.18) 0%, transparent 45%), radial-gradient(ellipse 150% 100% at 100% 0%, rgba(255, 61, 154, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 40%, rgba(255, 0, 116, 0.08) 0%, transparent 50%), linear-gradient(165deg, #0c0c0c 0%, #150a11 30%, #1a0c14 50%, #150a11 70%, #0c0c0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: lockedPulse 6s ease-in-out infinite;
}

/* Decorative elements for locked placeholder */
/* line 911, app/assets/stylesheets/feed.scss */
.post-media .locked-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 0, 116, 0.06) 0%, transparent 30%), radial-gradient(circle at 80% 20%, rgba(255, 61, 154, 0.04) 0%, transparent 25%);
  animation: lockedFloat 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lockedPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes lockedFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -1%) scale(1.02);
  }
  66% {
    transform: translate(-1%, 2%) scale(0.98);
  }
}

/* Locked overlay improvements */
/* line 937, app/assets/stylesheets/feed.scss */
.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

/* line 951, app/assets/stylesheets/feed.scss */
.locked-overlay .lock-icon {
  width: 48px;
  height: 48px;
  fill: #ff0074;
  filter: drop-shadow(0 2px 8px rgba(255, 0, 116, 0.4));
}

/* line 958, app/assets/stylesheets/feed.scss */
.locked-overlay .unlock-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* line 965, app/assets/stylesheets/feed.scss */
.locked-overlay .unlock-price {
  color: #ff0074;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* ========================================
   PINNED POST BADGE - Feed Content Post
   ======================================== */
/* line 976, app/assets/stylesheets/feed.scss */
.content-post .pinned-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ff3d9a;
  background: rgba(255, 0, 116, 0.06);
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
}

/* line 989, app/assets/stylesheets/feed.scss */
.content-post .pinned-badge svg {
  flex-shrink: 0;
  color: #ff0074;
}

/* line 994, app/assets/stylesheets/feed.scss */
.content-post.is-pinned {
  border: 1px solid rgba(255, 0, 116, 0.15);
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · FEED HOME OVERRIDE
   -----------------------------------------------------------------
   Override visual del feed autenticado /. Mantiene los selectores
   legacy de feed.scss (preservando estructura HTML, infinite scroll,
   pull-to-refresh, polls, stories-viewer, dropdowns).

   Motion guidelines (vista de uso diario):
   - Hovers ≤250ms (no cinematográfico como el landing)
   - Sin reveals al scroll
   - Sin cursor-follow
   - Sheen sweep solo en CTAs primarios (una capa de delight)

   Carga DESPUÉS de feed.scss en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   LAYOUT BASE
   ----------------------------------------------------------------- */
/* line 21, app/assets/stylesheets/_components.exo-feed.scss */
.switch-pro-container {
  background: #0a0a0a !important;
}

/* line 25, app/assets/stylesheets/_components.exo-feed.scss */
.social-layout {
  background: #0a0a0a;
}

/* -----------------------------------------------------------------
   LEFT SIDEBAR · nav items con brand magenta consistente
   ----------------------------------------------------------------- */
/* line 33, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 12px !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 42, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* line 47, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18) 0%, rgba(180, 0, 255, 0.1) 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #ff0074, 0 0 24px rgba(255, 0, 116, 0.1);
  position: relative;
}

/* line 55, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.active svg {
  color: #ff3d9a;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.5));
}

/* line 60, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item .badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 0, 116, 0.3) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
}

/* CTA del sidebar (Suscribirse / Become creator) */
/* line 69, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.sidebar-cta {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Sheen sweep sutil (es CTA, lo merece) */
}

/* line 80, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.sidebar-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.18) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 90, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.sidebar-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.45) !important;
}

/* line 94, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-nav-item.sidebar-cta:hover::after {
  transform: translateX(120%);
}

/* Perfil del usuario en sidebar */
/* line 98, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-link {
  border-radius: 12px !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 102, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* line 107, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-avatar,
.sidebar-profile-avatar-placeholder {
  border: 2px solid transparent !important;
  background-image: linear-gradient(#0a0a0a, #0a0a0a), linear-gradient(135deg, #ff0074, #ff3d9a, #b000ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.25);
}

/* line 118, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-avatar-placeholder {
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box, linear-gradient(135deg, #ff0074, #b000ff) border-box !important;
  color: #ff3d9a !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* line 127, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f5f5f5 !important;
}

/* line 133, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-profile-username {
  font-family: 'JetBrains Mono', monospace !important;
  color: #d8b4fe !important;
  font-size: 12px !important;
}

/* line 139, app/assets/stylesheets/_components.exo-feed.scss */
.sidebar-divider {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* -----------------------------------------------------------------
   RIGHT SIDEBAR (suggestions, footer links)
   ----------------------------------------------------------------- */
/* line 147, app/assets/stylesheets/_components.exo-feed.scss */
.right-sidebar {
  font-family: 'Montserrat', sans-serif;
}

/* line 150, app/assets/stylesheets/_components.exo-feed.scss */
.right-sidebar h3, .right-sidebar h4 {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* line 159, app/assets/stylesheets/_components.exo-feed.scss */
.right-sidebar a {
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 162, app/assets/stylesheets/_components.exo-feed.scss */
.right-sidebar a:hover {
  color: #ff7eb8 !important;
}

/* -----------------------------------------------------------------
   STORIES BAR · avatars con ring brand (story / unviewed states)
   ----------------------------------------------------------------- */
/* line 172, app/assets/stylesheets/_components.exo-feed.scss */
.stories-bar {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
}

/* line 178, app/assets/stylesheets/_components.exo-feed.scss */
.story-item {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 181, app/assets/stylesheets/_components.exo-feed.scss */
.story-item:hover {
  transform: translateY(-2px);
}

/* Default avatar ring (sin stories activos) */
/* line 187, app/assets/stylesheets/_components.exo-feed.scss */
.story-avatar {
  position: relative;
  padding: 3px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 195, app/assets/stylesheets/_components.exo-feed.scss */
.story-avatar img,
.story-avatar-placeholder {
  border: 2px solid #0a0a0a !important;
}

/* Stories activos (no vistos): ring conic gradient brand */
/* line 201, app/assets/stylesheets/_components.exo-feed.scss */
.story-item.has-stories.unviewed .story-avatar {
  background: conic-gradient(from 220deg, #ff0074 0%, #ff3d9a 30%, #b000ff 60%, #ff0074 100%) !important;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.3);
  animation: exo-story-spin 8s linear infinite;
}

@keyframes exo-story-spin {
  to {
    filter: hue-rotate(20deg);
  }
}

/* Stories vistos: ring atenuado */
/* line 218, app/assets/stylesheets/_components.exo-feed.scss */
.story-item.has-stories:not(.unviewed) .story-avatar {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* line 222, app/assets/stylesheets/_components.exo-feed.scss */
.story-username {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
}

/* line 228, app/assets/stylesheets/_components.exo-feed.scss */
.story-item.has-stories.unviewed .story-username {
  color: #f5f5f5 !important;
}

/* line 232, app/assets/stylesheets/_components.exo-feed.scss */
.story-count-badge {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 0 12px rgba(255, 0, 116, 0.5) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* -----------------------------------------------------------------
   FEED POSTS · la card que se repite (motion sutil)
   ----------------------------------------------------------------- */
/* line 242, app/assets/stylesheets/_components.exo-feed.scss */
.feed-post {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  overflow: hidden;
  transition: border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 249, app/assets/stylesheets/_components.exo-feed.scss */
.feed-post:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Header del post */
/* line 255, app/assets/stylesheets/_components.exo-feed.scss */
.post-header {
  padding: 14px 16px !important;
}

/* line 259, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-avatar-wrapper {
  position: relative;
  padding: 2px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 50%, #b000ff 100%) !important;
  border-radius: 50% !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 267, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-avatar-wrapper:hover {
  transform: scale(1.05);
}

/* line 271, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-avatar {
  border: 2px solid #111 !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* line 277, app/assets/stylesheets/_components.exo-feed.scss */
.post-online-indicator {
  background: #22c55e !important;
  border: 2px solid #111 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
}

/* line 283, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
  /* Verified check usa colores brand */
}

/* line 290, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-name svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 116, 0.4));
}

/* line 296, app/assets/stylesheets/_components.exo-feed.scss */
.post-author-username {
  color: #d8b4fe !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* line 302, app/assets/stylesheets/_components.exo-feed.scss */
.post-timestamp {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

/* Menu del post (3 dots) */
/* line 310, app/assets/stylesheets/_components.exo-feed.scss */
.post-menu-btn,
.menu-trigger {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  display: grid !important;
  place-items: center;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 324, app/assets/stylesheets/_components.exo-feed.scss */
.post-menu-btn:hover,
.menu-trigger:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* line 330, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-menu {
  background: rgba(20, 18, 26, 0.95) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 32px rgba(255, 0, 116, 0.08) !important;
  padding: 6px !important;
}

/* line 341, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.4) 50%, transparent 100%);
  pointer-events: none;
}

/* line 353, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 363, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* line 368, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item svg {
  color: rgba(255, 255, 255, 0.5);
}

/* line 373, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item-danger {
  color: #f87171 !important;
}

/* line 376, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
}

/* line 381, app/assets/stylesheets/_components.exo-feed.scss */
.dropdown-item-danger svg {
  color: #f87171 !important;
}

/* Caption top (texto antes del media) */
/* line 385, app/assets/stylesheets/_components.exo-feed.scss */
.post-caption-top {
  padding: 0 16px 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

/* line 392, app/assets/stylesheets/_components.exo-feed.scss */
.post-caption-top strong, .post-caption-top b {
  color: #ff7eb8 !important;
  font-weight: 600 !important;
}

/* Poll question (cuando el post es encuesta) */
/* line 399, app/assets/stylesheets/_components.exo-feed.scss */
.poll-question {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* Media container */
/* line 407, app/assets/stylesheets/_components.exo-feed.scss */
.post-media {
  background: #0a0a0a !important;
  position: relative;
}

/* -----------------------------------------------------------------
   ACTIONS BAR (like, comment, share, tip)
   ----------------------------------------------------------------- */
/* line 416, app/assets/stylesheets/_components.exo-feed.scss */
.post-actions {
  padding: 8px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* line 424, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1) !important;
  /* Liked state */
}

/* line 443, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn svg {
  width: 18px;
  height: 18px;
}

/* line 445, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* line 450, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn:active {
  transform: scale(0.95);
}

/* line 455, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn.liked, .action-btn.is-liked, .action-btn[data-liked="true"] {
  color: #ff3d9a !important;
}

/* line 460, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn.liked svg, .action-btn.is-liked svg, .action-btn[data-liked="true"] svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.5));
}

/* Tip action destaca con tono brand cálido */
/* line 465, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn.tip-action,
.action-btn[data-tip-trigger] {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(180, 0, 255, 0.06) 100%) !important;
  color: #ff7eb8 !important;
  border: 1px solid rgba(255, 0, 116, 0.18) !important;
}

/* line 472, app/assets/stylesheets/_components.exo-feed.scss */
.action-btn.tip-action:hover,
.action-btn[data-tip-trigger]:hover {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(255, 0, 116, 0.4) !important;
}

/* line 480, app/assets/stylesheets/_components.exo-feed.scss */
.copy-link-btn {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: color 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 484, app/assets/stylesheets/_components.exo-feed.scss */
.copy-link-btn:hover {
  color: #ff3d9a !important;
}

/* line 487, app/assets/stylesheets/_components.exo-feed.scss */
.comment-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   MY ACTIVE POLLS section (creator-only)
   ----------------------------------------------------------------- */
/* line 496, app/assets/stylesheets/_components.exo-feed.scss */
.my-active-polls {
  background: linear-gradient(180deg, rgba(255, 0, 116, 0.03) 0%, transparent 100%) !important;
  border: 1px solid rgba(255, 0, 116, 0.15) !important;
  border-radius: 20px !important;
}

/* line 503, app/assets/stylesheets/_components.exo-feed.scss */
.my-active-polls-header h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.01em !important;
}

/* line 510, app/assets/stylesheets/_components.exo-feed.scss */
.my-active-polls-header svg {
  color: #ff3d9a !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 116, 0.4));
}

/* -----------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------- */
/* line 520, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-state {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  padding: 64px 32px !important;
  text-align: center;
}

/* line 527, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-state svg {
  color: rgba(255, 0, 116, 0.5) !important;
  filter: drop-shadow(0 0 16px rgba(255, 0, 116, 0.3));
}

/* line 532, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-state h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #f5f5f5 !important;
  letter-spacing: -0.02em !important;
  margin: 16px 0 8px !important;
}

/* line 541, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-state p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Rubik', sans-serif !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
}

/* line 549, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(255, 0, 116, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 572, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* line 582, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255, 0, 116, 0.5) !important;
}

/* line 586, app/assets/stylesheets/_components.exo-feed.scss */
.feed-empty-btn:hover::after {
  transform: translateX(120%);
}

/* -----------------------------------------------------------------
   PULL-TO-REFRESH INDICATOR (mobile only)
   ----------------------------------------------------------------- */
/* line 593, app/assets/stylesheets/_components.exo-feed.scss */
.ptr-indicator {
  /* Spinner ya definido en pull_to_refresh.scss; solo darle tinte brand */
  color: #ff3d9a !important;
}
/* =============== DIRECT UPLOAD PROGRESS =============== */
/* line 2, app/assets/stylesheets/upload_progress.scss */
.direct-upload-progress-area {
  background: var(--color-gray-02, #282828);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

/* Total progress */
/* line 11, app/assets/stylesheets/upload_progress.scss */
.direct-upload-total {
  margin-bottom: 16px;
}

/* line 15, app/assets/stylesheets/upload_progress.scss */
.direct-upload-total__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
}

/* line 25, app/assets/stylesheets/upload_progress.scss */
.direct-upload-total__text {
  color: var(--color-gray-05, #949494);
}

/* line 29, app/assets/stylesheets/upload_progress.scss */
.direct-upload-total__percent {
  color: #ff0074;
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
/* line 35, app/assets/stylesheets/upload_progress.scss */
.direct-upload-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-gray-03, #363636);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* line 44, app/assets/stylesheets/upload_progress.scss */
.direct-upload-progress-bar--small {
  height: 4px;
}

/* line 48, app/assets/stylesheets/upload_progress.scss */
.direct-upload-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #ff0074, #ff3d9a);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
  background-size: 30px 30px;
  animation: upload-stripes 1s linear infinite;
}

/* line 58, app/assets/stylesheets/upload_progress.scss */
.direct-upload-progress-bar__fill--complete {
  animation: none;
  background: #4caf50;
}

@keyframes upload-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 0;
  }
}

/* Individual file progress */
/* line 69, app/assets/stylesheets/upload_progress.scss */
.direct-upload-file {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 74, app/assets/stylesheets/upload_progress.scss */
.direct-upload-file:last-child {
  border-bottom: none;
}

/* line 78, app/assets/stylesheets/upload_progress.scss */
.direct-upload-file__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* line 85, app/assets/stylesheets/upload_progress.scss */
.direct-upload-file__name {
  font-size: 13px;
  color: var(--color-gray-06, #C9C9C9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

/* line 94, app/assets/stylesheets/upload_progress.scss */
.direct-upload-file__percent {
  font-size: 12px;
  color: var(--color-gray-05, #949494);
  font-variant-numeric: tabular-nums;
}

/* States */
/* line 101, app/assets/stylesheets/upload_progress.scss */
.direct-upload--active .direct-upload-progress-bar__fill {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
}

/* line 115, app/assets/stylesheets/upload_progress.scss */
.direct-upload--complete .direct-upload-file__percent {
  color: #4caf50;
}

/* line 119, app/assets/stylesheets/upload_progress.scss */
.direct-upload--complete .direct-upload-progress-bar__fill {
  background: #4caf50;
  animation: none;
}

/* line 124, app/assets/stylesheets/upload_progress.scss */
.direct-upload--error .direct-upload-progress-bar__fill {
  background: #f44336;
  animation: none;
}

/* line 129, app/assets/stylesheets/upload_progress.scss */
.direct-upload-error {
  color: #f44336;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 6px;
  margin-top: 8px;
}

/* Disabled buttons during upload */
/* line 139, app/assets/stylesheets/upload_progress.scss */
.btn--uploading {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* =============== PROCESSING BADGE =============== */
/* line 146, app/assets/stylesheets/upload_progress.scss */
.processing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* line 156, app/assets/stylesheets/upload_progress.scss */
.processing-badge--processing {
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

/* line 162, app/assets/stylesheets/upload_progress.scss */
.processing-badge--failed {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* line 168, app/assets/stylesheets/upload_progress.scss */
.processing-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 152, 0, 0.3);
  border-top-color: #ff9800;
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
  /* line 183, app/assets/stylesheets/upload_progress.scss */
  .direct-upload-progress-area {
    padding: 16px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  /* line 190, app/assets/stylesheets/upload_progress.scss */
  .direct-upload-progress-area {
    padding: 12px;
    border-radius: 8px;
  }
  /* line 195, app/assets/stylesheets/upload_progress.scss */
  .direct-upload-file__name {
    max-width: 70%;
    font-size: 12px;
  }
}
@charset "UTF-8";
/* ========================================
   MASS MESSAGES — Creator Dashboard
   Premium Dark Theme
   ======================================== */
/* ── Keyframes ───────────────────────────── */
@keyframes mm-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mm-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes mm-pulse-soft {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* ── Header ──────────────────────────────── */
/* line 23, app/assets/stylesheets/mass_messages.scss */
.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.04) 0%, #111 50%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  animation: mm-fade-up 0.4s ease-out;
}

/* line 37, app/assets/stylesheets/mass_messages.scss */
.mm-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #ff0074 30%, #ff3d9a 70%, transparent 95%);
  opacity: 0.5;
}

/* line 48, app/assets/stylesheets/mass_messages.scss */
.mm-header__info {
  flex: 1;
  min-width: 0;
}

/* line 53, app/assets/stylesheets/mass_messages.scss */
.mm-header__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 3px;
  letter-spacing: -0.2px;
}

/* line 62, app/assets/stylesheets/mass_messages.scss */
.mm-header__subtitle {
  font-family: 'Rubik', sans-serif;
  color: #8e8e8e;
  font-size: 13px;
  margin: 0;
}

/* ── Buttons ─────────────────────────────── */
/* line 71, app/assets/stylesheets/mass_messages.scss */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}

/* line 86, app/assets/stylesheets/mass_messages.scss */
.mm-btn--primary {
  padding: 12px 26px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 0, 116, 0.2);
}

/* line 92, app/assets/stylesheets/mass_messages.scss */
.mm-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.35);
  color: #fff;
}

/* line 98, app/assets/stylesheets/mass_messages.scss */
.mm-btn--primary:active {
  transform: translateY(0);
}

/* line 103, app/assets/stylesheets/mass_messages.scss */
.mm-btn--ghost {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.04);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 109, app/assets/stylesheets/mass_messages.scss */
.mm-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}

/* line 116, app/assets/stylesheets/mass_messages.scss */
.mm-btn--full {
  width: 100%;
  padding: 14px 24px;
  font-size: 15px;
}

/* ── Message List ────────────────────────── */
/* line 124, app/assets/stylesheets/mass_messages.scss */
.mm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 130, app/assets/stylesheets/mass_messages.scss */
.mm-card {
  display: block;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: mm-fade-up 0.35s ease-out both;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(1) {
  animation-delay: 0.04s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(2) {
  animation-delay: 0.08s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(3) {
  animation-delay: 0.12s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(4) {
  animation-delay: 0.16s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(5) {
  animation-delay: 0.2s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(6) {
  animation-delay: 0.24s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(7) {
  animation-delay: 0.28s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(8) {
  animation-delay: 0.32s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(9) {
  animation-delay: 0.36s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(10) {
  animation-delay: 0.4s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(11) {
  animation-delay: 0.44s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(12) {
  animation-delay: 0.48s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(13) {
  animation-delay: 0.52s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(14) {
  animation-delay: 0.56s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(15) {
  animation-delay: 0.6s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(16) {
  animation-delay: 0.64s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(17) {
  animation-delay: 0.68s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(18) {
  animation-delay: 0.72s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(19) {
  animation-delay: 0.76s;
}

/* line 141, app/assets/stylesheets/mass_messages.scss */
.mm-card:nth-child(20) {
  animation-delay: 0.8s;
}

/* line 146, app/assets/stylesheets/mass_messages.scss */
.mm-card:hover {
  border-color: rgba(255, 0, 116, 0.2);
  background: linear-gradient(145deg, rgba(255, 0, 116, 0.03) 0%, #111 60%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* line 153, app/assets/stylesheets/mass_messages.scss */
.mm-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* line 160, app/assets/stylesheets/mass_messages.scss */
.mm-card__date {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #666;
}

/* line 166, app/assets/stylesheets/mass_messages.scss */
.mm-card__content {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #bbb;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* line 174, app/assets/stylesheets/mass_messages.scss */
.mm-card__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 182, app/assets/stylesheets/mass_messages.scss */
.mm-card__stat, .mm-card__audience, .mm-card__ppv {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
}

/* line 190, app/assets/stylesheets/mass_messages.scss */
.mm-card__stat svg, .mm-card__audience svg, .mm-card__ppv svg {
  color: #555;
}

/* line 193, app/assets/stylesheets/mass_messages.scss */
.mm-card__ppv {
  color: #ff3d9a;
  font-weight: 600;
}

/* line 196, app/assets/stylesheets/mass_messages.scss */
.mm-card__ppv svg {
  color: #ff3d9a;
}

/* line 199, app/assets/stylesheets/mass_messages.scss */
.mm-card__audience {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  color: #777;
}

/* ── Badge ───────────────────────────────── */
/* line 210, app/assets/stylesheets/mass_messages.scss */
.mm-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* line 221, app/assets/stylesheets/mass_messages.scss */
.mm-badge--pending {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

/* line 226, app/assets/stylesheets/mass_messages.scss */
.mm-badge--processing {
  background: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
  animation: mm-pulse-soft 2s ease-in-out infinite;
}

/* line 232, app/assets/stylesheets/mass_messages.scss */
.mm-badge--completed {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

/* line 237, app/assets/stylesheets/mass_messages.scss */
.mm-badge--failed {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* line 242, app/assets/stylesheets/mass_messages.scss */
.mm-badge--lg {
  font-size: 13px;
  padding: 6px 18px;
  border-radius: 10px;
}

/* ── Empty State ─────────────────────────── */
/* line 250, app/assets/stylesheets/mass_messages.scss */
.mm-empty {
  text-align: center;
  padding: 80px 20px;
  animation: mm-fade-up 0.5s ease-out;
}

/* line 255, app/assets/stylesheets/mass_messages.scss */
.mm-empty svg {
  margin-bottom: 20px;
  opacity: 0.3;
  color: #ff0074;
}

/* line 261, app/assets/stylesheets/mass_messages.scss */
.mm-empty p {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  color: #555;
  margin: 0;
}

/* ── Form ────────────────────────────────── */
/* line 270, app/assets/stylesheets/mass_messages.scss */
.mm-form {
  counter-reset: mm-step;
}

/* line 274, app/assets/stylesheets/mass_messages.scss */
.mm-form-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 16px;
  animation: mm-fade-up 0.35s ease-out;
  transition: border-color 0.3s ease;
}

/* line 283, app/assets/stylesheets/mass_messages.scss */
.mm-form-card:focus-within {
  border-color: rgba(255, 0, 116, 0.12);
}

/* line 287, app/assets/stylesheets/mass_messages.scss */
.mm-form-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 297, app/assets/stylesheets/mass_messages.scss */
.mm-form-card__title::before {
  counter-increment: mm-step;
  content: counter(mm-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  border-radius: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* line 315, app/assets/stylesheets/mass_messages.scss */
.mm-form-card__desc {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  margin: 0 0 18px;
  line-height: 1.4;
  padding-left: 36px;
}

/* ── Fields ──────────────────────────────── */
/* line 326, app/assets/stylesheets/mass_messages.scss */
.mm-field {
  margin-bottom: 16px;
}

/* line 329, app/assets/stylesheets/mass_messages.scss */
.mm-field:last-child {
  margin-bottom: 0;
}

/* line 331, app/assets/stylesheets/mass_messages.scss */
.mm-field__label {
  display: block;
  font-family: 'Rubik', sans-serif;
  color: #ddd;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* line 340, app/assets/stylesheets/mass_messages.scss */
.mm-field__textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* line 354, app/assets/stylesheets/mass_messages.scss */
.mm-field__textarea:focus {
  outline: none;
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.08);
}

/* line 360, app/assets/stylesheets/mass_messages.scss */
.mm-field__textarea::placeholder {
  color: #555;
}

/* line 363, app/assets/stylesheets/mass_messages.scss */
.mm-field__input {
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* line 374, app/assets/stylesheets/mass_messages.scss */
.mm-field__input:focus {
  outline: none;
  border-color: #ff0074;
  box-shadow: 0 0 0 3px rgba(255, 0, 116, 0.08);
}

/* line 380, app/assets/stylesheets/mass_messages.scss */
.mm-field__input--small {
  width: 100px;
}

/* line 383, app/assets/stylesheets/mass_messages.scss */
.mm-field__select {
  width: 100%;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  transition: border-color 0.2s ease;
}

/* line 400, app/assets/stylesheets/mass_messages.scss */
.mm-field__select:focus {
  outline: none;
  border-color: #ff0074;
}

/* line 405, app/assets/stylesheets/mass_messages.scss */
.mm-field__select option {
  background: #1a1a1a;
}

/* line 408, app/assets/stylesheets/mass_messages.scss */
.mm-field__file {
  width: 100%;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #8e8e8e;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  box-sizing: border-box;
}

/* line 419, app/assets/stylesheets/mass_messages.scss */
.mm-field__file::file-selector-button {
  background: rgba(255, 0, 116, 0.1);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 6px;
  color: #ff0074;
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* line 433, app/assets/stylesheets/mass_messages.scss */
.mm-field__hint {
  display: block;
  font-family: 'Rubik', sans-serif;
  color: #666;
  font-size: 12px;
  margin-top: 6px;
}

/* ── Radio Group ─────────────────────────── */
/* line 443, app/assets/stylesheets/mass_messages.scss */
.mm-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 449, app/assets/stylesheets/mass_messages.scss */
.mm-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 460, app/assets/stylesheets/mass_messages.scss */
.mm-radio:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

/* line 465, app/assets/stylesheets/mass_messages.scss */
.mm-radio:has(.mm-radio__input:checked) {
  border-color: rgba(255, 0, 116, 0.25);
  background: rgba(255, 0, 116, 0.03);
}

/* line 470, app/assets/stylesheets/mass_messages.scss */
.mm-radio__input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  margin: 1px 0 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

/* line 483, app/assets/stylesheets/mass_messages.scss */
.mm-radio__input::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 496, app/assets/stylesheets/mass_messages.scss */
.mm-radio__input:checked {
  border-color: #ff0074;
}

/* line 499, app/assets/stylesheets/mass_messages.scss */
.mm-radio__input:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

/* line 505, app/assets/stylesheets/mass_messages.scss */
.mm-radio__content {
  flex: 1;
  min-width: 0;
}

/* line 510, app/assets/stylesheets/mass_messages.scss */
.mm-radio__label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f5;
}

/* line 518, app/assets/stylesheets/mass_messages.scss */
.mm-radio__hint {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
  margin-top: 2px;
}

/* line 527, app/assets/stylesheets/mass_messages.scss */
.mm-months-field {
  padding-left: 36px;
  margin-top: 4px;
  display: none;
}

/* line 533, app/assets/stylesheets/mass_messages.scss */
.mm-attachment-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── PPV Content Preview ─────────────────── */
/* line 540, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* line 550, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0a0a0a;
}

/* line 559, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 566, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #333;
}

/* line 575, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__price {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

/* line 588, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__type-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.65);
  color: #ccc;
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: capitalize;
}

/* line 601, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 609, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__title {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 619, app/assets/stylesheets/mass_messages.scss */
.mm-ppv-preview__status {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
}

/* ── Upload Area ─────────────────────────── */
/* line 627, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
}

/* line 638, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area:hover, .mm-upload-area--dragover {
  border-color: rgba(255, 0, 116, 0.5);
  background: rgba(255, 0, 116, 0.04);
}

/* line 643, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area:hover .mm-upload-area__icon, .mm-upload-area--dragover .mm-upload-area__icon {
  color: #ff0074;
  transform: translateY(-2px);
}

/* line 649, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  color: #666;
  transition: all 0.3s ease;
}

/* line 657, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area__text {
  color: #ddd;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

/* line 665, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area__hint {
  color: #666;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  margin: 0;
}

/* line 672, app/assets/stylesheets/mass_messages.scss */
.mm-upload-area__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* line 683, app/assets/stylesheets/mass_messages.scss */
.mm-upload-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* line 690, app/assets/stylesheets/mass_messages.scss */
.mm-upload-preview img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
}

/* line 697, app/assets/stylesheets/mass_messages.scss */
.mm-upload-preview__remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* line 713, app/assets/stylesheets/mass_messages.scss */
.mm-upload-preview__remove:hover {
  background: rgba(220, 53, 69, 0.8);
  border-color: transparent;
}

/* line 718, app/assets/stylesheets/mass_messages.scss */
.mm-upload-preview__remove svg {
  width: 14px;
  height: 14px;
}

/* ── Form Actions ────────────────────────── */
/* line 723, app/assets/stylesheets/mass_messages.scss */
.mm-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ── Detail Cards ────────────────────────── */
/* line 730, app/assets/stylesheets/mass_messages.scss */
.mm-detail-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  animation: mm-fade-up 0.35s ease-out;
}

/* line 738, app/assets/stylesheets/mass_messages.scss */
.mm-detail-card__title {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 750, app/assets/stylesheets/mass_messages.scss */
.mm-detail-card__title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, #ff0074, #ff3d9a);
  border-radius: 2px;
}

/* line 761, app/assets/stylesheets/mass_messages.scss */
.mm-detail-status {
  text-align: center;
  margin-bottom: 16px;
}

/* ── Progress Bar ────────────────────────── */
/* line 767, app/assets/stylesheets/mass_messages.scss */
.mm-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* line 774, app/assets/stylesheets/mass_messages.scss */
.mm-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #ff0074);
  background-size: 200% 100%;
  border-radius: 3px;
  animation: mm-shimmer 2s linear infinite;
  transition: width 0.5s ease;
}

/* line 783, app/assets/stylesheets/mass_messages.scss */
.mm-progress__text {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  text-align: center;
  margin: 0;
}

/* ── Stats ───────────────────────────────── */
/* line 793, app/assets/stylesheets/mass_messages.scss */
.mm-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* line 799, app/assets/stylesheets/mass_messages.scss */
.mm-stat {
  text-align: center;
  flex: 1;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

/* line 807, app/assets/stylesheets/mass_messages.scss */
.mm-stat__value {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #f5f5f5;
  line-height: 1.2;
}

/* line 816, app/assets/stylesheets/mass_messages.scss */
.mm-stat__label {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #8e8e8e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
  display: block;
}

/* ── Message Preview ─────────────────────── */
/* line 829, app/assets/stylesheets/mass_messages.scss */
.mm-preview__text {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
  margin: 0 0 12px;
}

/* line 836, app/assets/stylesheets/mass_messages.scss */
.mm-preview__text p {
  margin: 0 0 8px;
}

/* line 839, app/assets/stylesheets/mass_messages.scss */
.mm-preview__image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 845, app/assets/stylesheets/mass_messages.scss */
.mm-preview__image img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  display: block;
}

/* line 853, app/assets/stylesheets/mass_messages.scss */
.mm-preview__ppv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 0, 116, 0.04);
  border: 1px solid rgba(255, 0, 116, 0.12);
  border-radius: 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #ff3d9a;
}

/* line 865, app/assets/stylesheets/mass_messages.scss */
.mm-preview__ppv svg {
  flex-shrink: 0;
}

/* ── Detail Rows ─────────────────────────── */
/* line 870, app/assets/stylesheets/mass_messages.scss */
.mm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
}

/* line 879, app/assets/stylesheets/mass_messages.scss */
.mm-detail-row span:first-child {
  color: #8e8e8e;
}

/* line 880, app/assets/stylesheets/mass_messages.scss */
.mm-detail-row span:last-child {
  color: #f5f5f5;
  font-weight: 500;
}

/* line 882, app/assets/stylesheets/mass_messages.scss */
.mm-detail-row:first-child {
  padding-top: 0;
}

/* line 883, app/assets/stylesheets/mass_messages.scss */
.mm-detail-row:last-child {
  border-bottom: none;
}

/* line 886, app/assets/stylesheets/mass_messages.scss */
.mm-pagination {
  margin-top: 24px;
  text-align: center;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 768px) {
  /* line 893, app/assets/stylesheets/mass_messages.scss */
  .mm-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px;
    border-radius: 0;
    margin: 0 0 12px;
  }
  /* line 901, app/assets/stylesheets/mass_messages.scss */
  .mm-header .mm-btn {
    width: 100%;
    justify-content: center;
  }
  /* line 904, app/assets/stylesheets/mass_messages.scss */
  .mm-card {
    border-radius: 12px;
    padding: 16px 18px;
  }
  /* line 909, app/assets/stylesheets/mass_messages.scss */
  .mm-form-card {
    border-radius: 14px;
    padding: 20px;
  }
  /* line 914, app/assets/stylesheets/mass_messages.scss */
  .mm-detail-card {
    border-radius: 14px;
    padding: 20px;
  }
  /* line 919, app/assets/stylesheets/mass_messages.scss */
  .mm-stats {
    gap: 8px;
  }
  /* line 923, app/assets/stylesheets/mass_messages.scss */
  .mm-stat {
    padding: 14px 8px;
  }
  /* line 926, app/assets/stylesheets/mass_messages.scss */
  .mm-stat__value {
    font-size: 22px;
  }
  /* line 931, app/assets/stylesheets/mass_messages.scss */
  .mm-form-actions {
    flex-direction: column;
  }
  /* line 935, app/assets/stylesheets/mass_messages.scss */
  .mm-upload-area {
    padding: 30px 16px;
  }
  /* line 940, app/assets/stylesheets/mass_messages.scss */
  .mm-ppv-preview__thumb {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  /* line 948, app/assets/stylesheets/mass_messages.scss */
  .mm-header {
    padding: 16px;
  }
  /* line 951, app/assets/stylesheets/mass_messages.scss */
  .mm-header__title {
    font-size: 20px;
  }
  /* line 954, app/assets/stylesheets/mass_messages.scss */
  .mm-form-card {
    padding: 18px 16px;
  }
  /* line 957, app/assets/stylesheets/mass_messages.scss */
  .mm-form-card__title {
    font-size: 15px;
  }
  /* line 960, app/assets/stylesheets/mass_messages.scss */
  .mm-card {
    padding: 14px 16px;
  }
  /* line 964, app/assets/stylesheets/mass_messages.scss */
  .mm-badge--lg {
    font-size: 12px;
    padding: 5px 14px;
  }
  /* line 969, app/assets/stylesheets/mass_messages.scss */
  .mm-radio {
    padding: 12px 14px;
  }
}
@charset "UTF-8";
/* ========================================
   GEO-BLOCKED — Region Restricted Page
   ======================================== */
@keyframes geo-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 10, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  min-height: 50vh;
  animation: geo-fade-up 0.5s ease-out;
}

/* line 21, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 116, 0.06);
  border: 1px solid rgba(255, 0, 116, 0.12);
  border-radius: 50%;
  margin-bottom: 28px;
  color: #ff3d9a;
}

/* line 34, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

/* line 43, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-message {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  color: #8e8e8e;
  margin: 0 0 32px;
  max-width: 420px;
  line-height: 1.5;
}

/* line 52, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  text-align: left;
  margin-bottom: 32px;
}

/* line 65, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-card__icon {
  flex-shrink: 0;
  color: #8e8e8e;
  margin-top: 2px;
}

/* line 72, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-card__text p {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #999;
  line-height: 1.5;
  margin: 0;
}

/* line 82, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 12px rgba(255, 0, 116, 0.2);
}

/* line 97, app/assets/stylesheets/geo_blocked.scss */
.geo-blocked-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.35);
  color: #fff;
}

/* ── Privacy Settings Tab ────────────────── */
/* line 105, app/assets/stylesheets/geo_blocked.scss */
.geo-block-section {
  margin-top: 8px;
}

/* line 109, app/assets/stylesheets/geo_blocked.scss */
.geo-block-search {
  position: relative;
  margin-bottom: 16px;
}

/* line 113, app/assets/stylesheets/geo_blocked.scss */
.geo-block-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

/* line 122, app/assets/stylesheets/geo_blocked.scss */
.geo-block-search__input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

/* line 134, app/assets/stylesheets/geo_blocked.scss */
.geo-block-search__input:focus {
  outline: none;
  border-color: #ff0074;
}

/* line 139, app/assets/stylesheets/geo_blocked.scss */
.geo-block-search__input::placeholder {
  color: #555;
}

/* line 143, app/assets/stylesheets/geo_blocked.scss */
.geo-block-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 0;
}

/* line 150, app/assets/stylesheets/geo_blocked.scss */
.geo-block-selected:empty {
  display: none;
}

/* line 153, app/assets/stylesheets/geo_blocked.scss */
.geo-block-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 0, 116, 0.08);
  border: 1px solid rgba(255, 0, 116, 0.18);
  border-radius: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ff3d9a;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 168, app/assets/stylesheets/geo_blocked.scss */
.geo-block-pill:hover {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.25);
  color: #dc3545;
}

/* line 174, app/assets/stylesheets/geo_blocked.scss */
.geo-block-pill__remove {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

/* line 181, app/assets/stylesheets/geo_blocked.scss */
.geo-block-count {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 191, app/assets/stylesheets/geo_blocked.scss */
.geo-block-clear {
  background: none;
  border: none;
  color: #ff3d9a;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

/* line 203, app/assets/stylesheets/geo_blocked.scss */
.geo-block-clear:hover {
  background: rgba(255, 0, 116, 0.08);
}

/* line 208, app/assets/stylesheets/geo_blocked.scss */
.geo-block-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
}

/* line 215, app/assets/stylesheets/geo_blocked.scss */
.geo-block-list::-webkit-scrollbar {
  width: 6px;
}

/* line 219, app/assets/stylesheets/geo_blocked.scss */
.geo-block-list::-webkit-scrollbar-track {
  background: transparent;
}

/* line 223, app/assets/stylesheets/geo_blocked.scss */
.geo-block-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

/* line 227, app/assets/stylesheets/geo_blocked.scss */
.geo-block-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* line 231, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  user-select: none;
}

/* line 241, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item:last-child {
  border-bottom: none;
}

/* line 243, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* line 247, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item--hidden {
  display: none;
}

/* line 249, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 261, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  border-radius: 3px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 274, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item input[type="checkbox"]:checked {
  border-color: #ff0074;
}

/* line 277, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

/* line 283, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item__flag {
  font-size: 18px;
  line-height: 1;
}

/* line 288, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item__name {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #ccc;
  flex: 1;
}

/* line 295, app/assets/stylesheets/geo_blocked.scss */
.geo-block-item__code {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #555;
  letter-spacing: 0.5px;
}

/* line 303, app/assets/stylesheets/geo_blocked.scss */
.geo-block-empty-search {
  text-align: center;
  padding: 24px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #666;
  display: none;
}

/* ── Interactive World Map ──────────────── */
/* line 314, app/assets/stylesheets/geo_blocked.scss */
.geo-map-container {
  position: relative;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px;
}

/* line 324, app/assets/stylesheets/geo_blocked.scss */
.geo-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* line 330, app/assets/stylesheets/geo_blocked.scss */
.geo-map-country {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* line 337, app/assets/stylesheets/geo_blocked.scss */
.geo-map-country:hover {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(255, 255, 255, 0.3);
}

/* line 342, app/assets/stylesheets/geo_blocked.scss */
.geo-map-country--blocked {
  fill: rgba(255, 0, 116, 0.35);
  stroke: rgba(255, 0, 116, 0.5);
}

/* line 346, app/assets/stylesheets/geo_blocked.scss */
.geo-map-country--blocked:hover {
  fill: rgba(255, 0, 116, 0.5);
  stroke: rgba(255, 0, 116, 0.7);
}

/* line 353, app/assets/stylesheets/geo_blocked.scss */
.geo-map-tooltip {
  display: none;
  position: absolute;
  padding: 5px 10px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #ccc;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  backdrop-filter: blur(8px);
}

/* line 368, app/assets/stylesheets/geo_blocked.scss */
.geo-map-tooltip--blocked {
  color: #ff3d9a;
  border-color: rgba(255, 0, 116, 0.25);
}

/* line 374, app/assets/stylesheets/geo_blocked.scss */
.geo-map-hint {
  text-align: center;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #555;
  margin-top: 6px;
}

@media (max-width: 768px) {
  /* line 383, app/assets/stylesheets/geo_blocked.scss */
  .geo-blocked-container {
    padding: 40px 16px;
  }
  /* line 387, app/assets/stylesheets/geo_blocked.scss */
  .geo-blocked-title {
    font-size: 20px;
  }
  /* line 391, app/assets/stylesheets/geo_blocked.scss */
  .geo-blocked-card {
    padding: 14px 16px;
  }
  /* line 395, app/assets/stylesheets/geo_blocked.scss */
  .geo-block-list {
    max-height: 260px;
  }
  /* line 399, app/assets/stylesheets/geo_blocked.scss */
  .geo-map-container {
    padding: 4px;
  }
}
/* ========================================
   CREATOR REFERRALS - Exotha Premium Dark
   Referral program dashboard aesthetic
   ======================================== */
/* line 7, app/assets/stylesheets/creator_referrals.scss */
.referrals-page {
  background: #000;
  min-height: calc(100vh - 90px);
  position: relative;
}

/* line 12, app/assets/stylesheets/creator_referrals.scss */
.referrals-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 116, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* line 24, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .social-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* line 35, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .main-feed {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

/* line 42, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .page-header {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 0, 116, 0.02) 50%, transparent 100%);
  border: 1px solid rgba(255, 0, 116, 0.12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* line 51, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 4px 0 0 4px;
}

/* line 62, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .page-header::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* line 74, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .page-title {
  font-size: 32px;
  font-weight: 800;
  color: #f5f5f5;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}

/* line 85, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .page-subtitle {
  color: #949494;
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* line 94, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .section-header {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
}

/* line 103, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .section-title {
  font-size: 22px;
  font-weight: 800;
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 112, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .section-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 123, app/assets/stylesheets/creator_referrals.scss */
.referrals-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

/* line 130, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* line 141, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 116, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* line 153, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card:hover {
  border-color: rgba(255, 0, 116, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 0, 116, 0.1);
}

/* line 158, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card:hover::before {
  opacity: 1;
}

/* line 163, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(255, 0, 116, 0.35);
}

/* line 168, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight::before {
  display: none;
}

/* line 172, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(255, 0, 116, 0.5);
}

/* line 177, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight .stat-icon {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* line 181, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight .stat-icon svg {
  fill: #fff;
}

/* line 186, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight .stat-label {
  color: rgba(255, 255, 255, 0.9);
}

/* line 190, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--highlight .stat-value {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* line 196, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-card--earnings .stat-value {
  color: #00d68f;
}

/* line 202, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.05) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* line 214, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-icon svg {
  width: 28px;
  height: 28px;
  fill: #ff0074;
  transition: transform 0.3s ease;
}

/* line 221, app/assets/stylesheets/creator_referrals.scss */
.stat-card:hover .referrals-page .stat-icon svg {
  transform: scale(1.1);
}

/* line 226, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-label {
  color: #949494;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

/* line 236, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

/* line 246, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
}

/* line 254, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-card-header {
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 263, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.15) 0%, rgba(255, 0, 116, 0.05) 100%);
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 12px;
  color: #ff0074;
}

/* line 276, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 6px;
}

/* line 284, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-card-description {
  font-size: 13px;
  color: #949494;
  line-height: 1.6;
  font-family: 'Rubik', sans-serif;
  margin: 0;
}

/* line 292, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-card-body {
  padding: 24px 28px;
}

/* line 296, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-input-group {
  display: flex;
  gap: 12px;
}

/* line 301, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  color: #ff3d9a;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease;
  min-width: 0;
}

/* line 315, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-input:focus {
  border-color: rgba(255, 0, 116, 0.4);
}

/* line 320, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* line 337, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 116, 0.4);
}

/* line 342, app/assets/stylesheets/creator_referrals.scss */
.referrals-link-card .link-copy-btn.copied {
  background: linear-gradient(135deg, #00d68f 0%, #00b875 100%);
  box-shadow: 0 8px 24px rgba(0, 214, 143, 0.3);
}

/* line 350, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section {
  margin-bottom: 32px;
  padding: 28px;
  background: var(--color-gray-02, #282828);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
}

/* line 357, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 24px;
  font-family: 'Montserrat', sans-serif;
}

/* line 365, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section .info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* line 371, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section .info-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* line 377, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section .info-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

/* line 393, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section .info-content strong {
  display: block;
  font-size: 14px;
  color: #f5f5f5;
  margin: 0 0 2px 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

/* line 402, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-section .info-content p {
  font-size: 13px;
  color: var(--color-gray-05, #949494);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
}

/* line 414, app/assets/stylesheets/creator_referrals.scss */
.referrals-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

/* line 421, app/assets/stylesheets/creator_referrals.scss */
.info-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 0, 116, 0.06);
  border: 1px solid rgba(255, 0, 116, 0.15);
  border-radius: 24px;
  color: #ff3d9a;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  transition: all 0.2s ease;
}

/* line 434, app/assets/stylesheets/creator_referrals.scss */
.info-pill:hover {
  background: rgba(255, 0, 116, 0.1);
  border-color: rgba(255, 0, 116, 0.3);
}

/* line 441, app/assets/stylesheets/creator_referrals.scss */
.referrals-section {
  background: linear-gradient(145deg, rgba(31, 31, 31, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* line 450, app/assets/stylesheets/creator_referrals.scss */
.referrals-table {
  width: 100%;
  border-collapse: collapse;
}

/* line 455, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-header {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 0, 116, 0.1);
}

/* line 459, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-header th {
  padding: 18px 28px;
  text-align: left;
  color: #949494;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

/* line 469, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-header th:first-child {
  padding-left: 32px;
}

/* line 473, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-header th:last-child {
  padding-right: 32px;
}

/* line 479, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

/* line 483, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row:hover {
  background: rgba(255, 0, 116, 0.03);
}

/* line 487, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row:last-child {
  border-bottom: none;
}

/* line 491, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row td {
  padding: 20px 28px;
  color: #f5f5f5;
  vertical-align: middle;
  font-family: 'Rubik', sans-serif;
}

/* line 497, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row td:first-child {
  padding-left: 32px;
}

/* line 501, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .table-row td:last-child {
  padding-right: 32px;
}

/* line 508, app/assets/stylesheets/creator_referrals.scss */
.creator-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* line 514, app/assets/stylesheets/creator_referrals.scss */
.creator-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 0, 116, 0.2);
}

/* line 522, app/assets/stylesheets/creator_referrals.scss */
.creator-avatar--small {
  width: 32px;
  height: 32px;
}

/* line 527, app/assets/stylesheets/creator_referrals.scss */
.creator-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 533, app/assets/stylesheets/creator_referrals.scss */
.creator-avatar .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.2) 0%, rgba(255, 0, 116, 0.1) 100%);
  color: #ff0074;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

/* line 547, app/assets/stylesheets/creator_referrals.scss */
.creator-info {
  display: flex;
  flex-direction: column;
}

/* line 552, app/assets/stylesheets/creator_referrals.scss */
.creator-name {
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
}

/* line 558, app/assets/stylesheets/creator_referrals.scss */
.creator-username {
  font-size: 12px;
  color: #949494;
}

/* line 564, app/assets/stylesheets/creator_referrals.scss */
.referral-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  font-family: 'Montserrat', sans-serif;
}

/* line 577, app/assets/stylesheets/creator_referrals.scss */
.referral-status--active {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.3);
}

/* line 582, app/assets/stylesheets/creator_referrals.scss */
.referral-status--active::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #4caf50;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

/* line 592, app/assets/stylesheets/creator_referrals.scss */
.referral-status--expired {
  background: linear-gradient(135deg, rgba(148, 148, 148, 0.15) 0%, rgba(148, 148, 148, 0.05) 100%);
  color: #949494;
  border-color: rgba(148, 148, 148, 0.3);
}

/* line 599, app/assets/stylesheets/creator_referrals.scss */
.commission-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  font-family: 'Montserrat', sans-serif;
}

/* line 612, app/assets/stylesheets/creator_referrals.scss */
.commission-status--pending {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.3);
}

/* line 617, app/assets/stylesheets/creator_referrals.scss */
.commission-status--pending::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #ffc107;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

/* line 627, app/assets/stylesheets/creator_referrals.scss */
.commission-status--credited {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.3);
}

/* line 633, app/assets/stylesheets/creator_referrals.scss */
.commission-status--reversed {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.05) 100%);
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.3);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* line 652, app/assets/stylesheets/creator_referrals.scss */
.referral-date {
  color: #949494;
  font-size: 13px;
}

/* line 657, app/assets/stylesheets/creator_referrals.scss */
.referral-earnings {
  font-size: 16px;
  font-weight: 700;
  color: #00d68f;
  font-family: 'Montserrat', sans-serif;
}

/* line 664, app/assets/stylesheets/creator_referrals.scss */
.commission-gross {
  font-size: 14px;
  font-weight: 600;
  color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
}

/* line 671, app/assets/stylesheets/creator_referrals.scss */
.commission-earned {
  font-size: 14px;
  font-weight: 700;
  color: #00d68f;
  font-family: 'Montserrat', sans-serif;
}

/* line 678, app/assets/stylesheets/creator_referrals.scss */
.payment-type-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 0, 116, 0.08);
  color: #ff3d9a;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* line 689, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .empty-state {
  padding: 80px 32px;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* line 698, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  opacity: 0.3;
}

/* line 705, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .empty-state .empty-title {
  color: #f5f5f5;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  text-align: center !important;
}

/* line 714, app/assets/stylesheets/creator_referrals.scss */
.referrals-page .empty-state .empty-text {
  color: #949494;
  font-size: 15px;
  margin-bottom: 28px;
  font-family: 'Rubik', sans-serif;
  text-align: center !important;
}

/* line 723, app/assets/stylesheets/creator_referrals.scss */
.referrals-mobile-spacer {
  display: none;
}

@media (max-width: 1024px) {
  /* line 728, app/assets/stylesheets/creator_referrals.scss */
  .referrals-mobile-spacer {
    display: block;
    height: 120px;
  }
}

@media (max-width: 1200px) {
  /* line 736, app/assets/stylesheets/creator_referrals.scss */
  .referrals-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* line 743, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 747, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page::before {
    position: absolute;
    height: 250px;
  }
  /* line 752, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .social-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 16px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
    max-width: 100vw;
  }
  /* line 760, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .left-sidebar {
    display: none;
  }
  /* line 764, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .main-feed {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* line 770, app/assets/stylesheets/creator_referrals.scss */
  .referrals-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }
  /* line 776, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-card {
    padding: 16px 14px;
    border-radius: 12px;
  }
  /* line 780, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-card--highlight {
    order: -1;
  }
  /* line 785, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  /* line 791, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-icon svg {
    width: 20px;
    height: 20px;
  }
  /* line 797, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-label {
    font-size: 9px;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  /* line 803, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-value {
    font-size: 20px;
  }
  /* line 807, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-header {
    padding: 20px 16px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  /* line 813, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-title {
    font-size: 22px;
  }
  /* line 817, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-subtitle {
    font-size: 13px;
  }
  /* line 821, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card {
    margin-bottom: 20px;
  }
  /* line 824, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-header {
    padding: 16px;
    gap: 12px;
  }
  /* line 829, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  /* line 834, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 840, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-title {
    font-size: 15px;
  }
  /* line 844, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-description {
    font-size: 12px;
  }
  /* line 848, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-card-body {
    padding: 16px;
  }
  /* line 852, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-input-group {
    flex-direction: column;
    gap: 8px;
  }
  /* line 857, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-input {
    padding: 12px 14px;
    font-size: 12px;
  }
  /* line 862, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card .link-copy-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 12px;
  }
  /* line 870, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section {
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  /* line 875, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section h3 {
    font-size: 15px;
    margin-bottom: 16px;
  }
  /* line 880, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section .info-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* line 885, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section .info-number {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  /* line 892, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section .info-content strong {
    font-size: 13px;
  }
  /* line 893, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section .info-content p {
    font-size: 12px;
  }
  /* line 897, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-pills {
    gap: 6px;
    margin-bottom: 20px;
  }
  /* line 902, app/assets/stylesheets/creator_referrals.scss */
  .info-pill {
    font-size: 10px;
    padding: 5px 10px;
  }
  /* line 907, app/assets/stylesheets/creator_referrals.scss */
  .referrals-section {
    border-radius: 14px;
    margin-bottom: 16px;
  }
  /* line 911, app/assets/stylesheets/creator_referrals.scss */
  .referrals-section:last-child {
    margin-bottom: 0;
  }
  /* line 916, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .section-header {
    padding: 16px;
  }
  /* line 920, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .section-title {
    font-size: 16px;
    gap: 8px;
  }
  /* line 924, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .section-title::before {
    height: 18px;
    width: 3px;
  }
  /* line 931, app/assets/stylesheets/creator_referrals.scss */
  .referrals-table {
    display: block;
  }
  /* line 934, app/assets/stylesheets/creator_referrals.scss */
  .referrals-table thead {
    display: none;
  }
  /* line 938, app/assets/stylesheets/creator_referrals.scss */
  .referrals-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }
  /* line 946, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px;
    gap: 8px;
  }
  /* line 955, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row:hover {
    background: rgba(255, 0, 116, 0.05);
    border-color: rgba(255, 0, 116, 0.15);
  }
  /* line 960, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row td {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  /* line 967, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row td:first-child {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 973, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row td:last-child {
    padding-right: 0;
  }
  /* line 977, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row td::before {
    content: attr(data-label);
    color: #666;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  /* line 986, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .table-row td:first-child::before {
    display: none;
  }
  /* line 992, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-state {
    padding: 40px 16px;
  }
  /* line 996, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }
  /* line 1002, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  /* line 1007, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-text {
    font-size: 13px;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  /* line 1014, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .social-layout {
    padding: 16px 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
}

@media (max-width: 480px) {
  /* line 1021, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .social-layout {
    padding: 10px 8px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px));
  }
  /* line 1026, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-header {
    padding: 16px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  /* line 1032, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-title {
    font-size: 18px;
  }
  /* line 1036, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .page-subtitle {
    font-size: 12px;
  }
  /* line 1040, app/assets/stylesheets/creator_referrals.scss */
  .referrals-stats {
    gap: 8px;
    margin-bottom: 16px;
  }
  /* line 1045, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-card {
    padding: 12px 10px;
    border-radius: 10px;
  }
  /* line 1050, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    border-radius: 8px;
  }
  /* line 1056, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-icon svg {
    width: 16px;
    height: 16px;
  }
  /* line 1062, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-label {
    font-size: 8px;
    margin-bottom: 4px;
  }
  /* line 1067, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .stat-value {
    font-size: 18px;
  }
  /* line 1071, app/assets/stylesheets/creator_referrals.scss */
  .referrals-link-card {
    margin-bottom: 16px;
    border-radius: 12px;
  }
  /* line 1076, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-section {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  /* line 1082, app/assets/stylesheets/creator_referrals.scss */
  .referrals-info-pills {
    margin-bottom: 16px;
  }
  /* line 1086, app/assets/stylesheets/creator_referrals.scss */
  .referrals-section {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  /* line 1091, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .section-header {
    padding: 14px;
  }
  /* line 1095, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .section-title {
    font-size: 14px;
  }
  /* line 1099, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-state {
    padding: 30px 14px;
  }
  /* line 1103, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  /* line 1109, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-title {
    font-size: 14px;
  }
  /* line 1113, app/assets/stylesheets/creator_referrals.scss */
  .referrals-page .empty-text {
    font-size: 12px;
  }
}
/* line 14, app/assets/stylesheets/polls.scss */
.poll-options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* line 21, app/assets/stylesheets/polls.scss */
.poll-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 26, app/assets/stylesheets/polls.scss */
.poll-option-row .form-input {
  flex: 1;
  margin-bottom: 0;
}

/* line 32, app/assets/stylesheets/polls.scss */
.poll-remove-option-placeholder {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* line 38, app/assets/stylesheets/polls.scss */
.poll-remove-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

/* line 53, app/assets/stylesheets/polls.scss */
.poll-remove-option-btn:hover {
  color: #ff4081;
  border-color: rgba(255, 64, 129, 0.4);
  background: rgba(255, 64, 129, 0.1);
}

/* line 60, app/assets/stylesheets/polls.scss */
.poll-add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #8e8e8e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* line 77, app/assets/stylesheets/polls.scss */
.poll-add-option-btn svg {
  flex-shrink: 0;
}

/* line 81, app/assets/stylesheets/polls.scss */
.poll-add-option-btn:hover {
  color: #ff4081;
  border-color: rgba(255, 64, 129, 0.4);
  background: rgba(255, 64, 129, 0.08);
  box-shadow: 0 0 20px rgba(255, 64, 129, 0.1);
}

/* line 90, app/assets/stylesheets/polls.scss */
.poll-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}

/* line 97, app/assets/stylesheets/polls.scss */
.poll-form-select {
  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='%23949494' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* line 105, app/assets/stylesheets/polls.scss */
.poll-form-select option {
  background: #1F1F1F;
  color: #f5f5f5;
}

/* line 112, app/assets/stylesheets/polls.scss */
.poll-access-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* line 123, app/assets/stylesheets/polls.scss */
.poll-access-toggle:hover {
  border-color: rgba(255, 64, 129, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

/* line 128, app/assets/stylesheets/polls.scss */
.poll-access-toggle:has(.poll-form-checkbox:checked) {
  border-color: rgba(255, 64, 129, 0.4);
  background: rgba(255, 64, 129, 0.08);
}

/* line 134, app/assets/stylesheets/polls.scss */
.poll-form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #ff4081;
  cursor: pointer;
  flex-shrink: 0;
}

/* line 142, app/assets/stylesheets/polls.scss */
.poll-access-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #C9C9C9;
  font-size: 14px;
  font-weight: 500;
}

/* line 150, app/assets/stylesheets/polls.scss */
.poll-access-label svg {
  flex-shrink: 0;
  color: #ff4081;
}

/* line 160, app/assets/stylesheets/polls.scss */
.poll-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
}

/* line 175, app/assets/stylesheets/polls.scss */
.post-caption-top.poll-question {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #f5f5f5;
  line-height: 1.5;
  padding: 0 16px;
  margin-bottom: 6px;
}

/* line 185, app/assets/stylesheets/polls.scss */
.poll-content {
  padding: 4px 16px 12px;
  width: 100%;
  box-sizing: border-box;
}

/* line 192, app/assets/stylesheets/polls.scss */
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* line 199, app/assets/stylesheets/polls.scss */
.poll-option-btn {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #e0e0e0;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* line 214, app/assets/stylesheets/polls.scss */
.poll-option-btn:hover:not(:disabled) {
  border-color: #ff0074;
  background: rgba(255, 0, 116, 0.08);
  color: #fff;
  transform: translateX(2px);
}

/* line 221, app/assets/stylesheets/polls.scss */
.poll-option-btn:active:not(:disabled) {
  transform: translateX(0);
  background: rgba(255, 0, 116, 0.12);
}

/* line 226, app/assets/stylesheets/polls.scss */
.poll-option-btn:disabled, .poll-option-btn--loading {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* line 235, app/assets/stylesheets/polls.scss */
.poll-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* line 242, app/assets/stylesheets/polls.scss */
.poll-result-option {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* line 250, app/assets/stylesheets/polls.scss */
.poll-result-option.poll-result-voted {
  border-color: rgba(255, 0, 116, 0.5);
  background: rgba(255, 0, 116, 0.04);
}

/* line 255, app/assets/stylesheets/polls.scss */
.poll-result-option.poll-result-winner:not(.poll-result-voted) {
  border-color: rgba(255, 61, 154, 0.25);
}

/* line 260, app/assets/stylesheets/polls.scss */
.poll-result-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.18), rgba(255, 61, 154, 0.06));
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  pointer-events: none;
}

/* line 271, app/assets/stylesheets/polls.scss */
.poll-result-voted .poll-result-bar {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.28), rgba(255, 61, 154, 0.1));
}

/* line 275, app/assets/stylesheets/polls.scss */
.poll-result-winner .poll-result-bar {
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.32), rgba(255, 61, 154, 0.12));
}

/* line 279, app/assets/stylesheets/polls.scss */
.poll-result-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  gap: 10px;
  z-index: 1;
}

/* line 289, app/assets/stylesheets/polls.scss */
.poll-result-text {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 302, app/assets/stylesheets/polls.scss */
.poll-result-voted .poll-result-text {
  color: #f5f5f5;
  font-weight: 500;
}

/* line 308, app/assets/stylesheets/polls.scss */
.poll-check {
  color: #ff0074;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* line 315, app/assets/stylesheets/polls.scss */
.poll-result-percentage {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #949494;
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
}

/* line 325, app/assets/stylesheets/polls.scss */
.poll-result-voted .poll-result-percentage {
  color: #ff3d9a;
}

/* line 330, app/assets/stylesheets/polls.scss */
.poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 339, app/assets/stylesheets/polls.scss */
.poll-total-votes {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
}

/* line 345, app/assets/stylesheets/polls.scss */
.poll-timer {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
}

/* line 350, app/assets/stylesheets/polls.scss */
.poll-timer.poll-timer-closed {
  color: #535353;
}

/* line 356, app/assets/stylesheets/polls.scss */
.poll-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  text-align: center;
  background: #1F1F1F;
  border: 1.5px solid #363636;
  border-radius: 10px;
}

/* line 369, app/assets/stylesheets/polls.scss */
.poll-locked-icon {
  color: #535353;
}

/* line 373, app/assets/stylesheets/polls.scss */
.poll-locked-text {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #949494;
  margin: 0;
}

/* line 388, app/assets/stylesheets/polls.scss */
.polls-dashboard-section {
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

/* line 396, app/assets/stylesheets/polls.scss */
.polls-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* line 404, app/assets/stylesheets/polls.scss */
.polls-dashboard-chevron-toggle {
  display: none;
}

/* line 408, app/assets/stylesheets/polls.scss */
.polls-dashboard-collapsible > summary {
  cursor: default;
  list-style: none;
}

/* line 412, app/assets/stylesheets/polls.scss */
.polls-dashboard-collapsible > summary::-webkit-details-marker {
  display: none;
}

/* line 415, app/assets/stylesheets/polls.scss */
.polls-dashboard-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 420, app/assets/stylesheets/polls.scss */
.polls-dashboard-title h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

/* line 429, app/assets/stylesheets/polls.scss */
.polls-dashboard-count {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #00d68f;
  background: rgba(0, 214, 143, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
}

/* line 439, app/assets/stylesheets/polls.scss */
.polls-dashboard-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* line 454, app/assets/stylesheets/polls.scss */
.polls-dashboard-new-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* line 460, app/assets/stylesheets/polls.scss */
.polls-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* line 466, app/assets/stylesheets/polls.scss */
.polls-dashboard-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s ease;
}

/* line 476, app/assets/stylesheets/polls.scss */
.polls-dashboard-card--active {
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 479, app/assets/stylesheets/polls.scss */
.polls-dashboard-card--active:hover {
  border-color: rgba(255, 0, 116, 0.4);
}

/* line 484, app/assets/stylesheets/polls.scss */
.polls-dashboard-card--closed {
  opacity: 0.7;
}

/* line 487, app/assets/stylesheets/polls.scss */
.polls-dashboard-card--closed:hover {
  opacity: 1;
}

/* line 493, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 498, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-top .menu-trigger {
  color: #8e8e8e;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* line 505, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-top .menu-trigger:hover {
  color: #f5f5f5;
}

/* line 511, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
}

/* line 520, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-status--open {
  color: #00d68f;
  background: rgba(0, 214, 143, 0.12);
}

/* line 525, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-status--closed {
  color: #949494;
  background: rgba(148, 148, 148, 0.12);
}

/* line 531, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-question {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #f5f5f5;
  line-height: 1.4;
  margin: 0;
}

/* line 540, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* line 546, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-bar {
  position: relative;
  width: 100%;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 558, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.3), rgba(255, 61, 154, 0.12));
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* line 568, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-text {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #C9C9C9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* line 581, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-pct {
  position: relative;
  z-index: 1;
  padding: 0 10px 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #949494;
  flex-shrink: 0;
}

/* line 592, app/assets/stylesheets/polls.scss */
.polls-dashboard-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  color: #8e8e8e;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 604, app/assets/stylesheets/polls.scss */
.polls-dashboard-closed {
  margin-top: 16px;
}

/* line 608, app/assets/stylesheets/polls.scss */
.polls-dashboard-closed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #8e8e8e;
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  transition: color 0.2s ease;
}

/* line 620, app/assets/stylesheets/polls.scss */
.polls-dashboard-closed-toggle:hover {
  color: #C9C9C9;
}

/* line 624, app/assets/stylesheets/polls.scss */
.polls-dashboard-closed-toggle::-webkit-details-marker {
  display: none;
}

/* line 629, app/assets/stylesheets/polls.scss */
.polls-dashboard-chevron {
  transition: transform 0.2s ease;
}

/* line 633, app/assets/stylesheets/polls.scss */
details[open] .polls-dashboard-chevron {
  transform: rotate(180deg);
}

/* line 637, app/assets/stylesheets/polls.scss */
.polls-dashboard-grid--closed {
  margin-top: 12px;
}

/* line 645, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview {
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
  min-height: 220px;
  background: linear-gradient(160deg, #1a0c14 0%, #0c0c0c 40%, #0d0a10 100%);
  gap: 14px;
  border-radius: 12px;
}

/* line 655, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

/* line 662, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-top .content-menu {
  flex-shrink: 0;
}

/* line 666, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-top .menu-trigger {
  color: #8e8e8e;
}

/* line 669, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-top .menu-trigger:hover {
  color: #f5f5f5;
}

/* line 675, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* line 682, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-question svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* line 687, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-question span {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f5;
  line-height: 1.4;
}

/* line 696, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

/* line 704, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-bar {
  position: relative;
  width: 100%;
  height: 26px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 716, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.3), rgba(255, 61, 154, 0.12));
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* line 726, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-text {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #C9C9C9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* line 739, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-pct {
  position: relative;
  z-index: 1;
  padding: 0 10px 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #949494;
  flex-shrink: 0;
}

/* line 750, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  color: #8e8e8e;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* line 762, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-status {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
}

/* line 770, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-status--open {
  color: #00d68f;
  background: rgba(0, 214, 143, 0.12);
}

/* line 775, app/assets/stylesheets/polls.scss */
.poll-dashboard-preview-status--closed {
  color: #949494;
  background: rgba(148, 148, 148, 0.12);
}

/* line 785, app/assets/stylesheets/polls.scss */
.my-active-polls {
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

/* line 791, app/assets/stylesheets/polls.scss */
.my-active-polls-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 8px;
}

/* line 797, app/assets/stylesheets/polls.scss */
.my-active-polls-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ff3d9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* line 812, app/assets/stylesheets/polls.scss */
.profile-active-polls {
  margin-bottom: 24px;
  padding: 0 4px;
}

/* line 817, app/assets/stylesheets/polls.scss */
.profile-active-polls-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
}

/* line 823, app/assets/stylesheets/polls.scss */
.profile-active-polls-header span {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ff3d9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* line 833, app/assets/stylesheets/polls.scss */
.profile-active-polls-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 839, app/assets/stylesheets/polls.scss */
.profile-poll-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

/* line 846, app/assets/stylesheets/polls.scss */
.profile-poll-card:hover {
  border-color: rgba(255, 0, 116, 0.2);
}

/* line 851, app/assets/stylesheets/polls.scss */
.profile-poll-question {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #f5f5f5;
  padding: 16px 16px 4px;
  line-height: 1.4;
}

/* line 861, app/assets/stylesheets/polls.scss */
.profile-poll-body .poll-content {
  padding: 4px 12px 12px;
}

/* line 870, app/assets/stylesheets/polls.scss */
.poll-profile-card {
  cursor: pointer;
}

/* line 874, app/assets/stylesheets/polls.scss */
.poll-profile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(255, 61, 154, 0.04) 100%);
  min-height: 200px;
  border-radius: 8px;
}

/* line 886, app/assets/stylesheets/polls.scss */
.poll-profile-question {
  color: #f5f5f5;
  font-size: 14px;
  margin: 12px 0 8px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  /* line 898, app/assets/stylesheets/polls.scss */
  .poll-settings-grid {
    grid-template-columns: 1fr;
  }
  /* line 902, app/assets/stylesheets/polls.scss */
  .polls-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* line 908, app/assets/stylesheets/polls.scss */
  .poll-settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* line 913, app/assets/stylesheets/polls.scss */
  .polls-dashboard-section {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 16px;
  }
  /* line 921, app/assets/stylesheets/polls.scss */
  .polls-dashboard-collapsible > .polls-dashboard-header {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0;
    gap: 8px;
  }
  /* line 932, app/assets/stylesheets/polls.scss */
  .polls-dashboard-collapsible > .polls-dashboard-header::-webkit-details-marker {
    display: none;
  }
  /* line 935, app/assets/stylesheets/polls.scss */
  .polls-dashboard-collapsible .polls-dashboard-chevron-toggle {
    display: block;
    color: #8e8e8e;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  /* line 942, app/assets/stylesheets/polls.scss */
  .polls-dashboard-collapsible[open] .polls-dashboard-chevron-toggle {
    transform: rotate(180deg);
  }
  /* line 946, app/assets/stylesheets/polls.scss */
  .polls-dashboard-collapsible[open] > .polls-dashboard-header {
    margin-bottom: 12px;
  }
  /* line 951, app/assets/stylesheets/polls.scss */
  .polls-dashboard-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  /* line 957, app/assets/stylesheets/polls.scss */
  .polls-dashboard-title h2 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* line 963, app/assets/stylesheets/polls.scss */
  .poll-option-btn {
    font-size: 13px;
    padding: 11px 14px;
  }
  /* line 968, app/assets/stylesheets/polls.scss */
  .poll-result-content {
    padding: 10px 14px;
  }
  /* line 972, app/assets/stylesheets/polls.scss */
  .poll-result-text {
    font-size: 13px;
  }
  /* line 976, app/assets/stylesheets/polls.scss */
  .poll-result-percentage {
    font-size: 12px;
  }
}
/* line 1, app/assets/stylesheets/push_banner.scss */
.push-banner {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  background: var(--color-gray-02, #282828);
  border: 1px solid var(--color-gray-03, #363636);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: pushBannerSlideUp 0.3s ease-out;
}

/* line 19, app/assets/stylesheets/push_banner.scss */
.push-banner.hidden {
  display: none;
}

/* line 23, app/assets/stylesheets/push_banner.scss */
.push-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* line 30, app/assets/stylesheets/push_banner.scss */
.push-banner__icon {
  flex-shrink: 0;
  color: var(--color-primary-01, #ff0074);
}

/* line 35, app/assets/stylesheets/push_banner.scss */
.push-banner__text {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-06, #C9C9C9);
  line-height: 1.4;
}

/* line 42, app/assets/stylesheets/push_banner.scss */
.push-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* line 48, app/assets/stylesheets/push_banner.scss */
.push-banner__btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* line 58, app/assets/stylesheets/push_banner.scss */
.push-banner__btn--accept {
  background: linear-gradient(135deg, var(--color-primary-01, #ff0074), var(--color-primary-02, #ff3d9a));
  color: #fff;
}

/* line 62, app/assets/stylesheets/push_banner.scss */
.push-banner__btn--accept:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* line 68, app/assets/stylesheets/push_banner.scss */
.push-banner__btn--dismiss {
  background: transparent;
  color: var(--color-gray-05, #949494);
}

/* line 72, app/assets/stylesheets/push_banner.scss */
.push-banner__btn--dismiss:hover {
  color: var(--color-gray-06, #C9C9C9);
}

@keyframes pushBannerSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 480px) {
  /* line 91, app/assets/stylesheets/push_banner.scss */
  .push-banner {
    flex-direction: column;
    bottom: 90px;
    gap: 12px;
  }
  /* line 96, app/assets/stylesheets/push_banner.scss */
  .push-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }
}
/* line 2, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__grid {
  display: grid;
  gap: 0;
}

/* line 7, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__header-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-03, #363636);
}

/* line 15, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-gray-02, #282828);
  align-items: center;
}

/* line 24, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__channel-col {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray-05, #949494);
}

/* line 30, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__category-name {
  display: block;
  color: var(--color-gray-06, #C9C9C9);
  font-size: 14px;
  font-weight: 500;
}

/* line 37, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__category-desc {
  display: block;
  color: var(--color-gray-05, #949494);
  font-size: 12px;
  margin-top: 2px;
}

/* line 44, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

/* line 51, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__toggle input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none;
}

/* line 60, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
}

/* line 64, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider::before {
  transform: translateX(16px);
}

/* line 69, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__toggle input[type="hidden"] {
  display: none;
}

/* line 74, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__slider {
  position: absolute;
  inset: 0;
  background: var(--color-gray-04, #535353);
  border-radius: 20px;
  transition: 0.2s ease;
}

/* line 81, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.2s ease;
}

/* line 94, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__section-divider {
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--color-gray-03, #363636);
  margin-bottom: 4px;
}

/* line 99, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__section-divider span {
  color: var(--color-gray-05, #949494);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* line 107, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__push-link {
  color: var(--color-primary-01, #ff0074);
  font-size: 11px;
  text-decoration: none;
}

/* line 112, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__push-link:hover {
  text-decoration: underline;
}

/* line 117, app/assets/stylesheets/notification_preferences.scss */
.notif-prefs__actions {
  padding-top: 20px;
  text-align: right;
}

@media (max-width: 1024px) {
  /* line 125, app/assets/stylesheets/notification_preferences.scss */
  #tab-push_notifications {
    padding-bottom: 100px;
  }
}

@media (max-width: 480px) {
  /* line 132, app/assets/stylesheets/notification_preferences.scss */
  .notif-prefs__header-row, .notif-prefs__row {
    grid-template-columns: 1fr 50px 50px 50px;
    gap: 4px;
  }
  /* line 138, app/assets/stylesheets/notification_preferences.scss */
  .notif-prefs__channel-col {
    font-size: 10px;
  }
  /* line 142, app/assets/stylesheets/notification_preferences.scss */
  .notif-prefs__toggle {
    width: 32px;
    height: 18px;
  }
  /* line 146, app/assets/stylesheets/notification_preferences.scss */
  .notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider::before {
    transform: translateX(14px);
  }
  /* line 151, app/assets/stylesheets/notification_preferences.scss */
  .notif-prefs__slider::before {
    width: 14px;
    height: 14px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · NOTIFICATION PREFERENCES OVERRIDE
   -----------------------------------------------------------------
   Override visual del partial `shared/_notification_preferences`
   renderizado dentro de `.stg-card` en /users/edit y /creator/profile/edit.

   Cero cambios al HTML/ERB · push permission flow, form_tag,
   submit handler intactos.

   Carga DESPUÉS de notification_preferences en el manifest.
   ================================================================= */
/* -----------------------------------------------------------------
   FORM CONTAINER
   ----------------------------------------------------------------- */
/* line 17, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs {
  margin-top: 4px;
}

/* -----------------------------------------------------------------
   GRID HEADER · channel labels (in-app, email, push)
   ----------------------------------------------------------------- */
/* line 25, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__header-row {
  display: grid !important;
  grid-template-columns: 1fr 56px 56px 56px !important;
  gap: 10px !important;
  padding: 0 4px 12px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
  /* Línea brand sutil bajo el header */
}

/* line 35, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__header-row::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.55) 0%, transparent 100%);
}

/* line 45, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__header-row .notif-prefs__channel-col {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* -----------------------------------------------------------------
   ROW · cada categoría
   ----------------------------------------------------------------- */
/* line 60, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__row {
  display: grid !important;
  grid-template-columns: 1fr 56px 56px 56px !important;
  gap: 10px !important;
  padding: 14px 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  align-items: center;
  border-radius: 8px;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line 70, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__row:last-child {
  border-bottom: none !important;
}

/* line 74, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__row:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* -----------------------------------------------------------------
   LABEL COLUMN · category name + description
   ----------------------------------------------------------------- */
/* line 83, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__category-name {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  color: #f5f5f5 !important;
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}

/* line 94, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__category-desc {
  display: block !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.45 !important;
  margin-top: 0 !important;
}

/* -----------------------------------------------------------------
   CHANNEL COLUMN · centro · contiene toggle o "enable push"
   ----------------------------------------------------------------- */
/* line 108, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__row .notif-prefs__channel-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* -----------------------------------------------------------------
   TOGGLE · switch premium con brand magenta cuando activo
   ----------------------------------------------------------------- */
/* line 119, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle {
  position: relative !important;
  display: inline-block !important;
  width: 40px !important;
  height: 22px !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* line 127, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

/* line 136, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 116, 0.45), 0 0 12px rgba(255, 0, 116, 0.35) !important;
}

/* line 143, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider::before {
  transform: translateX(18px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* line 148, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle input[type="checkbox"]:focus-visible + .notif-prefs__slider {
  outline: 2px solid rgba(255, 0, 116, 0.45);
  outline-offset: 2px;
}

/* line 154, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle input[type="hidden"] {
  display: none !important;
}

/* line 158, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__toggle:hover .notif-prefs__slider {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* line 163, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__slider {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* line 174, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__slider::before {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  left: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* -----------------------------------------------------------------
   SECTION DIVIDER · separador entre fan y creator categorías
   ----------------------------------------------------------------- */
/* line 195, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__section-divider {
  margin: 24px 0 8px !important;
  padding: 0 !important;
  border-bottom: none !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Línea brand a la derecha del label */
}

/* line 204, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__section-divider span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: rgba(255, 0, 116, 0.85) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  flex-shrink: 0;
}

/* line 215, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 0, 116, 0.4) 0%, rgba(255, 255, 255, 0.04) 100%);
}

/* -----------------------------------------------------------------
   ENABLE PUSH · link cuando no hay subscripción push activa
   ----------------------------------------------------------------- */
/* line 227, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__enable-push {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* line 233, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__push-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 9px !important;
  background: rgba(255, 0, 116, 0.1) !important;
  border: 1px solid rgba(255, 0, 116, 0.3) !important;
  border-radius: 999px !important;
  color: #ff7eb8 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* line 254, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__push-link:hover {
  background: rgba(255, 0, 116, 0.18) !important;
  border-color: rgba(255, 0, 116, 0.55) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------------
   ACTIONS · save button
   ----------------------------------------------------------------- */
/* line 266, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__actions {
  padding-top: 22px !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: right !important;
  /* `.stg-btn--primary` ya viene del exo-user-settings, solo aseguramos espacio */
}

/* line 273, app/assets/stylesheets/_components.exo-notif-prefs.scss */
.notif-prefs__actions .stg-btn,
.notif-prefs__actions input[type="submit"] {
  min-width: 140px;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */
@media (max-width: 768px) {
  /* Header row · más compacto */
  /* line 285, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__header-row {
    grid-template-columns: 1fr 48px 48px 48px !important;
    gap: 6px !important;
    padding: 0 2px 10px !important;
  }
  /* line 290, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__header-row .notif-prefs__channel-col {
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
  }
  /* line 296, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__row {
    grid-template-columns: 1fr 48px 48px 48px !important;
    gap: 6px !important;
    padding: 14px 2px !important;
  }
  /* line 302, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__category-name {
    font-size: 13.5px !important;
  }
  /* line 306, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__category-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  /* Toggle un poco más pequeño · suficiente como tap target con padding del row */
  /* line 312, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__toggle {
    width: 36px !important;
    height: 20px !important;
  }
  /* line 316, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider::before {
    transform: translateX(16px) !important;
  }
  /* line 321, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__slider::before {
    width: 14px !important;
    height: 14px !important;
  }
  /* Push link · convertido en icono "+" en mobile para encajar en la columna
     de 48px sin desbordar la grilla. El click sigue gatillando push-permission. */
  /* line 328, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__push-link {
    width: 28px !important;
    height: 22px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    overflow: hidden;
    position: relative;
  }
  /* line 338, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__push-link::before {
    content: "+" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ff7eb8 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  /* line 349, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__push-link:hover::before {
    color: #fff !important;
  }
  /* Actions · botón full-width */
  /* line 355, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__actions {
    text-align: stretch !important;
  }
  /* line 358, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__actions .stg-btn,
.notif-prefs__actions input[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}

/* Extra-narrow viewport (≤380px) · grid aún más estrecho */
@media (max-width: 380px) {
  /* line 369, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__header-row,
.notif-prefs__row {
    grid-template-columns: 1fr 42px 42px 42px !important;
    gap: 4px !important;
  }
  /* line 375, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__toggle {
    width: 32px !important;
    height: 18px !important;
  }
  /* line 379, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__toggle input[type="checkbox"]:checked + .notif-prefs__slider::before {
    transform: translateX(14px) !important;
  }
  /* line 384, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__slider::before {
    width: 12px !important;
    height: 12px !important;
  }
  /* line 389, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__push-link {
    width: 26px !important;
    height: 20px !important;
  }
  /* line 393, app/assets/stylesheets/_components.exo-notif-prefs.scss */
  .notif-prefs__push-link::before {
    font-size: 14px !important;
  }
}
/* line 5, app/assets/stylesheets/upload_toast.scss */
.upload-toast {
  position: fixed;
  bottom: -100px;
  right: 20px;
  width: 340px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

/* line 20, app/assets/stylesheets/upload_toast.scss */
.upload-toast--visible {
  bottom: 20px;
  opacity: 1;
  pointer-events: auto;
}

/* line 26, app/assets/stylesheets/upload_toast.scss */
.upload-toast--success {
  border-color: rgba(76, 175, 80, 0.4);
}

/* line 29, app/assets/stylesheets/upload_toast.scss */
.upload-toast--success .upload-toast__icon {
  color: #4caf50;
}

/* line 33, app/assets/stylesheets/upload_toast.scss */
.upload-toast--success .upload-toast__progress-fill {
  background: linear-gradient(90deg, #4caf50, #66bb6a) !important;
}

/* line 37, app/assets/stylesheets/upload_toast.scss */
.upload-toast--success .upload-toast__link {
  display: block !important;
}

/* line 42, app/assets/stylesheets/upload_toast.scss */
.upload-toast--error {
  border-color: rgba(244, 67, 54, 0.4);
}

/* line 45, app/assets/stylesheets/upload_toast.scss */
.upload-toast--error .upload-toast__icon {
  color: #f44336;
}

/* line 49, app/assets/stylesheets/upload_toast.scss */
.upload-toast--error .upload-toast__progress-fill {
  background: linear-gradient(90deg, #f44336, #e57373) !important;
}

/* line 55, app/assets/stylesheets/upload_toast.scss */
.upload-toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* line 62, app/assets/stylesheets/upload_toast.scss */
.upload-toast__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* line 70, app/assets/stylesheets/upload_toast.scss */
.upload-toast__icon {
  color: #ff0074;
  flex-shrink: 0;
}

/* line 75, app/assets/stylesheets/upload_toast.scss */
.upload-toast__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* line 81, app/assets/stylesheets/upload_toast.scss */
.upload-toast__status {
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* line 88, app/assets/stylesheets/upload_toast.scss */
.upload-toast__filename {
  color: #888;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 97, app/assets/stylesheets/upload_toast.scss */
.upload-toast__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* line 104, app/assets/stylesheets/upload_toast.scss */
.upload-toast__percent {
  color: #ff0074;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  min-width: 32px;
  text-align: right;
}

/* line 113, app/assets/stylesheets/upload_toast.scss */
.upload-toast__close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* line 125, app/assets/stylesheets/upload_toast.scss */
.upload-toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* line 132, app/assets/stylesheets/upload_toast.scss */
.upload-toast__progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

/* line 139, app/assets/stylesheets/upload_toast.scss */
.upload-toast__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff0074, #ff3d9a);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* line 148, app/assets/stylesheets/upload_toast.scss */
.upload-toast__link {
  margin-top: 10px;
  text-align: right;
}

/* line 152, app/assets/stylesheets/upload_toast.scss */
.upload-toast__link a {
  color: #ff0074;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* line 160, app/assets/stylesheets/upload_toast.scss */
.upload-toast__link a:hover {
  color: #ff3d9a;
}

@media (max-width: 1024px) {
  /* line 169, app/assets/stylesheets/upload_toast.scss */
  .upload-toast {
    right: 10px;
    left: 10px;
    width: auto;
  }
  /* line 174, app/assets/stylesheets/upload_toast.scss */
  .upload-toast--visible {
    bottom: 100px;
  }
}

@media (max-width: 480px) {
  /* line 181, app/assets/stylesheets/upload_toast.scss */
  .upload-toast {
    right: 8px;
    left: 8px;
    padding: 12px 14px;
  }
  /* line 186, app/assets/stylesheets/upload_toast.scss */
  .upload-toast__status {
    font-size: 12px;
  }
  /* line 190, app/assets/stylesheets/upload_toast.scss */
  .upload-toast__filename {
    font-size: 10px;
  }
}
@charset "UTF-8";
/* ========================================
   REELS — Vertical scroll TikTok-style
   Full-screen clips with creator overlay
   ======================================== */
/* Default (mobile-first / fallback): reels take over the viewport.
   Fixed positioning bypasses the layout flow entirely and adapts
   to the visible viewport (solves mobile Chrome 100vh / URL bar issue). */
/* line 9, app/assets/stylesheets/reels.scss */
.reels-page {
  background: #000;
  position: fixed;
  top: 70px;
  /* below sticky header */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* line 19, app/assets/stylesheets/reels.scss */
.reels-container {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* line 28, app/assets/stylesheets/reels.scss */
.reels-container::-webkit-scrollbar {
  display: none;
}

/* ========================================
   Mobile (≤1024px): full-screen reels, hide sidebars.
   Override parent layout that would add header padding / push right-sidebar below.
   ======================================== */
@media (max-width: 1024px) {
  /* line 38, app/assets/stylesheets/reels.scss */
  .switch-pro-container:has(.reels-layout) {
    padding-top: 0 !important;
    min-height: 0 !important;
  }
  /* line 43, app/assets/stylesheets/reels.scss */
  .reels-layout .left-sidebar,
.reels-layout .right-sidebar {
    display: none;
  }
  /* line 48, app/assets/stylesheets/reels.scss */
  .reels-layout .social-layout {
    display: block;
    padding: 0;
    max-width: none;
    gap: 0;
    min-height: 0;
  }
  /* line 56, app/assets/stylesheets/reels.scss */
  .reels-layout .main-feed.reels-main {
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
  }
}

/* ========================================
   Desktop (≥1025px): reels live inside the 3-column social-layout grid.
   Left sidebar (nav), central reels column, right sidebar (suggestions).
   ======================================== */
@media (min-width: 1025px) {
  /* line 69, app/assets/stylesheets/reels.scss */
  .reels-layout .social-layout {
    max-width: 1400px;
    padding: 20px;
    gap: 30px;
  }
  /* line 75, app/assets/stylesheets/reels.scss */
  .reels-layout .main-feed.reels-main {
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  /* line 82, app/assets/stylesheets/reels.scss */
  .reels-layout .reels-page {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    height: calc(100vh - 110px);
    /* viewport - header(70) - grid padding(20+20) */
    max-height: 820px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  /* line 96, app/assets/stylesheets/reels.scss */
  .reels-layout .reels-container {
    max-width: 100%;
    height: 100%;
  }
}

/* Individual reel item */
/* line 103, app/assets/stylesheets/reels.scss */
.reel-item {
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* Video fills container — contain ensures watermark is never cropped */
/* line 115, app/assets/stylesheets/reels.scss */
.reel-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Bottom gradient overlay for readability */
/* line 123, app/assets/stylesheets/reels.scss */
.reel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%);
  z-index: 5;
}

/* Creator info row */
/* line 139, app/assets/stylesheets/reels.scss */
.reel-creator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}

/* line 147, app/assets/stylesheets/reels.scss */
.reel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ff0074;
  object-fit: cover;
  flex-shrink: 0;
}

/* line 156, app/assets/stylesheets/reels.scss */
.reel-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ff0074;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* line 171, app/assets/stylesheets/reels.scss */
.reel-username {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-secondary, "Rubik", sans-serif);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Description text */
/* line 180, app/assets/stylesheets/reels.scss */
.reel-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.4;
  max-height: 40px;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 12px;
}

/* Subscribe CTA button */
/* line 191, app/assets/stylesheets/reels.scss */
.reel-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(255, 0, 116, 0.3);
}

/* line 205, app/assets/stylesheets/reels.scss */
.reel-subscribe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 116, 0.4);
  color: #fff;
}

/* ═══════════════════════════════════
   RIGHT SIDE ACTIONS (TikTok-style)
   ═══════════════════════════════════ */
/* line 215, app/assets/stylesheets/reels.scss */
.reel-actions {
  position: absolute;
  right: 12px;
  bottom: 140px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* line 226, app/assets/stylesheets/reels.scss */
.reel-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* line 233, app/assets/stylesheets/reels.scss */
.reel-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* line 248, app/assets/stylesheets/reels.scss */
.reel-action-btn svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* line 254, app/assets/stylesheets/reels.scss */
.reel-action-btn:hover {
  background: rgba(255, 0, 116, 0.5);
  transform: scale(1.1);
}

/* line 259, app/assets/stylesheets/reels.scss */
.reel-action-btn:active {
  transform: scale(0.95);
}

/* line 264, app/assets/stylesheets/reels.scss */
.reel-action-count {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Creator avatar at bottom of actions */
/* line 272, app/assets/stylesheets/reels.scss */
.reel-action-avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ff0074;
  overflow: hidden;
  margin-top: 4px;
  transition: transform 0.2s ease;
}

/* line 282, app/assets/stylesheets/reels.scss */
.reel-action-avatar:hover {
  transform: scale(1.08);
}

/* line 287, app/assets/stylesheets/reels.scss */
.reel-action-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 293, app/assets/stylesheets/reels.scss */
.reel-action-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

/* Empty state */
/* line 306, app/assets/stylesheets/reels.scss */
.reels-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8e8e8e;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

/* line 317, app/assets/stylesheets/reels.scss */
.reels-empty p {
  font-size: 15px;
}

/* line 322, app/assets/stylesheets/reels.scss */
.reels-empty-icon {
  width: 64px;
  height: 64px;
  fill: #535353;
  margin-bottom: 8px;
}

/* line 329, app/assets/stylesheets/reels.scss */
.reels-back {
  color: #ff0074;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}

/* line 336, app/assets/stylesheets/reels.scss */
.reels-back:hover {
  color: #ff3d9a;
}

/* Like button: hide the inline count the like_controller injects inside the button */
/* line 342, app/assets/stylesheets/reels.scss */
.reel-like-wrap .reel-action-btn .like-count {
  display: none !important;
}

/* Like button active state */
/* line 347, app/assets/stylesheets/reels.scss */
.reel-action-liked,
.reel-like-wrap .reel-action-btn.liked {
  color: #ff0074 !important;
}

/* ═══════════════════════════════════
   COMMENTS BOTTOM SHEET
   ═══════════════════════════════════ */
/* line 355, app/assets/stylesheets/reels.scss */
.reel-comments-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* line 363, app/assets/stylesheets/reels.scss */
.reel-comments-sheet.open {
  pointer-events: auto;
  opacity: 1;
}

/* line 367, app/assets/stylesheets/reels.scss */
.reel-comments-sheet.open .reel-comments-panel {
  transform: translateY(0);
}

/* line 373, app/assets/stylesheets/reels.scss */
.reel-comments-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* line 379, app/assets/stylesheets/reels.scss */
.reel-comments-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background: #1a1a1a;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 393, app/assets/stylesheets/reels.scss */
.reel-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* line 402, app/assets/stylesheets/reels.scss */
.reel-comments-title {
  font-size: 16px;
  font-weight: 700;
  color: #f5f5f5;
  font-family: 'Rubik', sans-serif;
}

/* line 408, app/assets/stylesheets/reels.scss */
.reel-comments-title span {
  font-weight: 400;
  color: #8e8e8e;
  font-size: 14px;
}

/* line 415, app/assets/stylesheets/reels.scss */
.reel-comments-close {
  background: none;
  border: none;
  color: #8e8e8e;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}

/* line 424, app/assets/stylesheets/reels.scss */
.reel-comments-close:hover {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.08);
}

/* line 430, app/assets/stylesheets/reels.scss */
.reel-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  -webkit-overflow-scrolling: touch;
}

/* line 437, app/assets/stylesheets/reels.scss */
.reel-comments-loading,
.reel-comments-empty {
  text-align: center;
  color: #8e8e8e;
  font-size: 14px;
  padding: 40px 0;
}

/* Individual comment */
/* line 446, app/assets/stylesheets/reels.scss */
.reel-comment {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

/* line 451, app/assets/stylesheets/reels.scss */
.reel-comment + .reel-comment {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* line 456, app/assets/stylesheets/reels.scss */
.reel-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* line 464, app/assets/stylesheets/reels.scss */
.reel-comment-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0074, #ff3d9a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

/* line 478, app/assets/stylesheets/reels.scss */
.reel-comment-body {
  flex: 1;
  min-width: 0;
}

/* line 483, app/assets/stylesheets/reels.scss */
.reel-comment-name {
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
  margin-right: 8px;
}

/* line 490, app/assets/stylesheets/reels.scss */
.reel-comment-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 2px 0 4px;
  word-break: break-word;
}

/* line 498, app/assets/stylesheets/reels.scss */
.reel-comment-time {
  font-size: 12px;
  color: #8e8e8e;
}

/* Comment input form */
/* line 504, app/assets/stylesheets/reels.scss */
.reel-comments-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* line 513, app/assets/stylesheets/reels.scss */
.reel-comments-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 10px 16px;
  color: #f5f5f5;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

/* line 524, app/assets/stylesheets/reels.scss */
.reel-comments-input::placeholder {
  color: #8e8e8e;
}

/* line 528, app/assets/stylesheets/reels.scss */
.reel-comments-input:focus {
  border-color: #ff0074;
}

/* line 533, app/assets/stylesheets/reels.scss */
.reel-comments-send {
  background: none;
  border: none;
  color: #ff0074;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* line 543, app/assets/stylesheets/reels.scss */
.reel-comments-send:hover {
  background: rgba(255, 0, 116, 0.1);
}

/* Mobile: panel above bottom nav */
@media (max-width: 1024px) {
  /* line 550, app/assets/stylesheets/reels.scss */
  .reel-comments-panel {
    bottom: 80px;
    /* Clear bottom nav */
    height: 50vh;
    border-radius: 16px 16px 0 0;
  }
}

/* Desktop: center the panel */
@media (min-width: 1025px) {
  /* line 559, app/assets/stylesheets/reels.scss */
  .reel-comments-panel {
    max-width: 480px;
    left: 50%;
    right: auto;
    height: 55vh;
    transform: translateX(-50%) translateY(100%);
    border-radius: 16px 16px 0 0;
  }
  /* line 568, app/assets/stylesheets/reels.scss */
  .reel-comments-sheet.open .reel-comments-panel {
    transform: translateX(-50%) translateY(0);
  }
}

/* ═══════════════════════════════════
   DESKTOP (1024px+)
   ═══════════════════════════════════ */
@media (min-width: 1024px) {
  /* line 577, app/assets/stylesheets/reels.scss */
  .reels-page {
    top: 90px;
    /* Desktop header is 90px */
  }
  /* line 581, app/assets/stylesheets/reels.scss */
  .reels-container {
    max-width: 420px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* line 587, app/assets/stylesheets/reels.scss */
  .reel-overlay {
    padding: 24px 20px 32px;
  }
  /* line 591, app/assets/stylesheets/reels.scss */
  .reel-username {
    font-size: 15px;
  }
}

/* ═══════════════════════════════════
   MOBILE — Bottom nav compensation
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  /* line 600, app/assets/stylesheets/reels.scss */
  .reels-page {
    /* Clear mobile bottom nav (50px item + 16px padding + 1px border = 67px,
       plus iOS safe-area-inset-bottom for notched devices) */
    bottom: calc(68px + env(safe-area-inset-bottom));
  }
  /* line 606, app/assets/stylesheets/reels.scss */
  .reels-container {
    max-width: 100%;
  }
  /* line 610, app/assets/stylesheets/reels.scss */
  .reel-overlay {
    padding: 16px 14px 20px;
  }
}

@media (max-width: 480px) {
  /* line 616, app/assets/stylesheets/reels.scss */
  .reel-avatar {
    width: 32px;
    height: 32px;
  }
  /* line 621, app/assets/stylesheets/reels.scss */
  .reel-avatar-placeholder {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  /* line 627, app/assets/stylesheets/reels.scss */
  .reel-username {
    font-size: 13px;
  }
  /* line 631, app/assets/stylesheets/reels.scss */
  .reel-description {
    font-size: 12px;
  }
  /* line 635, app/assets/stylesheets/reels.scss */
  .reel-subscribe-btn {
    padding: 9px 18px;
    font-size: 12px;
  }
  /* line 640, app/assets/stylesheets/reels.scss */
  .reel-actions {
    right: 8px;
    bottom: 120px;
    gap: 16px;
  }
  /* line 646, app/assets/stylesheets/reels.scss */
  .reel-action-btn {
    width: 42px;
    height: 42px;
  }
  /* line 650, app/assets/stylesheets/reels.scss */
  .reel-action-btn svg {
    width: 22px;
    height: 22px;
  }
  /* line 656, app/assets/stylesheets/reels.scss */
  .reel-action-count {
    font-size: 11px;
  }
  /* line 660, app/assets/stylesheets/reels.scss */
  .reel-action-avatar {
    width: 38px;
    height: 38px;
  }
}

/* ═══════════════════════════════════
   PROFILE CLIPS SECTION
   Horizontal carousel on creator profile
   ═══════════════════════════════════ */
/* line 670, app/assets/stylesheets/reels.scss */
.profile-clips-section {
  margin-bottom: 24px;
  padding: 0 4px;
}

/* line 675, app/assets/stylesheets/reels.scss */
.profile-clips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
}

/* line 682, app/assets/stylesheets/reels.scss */
.profile-clips-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 687, app/assets/stylesheets/reels.scss */
.profile-clips-title span {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ff3d9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* line 697, app/assets/stylesheets/reels.scss */
.profile-clips-see-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #ff0074;
  text-decoration: none;
  transition: color 0.2s;
}

/* line 707, app/assets/stylesheets/reels.scss */
.profile-clips-see-all:hover {
  color: #ff3d9a;
}

/* line 712, app/assets/stylesheets/reels.scss */
.profile-clips-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 8px;
  scrollbar-width: none;
}

/* line 721, app/assets/stylesheets/reels.scss */
.profile-clips-carousel::-webkit-scrollbar {
  display: none;
}

/* line 726, app/assets/stylesheets/reels.scss */
.profile-clip-card {
  flex-shrink: 0;
  width: 120px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform 0.2s ease;
}

/* line 738, app/assets/stylesheets/reels.scss */
.profile-clip-card:hover {
  transform: scale(1.03);
}

/* line 741, app/assets/stylesheets/reels.scss */
.profile-clip-card:hover .profile-clip-overlay svg {
  transform: scale(1.15);
}

/* line 747, app/assets/stylesheets/reels.scss */
.profile-clip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 753, app/assets/stylesheets/reels.scss */
.profile-clip-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* line 763, app/assets/stylesheets/reels.scss */
.profile-clip-overlay svg {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

/* line 768, app/assets/stylesheets/reels.scss */
.profile-clip-card:hover .profile-clip-overlay {
  opacity: 1;
}

/* line 773, app/assets/stylesheets/reels.scss */
.profile-clip-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
  /* line 787, app/assets/stylesheets/reels.scss */
  .profile-clip-card {
    width: 105px;
    height: 175px;
    border-radius: 10px;
  }
}
@charset "UTF-8";
/* ========================================
   PULL TO REFRESH
   Mobile-only gesture indicator
   ======================================== */
/* Disable Chrome's native pull-to-refresh so our custom gesture
   can take over without racing the browser. Scoped to pages where
   our controller is attached. */
/* line 9, app/assets/stylesheets/pull_to_refresh.scss */
body:has([data-controller~="pull-to-refresh"]) {
  overscroll-behavior-y: contain;
}

/* line 13, app/assets/stylesheets/pull_to_refresh.scss */
.ptr-indicator {
  position: fixed;
  top: 70px;
  /* below sticky header */
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  /* above feed, below modals */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 0, 116, 0.2);
  will-change: transform, opacity;
}

/* line 35, app/assets/stylesheets/pull_to_refresh.scss */
.ptr-indicator::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.14);
  border-top-color: #ff0074;
  transition: border-color 0.15s ease;
}

/* Ready state — user pulled past threshold, release will refresh */
/* line 46, app/assets/stylesheets/pull_to_refresh.scss */
.ptr-indicator.ptr-ready {
  border-color: rgba(255, 0, 116, 0.6);
  box-shadow: 0 6px 24px rgba(255, 0, 116, 0.35);
}

/* line 51, app/assets/stylesheets/pull_to_refresh.scss */
.ptr-indicator.ptr-ready::before {
  border-top-color: #ff3d9a;
  border-color: rgba(255, 61, 154, 0.25);
}

/* Refreshing state — spinner animating while Turbo reloads */
/* line 57, app/assets/stylesheets/pull_to_refresh.scss */
.ptr-indicator.ptr-refreshing::before {
  animation: ptrSpin 0.8s linear infinite;
}

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

/* Hide on desktop — controller also guards against this but belt-and-suspenders */
@media (min-width: 1025px) {
  /* line 69, app/assets/stylesheets/pull_to_refresh.scss */
  .ptr-indicator {
    display: none;
  }
}

/* Shift indicator down slightly on mobile where header is smaller */
@media (max-width: 768px) {
  /* line 76, app/assets/stylesheets/pull_to_refresh.scss */
  .ptr-indicator {
    top: 62px;
    /* matches shrunken mobile header height */
  }
}

@media (max-width: 480px) {
  /* line 82, app/assets/stylesheets/pull_to_refresh.scss */
  .ptr-indicator {
    top: 60px;
  }
}
@charset "UTF-8";
/* ========================================
   INFO MODAL — reusable help / glossary modal
   Follows the Exotha premium-dark design system:
   magenta gradient accents, radial corner decorations,
   hover lift with glow, Montserrat titles.
   ======================================== */
/* ---------- Trigger (ⓘ icon button) ---------- */
/* line 9, app/assets/stylesheets/info_modal.scss */
.info-modal__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid rgba(255, 0, 116, 0.2);
  border-radius: 50%;
  background: rgba(255, 0, 116, 0.08);
  color: #ff3d9a;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* line 25, app/assets/stylesheets/info_modal.scss */
.info-modal__trigger:hover, .info-modal__trigger:focus-visible {
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(255, 0, 116, 0.35);
  outline: none;
}

/* line 35, app/assets/stylesheets/info_modal.scss */
.info-modal__trigger svg {
  display: block;
}

/* ---------- Shell ---------- */
/* line 39, app/assets/stylesheets/info_modal.scss */
.info-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* line 53, app/assets/stylesheets/info_modal.scss */
.info-modal.is-open {
  display: flex;
  opacity: 1;
}

/* ---------- Card ---------- */
/* line 60, app/assets/stylesheets/info_modal.scss */
.info-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 60px);
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 0, 116, 0.04), 0 0 100px rgba(255, 0, 116, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: infoModalSlideIn 0.28s cubic-bezier(0.2, 0.9, 0.4, 1);
  /* Top accent gradient line */
  /* Radial corner decoration */
}

/* line 78, app/assets/stylesheets/info_modal.scss */
.info-modal__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff0074, #ff3d9a, #ff0074);
  background-size: 200% 100%;
  animation: infoModalShimmer 3s infinite linear;
  z-index: 2;
}

/* line 92, app/assets/stylesheets/info_modal.scss */
.info-modal__card::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

@keyframes infoModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes infoModalShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ---------- Header ---------- */
/* line 116, app/assets/stylesheets/info_modal.scss */
.info-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(255, 0, 116, 0.08);
  position: relative;
  z-index: 1;
}

/* line 127, app/assets/stylesheets/info_modal.scss */
.info-modal__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #f5f5f5;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
  /* Magenta accent bar (mirrors .section-title::before pattern) */
}

/* line 140, app/assets/stylesheets/info_modal.scss */
.info-modal__title::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 2px;
}

/* line 150, app/assets/stylesheets/info_modal.scss */
.info-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #c9c9c9;
  cursor: pointer;
  transition: all 0.22s ease;
}

/* line 165, app/assets/stylesheets/info_modal.scss */
.info-modal__close:hover, .info-modal__close:focus-visible {
  background: rgba(255, 0, 116, 0.12);
  border-color: rgba(255, 0, 116, 0.3);
  color: #ff3d9a;
  transform: rotate(90deg);
  outline: none;
}

/* ---------- Body ---------- */
/* line 176, app/assets/stylesheets/info_modal.scss */
.info-modal__body {
  padding: 20px 24px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  /* Refined scrollbar */
}

/* line 187, app/assets/stylesheets/info_modal.scss */
.info-modal__body::-webkit-scrollbar {
  width: 6px;
}

/* line 188, app/assets/stylesheets/info_modal.scss */
.info-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

/* line 189, app/assets/stylesheets/info_modal.scss */
.info-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 116, 0.2);
  border-radius: 3px;
}

/* ---------- Section card ---------- */
/* line 196, app/assets/stylesheets/info_modal.scss */
.info-modal__section {
  position: relative;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* line 204, app/assets/stylesheets/info_modal.scss */
.info-modal__section:hover {
  border-color: rgba(255, 0, 116, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* line 211, app/assets/stylesheets/info_modal.scss */
.info-modal__section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* line 218, app/assets/stylesheets/info_modal.scss */
.info-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff0074 0%, #ff3d9a 100%);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 0, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* line 232, app/assets/stylesheets/info_modal.scss */
.info-modal__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* line 239, app/assets/stylesheets/info_modal.scss */
.info-modal__section-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f5f5f5;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* line 249, app/assets/stylesheets/info_modal.scss */
.info-modal__section-body {
  margin: 0;
  padding-left: 52px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #b8b8b8;
}

/* line 258, app/assets/stylesheets/info_modal.scss */
.info-modal__section-tip {
  margin: 12px 0 0 52px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.1) 0%, rgba(255, 0, 116, 0.04) 100%);
  border: 1px solid rgba(255, 0, 116, 0.18);
  border-radius: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #ff9cc6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* line 272, app/assets/stylesheets/info_modal.scss */
.info-modal__section-tip span {
  flex: 1;
  min-width: 0;
}

/* line 278, app/assets/stylesheets/info_modal.scss */
.info-modal__tip-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ff3d9a;
}

/* ---------- Mobile: bottom sheet ---------- */
@media (max-width: 600px) {
  /* line 286, app/assets/stylesheets/info_modal.scss */
  .info-modal {
    align-items: flex-end;
    padding: 0;
  }
  /* line 291, app/assets/stylesheets/info_modal.scss */
  .info-modal__card {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    animation: infoModalSlideUp 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  @keyframes infoModalSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  /* Drag handle hint */
  /* line 306, app/assets/stylesheets/info_modal.scss */
  .info-modal__card::before {
    left: 50%;
    right: auto;
    top: 8px;
    width: 40px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: none;
  }
  /* line 317, app/assets/stylesheets/info_modal.scss */
  .info-modal__header {
    padding: 22px 20px 16px;
  }
  /* line 321, app/assets/stylesheets/info_modal.scss */
  .info-modal__title {
    font-size: 16px;
  }
  /* line 324, app/assets/stylesheets/info_modal.scss */
  .info-modal__title::before {
    height: 20px;
  }
  /* line 329, app/assets/stylesheets/info_modal.scss */
  .info-modal__body {
    padding: 16px 20px 24px;
    gap: 12px;
  }
  /* line 334, app/assets/stylesheets/info_modal.scss */
  .info-modal__section {
    padding: 14px 14px;
  }
  /* line 338, app/assets/stylesheets/info_modal.scss */
  .info-modal__icon {
    width: 36px;
    height: 36px;
  }
  /* line 342, app/assets/stylesheets/info_modal.scss */
  .info-modal__icon svg {
    width: 18px;
    height: 18px;
  }
  /* line 348, app/assets/stylesheets/info_modal.scss */
  .info-modal__section-body {
    padding-left: 48px;
  }
  /* line 352, app/assets/stylesheets/info_modal.scss */
  .info-modal__section-tip {
    margin-left: 48px;
  }
}
@charset "UTF-8";
/* =================================================================
   EXOTHA · LANDING (sistema oficial)
   -----------------------------------------------------------------
   Estilos específicos del landing /. Consume tokens --exo-* y
   componentes globales (.exo-btn-*, .exo-card, .exo-creator-card,
   .exo-feature-card, .exo-stat-card, .exo-hero-badge).

   Migrado del CSS embebido en landing.html.erb (730 líneas) +
   motion moderno del mockup aprobado.
   ================================================================= */
/* -----------------------------------------------------------------
   KEYFRAMES (firmas visuales del landing)
   ----------------------------------------------------------------- */
@keyframes exo-hero-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes exo-orb-float-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(60px, -40px) scale(1.1);
  }
  50% {
    transform: translate(-30px, -80px) scale(0.95);
  }
  75% {
    transform: translate(-60px, -20px) scale(1.05);
  }
}

@keyframes exo-orb-float-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-50px, 30px) scale(1.08);
  }
  50% {
    transform: translate(40px, 60px) scale(0.92);
  }
  75% {
    transform: translate(20px, -30px) scale(1.04);
  }
}

@keyframes exo-pulse-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes exo-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes exo-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes exo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes exo-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes exo-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes exo-word-rise {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes exo-cta-rise {
  from {
    opacity: 0;
    transform: translateY(120%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes exo-stats-border-glow {
  0%, 100% {
    border-color: rgba(255, 0, 116, 0.15);
  }
  50% {
    border-color: rgba(255, 0, 116, 0.4);
  }
}

/* -----------------------------------------------------------------
   REVEAL utility (IntersectionObserver toggles is-visible)
   ----------------------------------------------------------------- */
/* line 67, app/assets/stylesheets/landing.scss */
.exo-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--exo-dur-cinematic) var(--exo-ease-noir), transform var(--exo-dur-cinematic) var(--exo-ease-noir);
}

/* line 74, app/assets/stylesheets/landing.scss */
.exo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* line 81, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--exo-dur-slower) var(--exo-ease-noir), transform var(--exo-dur-slower) var(--exo-ease-noir);
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 160ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 320ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(7) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 480ms;
}

/* line 91, app/assets/stylesheets/landing.scss */
.exo-reveal-stagger.is-visible > *:nth-child(8) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 560ms;
}

/* -----------------------------------------------------------------
   NAV (sticky con logo + glass blur)
   ----------------------------------------------------------------- */
/* line 104, app/assets/stylesheets/landing.scss */
.exo-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--exo-z-sticky);
  height: var(--exo-header-h);
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(var(--exo-blur-lg)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--exo-blur-lg)) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background var(--exo-dur-base) var(--exo-ease-out-quart), border-bottom-color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 117, app/assets/stylesheets/landing.scss */
.exo-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
  border-bottom-color: var(--exo-border);
}

/* line 122, app/assets/stylesheets/landing.scss */
.exo-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 116, 0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 131, app/assets/stylesheets/landing.scss */
.exo-nav.is-scrolled::after {
  opacity: 1;
}

/* line 133, app/assets/stylesheets/landing.scss */
.exo-nav__inner {
  max-width: var(--exo-container-narrow);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--exo-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exo-space-8);
}

/* line 144, app/assets/stylesheets/landing.scss */
.exo-nav__brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* line 149, app/assets/stylesheets/landing.scss */
.exo-nav__brand img {
  height: 44px;
  width: auto;
  display: block;
  filter: var(--exo-filter-logo-glow);
  transition: filter var(--exo-dur-slow) var(--exo-ease-out-quart), transform var(--exo-dur-slow) var(--exo-ease-spring);
}

/* line 158, app/assets/stylesheets/landing.scss */
.exo-nav__brand:hover img {
  filter: var(--exo-filter-logo-glow-lg);
  transform: scale(1.04);
}

/* line 164, app/assets/stylesheets/landing.scss */
.exo-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--exo-space-8);
}

/* line 170, app/assets/stylesheets/landing.scss */
.exo-nav__links {
  display: flex;
  gap: var(--exo-space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  /* line 170, app/assets/stylesheets/landing.scss */
  .exo-nav__links {
    display: none;
  }
}

/* line 179, app/assets/stylesheets/landing.scss */
.exo-nav__links a {
  position: relative;
  color: var(--exo-text-muted);
  font-family: var(--exo-font-display);
  font-size: 13px;
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-wide);
  text-decoration: none;
  transition: color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 189, app/assets/stylesheets/landing.scss */
.exo-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--exo-magenta-500);
  transition: width var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 198, app/assets/stylesheets/landing.scss */
.exo-nav__links a:hover {
  color: var(--exo-text);
}

/* line 199, app/assets/stylesheets/landing.scss */
.exo-nav__links a:hover::after {
  width: 100%;
}

/* line 203, app/assets/stylesheets/landing.scss */
.exo-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--exo-space-3);
}

/* -----------------------------------------------------------------
   HERO
   ----------------------------------------------------------------- */
/* line 214, app/assets/stylesheets/landing.scss */
.exo-hero {
  position: relative;
  min-height: calc(100vh - var(--exo-header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 110px var(--exo-space-6) var(--exo-space-12);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  background: var(--exo-gradient-hero-bg);
  background-size: 400% 400%;
  animation: exo-hero-gradient-shift 15s ease infinite;
  /* Cursor follow glow (desktop) */
  /* Ambient orbs */
}

/* line 230, app/assets/stylesheets/landing.scss */
.exo-hero__cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.15) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 1;
  opacity: 0;
}

@media (hover: hover) {
  /* line 244, app/assets/stylesheets/landing.scss */
  .exo-hero__cursor-glow {
    opacity: 1;
  }
}

/* line 248, app/assets/stylesheets/landing.scss */
.exo-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

/* line 256, app/assets/stylesheets/landing.scss */
.exo-hero__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.18) 0%, transparent 70%);
  top: -10%;
  left: -10%;
  animation: exo-orb-float-1 20s ease-in-out infinite;
}

/* line 262, app/assets/stylesheets/landing.scss */
.exo-hero__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(180, 0, 255, 0.12) 0%, transparent 70%);
  bottom: -5%;
  right: -8%;
  animation: exo-orb-float-2 25s ease-in-out infinite;
}

/* line 269, app/assets/stylesheets/landing.scss */
.exo-hero__content {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

/* line 275, app/assets/stylesheets/landing.scss */
.exo-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-2);
  padding: var(--exo-space-2) var(--exo-space-5);
  background: rgba(255, 0, 116, 0.12);
  border: 1px solid var(--exo-border-brand);
  border-radius: var(--exo-radius-pill);
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--exo-space-8);
  animation: exo-fade-in 1s ease 0.2s both;
}

/* line 292, app/assets/stylesheets/landing.scss */
.exo-hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--exo-magenta-500);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--exo-magenta-500);
  animation: exo-pulse-glow 1.6s ease-in-out infinite;
}

/* line 300, app/assets/stylesheets/landing.scss */
.exo-hero__title {
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-hero);
  font-weight: var(--exo-fw-black);
  line-height: 1.02;
  letter-spacing: var(--exo-track-tight);
  margin: 0 0 var(--exo-space-6);
  background: var(--exo-gradient-text-brand);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: exo-fade-in-up 1s ease 0.4s both, exo-shimmer 6s linear infinite;
}

/* line 315, app/assets/stylesheets/landing.scss */
.exo-hero__tagline {
  font-family: var(--exo-font-display);
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: var(--exo-fw-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--exo-text-subtle);
  margin: 0 0 var(--exo-space-8);
}

/* line 324, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span {
  display: inline-block;
  opacity: 0;
  animation: exo-word-rise 0.7s var(--exo-ease-noir) forwards;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(1) {
  animation-delay: 500ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(2) {
  animation-delay: 600ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(3) {
  animation-delay: 700ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(4) {
  animation-delay: 800ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(5) {
  animation-delay: 900ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(6) {
  animation-delay: 1000ms;
}

/* line 330, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:nth-child(7) {
  animation-delay: 1100ms;
}

/* line 333, app/assets/stylesheets/landing.scss */
.exo-hero__tagline span:last-child {
  color: var(--exo-magenta-400);
  letter-spacing: var(--exo-track-wide);
  text-transform: none;
  font-weight: var(--exo-fw-semibold);
}

/* line 342, app/assets/stylesheets/landing.scss */
.exo-hero__subtitle {
  font-family: var(--exo-font-body);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--exo-text-muted);
  margin: 0 auto var(--exo-space-12);
  max-width: 640px;
  line-height: var(--exo-lh-loose);
  animation: exo-fade-in-up 1s ease 1.3s both;
}

/* line 352, app/assets/stylesheets/landing.scss */
.exo-hero__actions {
  display: flex;
  gap: var(--exo-space-4);
  justify-content: center;
  flex-wrap: wrap;
  animation: exo-fade-in-up 1s ease 1.5s both;
}

/* line 360, app/assets/stylesheets/landing.scss */
.exo-hero__trust {
  display: flex;
  gap: var(--exo-space-8);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--exo-space-12);
  padding-top: var(--exo-space-8);
  border-top: 1px solid var(--exo-border);
  animation: exo-fade-in-up 1s ease 1.8s both;
}

/* line 370, app/assets/stylesheets/landing.scss */
.exo-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-2);
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
}

/* line 381, app/assets/stylesheets/landing.scss */
.exo-hero__trust-item svg {
  width: 14px;
  height: 14px;
  color: var(--exo-magenta-400);
}

/* line 384, app/assets/stylesheets/landing.scss */
.exo-hero__scroll {
  position: absolute;
  bottom: var(--exo-space-8);
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 2px solid var(--exo-border-strong);
  border-radius: 12px;
  animation: exo-fade-in 1s ease 2s both;
}

/* line 395, app/assets/stylesheets/landing.scss */
.exo-hero__scroll::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--exo-magenta-500);
  border-radius: 2px;
  animation: exo-pulse-glow 2s ease-in-out infinite;
}

/* -----------------------------------------------------------------
   MARQUEE
   ----------------------------------------------------------------- */
/* line 412, app/assets/stylesheets/landing.scss */
.exo-marquee {
  position: relative;
  padding: var(--exo-space-7) 0;
  border-top: 1px solid var(--exo-border);
  border-bottom: 1px solid var(--exo-border);
  overflow: hidden;
  background: rgba(255, 0, 116, 0.02);
}

/* line 420, app/assets/stylesheets/landing.scss */
.exo-marquee::before, .exo-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 1;
  pointer-events: none;
}

/* line 428, app/assets/stylesheets/landing.scss */
.exo-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--exo-bg-base), transparent);
}

/* line 429, app/assets/stylesheets/landing.scss */
.exo-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--exo-bg-base), transparent);
}

/* line 431, app/assets/stylesheets/landing.scss */
.exo-marquee__track {
  display: flex;
  gap: var(--exo-space-16);
  width: max-content;
  animation: exo-scroll-left 40s linear infinite;
}

/* line 438, app/assets/stylesheets/landing.scss */
.exo-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--exo-space-4);
  color: var(--exo-text-muted);
  font-family: var(--exo-font-display);
  font-size: 14px;
  font-weight: var(--exo-fw-semibold);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 450, app/assets/stylesheets/landing.scss */
.exo-marquee__item-dot {
  width: 6px;
  height: 6px;
  background: var(--exo-magenta-500);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--exo-magenta-500);
}

/* -----------------------------------------------------------------
   STATS WRAPPER (los stat cards usan .exo-stat-card de componentes)
   ----------------------------------------------------------------- */
/* line 463, app/assets/stylesheets/landing.scss */
.exo-stats {
  padding: var(--exo-space-20) var(--exo-space-6);
  position: relative;
}

/* line 467, app/assets/stylesheets/landing.scss */
.exo-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--exo-space-6);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  /* line 476, app/assets/stylesheets/landing.scss */
  .exo-stats__grid {
    grid-template-columns: 1fr;
  }
}

/* line 479, app/assets/stylesheets/landing.scss */
.exo-stats__card {
  position: relative;
  text-align: center;
  padding: var(--exo-space-9, 36px) var(--exo-space-4);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--exo-radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), background var(--exo-dur-slow) var(--exo-ease-out-quart), border-color var(--exo-dur-slow) var(--exo-ease-out-quart);
  animation: exo-stats-border-glow 4s ease-in-out infinite;
}

/* line 494, app/assets/stylesheets/landing.scss */
.exo-stats__card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 60%);
  z-index: -1;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
  opacity: 0;
}

/* line 505, app/assets/stylesheets/landing.scss */
.exo-stats__card:nth-child(2) {
  animation-delay: 1.3s;
}

/* line 506, app/assets/stylesheets/landing.scss */
.exo-stats__card:nth-child(3) {
  animation-delay: 2.6s;
}

/* line 508, app/assets/stylesheets/landing.scss */
.exo-stats__card:hover {
  transform: translateY(-6px);
  background: rgba(255, 0, 116, 0.05);
  border-color: var(--exo-border-brand);
}

/* line 513, app/assets/stylesheets/landing.scss */
.exo-stats__card:hover::before {
  opacity: 1;
}

/* line 517, app/assets/stylesheets/landing.scss */
.exo-stats__number {
  background: linear-gradient(135deg, #fff 0%, var(--exo-magenta-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--exo-font-display);
  font-size: clamp(36px, 5.5vw, 54px);
  font-weight: var(--exo-fw-black);
  line-height: 1.1;
  letter-spacing: var(--exo-track-tight);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--exo-space-2);
}

/* line 530, app/assets/stylesheets/landing.scss */
.exo-stats__label {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  font-weight: var(--exo-fw-medium);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------
   GALLERY (auto-scroll horizontal · 2 tracks invertidos)
   ----------------------------------------------------------------- */
/* line 544, app/assets/stylesheets/landing.scss */
.exo-gallery {
  padding: var(--exo-space-20) 0 var(--exo-space-16);
  overflow: hidden;
  position: relative;
  /* Edge fades */
}

/* line 549, app/assets/stylesheets/landing.scss */
.exo-gallery__header {
  text-align: center;
  padding: 0 var(--exo-space-6);
  margin-bottom: var(--exo-space-12);
}

/* line 555, app/assets/stylesheets/landing.scss */
.exo-gallery__track {
  display: flex;
  gap: var(--exo-space-4);
  width: max-content;
  will-change: transform;
}

/* line 561, app/assets/stylesheets/landing.scss */
.exo-gallery__track--left {
  animation: exo-scroll-left  40s linear infinite;
}

/* line 562, app/assets/stylesheets/landing.scss */
.exo-gallery__track--right {
  animation: exo-scroll-right 40s linear infinite;
  margin-top: var(--exo-space-4);
}

/* line 564, app/assets/stylesheets/landing.scss */
.exo-gallery__track:hover {
  animation-play-state: paused;
}

/* line 567, app/assets/stylesheets/landing.scss */
.exo-gallery__item {
  position: relative;
  flex-shrink: 0;
  width: 240px;
  height: 320px;
  border-radius: var(--exo-radius-xl);
  overflow: hidden;
  background: var(--exo-surface);
  isolation: isolate;
  text-decoration: none;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 581, app/assets/stylesheets/landing.scss */
.exo-gallery__item:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 48px rgba(255, 0, 116, 0.25), 0 0 0 1px var(--exo-border-brand);
  z-index: 2;
}

/* line 589, app/assets/stylesheets/landing.scss */
.exo-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
  transition: transform 0.6s ease, filter 0.4s ease;
}

/* line 600, app/assets/stylesheets/landing.scss */
.exo-gallery__item:hover img {
  transform: scale(1.08);
  filter: saturate(1.1);
}

/* line 606, app/assets/stylesheets/landing.scss */
.exo-gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--exo-space-5);
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transition: opacity var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 617, app/assets/stylesheets/landing.scss */
.exo-gallery__item:hover .exo-gallery__overlay {
  opacity: 1;
}

/* line 619, app/assets/stylesheets/landing.scss */
.exo-gallery__creator {
  color: #fff;
  font-family: var(--exo-font-display);
  font-size: 14px;
  font-weight: var(--exo-fw-bold);
  margin: 0;
}

/* line 626, app/assets/stylesheets/landing.scss */
.exo-gallery__username {
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-body);
  font-size: 11px;
  margin-top: 2px;
}

/* line 633, app/assets/stylesheets/landing.scss */
.exo-gallery__play {
  position: absolute;
  top: var(--exo-space-3);
  right: var(--exo-space-3);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(var(--exo-blur-sm));
  -webkit-backdrop-filter: blur(var(--exo-blur-sm));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 643, app/assets/stylesheets/landing.scss */
.exo-gallery__play svg {
  width: 14px;
  height: 14px;
  color: #fff;
  margin-left: 2px;
}

/* line 647, app/assets/stylesheets/landing.scss */
.exo-gallery::before, .exo-gallery::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}

/* line 655, app/assets/stylesheets/landing.scss */
.exo-gallery::before {
  left: 0;
  background: linear-gradient(90deg, var(--exo-bg-base) 0%, transparent 100%);
}

/* line 656, app/assets/stylesheets/landing.scss */
.exo-gallery::after {
  right: 0;
  background: linear-gradient(270deg, var(--exo-bg-base) 0%, transparent 100%);
}

/* -----------------------------------------------------------------
   FEATURED CREATORS WRAPPER (cards usan .exo-creator-card del componente)
   ----------------------------------------------------------------- */
/* line 663, app/assets/stylesheets/landing.scss */
.exo-creators {
  padding: var(--exo-space-20) var(--exo-space-6);
  position: relative;
}

/* line 667, app/assets/stylesheets/landing.scss */
.exo-creators__header {
  max-width: 960px;
  margin: 0 auto;
}

/* line 672, app/assets/stylesheets/landing.scss */
.exo-creators__scroll {
  display: flex;
  gap: var(--exo-space-5);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--exo-space-2) var(--exo-space-6) var(--exo-space-4);
  scroll-snap-type: x mandatory;
  max-width: var(--exo-container-max);
  margin: 0 auto;
  /* Fade-mask en bordes laterales para sugerir scroll horizontal */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--exo-space-6), #000 calc(100% - var(--exo-space-10)), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--exo-space-6), #000 calc(100% - var(--exo-space-10)), transparent 100%);
}

/* line 686, app/assets/stylesheets/landing.scss */
.exo-creators__scroll::-webkit-scrollbar {
  display: none;
}

/* line 689, app/assets/stylesheets/landing.scss */
.exo-creators__card {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  text-align: center;
  padding: var(--exo-space-7) var(--exo-space-4) var(--exo-space-6);
  background: var(--exo-surface);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-2xl);
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), border-color var(--exo-dur-base) var(--exo-ease-out-quart), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 706, app/assets/stylesheets/landing.scss */
.exo-creators__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08), rgba(180, 0, 255, 0.04));
  opacity: 0;
  z-index: -1;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 717, app/assets/stylesheets/landing.scss */
.exo-creators__card:hover {
  transform: translateY(-8px);
  border-color: var(--exo-border-brand);
  box-shadow: var(--exo-glow-card-hover);
}

/* line 722, app/assets/stylesheets/landing.scss */
.exo-creators__card:hover::before {
  opacity: 1;
}

/* line 726, app/assets/stylesheets/landing.scss */
.exo-creators__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--exo-space-3);
  padding: 3px;
  background: var(--exo-gradient-brand-purple);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
  transition: transform var(--exo-dur-slow) var(--exo-ease-spring), box-shadow var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 741, app/assets/stylesheets/landing.scss */
.exo-creators__card:hover .exo-creators__avatar {
  transform: scale(1.08);
  box-shadow: 0 0 32px rgba(255, 0, 116, 0.5);
}

/* line 746, app/assets/stylesheets/landing.scss */
.exo-creators__avatar-placeholder {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--exo-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--exo-gradient-brand-purple);
  border-radius: 50%;
  color: #fff;
  font-family: var(--exo-font-display);
  font-size: 30px;
  font-weight: var(--exo-fw-black);
}

/* line 757, app/assets/stylesheets/landing.scss */
.exo-creators__name {
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h6);
  font-weight: var(--exo-fw-bold);
  color: var(--exo-text);
  margin: 0 0 2px;
}

/* line 764, app/assets/stylesheets/landing.scss */
.exo-creators__handle {
  color: var(--exo-magenta-400);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-caption);
  margin: 0 0 var(--exo-space-2);
}

/* line 770, app/assets/stylesheets/landing.scss */
.exo-creators__meta {
  color: var(--exo-text-subtle);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-eyebrow);
  letter-spacing: var(--exo-track-wide);
}

/* -----------------------------------------------------------------
   FEATURES WRAPPER (cards usan .exo-feature-card del componente)
   ----------------------------------------------------------------- */
/* line 782, app/assets/stylesheets/landing.scss */
.exo-features {
  padding: var(--exo-space-20) var(--exo-space-6);
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 0, 116, 0.025) 50%, transparent 100%);
}

/* line 787, app/assets/stylesheets/landing.scss */
.exo-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--exo-space-5);
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  /* line 796, app/assets/stylesheets/landing.scss */
  .exo-features__grid {
    grid-template-columns: 1fr;
  }
}

/* line 799, app/assets/stylesheets/landing.scss */
.exo-features__card {
  position: relative;
  padding: var(--exo-space-8) var(--exo-space-7);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--exo-border);
  border-radius: var(--exo-radius-xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--exo-dur-slow) var(--exo-ease-noir), background var(--exo-dur-slow) var(--exo-ease-out-quart), border-color var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 812, app/assets/stylesheets/landing.scss */
.exo-features__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--exo-magenta-500), transparent);
  opacity: 0;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
}

/* line 822, app/assets/stylesheets/landing.scss */
.exo-features__card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.1) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--exo-dur-slow) var(--exo-ease-out-quart);
  z-index: -1;
}

/* line 834, app/assets/stylesheets/landing.scss */
.exo-features__card:hover {
  transform: translateY(-6px);
  background: rgba(255, 0, 116, 0.04);
  border-color: var(--exo-border-brand);
}

/* line 839, app/assets/stylesheets/landing.scss */
.exo-features__card:hover::before {
  opacity: 1;
}

/* line 840, app/assets/stylesheets/landing.scss */
.exo-features__card:hover::after {
  opacity: 1;
}

/* line 843, app/assets/stylesheets/landing.scss */
.exo-features__card h3 {
  color: var(--exo-text);
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h5);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-tight);
  margin: 0 0 var(--exo-space-2);
}

/* line 852, app/assets/stylesheets/landing.scss */
.exo-features__card p {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: var(--exo-fs-body-sm);
  line-height: var(--exo-lh-relaxed);
  margin: 0;
}

/* line 861, app/assets/stylesheets/landing.scss */
.exo-features__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--exo-space-5);
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.18), rgba(180, 0, 255, 0.1));
  border-radius: var(--exo-radius-lg);
  transition: transform var(--exo-dur-slow) var(--exo-ease-spring);
}

/* line 872, app/assets/stylesheets/landing.scss */
.exo-features__icon svg {
  width: 24px;
  height: 24px;
  color: var(--exo-magenta-500);
}

/* line 879, app/assets/stylesheets/landing.scss */
.exo-features__card:hover .exo-features__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* -----------------------------------------------------------------
   FOR CREATORS
   ----------------------------------------------------------------- */
/* line 888, app/assets/stylesheets/landing.scss */
.exo-for-creators {
  padding: var(--exo-space-20) var(--exo-space-6);
}

/* line 891, app/assets/stylesheets/landing.scss */
.exo-for-creators__box {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 44px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.08) 0%, rgba(180, 0, 255, 0.04) 100%);
  border: 1px solid rgba(255, 0, 116, 0.18);
  border-radius: var(--exo-radius-3xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* line 902, app/assets/stylesheets/landing.scss */
.exo-for-creators__box::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* line 911, app/assets/stylesheets/landing.scss */
.exo-for-creators__box::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(180, 0, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* line 921, app/assets/stylesheets/landing.scss */
.exo-for-creators__content {
  position: relative;
  z-index: 1;
}

/* line 923, app/assets/stylesheets/landing.scss */
.exo-for-creators__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--exo-space-5);
  margin: var(--exo-space-12) 0;
}

@media (max-width: 600px) {
  /* line 923, app/assets/stylesheets/landing.scss */
  .exo-for-creators__benefits {
    grid-template-columns: 1fr;
  }
}

/* line 932, app/assets/stylesheets/landing.scss */
.exo-for-creators__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--exo-space-4);
}

/* line 938, app/assets/stylesheets/landing.scss */
.exo-for-creators__check {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: linear-gradient(135deg, rgba(255, 0, 116, 0.25), rgba(255, 0, 116, 0.1));
  border-radius: var(--exo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 945, app/assets/stylesheets/landing.scss */
.exo-for-creators__check svg {
  width: 14px;
  height: 14px;
  color: var(--exo-magenta-500);
}

/* line 948, app/assets/stylesheets/landing.scss */
.exo-for-creators__benefit span {
  font-family: var(--exo-font-body);
  font-size: 14px;
  font-weight: var(--exo-fw-medium);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--exo-lh-relaxed);
}

/* -----------------------------------------------------------------
   FINAL CTA
   ----------------------------------------------------------------- */
/* line 961, app/assets/stylesheets/landing.scss */
.exo-cta {
  padding: 100px var(--exo-space-6) 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* line 967, app/assets/stylesheets/landing.scss */
.exo-cta__orb {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 116, 0.15) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(80px);
  pointer-events: none;
  animation: exo-pulse-glow 6s ease-in-out infinite;
}

/* line 979, app/assets/stylesheets/landing.scss */
.exo-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}

/* -----------------------------------------------------------------
   SECTION UTILITIES
   ----------------------------------------------------------------- */
/* line 991, app/assets/stylesheets/landing.scss */
.exo-section-title {
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-h2);
  font-weight: var(--exo-fw-black);
  color: var(--exo-text);
  margin: 0 0 var(--exo-space-3);
  text-align: center;
  line-height: var(--exo-lh-snug);
  letter-spacing: var(--exo-track-tight);
}

/* line 1002, app/assets/stylesheets/landing.scss */
.exo-section-subtitle {
  font-family: var(--exo-font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--exo-text-muted);
  margin: 0 auto;
  text-align: center;
  max-width: 560px;
  line-height: var(--exo-lh-relaxed);
}

/* line 1012, app/assets/stylesheets/landing.scss */
.exo-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--exo-magenta-500), var(--exo-magenta-400));
  border-radius: 2px;
  margin: var(--exo-space-6) auto 0;
}

/* -----------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------- */
/* line 1024, app/assets/stylesheets/landing.scss */
.exo-landing-footer {
  padding: var(--exo-space-16) var(--exo-space-6) var(--exo-space-10);
  border-top: 1px solid var(--exo-border);
  max-width: var(--exo-container-narrow);
  margin: 0 auto;
}

/* line 1030, app/assets/stylesheets/landing.scss */
.exo-landing-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--exo-space-12);
  margin-bottom: var(--exo-space-10);
  padding-bottom: var(--exo-space-10);
  border-bottom: 1px solid var(--exo-border);
}

@media (max-width: 768px) {
  /* line 1030, app/assets/stylesheets/landing.scss */
  .exo-landing-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--exo-space-8);
  }
}

/* line 1044, app/assets/stylesheets/landing.scss */
.exo-landing-footer__brand {
  display: inline-flex;
  align-items: center;
}

/* line 1048, app/assets/stylesheets/landing.scss */
.exo-landing-footer__brand img {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255, 0, 116, 0.4)) drop-shadow(0 0 36px rgba(180, 0, 255, 0.25));
}

/* line 1056, app/assets/stylesheets/landing.scss */
.exo-landing-footer__brand-tag {
  margin-top: var(--exo-space-4);
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: 13px;
  line-height: var(--exo-lh-relaxed);
  max-width: 24rem;
}

/* line 1065, app/assets/stylesheets/landing.scss */
.exo-landing-footer__col-title {
  font-family: var(--exo-font-display);
  font-size: var(--exo-fs-eyebrow);
  font-weight: var(--exo-fw-bold);
  letter-spacing: var(--exo-track-widest);
  text-transform: uppercase;
  color: var(--exo-text-subtle);
  margin-bottom: var(--exo-space-4);
}

/* line 1075, app/assets/stylesheets/landing.scss */
.exo-landing-footer__col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--exo-space-3);
  padding: 0;
  margin: 0;
}

/* line 1083, app/assets/stylesheets/landing.scss */
.exo-landing-footer__col-list a {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--exo-dur-base) var(--exo-ease-out-quart);
}

/* line 1090, app/assets/stylesheets/landing.scss */
.exo-landing-footer__col-list a:hover {
  color: var(--exo-magenta-400);
}

/* line 1094, app/assets/stylesheets/landing.scss */
.exo-landing-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--exo-space-3);
  color: var(--exo-text-faint);
  font-family: var(--exo-font-body);
  font-size: 12px;
}

/* -----------------------------------------------------------------
   MOBILE STICKY CTA (<768px)
   ----------------------------------------------------------------- */
/* line 1110, app/assets/stylesheets/landing.scss */
.exo-mobile-sticky {
  display: none !important;
}

/* line 1113, app/assets/stylesheets/landing.scss */
.exo-mobile-sticky__copy {
  flex: 1;
  min-width: 0;
}

/* line 1115, app/assets/stylesheets/landing.scss */
.exo-mobile-sticky__title {
  color: #fff;
  font-family: var(--exo-font-display);
  font-size: 13px;
  font-weight: var(--exo-fw-bold);
}

/* line 1122, app/assets/stylesheets/landing.scss */
.exo-mobile-sticky__sub {
  color: var(--exo-text-muted);
  font-family: var(--exo-font-body);
  font-size: 11px;
  margin-top: 1px;
}

/* -----------------------------------------------------------------
   PARALLAX DECORATIONS (preservadas del original)
   ----------------------------------------------------------------- */
/* line 1134, app/assets/stylesheets/landing.scss */
.exo-decor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* line 1143, app/assets/stylesheets/landing.scss */
.exo-decor__item {
  position: absolute;
  color: var(--exo-magenta-500);
  will-change: transform;
  transition: opacity 0.6s ease;
}

/* line 1149, app/assets/stylesheets/landing.scss */
.exo-decor__item svg {
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  /* line 1158, app/assets/stylesheets/landing.scss */
  .exo-hero {
    min-height: auto;
    padding: 100px var(--exo-space-5) var(--exo-space-12);
  }
  /* line 1162, app/assets/stylesheets/landing.scss */
  .exo-hero__orb--1 {
    width: 300px;
    height: 300px;
  }
  /* line 1163, app/assets/stylesheets/landing.scss */
  .exo-hero__orb--2 {
    width: 250px;
    height: 250px;
  }
  /* line 1164, app/assets/stylesheets/landing.scss */
  .exo-hero__cursor-glow {
    display: none;
  }
  /* line 1165, app/assets/stylesheets/landing.scss */
  .exo-hero__scroll {
    display: none;
  }
  /* line 1166, app/assets/stylesheets/landing.scss */
  .exo-hero__trust {
    gap: var(--exo-space-4);
    padding-top: var(--exo-space-6);
    margin-top: var(--exo-space-8);
  }
  /* line 1173, app/assets/stylesheets/landing.scss */
  .exo-stats,
.exo-features,
.exo-creators,
.exo-for-creators {
    padding: var(--exo-space-16) var(--exo-space-6);
  }
  /* line 1178, app/assets/stylesheets/landing.scss */
  .exo-for-creators__box {
    padding: var(--exo-space-9, 36px) var(--exo-space-6);
  }
  /* line 1180, app/assets/stylesheets/landing.scss */
  .exo-cta {
    padding: var(--exo-space-16) var(--exo-space-6) 140px;
  }
  /* line 1182, app/assets/stylesheets/landing.scss */
  .exo-gallery__item {
    width: 180px;
    height: 240px;
  }
  /* line 1184, app/assets/stylesheets/landing.scss */
  .exo-decor__item {
    opacity: 0 !important;
  }
}

@media (max-width: 480px) {
  /* line 1188, app/assets/stylesheets/landing.scss */
  .exo-hero__title {
    letter-spacing: -1px;
  }
  /* line 1189, app/assets/stylesheets/landing.scss */
  .exo-gallery__item {
    width: 150px;
    height: 210px;
  }
  /* line 1190, app/assets/stylesheets/landing.scss */
  .exo-stats__grid {
    grid-template-columns: 1fr;
    gap: var(--exo-space-3);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *

































































































































 */