/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-950: oklch(25.7% 0.09 281.288);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --color-fuchsia-400: oklch(74% 0.238 322.16);
    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-40 {
    top: calc(var(--spacing) * -40);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .-right-32 {
    right: calc(var(--spacing) * -32);
  }
  .right-3\.5 {
    right: calc(var(--spacing) * 3.5);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-\[-14rem\] {
    bottom: -14rem;
  }
  .-left-32 {
    left: calc(var(--spacing) * -32);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-\[30\%\] {
    left: 30%;
  }
  .-z-50 {
    z-index: calc(50 * -1);
  }
  .z-40 {
    z-index: 40;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .z-\[35\] {
    z-index: 35;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[130\] {
    z-index: 130;
  }
  .z-\[140\] {
    z-index: 140;
  }
  .z-\[160\] {
    z-index: 160;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2\.5 {
    margin-block: calc(var(--spacing) * 2.5);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .-mt-1\.5 {
    margin-top: calc(var(--spacing) * -1.5);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-\[284px\] {
    margin-left: 284px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-\[17px\] {
    height: 17px;
  }
  .h-\[25px\] {
    height: 25px;
  }
  .h-\[30px\] {
    height: 30px;
  }
  .h-\[30rem\] {
    height: 30rem;
  }
  .h-\[31px\] {
    height: 31px;
  }
  .h-\[32rem\] {
    height: 32rem;
  }
  .h-\[34px\] {
    height: 34px;
  }
  .h-\[34rem\] {
    height: 34rem;
  }
  .h-\[38px\] {
    height: 38px;
  }
  .h-\[42px\] {
    height: 42px;
  }
  .h-\[54px\] {
    height: 54px;
  }
  .h-\[65vh\] {
    height: 65vh;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[62vh\] {
    max-height: 62vh;
  }
  .max-h-\[88vh\] {
    max-height: 88vh;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-\[34px\] {
    min-height: 34px;
  }
  .min-h-\[38px\] {
    min-height: 38px;
  }
  .min-h-\[58vh\] {
    min-height: 58vh;
  }
  .min-h-\[65vh\] {
    min-height: 65vh;
  }
  .min-h-\[180px\] {
    min-height: 180px;
  }
  .min-h-\[220px\] {
    min-height: 220px;
  }
  .min-h-\[280px\] {
    min-height: 280px;
  }
  .min-h-\[330px\] {
    min-height: 330px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-\[0\%\] {
    width: 0%;
  }
  .w-\[1\%\] {
    width: 1%;
  }
  .w-\[2\%\] {
    width: 2%;
  }
  .w-\[3\%\] {
    width: 3%;
  }
  .w-\[4\%\] {
    width: 4%;
  }
  .w-\[5\%\] {
    width: 5%;
  }
  .w-\[6\%\] {
    width: 6%;
  }
  .w-\[7\%\] {
    width: 7%;
  }
  .w-\[8\%\] {
    width: 8%;
  }
  .w-\[9\%\] {
    width: 9%;
  }
  .w-\[10\%\] {
    width: 10%;
  }
  .w-\[11\%\] {
    width: 11%;
  }
  .w-\[12\%\] {
    width: 12%;
  }
  .w-\[13\%\] {
    width: 13%;
  }
  .w-\[14\%\] {
    width: 14%;
  }
  .w-\[15\%\] {
    width: 15%;
  }
  .w-\[16\%\] {
    width: 16%;
  }
  .w-\[17\%\] {
    width: 17%;
  }
  .w-\[17px\] {
    width: 17px;
  }
  .w-\[18\%\] {
    width: 18%;
  }
  .w-\[19\%\] {
    width: 19%;
  }
  .w-\[20\%\] {
    width: 20%;
  }
  .w-\[21\%\] {
    width: 21%;
  }
  .w-\[22\%\] {
    width: 22%;
  }
  .w-\[23\%\] {
    width: 23%;
  }
  .w-\[24\%\] {
    width: 24%;
  }
  .w-\[25\%\] {
    width: 25%;
  }
  .w-\[26\%\] {
    width: 26%;
  }
  .w-\[27\%\] {
    width: 27%;
  }
  .w-\[28\%\] {
    width: 28%;
  }
  .w-\[29\%\] {
    width: 29%;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[30px\] {
    width: 30px;
  }
  .w-\[30rem\] {
    width: 30rem;
  }
  .w-\[31\%\] {
    width: 31%;
  }
  .w-\[31px\] {
    width: 31px;
  }
  .w-\[32\%\] {
    width: 32%;
  }
  .w-\[32rem\] {
    width: 32rem;
  }
  .w-\[33\%\] {
    width: 33%;
  }
  .w-\[34\%\] {
    width: 34%;
  }
  .w-\[34px\] {
    width: 34px;
  }
  .w-\[34rem\] {
    width: 34rem;
  }
  .w-\[35\%\] {
    width: 35%;
  }
  .w-\[36\%\] {
    width: 36%;
  }
  .w-\[37\%\] {
    width: 37%;
  }
  .w-\[38\%\] {
    width: 38%;
  }
  .w-\[38px\] {
    width: 38px;
  }
  .w-\[39\%\] {
    width: 39%;
  }
  .w-\[40\%\] {
    width: 40%;
  }
  .w-\[41\%\] {
    width: 41%;
  }
  .w-\[42\%\] {
    width: 42%;
  }
  .w-\[43\%\] {
    width: 43%;
  }
  .w-\[44\%\] {
    width: 44%;
  }
  .w-\[45\%\] {
    width: 45%;
  }
  .w-\[46\%\] {
    width: 46%;
  }
  .w-\[47\%\] {
    width: 47%;
  }
  .w-\[48\%\] {
    width: 48%;
  }
  .w-\[49\%\] {
    width: 49%;
  }
  .w-\[50\%\] {
    width: 50%;
  }
  .w-\[51\%\] {
    width: 51%;
  }
  .w-\[52\%\] {
    width: 52%;
  }
  .w-\[53\%\] {
    width: 53%;
  }
  .w-\[54\%\] {
    width: 54%;
  }
  .w-\[55\%\] {
    width: 55%;
  }
  .w-\[56\%\] {
    width: 56%;
  }
  .w-\[57\%\] {
    width: 57%;
  }
  .w-\[58\%\] {
    width: 58%;
  }
  .w-\[59\%\] {
    width: 59%;
  }
  .w-\[60\%\] {
    width: 60%;
  }
  .w-\[61\%\] {
    width: 61%;
  }
  .w-\[62\%\] {
    width: 62%;
  }
  .w-\[63\%\] {
    width: 63%;
  }
  .w-\[64\%\] {
    width: 64%;
  }
  .w-\[65\%\] {
    width: 65%;
  }
  .w-\[66\%\] {
    width: 66%;
  }
  .w-\[67\%\] {
    width: 67%;
  }
  .w-\[68\%\] {
    width: 68%;
  }
  .w-\[69\%\] {
    width: 69%;
  }
  .w-\[70\%\] {
    width: 70%;
  }
  .w-\[71\%\] {
    width: 71%;
  }
  .w-\[72\%\] {
    width: 72%;
  }
  .w-\[73\%\] {
    width: 73%;
  }
  .w-\[74\%\] {
    width: 74%;
  }
  .w-\[75\%\] {
    width: 75%;
  }
  .w-\[76\%\] {
    width: 76%;
  }
  .w-\[77\%\] {
    width: 77%;
  }
  .w-\[78\%\] {
    width: 78%;
  }
  .w-\[79\%\] {
    width: 79%;
  }
  .w-\[80\%\] {
    width: 80%;
  }
  .w-\[81\%\] {
    width: 81%;
  }
  .w-\[82\%\] {
    width: 82%;
  }
  .w-\[83\%\] {
    width: 83%;
  }
  .w-\[84\%\] {
    width: 84%;
  }
  .w-\[85\%\] {
    width: 85%;
  }
  .w-\[86\%\] {
    width: 86%;
  }
  .w-\[87\%\] {
    width: 87%;
  }
  .w-\[88\%\] {
    width: 88%;
  }
  .w-\[89\%\] {
    width: 89%;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[91\%\] {
    width: 91%;
  }
  .w-\[92\%\] {
    width: 92%;
  }
  .w-\[93\%\] {
    width: 93%;
  }
  .w-\[94\%\] {
    width: 94%;
  }
  .w-\[95\%\] {
    width: 95%;
  }
  .w-\[96\%\] {
    width: 96%;
  }
  .w-\[97\%\] {
    width: 97%;
  }
  .w-\[98\%\] {
    width: 98%;
  }
  .w-\[99\%\] {
    width: 99%;
  }
  .w-\[100\%\] {
    width: 100%;
  }
  .w-\[252px\] {
    width: 252px;
  }
  .w-\[calc\(100\%-284px\)\] {
    width: calc(100% - 284px);
  }
  .w-\[min\(380px\,calc\(100vw-36px\)\)\] {
    width: min(380px, calc(100vw - 36px));
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-10 {
    max-width: calc(var(--spacing) * 10);
  }
  .max-w-\[440px\] {
    max-width: 440px;
  }
  .max-w-\[520px\] {
    max-width: 520px;
  }
  .max-w-\[560px\] {
    max-width: 560px;
  }
  .max-w-\[920px\] {
    max-width: 920px;
  }
  .max-w-\[min\(390px\,calc\(100vw-36px\)\)\] {
    max-width: min(390px, calc(100vw - 36px));
  }
  .max-w-full {
    max-width: 100%;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }
  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }
  .min-w-\[26px\] {
    min-width: 26px;
  }
  .min-w-\[132px\] {
    min-width: 132px;
  }
  .min-w-\[150px\] {
    min-width: 150px;
  }
  .min-w-\[180px\] {
    min-width: 180px;
  }
  .min-w-\[220px\] {
    min-width: 220px;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-\[54px\] {
    flex-basis: 54px;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize-y {
    resize: vertical;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-\[1\.1fr_\.9fr\] {
    grid-template-columns: 1.1fr .9fr;
  }
  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }
  .grid-cols-\[110px_1fr_88px\] {
    grid-template-columns: 110px 1fr 88px;
  }
  .grid-cols-\[112px_115px_1fr\] {
    grid-template-columns: 112px 115px 1fr;
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(210px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(260px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-amber-300\/20 {
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 20%, transparent);
    }
  }
  .border-cyan-300\/20 {
    border-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyan-300) 20%, transparent);
    }
  }
  .border-emerald-300\/20 {
    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-300) 20%, transparent);
    }
  }
  .border-fuchsia-300\/20 {
    border-color: color-mix(in srgb, oklch(83.3% 0.145 321.434) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-fuchsia-300) 20%, transparent);
    }
  }
  .border-indigo-300\/15 {
    border-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-indigo-300) 15%, transparent);
    }
  }
  .border-indigo-300\/20 {
    border-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-indigo-300) 20%, transparent);
    }
  }
  .border-indigo-300\/40 {
    border-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-indigo-300) 40%, transparent);
    }
  }
  .border-rose-300\/20 {
    border-color: color-mix(in srgb, oklch(81% 0.117 11.638) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-rose-300) 20%, transparent);
    }
  }
  .border-rose-300\/30 {
    border-color: color-mix(in srgb, oklch(81% 0.117 11.638) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-rose-300) 30%, transparent);
    }
  }
  .border-violet-300\/20 {
    border-color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-violet-300) 20%, transparent);
    }
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-amber-400\/10 {
    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-cyan-400\/10 {
    background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
    }
  }
  .bg-cyan-400\/15 {
    background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyan-400) 15%, transparent);
    }
  }
  .bg-emerald-400\/10 {
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
    }
  }
  .bg-fuchsia-400\/10 {
    background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fuchsia-400) 10%, transparent);
    }
  }
  .bg-fuchsia-500\/15 {
    background-color: color-mix(in srgb, oklch(66.7% 0.295 322.15) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fuchsia-500) 15%, transparent);
    }
  }
  .bg-indigo-400\/10 {
    background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-indigo-400) 10%, transparent);
    }
  }
  .bg-indigo-500\/25 {
    background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-indigo-500) 25%, transparent);
    }
  }
  .bg-rose-400\/10 {
    background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
    }
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-slate-900\/80 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
    }
  }
  .bg-slate-900\/95 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 95%, transparent);
    }
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-slate-950\/30 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 30%, transparent);
    }
  }
  .bg-slate-950\/50 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
    }
  }
  .bg-slate-950\/80 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-violet-400\/10 {
    background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-violet-400) 10%, transparent);
    }
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/\[\.07\] {
    background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent);
    }
  }
  .bg-white\/\[\.035\] {
    background-color: color-mix(in srgb, #fff 3.5000000000000004%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3.5000000000000004%, transparent);
    }
  }
  .bg-white\/\[\.045\] {
    background-color: color-mix(in srgb, #fff 4.5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4.5%, transparent);
    }
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\.035\)_1px\,transparent_1px\)\] {
    background-image: radial-gradient(circle at center,rgba(255,255,255,0.035) 1px,transparent 1px);
  }
  .from-amber-400 {
    --tw-gradient-from: var(--color-amber-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-400 {
    --tw-gradient-from: var(--color-indigo-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-400\/15 {
    --tw-gradient-from: color-mix(in srgb, oklch(67.3% 0.182 276.935) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-indigo-400) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-400\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(67.3% 0.182 276.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-indigo-400) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-500 {
    --tw-gradient-from: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-500\/90 {
    --tw-gradient-from: color-mix(in srgb, oklch(58.5% 0.233 277.117) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-indigo-500) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-rose-400 {
    --tw-gradient-from: var(--color-rose-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-slate-950 {
    --tw-gradient-from: var(--color-slate-950);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-indigo-950\/90 {
    --tw-gradient-via: color-mix(in srgb, oklch(25.7% 0.09 281.288) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-indigo-950) 90%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-cyan-300 {
    --tw-gradient-to: var(--color-cyan-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyan-300\/5 {
    --tw-gradient-to: color-mix(in srgb, oklch(86.5% 0.127 207.078) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-cyan-300) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyan-300\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(86.5% 0.127 207.078) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-cyan-300) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyan-500 {
    --tw-gradient-to: var(--color-cyan-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-fuchsia-950\/80 {
    --tw-gradient-to: color-mix(in srgb, oklch(29.3% 0.136 325.661) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-fuchsia-950) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-400 {
    --tw-gradient-to: var(--color-orange-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-500 {
    --tw-gradient-to: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-violet-500\/90 {
    --tw-gradient-to: color-mix(in srgb, oklch(60.6% 0.25 292.717) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-violet-500) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-\[length\:32px_32px\] {
    background-size: 32px 32px;
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-current\/20 {
    fill: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, currentcolor 20%, transparent);
    }
  }
  .fill-none {
    fill: none;
  }
  .fill-white\/\[\.08\] {
    fill: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .fill-white\/\[\.14\] {
    fill: color-mix(in srgb, #fff 14.000000000000002%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-white) 14.000000000000002%, transparent);
    }
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .stroke-white\/25 {
    stroke: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .stroke-white\/30 {
    stroke: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .stroke-1 {
    stroke-width: 1;
  }
  .stroke-\[1\.4\] {
    stroke-width: 1.4;
  }
  .stroke-\[1\.5\] {
    stroke-width: 1.5;
  }
  .stroke-\[1\.8\] {
    stroke-width: 1.8;
  }
  .stroke-\[1\.55\] {
    stroke-width: 1.55;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-\[-3px\] {
    vertical-align: -3px;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[5\.4px\] {
    font-size: 5.4px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[26px\] {
    font-size: 26px;
  }
  .text-\[27px\] {
    font-size: 27px;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }
  .tracking-\[\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-amber-100 {
    color: var(--color-amber-100);
  }
  .text-amber-300 {
    color: var(--color-amber-300);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-cyan-100 {
    color: var(--color-cyan-100);
  }
  .text-cyan-200 {
    color: var(--color-cyan-200);
  }
  .text-cyan-300 {
    color: var(--color-cyan-300);
  }
  .text-emerald-100 {
    color: var(--color-emerald-100);
  }
  .text-emerald-200 {
    color: var(--color-emerald-200);
  }
  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-fuchsia-100 {
    color: var(--color-fuchsia-100);
  }
  .text-fuchsia-200 {
    color: var(--color-fuchsia-200);
  }
  .text-fuchsia-300 {
    color: var(--color-fuchsia-300);
  }
  .text-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-inherit {
    color: inherit;
  }
  .text-orange-300 {
    color: var(--color-orange-300);
  }
  .text-rose-100 {
    color: var(--color-rose-100);
  }
  .text-rose-300 {
    color: var(--color-rose-300);
  }
  .text-sky-300 {
    color: var(--color-sky-300);
  }
  .text-slate-100 {
    color: var(--color-slate-100);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-teal-300 {
    color: var(--color-teal-300);
  }
  .text-violet-100 {
    color: var(--color-violet-100);
  }
  .text-violet-300 {
    color: var(--color-violet-300);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .accent-indigo-500 {
    accent-color: var(--color-indigo-500);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-glass {
    --tw-shadow: 0 24px 70px var(--tw-shadow-color, rgba(0,0,0,.34));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-black\/20 {
    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-black\/25 {
    --tw-shadow-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-black\/30 {
    --tw-shadow-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-black\/40 {
    --tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-black\/50 {
    --tw-shadow-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-indigo-950\/30 {
    --tw-shadow-color: color-mix(in srgb, oklch(25.7% 0.09 281.288) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-950) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-white\/\[\.025\] {
    --tw-shadow-color: color-mix(in srgb, #fff 2.5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-white) 2.5%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-cyan-300\/50 {
    --tw-ring-color: color-mix(in srgb, oklch(86.5% 0.127 207.078) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-cyan-300) 50%, transparent);
    }
  }
  .ring-indigo-300\/10 {
    --tw-ring-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-indigo-300) 10%, transparent);
    }
  }
  .ring-indigo-300\/40 {
    --tw-ring-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-indigo-300) 40%, transparent);
    }
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }
  .\[stroke-linecap\:round\] {
    stroke-linecap: round;
  }
  .\[stroke-linejoin\:round\] {
    stroke-linejoin: round;
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .selection\:bg-indigo-400\/30 {
    & *::selection {
      background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-indigo-400) 30%, transparent);
      }
    }
    &::selection {
      background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-indigo-400) 30%, transparent);
      }
    }
  }
  .selection\:text-white {
    & *::selection {
      color: var(--color-white);
    }
    &::selection {
      color: var(--color-white);
    }
  }
  .placeholder\:text-slate-500 {
    &::placeholder {
      color: var(--color-slate-500);
    }
  }
  .hover\:-translate-y-px {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: -1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:border-amber-300\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-indigo-300\/20 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-indigo-300) 20%, transparent);
        }
      }
    }
  }
  .hover\:border-white\/20 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-amber-400\/15 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
        }
      }
    }
  }
  .hover\:bg-indigo-400\/\[\.07\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 7.000000000000001%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-indigo-400) 7.000000000000001%, transparent);
        }
      }
    }
  }
  .hover\:bg-indigo-400\/\[\.08\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 8%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-indigo-400) 8%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/\[\.035\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 3.5000000000000004%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 3.5000000000000004%, transparent);
        }
      }
    }
  }
  .hover\:from-indigo-400\/90 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: color-mix(in srgb, oklch(67.3% 0.182 276.935) 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-from: color-mix(in oklab, var(--color-indigo-400) 90%, transparent);
        }
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-violet-400\/90 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: color-mix(in srgb, oklch(70.2% 0.183 293.541) 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-to: color-mix(in oklab, var(--color-violet-400) 90%, transparent);
        }
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-black\/20 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:border-indigo-300\/60 {
    &:focus {
      border-color: color-mix(in srgb, oklch(78.5% 0.115 274.713) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-indigo-300) 60%, transparent);
      }
    }
  }
  .focus\:ring-4 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-indigo-500\/10 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
      }
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-indigo-400\/50 {
    &:focus-visible {
      --tw-ring-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-indigo-400) 50%, transparent);
      }
    }
  }
  .focus-visible\:ring-indigo-400\/60 {
    &:focus-visible {
      --tw-ring-color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-indigo-400) 60%, transparent);
      }
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:translate-y-0 {
    &:active {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none;
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .max-\[1050px\]\:grid-cols-1 {
    @media (width < 1050px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .max-\[1050px\]\:grid-cols-2 {
    @media (width < 1050px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .max-\[780px\]\:top-2\.5 {
    @media (width < 780px) {
      top: calc(var(--spacing) * 2.5);
    }
  }
  .max-\[780px\]\:bottom-2\.5 {
    @media (width < 780px) {
      bottom: calc(var(--spacing) * 2.5);
    }
  }
  .max-\[780px\]\:left-2\.5 {
    @media (width < 780px) {
      left: calc(var(--spacing) * 2.5);
    }
  }
  .max-\[780px\]\:order-first {
    @media (width < 780px) {
      order: -9999;
    }
  }
  .max-\[780px\]\:ml-0 {
    @media (width < 780px) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .max-\[780px\]\:flex {
    @media (width < 780px) {
      display: flex;
    }
  }
  .max-\[780px\]\:hidden {
    @media (width < 780px) {
      display: none;
    }
  }
  .max-\[780px\]\:h-\[34px\] {
    @media (width < 780px) {
      height: 34px;
    }
  }
  .max-\[780px\]\:min-h-\[34px\] {
    @media (width < 780px) {
      min-height: 34px;
    }
  }
  .max-\[780px\]\:w-\[34px\] {
    @media (width < 780px) {
      width: 34px;
    }
  }
  .max-\[780px\]\:w-\[42px\] {
    @media (width < 780px) {
      width: 42px;
    }
  }
  .max-\[780px\]\:w-\[min\(300px\,calc\(100vw-36px\)\)\] {
    @media (width < 780px) {
      width: min(300px, calc(100vw - 36px));
    }
  }
  .max-\[780px\]\:w-full {
    @media (width < 780px) {
      width: 100%;
    }
  }
  .max-\[780px\]\:min-w-0 {
    @media (width < 780px) {
      min-width: calc(var(--spacing) * 0);
    }
  }
  .max-\[780px\]\:min-w-\[34px\] {
    @media (width < 780px) {
      min-width: 34px;
    }
  }
  .max-\[780px\]\:flex-1 {
    @media (width < 780px) {
      flex: 1;
    }
  }
  .max-\[780px\]\:basis-\[44\%\] {
    @media (width < 780px) {
      flex-basis: 44%;
    }
  }
  .max-\[780px\]\:basis-full {
    @media (width < 780px) {
      flex-basis: 100%;
    }
  }
  .max-\[780px\]\:-translate-x-\[115\%\] {
    @media (width < 780px) {
      --tw-translate-x: calc(115% * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .max-\[780px\]\:translate-x-0 {
    @media (width < 780px) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .max-\[780px\]\:grid-cols-2 {
    @media (width < 780px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .max-\[780px\]\:grid-cols-\[84px_90px_1fr\] {
    @media (width < 780px) {
      grid-template-columns: 84px 90px 1fr;
    }
  }
  .max-\[780px\]\:flex-nowrap {
    @media (width < 780px) {
      flex-wrap: nowrap;
    }
  }
  .max-\[780px\]\:flex-wrap {
    @media (width < 780px) {
      flex-wrap: wrap;
    }
  }
  .max-\[780px\]\:items-center {
    @media (width < 780px) {
      align-items: center;
    }
  }
  .max-\[780px\]\:gap-1 {
    @media (width < 780px) {
      gap: calc(var(--spacing) * 1);
    }
  }
  .max-\[780px\]\:gap-2 {
    @media (width < 780px) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .max-\[780px\]\:p-0 {
    @media (width < 780px) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .max-\[780px\]\:p-2 {
    @media (width < 780px) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .max-\[780px\]\:px-3 {
    @media (width < 780px) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .max-\[780px\]\:pt-3\.5 {
    @media (width < 780px) {
      padding-top: calc(var(--spacing) * 3.5);
    }
  }
  .max-\[780px\]\:pb-8 {
    @media (width < 780px) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .max-\[780px\]\:text-2xl {
    @media (width < 780px) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .max-\[700px\]\:hidden {
    @media (width < 700px) {
      display: none;
    }
  }
  .max-\[700px\]\:h-12 {
    @media (width < 700px) {
      height: calc(var(--spacing) * 12);
    }
  }
  .max-\[700px\]\:basis-12 {
    @media (width < 700px) {
      flex-basis: calc(var(--spacing) * 12);
    }
  }
  .max-\[700px\]\:rounded-none {
    @media (width < 700px) {
      border-radius: 0;
    }
  }
  .max-\[700px\]\:border-0 {
    @media (width < 700px) {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .max-\[700px\]\:p-0 {
    @media (width < 700px) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .max-\[700px\]\:px-2\.5 {
    @media (width < 700px) {
      padding-inline: calc(var(--spacing) * 2.5);
    }
  }
  .max-\[700px\]\:py-1\.5 {
    @media (width < 700px) {
      padding-block: calc(var(--spacing) * 1.5);
    }
  }
  .max-\[700px\]\:text-xs {
    @media (width < 700px) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .max-\[470px\]\:w-\[38px\] {
    @media (width < 470px) {
      width: 38px;
    }
  }
  .max-\[470px\]\:w-full {
    @media (width < 470px) {
      width: 100%;
    }
  }
  .max-\[470px\]\:grid-cols-1 {
    @media (width < 470px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .max-\[470px\]\:grid-cols-\[92px_1fr_70px\] {
    @media (width < 470px) {
      grid-template-columns: 92px 1fr 70px;
    }
  }
  .max-\[470px\]\:flex-col {
    @media (width < 470px) {
      flex-direction: column;
    }
  }
  .max-\[470px\]\:items-start {
    @media (width < 470px) {
      align-items: flex-start;
    }
  }
  .max-\[470px\]\:justify-start {
    @media (width < 470px) {
      justify-content: flex-start;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:p-9 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 9);
    }
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
    }
  }
}

/* RZMX Cloud v7.8.11: responsive sidebar state. */
@media (width >= 781px) {
  #app .main { transition: margin-left .2s ease, width .2s ease; }
  #app.sidebar-collapsed #sidebar { transform: translateX(calc(-100% - 2rem)); }
  #app.sidebar-collapsed .main { margin-left: 0; width: 100%; padding-left: 5.25rem; }
  #app.sidebar-collapsed #sidebar-open-btn { display: inline-flex; }
}
@media (width < 781px) {
  #sidebar-open-btn { display: none !important; }
}


/* RZMX Cloud v7.8.12: mobile-first main workspace and compact list actions. */
#app .main,
#app .main > section,
.page-head,
.head-actions,
.toolbar,
.bulk,
.content-panel,
.settings-grid,
.settings-card,
.panel,
.stats-hero,
.users,
.user-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (width < 781px) {
  #app .main {
    overflow-x: clip;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .mobile-top {
    min-height: 42px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .page-head > div:first-child {
    width: 100%;
    min-width: 0;
    padding-left: .125rem;
    padding-right: .125rem;
  }

  .page-head h1 {
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .head-actions:not(.hidden) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
    gap: .5rem;
  }

  .head-actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: .7rem;
    padding-right: .7rem;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px 38px;
    width: 100%;
    align-items: stretch;
    gap: .5rem;
  }

  .toolbar .search {
    grid-column: 1 / -1;
    order: initial;
    width: 100%;
    min-width: 0;
  }

  .toolbar .select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .toolbar .btn.icon {
    min-width: 38px;
  }

  .bulk:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .bulk strong {
    flex: 1 0 100%;
    margin-right: 0;
  }

  .bulk .btn {
    flex: 1 1 120px;
    min-width: 0;
    white-space: normal;
  }

  .breadcrumb {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .content-panel {
    width: 100%;
    overflow-x: hidden;
  }

  .file-list {
    width: 100%;
    table-layout: fixed;
  }

  .file-list th,
  .file-list td {
    min-width: 0;
  }

  .file-list .check {
    width: 38px;
    padding-left: .4rem;
    padding-right: .25rem;
  }

  .file-list .actions-col {
    width: 82px;
    padding-left: .25rem;
    padding-right: .5rem;
  }

  .file-list .actions {
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
  }

  .file-list .list-quick-action {
    display: none !important;
  }

  .file-list .list-trash-restore {
    width: 34px;
    min-width: 34px;
    padding-left: 0;
    padding-right: 0;
  }

  .file-list .list-trash-restore .restore-label {
    display: none;
  }

  .file-list .fname {
    width: 100%;
    min-width: 0;
  }

  .file-list .fname .text {
    min-width: 0;
  }

  .file-list .fname .text strong,
  .file-list .fname .text small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .update-head,
  .backup-row {
    flex-wrap: wrap;
  }

  .update-actions .grow,
  .backup-row .grow,
  .user-card .grow {
    min-width: 0;
  }
}

@media (width <= 560px) {
  .head-actions:not(.hidden) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar .search {
    grid-column: 1 / -1;
  }

  .toolbar .btn.icon {
    width: 100%;
    min-width: 0;
  }

  .file-list th,
  .file-list td {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .file-list .fileicon {
    width: 32px;
    height: 32px;
  }

  .activity-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .activity-row span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .users {
    grid-template-columns: minmax(0, 1fr);
  }

  .update-head {
    flex-direction: column;
    align-items: stretch;
  }

  .update-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .update-actions .grow,
  .update-actions .btn,
  .backup-row .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .backup-row {
    align-items: stretch;
  }

  #settings-backups > div:first-child {
    flex-wrap: wrap;
  }

  #settings-backups > div:first-child > .btn {
    width: 100%;
    max-width: 100%;
  }

  .type-row {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .type-row .bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .type-row .right {
    grid-column: 2;
    grid-row: 1;
  }

  .settings-card,
  .panel,
  .stats-hero {
    padding: 1rem;
  }
}

@media (width <= 340px) {
  .head-actions:not(.hidden) {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-list .check {
    width: 34px;
  }

  .file-list .actions-col {
    width: 78px;
  }
}


/* RZMX Cloud v7.8.13: consistent responsive file rows and glass scrollbars. */
:root {
  scrollbar-color: rgba(148, 163, 184, .42) rgba(15, 23, 42, .18);
  scrollbar-width: thin;
}
* {
  scrollbar-color: rgba(148, 163, 184, .42) rgba(15, 23, 42, .18);
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .16);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  min-height: 38px;
  border: 2px solid rgba(15, 23, 42, .18);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(165, 180, 252, .62), rgba(34, 211, 238, .42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(199, 210, 254, .78), rgba(103, 232, 249, .58));
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
.file-list .name-col {
  min-width: 0;
}
.file-list .row-meta {
  display: none;
}
.file-list .row-meta span {
  min-width: 0;
}
.file-list .folder-meta span:last-child,
.file-list .file-meta span:last-child {
  margin-right: 0;
}

@media (width < 781px) {
  .content-panel {
    overflow: visible;
  }

  .file-list,
  .file-list tbody,
  .file-list tr,
  .file-list td {
    display: block;
    width: 100%;
  }

  .file-list thead {
    display: none;
  }

  .file-list tbody {
    padding: .5rem;
  }

  .file-list tr {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: .6rem;
    margin-bottom: .55rem;
    padding: .7rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  .file-list tr:last-child {
    margin-bottom: 0;
  }

  .file-list td {
    border: 0;
    padding: 0;
  }

  .file-list .check {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    width: 42px;
    place-items: center;
    padding: 0;
  }

  .file-list .name-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .file-list .actions-col {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: 42px;
    min-width: 42px;
    justify-content: flex-end;
    padding: 0;
  }

  .file-list .size-col,
  .file-list .date-col,
  .file-list .downloads-col {
    display: none !important;
  }

  .file-list .fname {
    align-items: center;
    gap: .65rem;
  }

  .file-list .fname.file-open {
    margin: -.25rem;
    padding: .25rem;
  }

  .file-list .fileicon {
    width: 36px;
    height: 36px;
  }

  .file-list .fname .text strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  .file-list .fname .text small {
    display: none;
  }

  .file-list .row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
  }

  .file-list .row-meta span {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .055);
    padding: .18rem .45rem;
    color: rgb(203, 213, 225);
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .file-list .actions {
    width: 42px;
    justify-content: flex-end;
  }

  .file-list .actions .btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
}


/* RZMX Cloud v7.8.14: fluid shell bounds, wider drawer breakpoint and unified glass modals. */
html,
body,
#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#app,
#app .main,
#app .main > section,
.page-head,
.head-actions,
.toolbar,
.bulk,
.content-panel,
.file-list,
.file-grid,
.panel,
.settings-card,
.stats-hero,
.user-card,
.modal,
.modal * {
  box-sizing: border-box;
}

#app .main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.content-panel {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.file-list {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.file-list .check { width: 46px; }
.file-list .size-col { width: 112px; }
.file-list .date-col { width: 142px; }
.file-list .downloads-col { width: 116px; }
.file-list .actions-col { width: 132px; }
.file-list .name-col { width: auto; min-width: 0; }
.file-list .actions { min-width: 0; flex-wrap: nowrap; }
.file-list .actions .btn { flex: 0 0 auto; }

.fname,
.fname .text,
.fname .text strong,
.fname .text small {
  min-width: 0;
  max-width: 100%;
}

.fname .text strong,
.card .name,
.activity-row span,
.update-status,
.backup-row .grow,
.user-card .grow,
.settings-card,
.panel {
  overflow-wrap: anywhere;
}

#sidebar-close-btn {
  font-size: 20px;
  line-height: 1;
}

@media (width >= 1081px) {
  #app .main {
    margin-left: 284px;
    width: calc(100% - 284px);
    max-width: calc(100vw - 284px);
  }
  #app.sidebar-collapsed .main {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    padding-left: 5.25rem;
  }
  #app.sidebar-collapsed #sidebar {
    transform: translateX(calc(-100% - 2rem));
  }
  #app.sidebar-collapsed #sidebar-open-btn {
    display: inline-flex;
  }
}

@media (width < 1081px) {
  #app {
    display: block;
  }
  #app .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: clamp(.75rem, 2.4vw, 1.25rem);
    padding-right: clamp(.75rem, 2.4vw, 1.25rem);
  }
  #app.sidebar-collapsed .main {
    padding-left: clamp(.75rem, 2.4vw, 1.25rem);
  }
  #sidebar-open-btn {
    display: none !important;
  }
  .mobile-top {
    display: flex !important;
  }
  .sidebar {
    left: .625rem !important;
    top: .625rem !important;
    bottom: .625rem !important;
    width: min(320px, calc(100vw - 1.25rem)) !important;
    max-width: calc(100vw - 1.25rem);
    transform: translateX(calc(-100% - 1.25rem)) !important;
    z-index: 60;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .sidebar:not(.open) {
    pointer-events: none;
  }
  .mobile-overlay:not(.hidden) {
    display: block !important;
  }
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }
  .page-head > div:first-child,
  .head-actions,
  .toolbar,
  .bulk,
  .content-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .head-actions:not(.hidden) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    justify-content: stretch;
  }
  .head-actions .btn,
  .bulk .btn,
  .modal-actions .btn {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px;
    align-items: stretch;
    gap: .55rem;
  }
  .toolbar .search {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
  .toolbar .select,
  .toolbar .btn {
    min-width: 0;
    width: 100%;
  }
  .content-panel {
    overflow-x: hidden;
  }
  .file-list,
  .file-list tbody,
  .file-list tr,
  .file-list td {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .file-list thead {
    display: none;
  }
  .file-list tbody {
    display: block;
    padding: .55rem;
  }
  .file-list tr {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: .6rem;
    margin-bottom: .55rem;
    padding: .72rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  .file-list tr:last-child { margin-bottom: 0; }
  .file-list td {
    border: 0;
    padding: 0;
  }
  .file-list .check {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    width: 42px;
    place-items: center;
  }
  .file-list .name-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .file-list .actions-col {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: 42px;
    min-width: 42px;
    justify-content: flex-end;
  }
  .file-list .size-col,
  .file-list .date-col,
  .file-list .downloads-col {
    display: none !important;
  }
  .file-list .list-quick-action {
    display: none !important;
  }
  .file-list .actions,
  .file-list .actions .btn {
    width: 38px;
    min-width: 38px;
  }
  .file-list .actions .btn {
    height: 38px;
    min-height: 38px;
    padding: 0;
  }
  .file-list .fname {
    width: 100%;
    align-items: center;
    gap: .65rem;
  }
  .file-list .fname .text strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
  .file-list .fname .text small {
    display: none;
  }
  .file-list .row-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
  }
  .file-list .row-meta span {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .055);
    padding: .18rem .45rem;
    color: rgb(203, 213, 225);
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}

@media (width <= 560px) {
  #app .main {
    padding-left: .65rem;
    padding-right: .65rem;
  }
  .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolbar .search {
    grid-column: 1 / -1;
  }
  .head-actions:not(.hidden) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .file-list tbody {
    padding: .45rem;
  }
  .file-list tr {
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    gap: .5rem;
    padding: .62rem;
  }
  .file-list .fileicon {
    width: 34px;
    height: 34px;
  }
}

@media (width <= 360px) {
  .head-actions:not(.hidden) {
    grid-template-columns: minmax(0, 1fr);
  }
  .toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .file-list tr {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
  }
}

.modal-back {
  align-items: center;
  justify-items: center;
  overflow-y: auto;
  padding: clamp(.75rem, 2vw, 1.25rem);
  background:
    radial-gradient(circle at 20% 15%, rgba(99, 102, 241, .22), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(34, 211, 238, .12), transparent 30%),
    rgba(2, 6, 23, .68);
  backdrop-filter: blur(18px);
}

.modal {
  width: min(100%, 560px);
  max-width: min(560px, calc(100vw - 1.5rem));
  max-height: min(88dvh, calc(100dvh - 1.5rem));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .20);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(24px);
}

.modal.wide {
  width: min(100%, 960px);
  max-width: min(960px, calc(100vw - 1.5rem));
}

.modal-head {
  align-items: flex-start;
  gap: .75rem;
}

.modal-head h2 {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.modal-actions .btn {
  max-width: 100%;
}

.modal .grid {
  max-width: 100%;
  min-width: 0;
}

@media (width <= 560px) {
  .modal-back {
    align-items: stretch;
    padding: .65rem;
  }
  .modal,
  .modal.wide {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 1.3rem);
    border-radius: 1.35rem;
    padding: 1rem;
  }
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-actions .btn,
  .modal .grid .btn {
    width: 100%;
  }
  .office-bar {
    min-width: 0;
    overflow: hidden;
  }
  .office-bar > * {
    min-width: 0;
  }
  .office-bar strong,
  .office-bar span:not(.office-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* RZMX Cloud v7.8.15: единый bounded layout, нормальные карточки и drawer до 1080px */
html,body,#app{max-width:100vw;overflow-x:hidden}
#app,.main,#page-files,.toolbar,.content-panel,.file-list,.file-grid,.modal{min-width:0}
.main{max-width:100vw}
.content-panel{max-width:100%;overflow:hidden}
#sidebar-open-btn{display:none!important}
@media (max-width:1080px){
  #app{display:block!important}
  .sidebar{top:.625rem!important;bottom:.625rem!important;left:.625rem!important;width:min(320px,calc(100vw - 36px))!important;max-width:calc(100vw - 20px)!important;transform:translateX(-115%)!important;z-index:70!important}
  .sidebar.open{transform:translateX(0)!important}
  .mobile-top{display:flex!important}
  .main{margin-left:0!important;width:100%!important;max-width:100vw!important;padding:0.875rem 0.75rem 2rem!important}
  #sidebar-open-btn{display:none!important}
}
@media (min-width:1081px){
  .sidebar{transform:none!important}
  .mobile-top{display:none!important}
  #app.sidebar-collapsed .sidebar{transform:translateX(-115%)!important}
  #app.sidebar-collapsed .main{margin-left:0!important;width:100%!important;padding-left:2rem!important;padding-right:2rem!important}
  #app.sidebar-collapsed #sidebar-open-btn{display:inline-flex!important}
}
.file-list{width:100%;table-layout:fixed;border-collapse:collapse}
.file-list th,.file-list td{vertical-align:middle}
.file-list .check{width:44px}
.file-list .size-col{width:110px}
.file-list .date-col{width:132px}
.file-list .downloads-col{width:116px}
.file-list .actions-col{width:158px}
.fname{min-width:0}.fname .text{min-width:0}.fname .text strong{max-width:100%}.row-meta{display:none}
.actions{min-width:0}.actions .btn{white-space:normal;overflow-wrap:anywhere}
@media (max-width:1080px){
  .file-list,.file-list tbody,.file-list tr,.file-list td{display:block;width:100%}
  .file-list thead{display:none}
  .file-list tr{position:relative;margin:10px;padding:13px 62px 13px 12px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px rgba(255,255,255,.04);overflow:hidden}
  .file-list tr:hover{background:rgba(255,255,255,.065)}
  .file-list td{border:0!important;padding:0!important}
  .file-list .check{display:none!important}
  .file-list .size-col,.file-list .date-col,.file-list .downloads-col{display:none!important}
  .file-list .actions-col{position:absolute;right:12px;top:12px;width:auto!important;max-width:42px}
  .file-list .actions{display:flex!important;justify-content:flex-end!important;width:auto!important;max-width:42px!important}
  .file-list .actions .list-quick-action{display:none!important}
  .file-list .actions .btn{height:40px!important;min-height:40px!important;width:40px!important;min-width:40px!important;padding:0!important;border-radius:14px!important}
  .fname{align-items:flex-start!important;gap:11px!important;width:100%;min-width:0}
  .fname .fileicon{margin-top:1px;flex:0 0 40px}
  .fname .text strong{white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-height:1.35}
  .fname .text small{display:block!important;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;line-height:1.3}
  .row-meta{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:7px;color:rgb(203 213 225 / .82)}
  .row-meta span{display:inline-flex;max-width:100%;align-items:center;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.055);padding:3px 8px;font-size:10.5px;line-height:1.2;overflow-wrap:anywhere}
}
.file-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;align-items:stretch}
.file-grid .card{display:flex;min-height:0;min-width:0;flex-direction:column;gap:.75rem;overflow:hidden;padding:.875rem!important}
.card-mainline{display:grid;grid-template-columns:46px minmax(0,1fr) 40px;align-items:center;gap:.75rem;min-width:0}
.card-mainline .card-icon{height:46px!important;width:46px!important;border-radius:16px!important}
.card-text{min-width:0;overflow:hidden}.card .name{margin:0!important;min-width:0;white-space:normal!important;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.32}.card .meta{margin-top:5px;color:rgb(203 213 225 / .72);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.card-menu{justify-self:end}.card .selectbox{right:12px!important;bottom:12px!important}.card-actions{display:flex;min-width:0;flex-wrap:wrap;gap:.5rem;margin-top:auto}.card-actions .btn{min-width:0;max-width:100%;flex:1 1 auto;white-space:normal;overflow-wrap:anywhere;line-height:1.18}.card-actions.shared-actions .btn{flex:1 1 calc(50% - .25rem)}.card-actions.shared-actions .btn.share-off{flex-basis:100%}
@media (max-width:520px){
  .file-grid{grid-template-columns:1fr!important;padding:.5rem!important}
  .file-grid .card{border-radius:22px;padding:.875rem!important}
  .card-mainline{grid-template-columns:42px minmax(0,1fr) 38px;gap:.65rem}
  .card-mainline .card-icon{height:42px!important;width:42px!important;border-radius:15px!important}
  .card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.card-actions .btn{width:100%;padding-left:.5rem!important;padding-right:.5rem!important}.card-actions .btn.share-off{grid-column:1/-1}
}
.modal-back{background:radial-gradient(900px 500px at 10% 0,rgba(99,102,241,.25),transparent 60%),rgba(2,6,23,.68)!important;backdrop-filter:blur(18px)!important}.modal{border-color:rgba(255,255,255,.20)!important;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.08))!important;box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.06)!important}.modal .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}.modal .grid{min-width:0}.modal .grid>.btn{min-width:0;width:100%}

/* RZMX Cloud v7.8.17: compact dots, card selection top-right, left folder rows and mobile action sheet. */
.menu-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  font-size:20px;
  line-height:1;
  letter-spacing:0;
  transform:translateY(-1px);
}
.btn.icon.small .menu-dot{
  font-size:18px;
}
.card-menu .menu-dot{
  font-size:18px;
}
.card .selectbox{
  top:12px!important;
  right:12px!important;
  bottom:auto!important;
  z-index:5;
  width:18px!important;
  height:18px!important;
  border-radius:6px;
  accent-color:#818cf8;
}
.card:has(.selectbox) .card-mainline,
.card.selectable .card-mainline{
  padding-right:26px;
}
.file-list .folder-row .folder-name-cell{
  padding-left:18px!important;
}
.file-list .folder-row .fname{
  gap:10px!important;
}
.file-list .folder-row .fileicon{
  margin-left:0!important;
}
@media (min-width:1081px){
  .file-list .folder-row .folder-name-cell{padding-left:16px!important;}
}
@media (max-width:1080px){
  .file-list .folder-row{
    grid-template-columns:minmax(0,1fr) 42px!important;
    padding-left:12px!important;
  }
  .file-list .folder-row .folder-name-cell{
    grid-column:1!important;
    grid-row:1!important;
    padding-left:0!important;
  }
  .file-list .folder-row .actions-col{
    grid-column:2!important;
    grid-row:1!important;
  }
  .file-list .folder-row .fname{
    gap:10px!important;
  }
}
@media (max-width:560px){
  .file-list .folder-row{
    grid-template-columns:minmax(0,1fr) 40px!important;
  }
}
.file-grid .card{
  min-height:auto!important;
}
.file-grid .card.folder .card-mainline{
  cursor:pointer;
}
.card-actions{
  align-items:stretch;
}
.card-actions .btn{
  min-height:38px!important;
}
@media (max-width:520px){
  .card:has(.selectbox) .card-mainline,
.card.selectable .card-mainline{
    padding-right:24px;
  }
  .card .selectbox{
    top:10px!important;
    right:10px!important;
  }
}
.sheet .sheet-grip{
  display:none;
}
.sheet .action-menu{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}
.sheet .action-menu .btn{
  min-width:0;
  width:100%;
  min-height:42px;
  justify-content:center;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
}
.sheet .action-menu .col-span-full,
.sheet .action-menu .share-off{
  grid-column:1/-1;
}
@media (max-width:780px){
  .sheet-back{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .sheet-back .sheet{
    width:100%!important;
    max-width:100%!important;
    max-height:min(86dvh,calc(100dvh - 1rem))!important;
    margin:0!important;
    overflow:auto!important;
    border-radius:28px 28px 0 0!important;
    border-left:1px solid rgba(255,255,255,.18)!important;
    border-right:1px solid rgba(255,255,255,.18)!important;
    border-bottom:0!important;
    padding:12px 14px calc(16px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(145deg,rgba(54,63,119,.92),rgba(63,34,96,.88))!important;
    box-shadow:0 -22px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.10)!important;
    animation:rzmxSheetIn .18s ease-out both;
    will-change:transform;
    touch-action:pan-y;
  }
  .sheet-back .sheet.dragging{
    transition:none!important;
  }
  .sheet .sheet-grip{
    display:block;
    width:48px;
    height:5px;
    margin:2px auto 12px;
    border-radius:999px;
    background:rgba(255,255,255,.30);
    box-shadow:0 1px rgba(255,255,255,.12) inset;
  }
  .sheet .modal-head{
    margin-bottom:12px!important;
    padding:0 2px;
  }
  .sheet .modal-head h2{
    font-size:15px!important;
    line-height:1.25;
  }
  .sheet .action-menu{
    grid-template-columns:1fr!important;
  }
  .sheet .action-menu .btn{
    justify-content:flex-start!important;
    min-height:46px!important;
    border-radius:16px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}
@keyframes rzmxSheetIn{
  from{transform:translateY(100%);opacity:.55}
  to{transform:translateY(0);opacity:1}
}

/* RZMX Cloud v7.8.21: edge-attached slide-out sidebar */
.sidebar{
  left:-10px!important;
  top:clamp(.5rem,1.4vw,1rem)!important;
  bottom:clamp(.5rem,1.4vw,1rem)!important;
  width:264px!important;
  border-left:0!important;
  border-radius:0 30px 30px 0!important;
  padding-left:calc(.875rem + 10px)!important;
  box-shadow:24px 0 70px rgba(0,0,0,.42), inset -1px 0 rgba(255,255,255,.10)!important;
}
.sidebar.glass{
  background:linear-gradient(150deg,rgba(59,68,124,.58),rgba(35,37,60,.72) 48%,rgba(65,39,82,.56))!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
}
#sidebar-close-btn{
  border-radius:16px!important;
}
@media (max-width:1080px){
  .sidebar{
    left:-10px!important;
    top:.625rem!important;
    bottom:.625rem!important;
    width:min(330px,calc(100vw - 14px))!important;
    max-width:calc(100vw - 10px)!important;
    border-radius:0 30px 30px 0!important;
    padding-left:calc(.875rem + 10px)!important;
    transform:translateX(calc(-100% - 24px))!important;
  }
  .sidebar.open{transform:translateX(0)!important}
}
@media (min-width:1081px){
  .sidebar{left:-10px!important;transform:none!important}
  #app.sidebar-collapsed .sidebar{transform:translateX(calc(-100% - 24px))!important}
  .main{margin-left:284px!important;width:calc(100% - 284px)!important}
  #app.sidebar-collapsed .main{margin-left:0!important;width:100%!important}
}


/* RZMX Cloud v7.8.21: clean active state + full glass icons */
.nav button.active{
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  color:rgba(241,245,249,.96)!important;
}
.nav button.active .ico{
  color:rgb(125 211 252)!important;
}
.nav button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible){
  outline:0!important;
  box-shadow:none!important;
}
.nav .ico svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav button:hover .ico{color:rgb(191 219 254)!important}
.fileicon{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;
}
.fileicon>.file-type-icon,.fileicon>.folder-type-icon{
  width:36px!important;
  height:36px!important;
}
.card .card-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04))!important;
}
.card-icon>.file-type-icon,.card-icon>.folder-type-icon{
  width:42px!important;
  height:42px!important;
}
.file-type-icon svg,.folder-type-icon svg{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}
.folder-type-icon{
  color:rgb(125 211 252)!important;
}
.folder-type-icon.subfolder{
  color:rgb(165 180 252)!important;
}
.file-list .folder-row .fname{gap:.65rem!important}
.file-list .folder-row .fileicon{margin-left:0!important}
@media (max-width:780px){
  .fileicon{width:42px!important;height:42px!important}
  .fileicon>.file-type-icon,.fileicon>.folder-type-icon{width:38px!important;height:38px!important}
  .card .card-icon{width:50px!important;height:50px!important}
  .card-icon>.file-type-icon,.card-icon>.folder-type-icon{width:44px!important;height:44px!important}
}


/* RZMX Cloud v7.8.21: full-size file type pictograms */
.file-type-icon.full-file-icon svg{
  overflow:visible;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.24));
}
.file-type-icon.full-file-icon text{
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.file-type-icon.full-file-icon .glyph{
  vector-effect:non-scaling-stroke;
}
.fileicon>.file-type-icon.full-file-icon{
  width:38px!important;
  height:38px!important;
}
.card-icon>.file-type-icon.full-file-icon{
  width:44px!important;
  height:44px!important;
}
@media (max-width:780px){
  .fileicon>.file-type-icon.full-file-icon{width:40px!important;height:40px!important}
  .card-icon>.file-type-icon.full-file-icon{width:46px!important;height:46px!important}
}

/* RZMX Cloud v7.8.21: borderless integrated file icons */
.fileicon,
.card .card-icon{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.22)) drop-shadow(0 0 10px rgba(125,211,252,.10));
}
.fileicon>.file-type-icon,
.fileicon>.folder-type-icon,
.card-icon>.file-type-icon,
.card-icon>.folder-type-icon{
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.26)) drop-shadow(0 0 9px rgba(125,211,252,.14));
}
.file-type-icon svg,
.folder-type-icon svg{
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.25)) drop-shadow(0 0 8px rgba(125,211,252,.14))!important;
}
.file-type-icon.full-file-icon svg{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.26)) drop-shadow(0 0 10px rgba(125,211,252,.12))!important;
}
.card .card-icon:hover,
.fname.file-open:hover .fileicon{
  filter:drop-shadow(0 9px 18px rgba(0,0,0,.28)) drop-shadow(0 0 12px rgba(147,197,253,.18));
}

/* RZMX Cloud v7.8.23: real draggable bottom sheets and scroll lock */
html.rzmx-modal-open,
html.rzmx-modal-open body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.modal-back{
  overscroll-behavior:contain!important;
}
@media (max-width:780px){
  .sheet-back{
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  .sheet-back .sheet{
    max-height:min(82dvh,calc(100dvh - .75rem))!important;
    min-height:auto!important;
    height:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    touch-action:none!important;
  }
  .sheet-back .sheet.share-sheet{
    max-height:min(74dvh,calc(100dvh - 1.5rem))!important;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom))!important;
  }
  .sheet-back .sheet.share-sheet .modal-head{
    margin-bottom:14px!important;
  }
  .sheet-back .sheet.share-sheet .field{
    margin-bottom:12px!important;
  }
  .sheet-back .sheet.share-sheet .modal-actions{
    margin-top:14px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.55rem!important;
  }
  .sheet-back .sheet.share-sheet .modal-actions .btn{
    width:100%!important;
    justify-content:center!important;
    min-height:42px!important;
  }
}


/* RZMX Cloud v7.8.23: reliable swipe-down bottom sheets */
html.rzmx-modal-open,
html.rzmx-modal-open body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
.sheet-back{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
@media (max-width:780px){
  .sheet-back .sheet{
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    will-change:transform;
    transform:translate3d(0,0,0);
  }
  .sheet-back .sheet.dragging{
    transition:none!important;
  }
  .sheet-back .sheet.snapback{
    transition:transform .18s ease-out!important;
  }
  .sheet .sheet-grip{
    touch-action:none!important;
    cursor:grab;
    position:relative;
    height:28px!important;
    margin:-8px auto 8px!important;
    width:100%!important;
  }
  .sheet .sheet-grip::after{
    content:"";
    position:absolute;
    left:50%;top:12px;
    width:46px;height:4px;
    transform:translateX(-50%);
    border-radius:999px;
    background:rgba(226,232,240,.45);
    box-shadow:0 0 14px rgba(226,232,240,.18);
  }
  .sheet .modal-head{
    touch-action:none!important;
    cursor:grab;
    user-select:none;
  }
}

/* RZMX Cloud v7.8.24: support-style reliable draggable sheets */
html.rzmx-modal-open,
html.rzmx-modal-open body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:auto!important;
}
.sheet-back{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
@media (max-width:780px){
  .sheet-back .sheet{
    touch-action:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  .sheet-back .sheet.dragging,
  .sheet-back .sheet.sheet-moving{
    overflow:hidden!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
  .sheet .sheet-grip,
  .sheet .modal-head{
    touch-action:none!important;
  }
  .sheet .sheet-grip{
    cursor:grab!important;
  }
  .sheet .sheet-grip:active,
  .sheet .modal-head:active{
    cursor:grabbing!important;
  }
}

/* RZMX Cloud v7.8.25: visible sheet pull + clean handle, no animation lock */
@media (max-width:780px){
  .sheet-back .sheet.dragging,
  .sheet-back .sheet.sheet-moving,
  .sheet-back .sheet.snapback{
    animation:none!important;
    will-change:transform!important;
  }
  .sheet-back .sheet.dragging{
    transition:none!important;
  }
  .sheet .sheet-grip,
  .sheet .modal-head{
    touch-action:none!important;
  }
  .sheet .sheet-grip{
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    margin:-8px 0 8px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    cursor:grab!important;
  }
  .sheet .sheet-grip::after{
    content:""!important;
    display:block!important;
    width:58px!important;
    height:5px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,rgba(125,211,252,.22),rgba(226,232,240,.58),rgba(125,211,252,.22))!important;
    box-shadow:0 2px 12px rgba(125,211,252,.16)!important;
  }
  .sheet.dragging .sheet-grip::after,
  .sheet.sheet-moving .sheet-grip::after{
    background:linear-gradient(90deg,rgba(125,211,252,.35),rgba(241,245,249,.78),rgba(125,211,252,.35))!important;
  }
}

/* RZMX Cloud v7.9.5: UI refresh — display fix, grid cards, interactive states */
.hidden.btn{display:none}
.hidden[hidden]{display:none}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.55);margin-right:7px;vertical-align:baseline;flex:none}
/* T23: status dot is static — no perpetual pulse (a live service state, not a live event) */
.status-dot.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.missing{color:#fda4af}
.auth-foot{margin:18px 0 0;font-size:11px;color:rgba(148,163,184,.65);text-align:center;letter-spacing:.02em}
.rzmx-cloud-logo{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(34,211,238,.35))}
/* --- animated ambient background (replaces static blobs) --- */
.rzmx-bg{position:fixed;inset:0;z-index:-50;overflow:hidden;pointer-events:none;background:
  radial-gradient(1100px 760px at 10% -12%,rgba(56,189,248,.22),transparent 62%),
  radial-gradient(950px 680px at 110% 6%,rgba(16,185,129,.16),transparent 58%),
  radial-gradient(1000px 900px at 48% 118%,rgba(129,102,241,.24),transparent 62%),
  radial-gradient(700px 500px at 82% 42%,rgba(34,211,238,.10),transparent 60%),
  linear-gradient(158deg,#0a1226 0%,#0d1730 42%,#111a38 74%,#0c1428 100%)}
.rzmx-aurora{position:absolute;inset:-20%;background:
  conic-gradient(from 180deg at 30% 20%,transparent 0deg,rgba(34,211,238,.10) 60deg,transparent 120deg,rgba(52,211,153,.10) 200deg,transparent 260deg,rgba(129,102,241,.12) 320deg,transparent 360deg);
  animation:rzmxSpin 60s linear infinite;opacity:1}
@keyframes rzmxSpin{to{transform:rotate(360deg)}}
.rzmx-blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:.75;will-change:transform}
.rzmx-blob.rb1{width:600px;height:600px;left:-160px;top:-200px;background:radial-gradient(circle,rgba(56,189,248,.34),transparent 70%);animation:rzmxFloat1 26s ease-in-out infinite alternate}
.rzmx-blob.rb2{width:560px;height:560px;right:-180px;top:4%;background:radial-gradient(circle,rgba(52,211,153,.26),transparent 70%);animation:rzmxFloat2 32s ease-in-out infinite alternate}
.rzmx-blob.rb3{width:700px;height:700px;left:30%;bottom:-280px;background:radial-gradient(circle,rgba(129,102,241,.30),transparent 70%);animation:rzmxFloat3 38s ease-in-out infinite alternate}
@keyframes rzmxFloat1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(70px,50px,0) scale(1.12)}}
@keyframes rzmxFloat2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-60px,80px,0) scale(.94)}}
@keyframes rzmxFloat3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(50px,-60px,0) scale(1.10)}}
.rzmx-grid-dots{position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(1200px 700px at 50% 0%,rgba(0,0,0,.8),transparent 75%);-webkit-mask-image:radial-gradient(1200px 700px at 50% 0%,rgba(0,0,0,.8),transparent 75%)}
@media (prefers-reduced-motion:reduce){.rzmx-aurora,.rzmx-blob,.status-dot.on{animation:none!important}}
/* --- glass refinements --- */
.glass{background:rgba(255,255,255,.055)!important;backdrop-filter:blur(18px)!important;border-color:rgba(255,255,255,.11)!important;box-shadow:0 14px 44px rgba(2,6,23,.35),inset 0 1px rgba(255,255,255,.06)!important}
.nav button{position:relative}
.nav button.active{color:#fff!important;background:linear-gradient(90deg,rgba(56,189,248,.14),rgba(52,211,153,.08))!important}
.nav button.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:999px;background:linear-gradient(180deg,#38bdf8,#34d399);box-shadow:0 0 12px rgba(56,189,248,.7)}
.nav button.active .ico{color:#7dd3fc}
.brand{cursor:pointer;border-radius:16px;transition:background .15s ease}
.brand:hover{background:rgba(255,255,255,.05)}
/* --- toolbar & search --- */
.toolbar{background:rgba(255,255,255,.045)!important;backdrop-filter:blur(16px)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 10px 30px rgba(2,6,23,.28)!important}
.search .input{background:rgba(2,6,23,.45)!important}
/* --- list view: name line with ellipsis, icons survive truncation --- */
.name-line{display:flex;align-items:center;gap:7px;min-width:0;width:100%}
.name-txt{flex:0 1 auto;min-width:56px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list tbody tr{transition:background .14s ease,box-shadow .14s ease}
.file-list tbody tr:hover{background:rgba(56,189,248,.06)!important}
.file-list .fname.file-open{transition:background .15s ease}
.file-list .fname.file-open:hover{background:rgba(56,189,248,.10)!important}
/* --- grid cards --- */
.content-panel{min-height:170px!important}
.file-grid{align-items:stretch}
.file-grid .card{position:relative;border-radius:20px!important;gap:.55rem!important;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.file-grid .card:hover{transform:translateY(-3px);background:rgba(255,255,255,.07)!important;border-color:rgba(125,211,252,.28)!important;box-shadow:0 18px 40px rgba(2,6,23,.5),0 0 0 1px rgba(125,211,252,.10) inset!important}
.file-grid .card.selected{border-color:rgba(125,211,252,.45)!important;background:rgba(56,189,248,.08)!important}
.file-grid .card .name{display:flex;align-items:center;min-width:0}
.file-grid .card .name-line{gap:8px}
.file-grid .card .name-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.file-grid .card .name .star{color:#fcd34d;flex:none;font-size:12px}
.file-grid .card .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal!important}
.file-grid .card .card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-grid .card-mainline .star{display:none}
.file-grid .card-actions{margin-top:auto;padding-top:4px;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease}
.file-grid .card:hover .card-actions,.file-grid .card:focus-within .card-actions,.file-grid .card.selected .card-actions{opacity:1;transform:none}
@media (hover:none){.file-grid .card-actions{opacity:1!important;transform:none!important}}
.file-grid .card-actions .btn{transition:background .14s ease,border-color .14s ease,transform .14s ease}
.file-grid .card-actions .btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.file-grid .card-actions .btn.bad:hover{background:rgba(244,63,94,.16)!important;border-color:rgba(251,113,133,.4)!important}
.file-type-icon,.folder-type-icon{transition:transform .18s ease}
.file-list .fname:hover .fileicon,.file-list .fname:hover .folder-type-icon{transform:scale(1.06)}
.file-grid .card:hover .card-icon .file-type-icon,.file-grid .card:hover .card-icon .folder-type-icon{transform:scale(1.07)}
.file-list .check input{cursor:pointer}
.selectbox{cursor:pointer}
.share-ind{flex:none}
.share-ind-btn{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.share-ind-btn:hover{transform:scale(1.18);box-shadow:0 0 0 4px rgba(129,140,248,.15)}
/* --- empty states --- */
.empty{animation:rzmxFadeIn .3s ease both}
.empty .big{animation:rzmxFloatEmpty 3.4s ease-in-out infinite}
@keyframes rzmxFloatEmpty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rzmxFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#files-content>table{animation:rzmxFadeIn .25s ease both}
/* --- buttons --- */
.btn{cursor:pointer}
.btn.primary{box-shadow:0 8px 22px rgba(79,70,229,.35),inset 0 1px rgba(255,255,255,.18)!important}
.btn.primary:hover{box-shadow:0 10px 26px rgba(79,70,229,.5),inset 0 1px rgba(255,255,255,.22)!important}
.btn.bad:hover{background:rgba(244,63,94,.16)!important;border-color:rgba(251,113,133,.4)!important}
/* --- stats --- */
.stat,.panel,.settings-card,.stats-hero{transition:transform .16s ease,background .16s ease,border-color .16s ease}
.stat:hover{transform:translateY(-2px);border-color:rgba(125,211,252,.22)}
.stat .v{background:linear-gradient(90deg,#e0f2fe,#a7f3d0);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --- modal entrance --- */
.modal-back{animation:rzmxFadeIn .18s ease both}
.modal{animation:rzmxModalIn .22s cubic-bezier(.16,1,.3,1) both}
@keyframes rzmxModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.toast{animation:rzmxToastIn .22s cubic-bezier(.16,1,.3,1) both}
@keyframes rzmxToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal,.toast,.empty,.empty .big,#files-content>table{animation:none!important}}

/* RZMX Cloud v7.9.5b: settings card header polish */
.update-head{align-items:flex-start}
.update-head>div:first-child{min-width:0;flex:1}
.update-ready{max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
@media (max-width:640px){.update-ready{max-width:130px}}

/* ============================================================
   RZMX Cloud v7.10.0: Frosted Glass refresh
   - unified frosted-glass surfaces (stronger blur, inner light)
   - z-index fix: mobile overlay above sidebar
   - mobile: compact action rows, no horizontal overflow
   - grid cards: tidy, equal heights, actions always reachable
   - scrollbars, focus rings, safe-area, reduced-motion
   ============================================================ */

:root{
  --rzmx-glass-bg:rgba(15,22,46,.34);
  --rzmx-glass-bg-2:rgba(12,18,38,.46);
  --rzmx-glass-line:rgba(178,194,235,.22);
  --rzmx-glass-line-2:rgba(178,194,235,.34);
  --rzmx-glass-blur:26px;
  --rzmx-accent:#818cf8;
  --rzmx-accent-2:#22d3ee;
  --rzmx-radius-lg:22px;
  --rzmx-radius-md:14px;
  --rzmx-radius-sm:10px;
  --rzmx-shadow-lg:0 18px 50px rgba(2,6,23,.42),0 2px 8px rgba(2,6,23,.3);
  --rzmx-shadow-md:0 10px 30px rgba(2,6,23,.32);
  --rzmx-inset-light:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 .5px rgba(255,255,255,.04);
}

/* ---------- glass surfaces (v7.10.1: translucent, blur visible) ---------- */
.glass{
  background:linear-gradient(165deg,rgba(38,50,92,.30) 0%,var(--rzmx-glass-bg) 40%,var(--rzmx-glass-bg-2) 100%)!important;
  -webkit-backdrop-filter:blur(var(--rzmx-glass-blur)) saturate(1.6)!important;
  backdrop-filter:blur(var(--rzmx-glass-blur)) saturate(1.6)!important;
  border:1px solid var(--rzmx-glass-line)!important;
  box-shadow:var(--rzmx-shadow-lg),var(--rzmx-inset-light),inset 0 0 40px rgba(129,140,248,.05)!important;
}
.toolbar{
  background:linear-gradient(180deg,rgba(28,38,72,.34),rgba(17,24,50,.40))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5)!important;
  backdrop-filter:blur(20px) saturate(1.5)!important;
  border:1px solid rgba(178,194,235,.18)!important;
  box-shadow:var(--rzmx-shadow-md),var(--rzmx-inset-light)!important;
}
.content-panel{
  background:linear-gradient(180deg,rgba(20,28,56,.26),rgba(12,18,40,.34))!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.45)!important;
  backdrop-filter:blur(18px) saturate(1.45)!important;
  border:1px solid rgba(178,194,235,.16)!important;
  box-shadow:var(--rzmx-shadow-lg),var(--rzmx-inset-light)!important;
}
.bulk{
  background:linear-gradient(180deg,rgba(38,50,92,.38),rgba(17,24,50,.46))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5)!important;
  backdrop-filter:blur(20px) saturate(1.5)!important;
  border:1px solid rgba(129,140,248,.3)!important;
  box-shadow:var(--rzmx-shadow-md),var(--rzmx-inset-light)!important;
}
.upload-float{
  background:linear-gradient(180deg,rgba(23,31,60,.82),rgba(13,18,38,.9))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3)!important;
  backdrop-filter:blur(20px) saturate(1.3)!important;
}
.modal{
  background:linear-gradient(170deg,rgba(24,32,62,.92) 0%,rgba(13,18,38,.94) 60%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.4)!important;
  backdrop-filter:blur(26px) saturate(1.4)!important;
  border:1px solid var(--rzmx-glass-line-2)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55),var(--rzmx-inset-light)!important;
}
.modal-back{background:rgba(3,6,16,.62)!important}
.toast{
  background:linear-gradient(180deg,rgba(23,31,60,.9),rgba(13,18,38,.94))!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3)!important;
  backdrop-filter:blur(18px) saturate(1.3)!important;
  box-shadow:var(--rzmx-shadow-md),var(--rzmx-inset-light)!important;
}
.storage-mini{
  background:linear-gradient(180deg,rgba(28,38,72,.3),rgba(15,21,44,.36))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4)!important;
  backdrop-filter:blur(14px) saturate(1.4)!important;
  border:1px solid rgba(178,194,235,.16)!important;
}
.stat,.panel,.settings-card,.user-card,.stats-hero{
  background:linear-gradient(165deg,rgba(32,43,80,.3) 0%,rgba(15,21,44,.4) 100%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.45)!important;
  backdrop-filter:blur(18px) saturate(1.45)!important;
  border:1px solid rgba(178,194,235,.16)!important;
  box-shadow:var(--rzmx-shadow-md),var(--rzmx-inset-light)!important;
}
.update-status{
  background:rgba(8,12,28,.5)!important;
  border:1px solid rgba(148,163,210,.12)!important;
}
.update-note{
  background:rgba(129,140,248,.06)!important;
  border:1px solid rgba(129,140,248,.14)!important;
}
.update-warn{
  background:rgba(244,63,94,.08)!important;
  border:1px solid rgba(244,63,94,.35)!important;
  color:#fda4af!important;
}

/* ---------- z-index: mobile sidebar (70) above its backdrop overlay (65) ---------- */
.mobile-overlay{z-index:65!important}
.sidebar{z-index:70!important}
#sidebar-open-btn{z-index:45!important}

/* ---------- buttons: crisper frosted state ---------- */
.btn{
  background:linear-gradient(180deg,rgba(148,163,210,.10),rgba(148,163,210,.05))!important;
  border:1px solid rgba(148,163,210,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}
.btn:hover{
  background:linear-gradient(180deg,rgba(148,163,210,.16),rgba(148,163,210,.08))!important;
  border-color:rgba(148,163,210,.3)!important;
}
.btn.primary{
  background:linear-gradient(135deg,#6366f1 0%,#7c6cf0 55%,#8b5cf6 100%)!important;
  border:1px solid rgba(165,180,252,.45)!important;
  box-shadow:0 10px 26px rgba(99,102,241,.4),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.btn.primary:hover{
  background:linear-gradient(135deg,#747af5 0%,#8d7bf2 55%,#9d6ffb 100%)!important;
  box-shadow:0 12px 30px rgba(99,102,241,.52),inset 0 1px 0 rgba(255,255,255,.32)!important;
}
.btn.bad{
  background:linear-gradient(180deg,rgba(244,63,94,.14),rgba(244,63,94,.07))!important;
  border-color:rgba(251,113,133,.28)!important;
}
.btn.bad:hover{
  background:linear-gradient(180deg,rgba(244,63,94,.24),rgba(244,63,94,.12))!important;
  border-color:rgba(251,113,133,.5)!important;
}
.btn.icon{
  background:linear-gradient(180deg,rgba(148,163,210,.08),rgba(148,163,210,.04))!important;
}
.btn.small{
  background:linear-gradient(180deg,rgba(148,163,210,.09),rgba(148,163,210,.04))!important;
}

/* ---------- inputs: deeper glass wells ---------- */
.input,.select,.textarea{
  background:linear-gradient(180deg,rgba(5,9,20,.62),rgba(8,13,30,.55))!important;
  border:1px solid rgba(148,163,210,.14)!important;
  box-shadow:inset 0 2px 6px rgba(2,6,23,.35);
}
/* T25: controls in one row share one height — toolbar input = icon buttons = 40px */
.toolbar .input,.toolbar .select{min-height:40px!important}
.toolbar .btn.icon{min-height:40px!important;height:40px!important}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(129,140,248,.55)!important;
  box-shadow:inset 0 2px 6px rgba(2,6,23,.35),0 0 0 3px rgba(99,102,241,.16)!important;
}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px!important;
}

/* ---------- list rows ---------- */
.file-list tbody tr{border-bottom:1px solid rgba(148,163,210,.07)}
.file-list thead th{
  background:rgba(10,15,33,.35);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.file-list .fname.file-open:hover{
  background:linear-gradient(90deg,rgba(99,102,241,.14),rgba(34,211,238,.06))!important;
  box-shadow:inset 2px 0 0 rgba(129,140,248,.7);
}
.download-badge{
  background:rgba(148,163,210,.08)!important;
  border:1px solid rgba(148,163,210,.14)!important;
}

/* ---------- grid cards: tidy, equal, no overflow ---------- */
.file-grid{gap:12px!important;padding:14px!important}
.file-grid .card{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:linear-gradient(165deg,rgba(30,41,78,.4) 0%,rgba(15,21,44,.5) 100%)!important;
  border:1px solid rgba(148,163,210,.13)!important;
  box-shadow:var(--rzmx-inset-light);
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.file-grid .card:hover{
  transform:translateY(-3px);
  background:linear-gradient(165deg,rgba(45,58,104,.5) 0%,rgba(22,30,60,.55) 100%)!important;
  border-color:rgba(129,140,248,.35)!important;
  box-shadow:0 16px 38px rgba(2,6,23,.5),0 0 0 1px rgba(129,140,248,.12) inset,0 0 24px rgba(99,102,241,.12)!important;
}
.file-grid .card-mainline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  flex:1;
}
.file-grid .card-mainline .card-icon{margin-top:2px}
.file-grid .card-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.file-grid .card .name{font-size:13.5px;line-height:1.35}
.file-grid .card .name-txt{font-size:13.5px}
.file-grid .card .meta{
  font-size:10.5px;
  line-height:1.4;
  color:rgba(148,163,184,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.file-grid .card-menu{
  flex:none;
  margin:-4px -4px 0 0;
  opacity:.65;
}
.file-grid .card-menu:hover{opacity:1}
/* leave room for the top-right select checkbox so it never overlaps the star/menu button */
.file-grid .card.selectable .card-mainline > button:last-child{margin-right:36px}
.file-grid .card .selectbox{
  top:10px;right:10px;bottom:auto;
  width:16px;height:16px;
  accent-color:#818cf8;
  cursor:pointer;
  z-index:2;
}
.file-grid .card-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid rgba(148,163,210,.1);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.file-grid .card:hover .card-actions,
.file-grid .card:focus-within .card-actions,
.file-grid .card.selected .card-actions{opacity:1;transform:none}
@media (hover:none){.file-grid .card-actions{opacity:1!important;transform:none!important}}
.file-grid .card-actions .btn{
  min-height:32px!important;
  height:32px!important;
  padding:0 6px!important;
  font-size:12px!important;
  justify-content:center;
}
.file-grid .card-actions .btn span.label-text{display:none}
.file-grid .card-actions .btn small{display:none}
.file-grid .card-actions .btn .restore-label{display:none}
.file-grid .card-actions .btn[title="Восстановить"]{display:grid;place-items:center}
/* shared cards: 3 text buttons fit the 3-col grid */
.file-grid .card-actions.shared-actions .btn{
  font-size:11px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 4px!important;
}
/* folder card without actions: mainline fills */
.file-grid .card.folder .card-mainline{align-items:center}

/* ---------- page head actions: compact on mobile, no wrap-overflow ---------- */
.head-actions{gap:8px!important}
.head-actions .btn{min-height:38px!important}
@media (max-width:780px){
  .head-actions{
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:8px!important;
    width:100%!important;
  }
  .head-actions .btn{
    min-height:40px!important;
    padding:0 8px!important;
    font-size:12.5px!important;
    justify-content:center;
  }
  .head-actions .btn .label-text{
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .head-actions .btn.primary{grid-column:span 1}
  .head-actions .btn.bad{grid-column:1/-1}
  .page-head{gap:12px!important}
}
@media (max-width:470px){
  .head-actions{grid-template-columns:repeat(3,1fr)}
  .head-actions .btn{font-size:11.5px!important;padding:0 5px!important}
}

/* ---------- toolbar on mobile ---------- */
@media (max-width:780px){
  .toolbar{gap:8px!important;padding:10px!important;border-radius:18px!important}
  .toolbar .select{min-height:40px!important}
  .search .input{min-height:40px!important}
  .toolbar .btn.icon{min-height:40px!important;height:40px!important;width:40px!important;flex:none}
  @media (max-width:560px){
    /* base CSS turns the toolbar into a 2-col grid here: fill the cell, no empty space */
    .toolbar .btn.icon{width:100%!important;min-width:0!important}
  }
}

/* ---------- mobile: breathing room + sticky frosted top bar ---------- */
@media (max-width:780px){
  #app .main{padding-left:14px!important;padding-right:14px!important;padding-top:10px!important}
  #app.sidebar-collapsed .main{padding-left:14px!important;padding-right:14px!important}
  .mobile-top{
    position:sticky;top:0;z-index:30;
    margin:0 0 12px!important;
    padding:10px 14px!important;
    border-radius:0 0 18px 18px;
    background:linear-gradient(180deg,rgba(13,19,40,.78),rgba(13,19,40,.5))!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;
    backdrop-filter:blur(22px) saturate(1.6)!important;
    border-bottom:1px solid rgba(178,194,235,.14);
    box-shadow:0 10px 28px rgba(2,6,23,.4);
  }
  .page-head h1{font-size:22px!important}
  .breadcrumb{font-size:11px}
  /* cards keep the same 14px gutter as the top bar — nothing touches the screen edge */
  .content-panel{border-radius:22px!important}
  .toolbar{border-radius:18px!important}
}

/* ---------- sidebar: real frosted glass ---------- */
.sidebar{
  background:linear-gradient(180deg,rgba(30,41,78,.34) 0%,rgba(15,21,46,.42) 55%,rgba(12,17,38,.48) 100%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.7)!important;
  backdrop-filter:blur(30px) saturate(1.7)!important;
  border-right:1px solid rgba(178,194,235,.16)!important;
  box-shadow:8px 0 40px rgba(2,6,23,.35),inset 0 1px 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.04)!important;
}
.nav button{border-radius:12px!important;transition:background .15s ease,box-shadow .15s ease,color .15s ease}
.nav button:hover{background:rgba(178,194,235,.1)!important}
.nav button.active{
  background:linear-gradient(90deg,rgba(99,102,241,.32),rgba(34,211,238,.12))!important;
  border:1px solid rgba(129,140,248,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 14px rgba(99,102,241,.25);
  color:#fff!important;
}
.brand{border-bottom:1px solid rgba(178,194,235,.14);padding-bottom:14px!important}
.brand strong{color:#fff!important}
.nav-title{color:rgba(148,163,184,.75)!important}
.userbox{border-top:1px solid rgba(178,194,235,.14)!important}
/* desktop: floating panel with breathing room from the edge */
@media (min-width:1081px){
  .sidebar{
    left:12px!important;top:12px!important;bottom:12px!important;
    width:272px!important;
    border-radius:24px!important;border:1px solid rgba(178,194,235,.18)!important;
  }
  #app .main{margin-left:300px!important;width:calc(100% - 300px)!important;max-width:calc(100vw - 300px)!important}
  #app.sidebar-collapsed .main{margin-left:12px!important;width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important;padding-left:24px!important;padding-right:24px!important}
  #app.sidebar-collapsed #sidebar{transform:translateX(calc(-100% - 24px))!important}
}

/* ---------- auth cards ---------- */
.auth-card{
  background:linear-gradient(165deg,rgba(26,35,66,.6) 0%,rgba(13,18,38,.72) 100%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.4)!important;
  backdrop-filter:blur(26px) saturate(1.4)!important;
  border:1px solid rgba(148,163,210,.2)!important;
  box-shadow:0 30px 80px rgba(2,6,23,.55),var(--rzmx-inset-light)!important;
}
.auth-logo{
  background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(34,211,238,.12))!important;
  border:1px solid rgba(148,163,210,.25)!important;
  box-shadow:0 14px 34px rgba(34,211,238,.18),inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* ---------- scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(129,140,248,.4) rgba(255,255,255,.03)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:999px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(129,140,248,.5),rgba(96,165,250,.38));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(129,140,248,.7),rgba(96,165,250,.5));background-clip:padding-box}

/* ---------- focus visibility ---------- */
:focus-visible{
  outline:2px solid rgba(129,140,248,.75)!important;
  outline-offset:2px;
}
.btn:focus-visible,.nav button:focus-visible{outline-offset:1px}

/* ---------- text selection ---------- */
::selection{background:rgba(99,102,241,.4);color:#fff}

/* ---------- toasts: safe area ---------- */
.toast-wrap{
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  right:calc(18px + env(safe-area-inset-right))!important;
}
.upload-float{
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  right:calc(18px + env(safe-area-inset-right))!important;
}

/* ---------- overflow guard: nothing leaves the viewport ---------- */
html,body{overflow-x:hidden}
.page-head,.toolbar,.head-actions,.file-grid,.file-list,.content-panel{max-width:100%}
.file-list{width:100%!important;max-width:100%!important;table-layout:auto}
/* long words in names never break the layout */
.name-txt,.fname .text strong,.fname .text small,.card .name{
  overflow-wrap:anywhere;
}
.name-line{min-width:0}
.name-line .name-txt{min-width:40px}
/* table cells: fixed layout, explicit column widths, name takes the rest */
.file-list{table-layout:fixed}
.file-list .check{width:36px}
.file-list .size-col{width:92px}
.file-list .date-col{width:150px}
.file-list .downloads-col{width:104px}
.file-list .actions-col{width:150px;white-space:nowrap;overflow:visible}
.file-list .actions-col .actions{gap:5px;overflow:visible}
.file-list .actions-col .btn{flex:none}
/* shared view has 4 action buttons: give the column a bit more room */
body.view-shared .file-list .actions-col{width:196px}
/* narrow desktop: compact but still no clipping */
@media (max-width:1280px) and (min-width:781px){
  .file-list .date-col{width:132px}
  .file-list .actions-col{width:140px}
  body.view-shared .file-list .actions-col{width:184px}
}
.file-list .name-col{overflow:hidden;min-width:0}
.file-list .name-col .fname{min-width:0}
.file-list .actions{flex-wrap:nowrap;overflow:hidden}
.file-list .size-col,.file-list .date-col{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:780px){
  .file-list .check{width:36px}
  .file-list .actions-col{width:118px}
}
@media (max-width:470px){
  .file-list .actions-col{width:104px}
}
@media (max-width:780px){
  .file-list .actions-col{width:118px!important;max-width:118px!important}
  .file-list .actions{gap:4px!important}
  .file-list .actions .btn{min-width:30px!important;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important}
  .file-list .check{width:36px!important}
  .file-list .fname{gap:8px!important}
  .file-list .fileicon{width:34px!important;height:34px!important}
  .file-list .fileicon>.file-type-icon,.file-list .fileicon>.folder-type-icon{width:32px!important;height:32px!important}
}
@media (max-width:470px){
  .file-list .actions-col{width:104px!important;max-width:104px!important}
  .file-list .actions .btn[title="Открыть"]{display:none}
}
/* trash restore row: label + icon fit */
.list-trash-restore{display:inline-flex!important;align-items:center;gap:4px}
@media (max-width:470px){
  .list-trash-restore .restore-label{display:none}
}

/* ---------- breadcrumbs ---------- */
.breadcrumb{
  padding:6px 10px;
  border-radius:12px;
  background:rgba(148,163,210,.05);
  border:1px solid rgba(148,163,210,.08);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  max-width:100%;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.breadcrumb::-webkit-scrollbar{display:none}
.breadcrumb button{white-space:nowrap}
@media (min-width:781px){
  .breadcrumb{white-space:normal}
}

/* ---------- pagination ---------- */
.pagination .btn{min-width:34px}
.pagination span{padding:0 6px}

/* ---------- settings / stats cards: consistent radius ---------- */
.settings-card,.stats-hero,.stat,.panel,.user-card{border-radius:20px!important}
.settings-card h3,.panel h3{letter-spacing:-.01em}
.pill{
  background:rgba(148,163,210,.07)!important;
  border:1px solid rgba(148,163,210,.14)!important;
}

/* ---------- action menu (sheet) ---------- */
.action-menu .btn{
  justify-content:flex-start;
  text-align:left;
  padding:0 14px!important;
}
.action-menu .btn.col-span-full{justify-content:center;text-align:center}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- very small phones: final overflow guard ---------- */
@media (max-width:360px){
  .head-actions{grid-template-columns:repeat(2,1fr)!important}
  .file-grid{grid-template-columns:1fr!important;gap:10px!important;padding:10px!important}
  .page-head h1{font-size:20px!important}
  .toolbar .select{min-width:0!important}
}

/* ============================================================
   v7.10.2 UI polish: sidebar / top bar / file list symmetry
   ============================================================ */

/* (1) Storage block: no wobble — instant bar updates, stable layout */
.storage-mini .bar>i{transition:none!important}

/* (2) More frosted glass on the sidebar bottom (storage + user) */
.storage-mini{
  background:linear-gradient(180deg,rgba(28,38,72,.20),rgba(15,21,44,.30))!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.7)!important;
  backdrop-filter:blur(22px) saturate(1.7)!important;
  border:1px solid rgba(178,194,235,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.userbox{
  background:linear-gradient(180deg,rgba(28,38,72,.16),rgba(15,21,44,.26))!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.7)!important;
  backdrop-filter:blur(22px) saturate(1.7)!important;
}

/* (4) Mobile: remove the top bar, use a floating hamburger */
@media (max-width:1080px){
  .mobile-top{display:none!important}
  #app .main{padding-top:58px!important}
  #sidebar-open-btn{
    display:inline-flex!important;
    position:fixed!important;
    left:12px!important;top:12px!important;
    z-index:45!important;
    width:42px!important;height:42px!important;
    min-width:42px!important;min-height:42px!important;
    align-items:center;justify-content:center;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(30,41,78,.85),rgba(15,21,46,.92))!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.5)!important;
    backdrop-filter:blur(18px) saturate(1.5)!important;
    border:1px solid rgba(178,194,235,.22)!important;
    box-shadow:0 8px 24px rgba(2,6,23,.45)!important;
    color:#fff!important;
  }
}

/* (3) Narrower sidebar + (6) desktop: proper edge-attached panel */
@media (min-width:1081px){
  .sidebar{
    left:0!important;top:0!important;bottom:0!important;
    width:248px!important;
    border-radius:0 20px 20px 0!important;
    border:0!important;
    border-right:1px solid rgba(178,194,235,.16)!important;
    box-shadow:10px 0 44px rgba(2,6,23,.4),inset -1px 0 0 rgba(255,255,255,.05)!important;
  }
  #app .main{margin-left:248px!important;width:calc(100% - 248px)!important;max-width:calc(100vw - 248px)!important}
}
@media (max-width:1080px){
  .sidebar{width:min(300px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}
}

/* (5) File list symmetry: mobile rows fit inside the panel, desktop inset */
@media (max-width:1080px){
  .file-list tbody{padding:10px!important}
  .file-list tr{width:auto!important;margin:10px 0!important}
}
@media (min-width:1081px){
  #files-content{padding:12px 14px}
}

/* ============================================================
   v7.10.3: SIDEBAR — цельный редизайн
   Единая система вертикального ритма, чистый active-state,
   отсоединённый футер. Пишется поверх, выигрывает каскад.
   ============================================================ */

/* --- панель: цельное стекло, flex-столбец, прижата к левому краю --- */
.sidebar{
  display:flex!important;
  flex-direction:column!important;
  background:linear-gradient(180deg,#151d3a 0%,#0d1228 45%,#090d1c 100%)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border:0!important;
  border-right:1px solid rgba(178,194,235,.14)!important;
  box-shadow:14px 0 48px rgba(2,6,23,.42),inset 0 1px 0 rgba(255,255,255,.05)!important;
  padding:14px 12px 14px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

/* --- бренд: логотип + название, воздух снизу --- */
.brand{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:4px 6px 16px!important;
  border-bottom:0!important;
  flex:none;
}
.brand-logo{
  flex:none;
  width:40px!important;height:40px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(99,102,241,.22))!important;
  border:1px solid rgba(178,194,235,.22)!important;
  box-shadow:0 6px 16px rgba(34,211,238,.14),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.brand-logo svg{width:23px;height:23px;display:block}
.brand strong{font-size:15px!important;line-height:1.15;letter-spacing:.01em;color:#fff!important}
.brand span{font-size:10.5px!important;line-height:1.2;letter-spacing:.02em;color:rgba(148,163,184,.8)!important}
#sidebar-close-btn{
  margin-left:auto!important;
  flex:none;
  width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
  border-radius:9px!important;
  color:rgba(203,213,225,.6)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#sidebar-close-btn:hover{color:#fff!important;background:rgba(148,163,210,.12)!important}

/* --- заголовки секций: чёткий воздух сверху и снизу (фикс «слипания») --- */
.nav-title{
  flex:none;
  padding:0 10px!important;
  margin:18px 0 9px!important;
  font-size:9.5px!important;
  font-weight:700!important;
  letter-spacing:.17em!important;
  line-height:1!important;
  color:rgba(148,163,184,.55)!important;
  text-transform:uppercase;
}
.brand + .nav-title{margin-top:4px!important}

/* --- навигация: кнопки с ровным ритмом --- */
.nav{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  flex:none;
}
.nav:last-of-type{margin-bottom:16px}
.nav button{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  width:100%;
  padding:9px 11px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  font-size:13.5px!important;
  line-height:1.2;
  color:rgba(203,213,225,.72)!important;
  text-align:left;
  transition:background .16s ease,color .16s ease!important;
}
.nav button:hover{
  background:rgba(148,163,210,.09)!important;
  color:rgba(241,245,249,.95)!important;
}
.nav .ico{
  flex:none;
  display:grid;
  place-items:center;
  width:20px;height:20px;
  color:rgba(148,163,184,.7)!important;
  transition:color .16s ease;
}
.nav .ico svg{width:19px;height:19px;display:block}
.nav button:hover .ico{color:rgba(224,231,255,.9)!important}
/* активный пункт: мягкая подложка + акцентная черта, без рамки */
.nav button.active{
  background:linear-gradient(90deg,rgba(99,102,241,.20) 0%,rgba(99,102,241,.05) 70%,transparent 100%)!important;
  color:#fff!important;
}
.nav button.active .ico{color:#7dd3fc!important}
.nav button.active::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#38bdf8,#34d399);
  box-shadow:0 0 10px rgba(56,189,248,.7);
}
.nav .badge{margin-left:auto;font-size:11px;font-weight:600;color:rgba(148,163,184,.7)}

/* --- футер: одна отсоединённая карточка (хранилище + пользователь) --- */
.storage-mini{
  flex:none;
  margin:auto 2px 0!important;
  padding:12px 13px 11px!important;
  border-radius:14px 14px 0 0!important;
  background:#0a0f20!important;
  border:1px solid rgba(178,194,235,.15)!important;
  border-bottom:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.storage-mini .head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(226,232,240,.92)}
.storage-mini .head span:last-child{color:rgba(148,163,184,.85)!important;font-weight:600}
.storage-mini .bar{margin:8px 0 7px!important;height:5px!important;border-radius:999px!important;background:rgba(255,255,255,.09)!important;border:0!important;overflow:hidden}
.storage-mini .bar>i{display:block;height:100%;border-radius:999px!important;transition:none!important}
.storage-mini .foot{display:flex;justify-content:space-between;font-size:10px;color:rgba(148,163,184,.75)!important}
.userbox{
  flex:none;
  margin:0 2px 0!important;
  padding:10px 13px 11px!important;
  border-radius:0 0 14px 14px!important;
  background:#0a0f20!important;
  border:1px solid rgba(178,194,235,.15)!important;
  border-top:1px solid rgba(178,194,235,.10)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.userbox .meta{min-width:0;flex:1}
.userbox .meta strong{display:block;font-size:12.5px;color:rgba(241,245,249,.95)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbox .meta span{display:block;margin-top:1px;font-size:10px;color:rgba(148,163,184,.7)!important}
.userbox .avatar{
  flex:none;
  width:34px;height:34px;
  border-radius:10px;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;
}
.userbox .btn.icon.small{
  flex:none;
  width:30px;height:30px;min-width:30px;min-height:30px;
  border-radius:9px;
}

/* --- геометрия: ПК — панель на всю высоту у края --- */
@media (min-width:1081px){
  .sidebar{
    left:0!important;top:0!important;bottom:0!important;
    width:250px!important;
    border-radius:0 15px 15px 0!important;
    transform:translateZ(0)!important;
  }
  #app .main{margin-left:250px!important;width:calc(100% - 250px)!important;max-width:calc(100vw - 250px)!important}
}
/* --- геометрия: мобилка — drawer --- */
@media (max-width:1080px){
  .sidebar{
    left:-10px!important;top:10px!important;bottom:10px!important;
    width:min(296px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    border-radius:0 15px 15px 0!important;
  }
}


/* ============================================================
   v7.10.6 — Unified glass surfaces / responsive overlays
   One final cascade to supersede conflicting historic UI variants.
   ============================================================ */
:root{--cloud-glass-border:rgba(191,216,255,.27);--cloud-glass-highlight:rgba(255,255,255,.13);--cloud-glass-shadow:0 24px 72px rgba(2,8,26,.42),inset 0 1px 0 rgba(255,255,255,.15)}
html,body{background:#0a1329!important}
.rzmx-bg{background:radial-gradient(1000px 640px at 10% 4%,rgba(55,165,211,.19),transparent 70%),radial-gradient(900px 720px at 98% 8%,rgba(38,178,168,.11),transparent 72%),radial-gradient(850px 650px at 55% 100%,rgba(93,97,202,.14),transparent 72%),linear-gradient(145deg,#091225 0%,#10213a 50%,#0b182d 100%)!important}
.rzmx-aurora{opacity:.32!important;animation-duration:110s!important}
.rzmx-blob{opacity:.45!important;filter:blur(110px)!important}
.rzmx-grid-dots{opacity:.48!important}
/* Sidebar is translucent glass again, rather than the opaque gradient added in v7.10.3. */
#app .sidebar.glass{
 background:linear-gradient(148deg,rgba(33,52,84,.69),rgba(17,30,57,.72) 53%,rgba(12,24,46,.70))!important;
 -webkit-backdrop-filter:blur(30px) saturate(1.48)!important;
 backdrop-filter:blur(30px) saturate(1.48)!important;
 border-right:1px solid var(--cloud-glass-border)!important;
 box-shadow:16px 0 46px rgba(2,7,24,.28),inset -1px 0 rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.09)!important;
}
#app .sidebar .storage-mini,#app .sidebar .userbox{
 background:linear-gradient(135deg,rgba(163,198,241,.11),rgba(27,44,78,.17))!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.3)!important;
 backdrop-filter:blur(16px) saturate(1.3)!important;
 border-color:rgba(190,215,248,.17)!important;
}
#app .sidebar .nav button{min-height:42px;transition:background-color .16s ease,color .16s ease!important}
#app .sidebar .nav button:focus-visible{outline:2px solid rgba(125,211,252,.9)!important;outline-offset:-2px}
#app .sidebar .nav button.active{background:linear-gradient(95deg,rgba(73,181,219,.21),rgba(119,133,242,.10) 77%,transparent)!important}
#app .sidebar .nav button.active::before{left:1px}
#app .sidebar .brand{cursor:pointer}
#app .sidebar .brand:focus-visible{outline:2px solid #7dd3fc;outline-offset:-2px}
#app .content-panel.glass,#app .toolbar.glass,#app .settings-card.glass,#app .panel.glass,#app .stat.glass{
 -webkit-backdrop-filter:blur(20px) saturate(1.3)!important;
 backdrop-filter:blur(20px) saturate(1.3)!important;
}
@media(min-width:1081px){
 #app .sidebar{top:0!important;bottom:0!important;left:0!important;width:250px!important;border-radius:0 18px 18px 0!important}
 #app .main{margin-left:250px!important;width:calc(100% - 250px)!important;max-width:calc(100vw - 250px)!important}
 #app.sidebar-collapsed .main{margin-left:0!important;width:100%!important;max-width:100vw!important}
}
@media(max-width:1080px){
 #app .sidebar{left:10px!important;top:10px!important;bottom:10px!important;width:min(300px,calc(100vw - 28px))!important;max-width:calc(100vw - 28px)!important;border-radius:22px!important;border:1px solid var(--cloud-glass-border)!important;transform:translateX(calc(-100% - 28px))!important;box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12)!important}
 #app .sidebar.open{transform:translateX(0)!important}
 #app .mobile-overlay{background:rgba(4,10,24,.56)!important;-webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important}
}
/* All standard dialogs size to content, with scroll only when content needs it. */
#modal-root .modal-back:not(.sheet-back){
 display:flex!important;align-items:center!important;justify-content:center!important;
 min-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
 padding:clamp(12px,3vh,28px) clamp(12px,3vw,30px)!important;
 background:rgba(3,10,25,.55)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.1)!important;backdrop-filter:blur(14px) saturate(1.1)!important;
}
#modal-root .modal{
 flex:none;position:relative!important;width:min(100%,510px)!important;max-width:510px!important;
 max-height:calc(100dvh - 46px)!important;height:auto!important;min-height:0!important;
 padding:clamp(18px,2.6vw,26px)!important;margin:auto!important;
 border-radius:25px!important;border:1px solid rgba(214,230,255,.32)!important;
 background:linear-gradient(140deg,rgba(74,102,142,.41) 0%,rgba(27,46,82,.69) 32%,rgba(18,34,64,.68) 100%)!important;
 -webkit-backdrop-filter:blur(32px) saturate(1.6)!important;backdrop-filter:blur(32px) saturate(1.6)!important;
 box-shadow:0 28px 85px rgba(2,8,25,.57),inset 0 1px 0 rgba(255,255,255,.21),inset 1px 0 rgba(255,255,255,.07)!important;
 overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;
}
#modal-root .modal::before{content:"";display:block;position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
#modal-root .modal.wide,#modal-root .modal.modal-preview{width:min(100%,960px)!important;max-width:960px!important}
#modal-root .modal.modal-editor{width:min(100%,900px)!important;max-width:900px!important}
#modal-root .modal .modal-head{display:flex;align-items:start;gap:12px;margin-bottom:18px!important}
#modal-root .modal .modal-head h2{font-size:clamp(16px,2vw,19px);line-height:1.3;overflow-wrap:anywhere}
#modal-root .modal .modal-head .btn.icon{flex:none;width:36px;height:36px;min-width:36px;border-radius:12px;background:rgba(255,255,255,.08)!important;border:1px solid rgba(222,236,255,.16)!important}
#modal-root .modal .modal-head .btn.icon:hover{background:rgba(255,255,255,.17)!important}
#modal-root .modal .field{min-width:0}
#modal-root .modal .input,#modal-root .modal .select,#modal-root .modal .textarea{max-width:100%;background:rgba(6,19,42,.42)!important;border:1px solid rgba(195,218,255,.18)!important;border-radius:13px}
#modal-root .modal .input:focus-visible,#modal-root .modal .select:focus-visible,#modal-root .modal .textarea:focus-visible{outline:2px solid rgba(125,211,252,.7)!important;outline-offset:1px}
#modal-root .modal-actions{gap:10px;margin-top:19px!important;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
#modal-root .modal-actions .btn{min-height:40px}
#modal-root .modal .office-bar{background:rgba(7,22,49,.36)!important;border:1px solid rgba(195,218,255,.13)!important;border-radius:13px 13px 0 0}
#modal-root .modal .office-shell{background:rgba(7,22,49,.33)!important;border-color:rgba(215,231,255,.17)!important}
#modal-root .modal .text-editor-surface{border:1px solid rgba(195,218,255,.2);border-radius:0 0 15px 15px;overflow:hidden;background:rgba(3,15,34,.35)}
#modal-root .modal #text-editor{display:block;width:100%;height:clamp(240px,48dvh,650px);min-height:220px!important;padding:16px!important;border:0!important;border-radius:0!important;background:rgba(3,11,28,.26)!important;resize:vertical;font:12.5px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto;color:#e8f2ff}
#modal-root .modal #m-text-content{min-height:180px;max-height:48dvh;font:12.5px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
#modal-root .modal #document-text-view{min-height:220px!important;height:clamp(240px,50dvh,650px)}
/* Action sheets stay bottom-aligned; don't inherit ordinary dialog sizing. */
#modal-root .modal-back.sheet-back{background:rgba(3,10,25,.54)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important}
#modal-root .sheet-back .sheet{width:min(100%,560px)!important;max-width:560px!important;height:auto!important;min-height:0!important;max-height:min(85dvh,720px)!important;background:linear-gradient(150deg,rgba(76,102,146,.41),rgba(22,40,76,.78))!important;-webkit-backdrop-filter:blur(30px) saturate(1.55)!important;backdrop-filter:blur(30px) saturate(1.55)!important}
/* Full document workspaces intentionally occupy the screen; their chrome stays glass. */
#modal-root .office-workspace-back{background:rgba(4,12,29,.80)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
#modal-root .office-workspace{border:1px solid rgba(208,225,255,.23)!important;background:linear-gradient(145deg,rgba(36,55,88,.75),rgba(9,23,49,.84))!important;box-shadow:0 24px 80px rgba(0,0,0,.47),inset 0 1px 0 rgba(255,255,255,.12)!important}
#modal-root .office-workspace-top{background:linear-gradient(120deg,rgba(73,96,136,.35),rgba(15,30,61,.7))!important;-webkit-backdrop-filter:blur(23px) saturate(1.5)!important;backdrop-filter:blur(23px) saturate(1.5)!important}
#modal-root .access-workspace-back{padding:clamp(8px,1.2vw,18px)!important}
#modal-root .access-workspace{border-radius:20px!important}
@media(max-width:780px){
 #modal-root .modal-back:not(.sheet-back){min-height:100dvh;padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important;align-items:center!important}
 #modal-root .modal,#modal-root .modal.wide,#modal-root .modal.modal-editor,#modal-root .modal.modal-preview{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 32px - env(safe-area-inset-bottom))!important;border-radius:22px!important;padding:18px!important;scrollbar-gutter:auto}
 #modal-root .modal .modal-head{margin-bottom:15px!important}
 #modal-root .modal-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 #modal-root .modal-actions .btn{width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
 #modal-root .modal-actions .btn:only-child{grid-column:1/-1}
 #modal-root .modal #text-editor{height:clamp(220px,43dvh,440px)}
 #modal-root .modal #m-text-content{min-height:160px}
 #modal-root .sheet-back{align-items:end!important;padding:0 10px max(9px,env(safe-area-inset-bottom))!important}
 #modal-root .sheet-back .sheet{width:100%!important;max-width:100%!important;max-height:min(78dvh,680px)!important;border-radius:24px!important;padding:18px 16px!important}
 #modal-root .sheet-back .sheet{margin:0 auto!important}
 #modal-root .sheet-back .sheet .modal-actions{grid-template-columns:1fr!important}
 #modal-root .access-workspace-back{padding:8px!important}
 #modal-root .access-workspace{border-radius:16px!important;border:1px solid rgba(201,222,255,.22)!important}
}
@media(max-width:390px){
 #modal-root .modal,#modal-root .modal.wide{padding:15px!important;border-radius:19px!important}
 #modal-root .modal-actions{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){#modal-root .modal,#modal-root .sheet-back .sheet{animation:none!important;transition:none!important}}

@media(max-width:780px){.rzmx-aurora{animation:none!important;opacity:.14!important}.rzmx-blob{filter:blur(70px)!important;animation:none!important}}

/* v7.10.8 — Fixed sidebar footer: only navigation scrolls.
   Positioning is intentionally isolated from historical sticky/auto-margin rules. */
#app #sidebar {
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  overscroll-behavior:contain;
  min-height:0;
}
#app #sidebar > .brand {
  flex:0 0 auto!important;
}
#app #sidebar .sidebar-nav-scroll {
  flex:1 1 0%!important;
  min-height:0!important;
  min-width:0;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(167,190,230,.26) transparent;
  padding:0 2px 8px 0;
}
#app #sidebar .sidebar-nav-scroll:focus-visible {
  outline:2px solid rgba(125,211,252,.85);
  outline-offset:-2px;
  border-radius:10px;
}
#app #sidebar .sidebar-bottom {
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  min-height:0;
  width:100%;
  margin:0!important;
  padding:9px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(197,216,248,.17)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  z-index:1;
}
#app #sidebar .sidebar-bottom::before {content:none!important}
#app #sidebar .storage-mini {
  margin:0!important;
  border-radius:15px 15px 0 0!important;
  border-bottom:0!important;
}
#app #sidebar .userbox {
  margin:0!important;
  border-radius:0 0 15px 15px!important;
}
#app #sidebar .fileicon, #app #sidebar .card-icon {overflow:visible}
/* Share markers: a compact bolt over the top-right corner, without a plate. */
.file-type-icon,.folder-type-icon{position:relative}
.share-corner{
  position:absolute!important;
  top:-3px;right:-3px;
  display:flex!important;align-items:center;justify-content:center;
  width:14px;height:14px;
  color:#6ee7f9!important;
  filter:drop-shadow(0 0 5px rgba(34,211,238,.6));
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  padding:0!important;margin:0!important;
  z-index:2;
}
.share-corner svg{width:12px;height:12px;display:block;overflow:visible}
.share-corner.inherited{color:#93c5fd!important}
.share-corner.share-corner-btn{cursor:pointer;transition:transform .15s ease,color .15s ease}
.share-corner.share-corner-btn:hover{transform:scale(1.18);color:#e0faff!important}
.share-corner.share-corner-btn:focus-visible{outline:2px solid #7dd3fc!important;outline-offset:2px;border-radius:3px!important}
@media(prefers-reduced-motion:reduce){.share-corner.share-corner-btn{transition:none}}

/* v7.10.8: floating mobile drawer, independent scrolling, neon indicators and toasts.
   This block supersedes legacy rules without changing server behavior. */
@media (max-width:1080px){
  html.sidebar-menu-open, body.sidebar-menu-open {overscroll-behavior:none!important;overflow:hidden!important}
  body.sidebar-menu-open {
    position:fixed!important;
    inset-inline:0!important;
    top:var(--sidebar-freeze-y, 0px)!important;
    width:100%!important;
    overflow:hidden!important;
  }
  #app #sidebar {
    left:12px!important;
    top:calc(env(safe-area-inset-top, 0px) + 14px)!important;
    bottom:auto!important;
    width:min(286px,calc(100vw - 36px))!important;
    max-width:calc(100vw - 36px)!important;
    height:min(76dvh,720px)!important;
    min-height:min(470px,calc(100dvh - 28px))!important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px))!important;
    border-radius:26px!important;
    overflow:hidden!important;
    box-shadow:0 24px 72px rgba(0,4,19,.43),inset 0 1px rgba(255,255,255,.17)!important;
  }
  #app #sidebar.glass {
    background:linear-gradient(151deg,rgba(46,73,107,.79) 0%,rgba(17,38,70,.79) 55%,rgba(10,26,52,.82) 100%)!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.32)!important;
    backdrop-filter:blur(26px) saturate(1.32)!important;
    border:1px solid rgba(196,226,255,.32)!important;
  }
  #app .mobile-overlay:not(.hidden){touch-action:none;overscroll-behavior:none}
  #app .mobile-overlay{
    background:rgba(4,12,29,.24)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    backdrop-filter:blur(2px)!important;
  }
  #app #sidebar .sidebar-nav-scroll{
    touch-action:pan-y;
    overscroll-behavior-y:contain!important;
  }
}
/* The share bolt is on the upper-left corner of the file/folder itself. */
.file-type-icon>.share-corner,.folder-type-icon>.share-corner{
  left:-4px!important;
  right:auto!important;
  top:-4px!important;
  width:16px!important;
  height:16px!important;
  color:#ffe86c!important;
  filter:drop-shadow(0 0 2px rgba(255,230,45,.95)) drop-shadow(0 0 7px rgba(255,192,0,.7))!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.file-type-icon>.share-corner svg,.folder-type-icon>.share-corner svg{
  width:14px!important;
  height:14px!important;
}
.file-type-icon>.share-corner.inherited,.folder-type-icon>.share-corner.inherited{color:#fff69b!important}
.file-type-icon>.share-corner.share-corner-btn:hover,.folder-type-icon>.share-corner.share-corner-btn:hover{
  color:#fffcca!important;
  transform:scale(1.15);
}
.file-type-icon>.share-corner.share-corner-btn:focus-visible,.folder-type-icon>.share-corner.share-corner-btn:focus-visible{
  outline:2px solid #ffe86c!important;
  outline-offset:2px;
}
/* Notifications: top-right, larger typography, readable neon accent. */
#toast-wrap.toast-wrap{
  position:fixed!important;
  top:calc(16px + env(safe-area-inset-top,0px))!important;
  right:calc(16px + env(safe-area-inset-right,0px))!important;
  bottom:auto!important;
  left:auto!important;
  z-index:220!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:min(420px,calc(100vw - 28px))!important;
  max-width:min(420px,calc(100vw - 28px))!important;
  max-height:75dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:none;
}
#toast-wrap .toast{
  pointer-events:auto;
  flex:0 0 auto;
  width:100%;
  min-height:62px;
  padding:16px 18px!important;
  border-radius:17px!important;
  border:1px solid rgba(102,218,252,.42)!important;
  background:linear-gradient(145deg,rgba(22,43,71,.91),rgba(9,22,43,.94))!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.25)!important;
  backdrop-filter:blur(22px) saturate(1.25)!important;
  color:#b6f6ff!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.43!important;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
  text-shadow:0 0 9px rgba(36,214,255,.46);
  box-shadow:0 12px 32px rgba(1,5,18,.47),inset 0 1px rgba(255,255,255,.12),0 0 18px rgba(34,211,238,.09)!important;
  animation:rzmxToastTopIn .22s cubic-bezier(.16,1,.3,1) both;
}
#toast-wrap .toast.ok{
  color:#afffe2!important;
  border-color:rgba(77,237,176,.44)!important;
  text-shadow:0 0 9px rgba(72,230,166,.5);
}
#toast-wrap .toast.err{
  color:#ffccd9!important;
  border-color:rgba(255,119,161,.48)!important;
  text-shadow:0 0 9px rgba(255,91,147,.48);
}
@keyframes rzmxToastTopIn{
  from{opacity:0;transform:translateY(-12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:600px){
  #toast-wrap.toast-wrap{
    top:calc(12px + env(safe-area-inset-top,0px))!important;
    right:calc(12px + env(safe-area-inset-right,0px))!important;
    width:min(360px,calc(100vw - 24px))!important;
    max-width:min(360px,calc(100vw - 24px))!important;
  }
  #toast-wrap .toast{padding:15px 16px!important;font-size:14.5px!important;min-height:58px}
}
@media (prefers-reduced-motion:reduce){#toast-wrap .toast{animation:none!important}}