@import url(https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;

500;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap);/*! UIkit 3.25.16 | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
/* ========================================================================
   Component: Base
 ========================================================================== */
/*
 * 1. Set `font-size` to support `rem` units
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Style
 */
html {
  /* 1 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
  background: #fff;
  color: #666;
}
/*
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/* Links
 ========================================================================== */
/*
 * Style
 */
a,
.uk-link {
  color: #1e87f0;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
  color: #0f6ecd;
  text-decoration: underline;
}
/*
 * Fix text underline offset if `vertical-align`is set to `middle`
 */
a:has(.uk-text-middle),
.uk-link:has(.uk-text-middle),
.uk-link-toggle:hover .uk-link:has(.uk-text-middle) {
  text-underline-offset: 0.1875em;
}
/* Text-level semantics
 ========================================================================== */
/*
 * 1. Add the correct text decoration in Edge.
 * 2. The shorthand declaration `underline dotted` is not supported in Safari.
 */
abbr[title] {
  /* 1 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
  -webkit-text-decoration-style: dotted;
}
/*
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/*
 * 1. Consolas has a better baseline in running text compared to `Courier`
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Style
 */
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
  /* 1 */
  font-family: Consolas, monaco, monospace;
  /* 2 */
  font-size: 0.875rem;
  /* 3 */
  color: #f0506e;
  white-space: nowrap;
  padding: 2px 6px;
  background: #f8f8f8;
}
/*
 * Emphasize
 */
em {
  color: #f0506e;
}
/*
 * Insert
 */
ins {
  background: #ffd;
  color: #666;
  text-decoration: none;
}
/*
 * Mark
 */
mark {
  background: #ffd;
  color: #666;
}
/*
 * Quote
 */
q {
  font-style: italic;
}
/*
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
 ========================================================================== */
/*
 * Remove the gap between the element and the bottom of its parent container.
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
 * 1. Constrain the element to its parent width.
 * 2. Take border and padding into account.
 * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
 * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
 * 5. Size image to fill the element's content box.
 * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
 */
canvas,
img,
svg,
video {
  /* 1 */
  max-width: 100%;
  /* 2 */
  box-sizing: border-box;
  /* 3 */
  height: auto;
  /* 4 */
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
  /* 5 */
  -o-object-fit: cover;
     object-fit: cover;
}
/*
 * Deprecated: only needed for `img` elements with `uk-img`
 * 1. Hide `alt` text for lazy load images.
 * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
 */
img:not([src]) {
  /* 1 */
  visibility: hidden;
  /* 2 */
  min-width: 1px;
}
/*
 * Iframe
 * Remove border in all browsers
 */
iframe {
  border: 0;
}
/* Block elements
 ========================================================================== */
/*
 * Margins
 */
p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure {
  margin: 0 0 20px 0;
}
/* Add margin if adjacent element */
* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure {
  margin-top: 20px;
}
/* Headings
 ========================================================================== */
h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
  margin: 0 0 20px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: normal;
  color: #333;
  text-transform: none;
}
/* Add margin if adjacent element */
* + h1,
* + .uk-h1,
* + h2,
* + .uk-h2,
* + h3,
* + .uk-h3,
* + h4,
* + .uk-h4,
* + h5,
* + .uk-h5,
* + h6,
* + .uk-h6,
* + .uk-heading-small,
* + .uk-heading-medium,
* + .uk-heading-large,
* + .uk-heading-xlarge,
* + .uk-heading-2xlarge,
* + .uk-heading-3xlarge {
  margin-top: 40px;
}
/*
 * Sizes
 */
h1,
.uk-h1 {
  font-size: 2.23125rem;
  line-height: 1.2;
}
h2,
.uk-h2 {
  font-size: 1.7rem;
  line-height: 1.3;
}
h3,
.uk-h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}
h4,
.uk-h4 {
  font-size: 1.25rem;
  line-height: 1.4;
}
h5,
.uk-h5 {
  font-size: 16px;
  line-height: 1.4;
}
h6,
.uk-h6 {
  font-size: 0.875rem;
  line-height: 1.4;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  h1,
  .uk-h1 {
    font-size: 2.625rem;
  }
  h2,
  .uk-h2 {
    font-size: 2rem;
  }
}
/* Lists
 ========================================================================== */
ul,
ol {
  padding-right: 30px;
}
/*
 * Reset margin for nested lists
 */
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul {
  margin: 0;
}
/* Description lists
 ========================================================================== */
dt {
  font-weight: bold;
}
dd {
  margin-right: 0;
}
/* Horizontal rules
 ========================================================================== */
/*
 * 1. Show the overflow in Chrome, Edge and IE.
 * 2. Add the correct text-align in Edge and IE.
 * 3. Style
 */
hr,
.uk-hr {
  /* 1 */
  overflow: visible;
  /* 2 */
  text-align: inherit;
  /* 3 */
  margin: 0 0 20px 0;
  border: 0;
  border-top: 1px solid #e5e5e5;
}
/* Add margin if adjacent element */
* + hr,
* + .uk-hr {
  margin-top: 20px;
}
/* Address
 ========================================================================== */
address {
  font-style: normal;
}
/* Blockquotes
 ========================================================================== */
blockquote {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: #333;
}
/* Add margin if adjacent element */
* + blockquote {
  margin-top: 20px;
}
/*
 * Content
 */
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote footer {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
}
blockquote footer::before {
  content: "\2014   ";
}
/* Preformatted text
 ========================================================================== */
/*
 * 1. Contain overflow in all browsers.
 */
pre {
  font: 0.875rem / 1.5 Consolas, monaco, monospace;
  color: #666;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
  /* 1 */
  overflow: auto;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #fff;
}
pre code {
  font-family: Consolas, monaco, monospace;
}
/* Focus
 ========================================================================== */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px dotted #333;
}
/* Selection pseudo-element
 ========================================================================== */
::-moz-selection {
  background: #39f;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #39f;
  color: #fff;
  text-shadow: none;
}
/* HTML5 elements
 ========================================================================== */
/*
 * 1. Add the correct display in Edge, IE 10+, and Firefox.
 * 2. Add the correct display in IE.
 */
details,
main {
  /* 2 */
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/*
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* Pass media breakpoints to JS
 ========================================================================== */
/*
 * Breakpoints
 */
:root {
  --uk-breakpoint-s: 640px;
  --uk-breakpoint-m: 960px;
  --uk-breakpoint-l: 1200px;
  --uk-breakpoint-xl: 1600px;
}
/* ========================================================================
   Component: Link
 ========================================================================== */
/* Muted
 ========================================================================== */
a.uk-link-muted,
.uk-link-muted a,
.uk-link-toggle .uk-link-muted {
  color: #999;
}
a.uk-link-muted:hover,
.uk-link-muted a:hover,
.uk-link-toggle:hover .uk-link-muted {
  color: #666;
}
/* Text
 ========================================================================== */
a.uk-link-text,
.uk-link-text a,
.uk-link-toggle .uk-link-text {
  color: inherit;
}
a.uk-link-text:hover,
.uk-link-text a:hover,
.uk-link-toggle:hover .uk-link-text {
  color: #999;
}
/* Heading
 ========================================================================== */
a.uk-link-heading,
.uk-link-heading a,
.uk-link-toggle .uk-link-heading {
  color: inherit;
}
a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading {
  color: #1e87f0;
  text-decoration: none;
}
/* Reset
 ========================================================================== */
/*
 * `!important` needed to override inverse component
 */
a.uk-link-reset,
.uk-link-reset a {
  color: inherit !important;
  text-decoration: none !important;
}
/* Toggle
 ========================================================================== */
.uk-link-toggle {
  color: inherit !important;
  text-decoration: none !important;
}
/* ========================================================================
   Component: Heading
 ========================================================================== */
.uk-heading-small {
  font-size: 2.6rem;
  line-height: 1.2;
}
.uk-heading-medium {
  font-size: 2.8875rem;
  line-height: 1.1;
}
.uk-heading-large {
  font-size: 3.4rem;
  line-height: 1.1;
}
.uk-heading-xlarge {
  font-size: 4rem;
  line-height: 1;
}
.uk-heading-2xlarge {
  font-size: 6rem;
  line-height: 1;
}
.uk-heading-3xlarge {
  font-size: 8rem;
  line-height: 1;
}
/* Tablet Landscape and bigger */
@media (min-width: 960px) {
  .uk-heading-small {
    font-size: 3.25rem;
  }
  .uk-heading-medium {
    font-size: 3.5rem;
  }
  .uk-heading-large {
    font-size: 4rem;
  }
  .uk-heading-xlarge {
    font-size: 6rem;
  }
  .uk-heading-2xlarge {
    font-size: 8rem;
  }
  .uk-heading-3xlarge {
    font-size: 11rem;
  }
}
/* Laptop and bigger */
@media (min-width: 1200px) {
  .uk-heading-medium {
    font-size: 4rem;
  }
  .uk-heading-large {
    font-size: 6rem;
  }
  .uk-heading-xlarge {
    font-size: 8rem;
  }
  .uk-heading-2xlarge {
    font-size: 11rem;
  }
  .uk-heading-3xlarge {
    font-size: 15rem;
  }
}
/* Divider
 ========================================================================== */
.uk-heading-divider {
  padding-bottom: calc(5px + 0.1em);
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
/* Bullet
 ========================================================================== */
.uk-heading-bullet {
  position: relative;
}
/*
 * 1. Using `inline-block` to make it work with text alignment
 * 2. Center vertically
 * 3. Style
 */
.uk-heading-bullet::before {
  content: "";
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  top: calc(-0.1 * 1em);
  vertical-align: middle;
  /* 3 */
  height: calc(4px + 0.7em);
  margin-left: calc(5px + 0.2em);
  border-right: calc(5px + 0.1em) solid #e5e5e5;
}
/* Line
 ========================================================================== */
/*
 * Clip the child element
 */
.uk-heading-line {
  overflow: hidden;
}
/*
 * Extra markup is needed to make it work with text align
 */
.uk-heading-line > * {
  display: inline-block;
  position: relative;
}
/*
 * 1. Center vertically
 * 2. Make the element as large as possible. It's clipped by the container.
 * 3. Style
 */
.uk-heading-line > ::before,
.uk-heading-line > ::after {
  content: "";
  /* 1 */
  position: absolute;
  top: calc(50% - (calc(0.2px + 0.05em) / 2));
  /* 2 */
  width: 2000px;
  /* 3 */
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
.uk-heading-line > ::before {
  left: 100%;
  margin-left: calc(5px + 0.3em);
}
.uk-heading-line > ::after {
  right: 100%;
  margin-right: calc(5px + 0.3em);
}
/* ========================================================================
   Component: Divider
 ========================================================================== */
/*
 * 1. Reset default `hr`
 * 2. Set margin if a `div` is used for semantical reason
 */
[class*="uk-divider"] {
  /* 1 */
  border: none;
  /* 2 */
  margin-bottom: 20px;
}
/* Add margin if adjacent element */
* + [class*="uk-divider"] {
  margin-top: 20px;
}
/* Icon
 ========================================================================== */
.uk-divider-icon {
  position: relative;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.uk-divider-icon::before,
.uk-divider-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  max-width: calc(50% - (50px / 2));
  border-bottom: 1px solid #e5e5e5;
}
.uk-divider-icon::before {
  left: calc(50% + (50px / 2));
  width: 100%;
}
.uk-divider-icon::after {
  right: calc(50% + (50px / 2));
  width: 100%;
}
/* Small
 ========================================================================== */
/*
 * 1. Fix height because of `inline-block`
 * 2. Using ::after and inline-block to make `text-align` work
 */
/* 1 */
.uk-divider-small {
  line-height: 0;
}
/* 2 */
.uk-divider-small::after {
  content: "";
  display: inline-block;
  width: 100px;
  max-width: 100%;
  border-top: 1px solid #e5e5e5;
  vertical-align: top;
}
/* Vertical
 ========================================================================== */
.uk-divider-vertical {
  width: -moz-max-content;
  width: max-content;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
  border-right: 1px solid #e5e5e5;
}
/* ========================================================================
   Component: List
 ========================================================================== */
.uk-list {
  padding: 0;
  list-style: none;
}
/*
 * Avoid column break within the list item, when using `column-count`
 */
.uk-list > * {
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}
/*
 * Remove margin from the last-child
 */
.uk-list > * > :last-child {
  margin-bottom: 0;
}
/*
 * Style
 */
.uk-list > :nth-child(n+2),
.uk-list > * > ul {
  margin-top: 10px;
}
/* Marker modifiers
 ========================================================================== */
.uk-list-disc,
.uk-list-circle,
.uk-list-square,
.uk-list-decimal,
.uk-list-hyphen {
  padding-right: 30px;
}
.uk-list-disc {
  list-style-type: disc;
}
.uk-list-circle {
  list-style-type: circle;
}
.uk-list-square {
  list-style-type: square;
}
.uk-list-decimal {
  list-style-type: decimal;
}
.uk-list-hyphen {
  list-style-type: '\2013    ';
}
/*
 * Color modifiers
 */
.uk-list-muted > ::marker {
  color: #999 !important;
}
.uk-list-emphasis > ::marker {
  color: #333 !important;
}
.uk-list-primary > ::marker {
  color: #1e87f0 !important;
}
.uk-list-secondary > ::marker {
  color: #222 !important;
}
/* Image bullet modifier
 ========================================================================== */
.uk-list-bullet > * {
  position: relative;
  padding-right: 30px;
}
.uk-list-bullet > ::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 1.5em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
/* Style modifiers
 ========================================================================== */
/*
 * Divider
 */
.uk-list-divider > :nth-child(n+2) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}
/*
 * Striped
 */
.uk-list-striped > * {
  padding: 10px 10px;
}
.uk-list-striped > *:nth-of-type(odd) {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.uk-list-striped > :nth-of-type(odd) {
  background: #f8f8f8;
}
.uk-list-striped > :nth-child(n+2) {
  margin-top: 0;
}
/* Size modifier
 ========================================================================== */
.uk-list-large > :nth-child(n+2),
.uk-list-large > * > ul {
  margin-top: 20px;
}
.uk-list-collapse > :nth-child(n+2),
.uk-list-collapse > * > ul {
  margin-top: 0;
}
/*
 * Divider
 */
.uk-list-large.uk-list-divider > :nth-child(n+2) {
  margin-top: 20px;
  padding-top: 20px;
}
.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
  margin-top: 0;
  padding-top: 0;
}
/*
 * Striped
 */
.uk-list-large.uk-list-striped > * {
  padding: 20px 10px;
}
.uk-list-collapse.uk-list-striped > * {
  padding-top: 0;
  padding-bottom: 0;
}
.uk-list-large.uk-list-striped > :nth-child(n+2),
.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
  margin-top: 0;
}
/* ========================================================================
   Component: Description list
 ========================================================================== */
/*
 * Term
 */
.uk-description-list > dt {
  color: #333;
  font-size: 0.875rem;
  font-weight: normal;
  text-transform: uppercase;
}
.uk-description-list > dt:nth-child(n+2) {
  margin-top: 20px;
}
/*
 * Description
 */
/* Style modifier
 ========================================================================== */
/*
 * Line
 */
.uk-description-list-divider > dt:nth-child(n+2) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
/* ========================================================================
   Component: Table
 ========================================================================== */
/*
 * 1. Remove most spacing between table cells.
 * 2. Behave like a block element
 * 3. Style
 */
.uk-table {
  /* 1 */
  border-collapse: collapse;
  border-spacing: 0;
  /* 2 */
  width: 100%;
  /* 3 */
  margin-bottom: 20px;
}
/* Add margin if adjacent element */
* + .uk-table {
  margin-top: 20px;
}
/* Header cell
 ========================================================================== */
/*
 * 1. Style
 */
.uk-table th {
  padding: 16px 12px;
  text-align: right;
  vertical-align: bottom;
  /* 1 */
  font-size: 0.875rem;
  font-weight: normal;
  color: #999;
  text-transform: uppercase;
}
/* Cell
 ========================================================================== */
.uk-table td {
  padding: 16px 12px;
  vertical-align: top;
}
/*
 * Remove margin from the last-child
 */
.uk-table td > :last-child {
  margin-bottom: 0;
}
/* Footer
 ========================================================================== */
.uk-table tfoot {
  font-size: 0.875rem;
}
/* Caption
 ========================================================================== */
.uk-table caption {
  font-size: 0.875rem;
  text-align: right;
  color: #999;
}
/* Alignment modifier
 ========================================================================== */
.uk-table-middle,
.uk-table-middle td {
  vertical-align: middle !important;
}
/* Style modifiers
 ========================================================================== */
/*
 * Divider
 */
.uk-table-divider > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > tr:not(:first-child) {
  border-top: 1px solid #e5e5e5;
}
/*
 * Striped
 */
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
/*
 * Hover
 */
.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
  background: #ffd;
}
/* Active state
 ========================================================================== */
.uk-table > tr.uk-active,
.uk-table tbody tr.uk-active {
  background: #ffd;
}
/* Size modifier
 ========================================================================== */
.uk-table-small th,
.uk-table-small td {
  padding: 10px 12px;
}
.uk-table-large th,
.uk-table-large td {
  padding: 22px 12px;
}
/* Justify modifier
 ========================================================================== */
.uk-table-justify th:first-child,
.uk-table-justify td:first-child {
  padding-right: 0;
}
.uk-table-justify th:last-child,
.uk-table-justify td:last-child {
  padding-left: 0;
}
/* Cell size modifier
 ========================================================================== */
.uk-table-shrink {
  width: 1px;
}
.uk-table-expand {
  min-width: 150px;
}
/* Cell link modifier
 ========================================================================== */
/*
 * Does not work with `uk-table-justify` at the moment
 */
.uk-table-link {
  padding: 0 !important;
}
.uk-table-link > a {
  display: block;
  padding: 16px 12px;
}
.uk-table-small .uk-table-link > a {
  padding: 10px 12px;
}
/* Responsive table
 ========================================================================== */
/* Phone landscape and smaller */
@media (max-width: 959px) {
  .uk-table-responsive,
  .uk-table-responsive tbody,
  .uk-table-responsive th,
  .uk-table-responsive td,
  .uk-table-responsive tr {
    display: block;
  }
  .uk-table-responsive thead {
    display: none;
  }
  .uk-table-responsive th,
  .uk-table-responsive td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .uk-table-responsive th:not(:first-child):not(.uk-table-link),
  .uk-table-responsive td:not(:first-child):not(.uk-table-link),
  .uk-table-responsive .uk-table-link:not(:first-child) > a {
    padding-top: 5px !important;
  }
  .uk-table-responsive th:not(:last-child):not(.uk-table-link),
  .uk-table-responsive td:not(:last-child):not(.uk-table-link),
  .uk-table-responsive .uk-table-link:not(:last-child) > a {
    padding-bottom: 5px !important;
  }
  .uk-table-justify.uk-table-responsive th,
  .uk-table-justify.uk-table-responsive td {
    padding-right: 0;
    padding-left: 0;
  }
}
.uk-table tbody tr {
  transition: background-color 0.1s linear;
}
.uk-table-striped > tr:nth-of-type(even):last-child,
.uk-table-striped tbody tr:nth-of-type(even):last-child {
  border-bottom: 1px solid #e5e5e5;
}
/* ========================================================================
   Component: Icon
 ========================================================================== */
/*
 * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
 * 1. Remove margins in Chrome, Safari and Opera.
 * 2. Remove borders for `button`.
 * 3. Remove border-radius in Chrome.
 * 4. Address `overflow` set to `hidden` in IE.
 * 5. Correct `font` properties and `color` not being inherited for `button`.
 * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 7. Remove default `button` padding and background color
 * 8. Style
 * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
 * 10. Let the container fit the height of the icon
 */
.uk-icon {
  /* 1 */
  margin: 0;
  /* 2 */
  border: none;
  /* 3 */
  border-radius: 0;
  /* 4 */
  overflow: visible;
  /* 5 */
  font: inherit;
  color: inherit;
  /* 6 */
  text-transform: none;
  /* 7. */
  padding: 0;
  background-color: transparent;
  /* 8 */
  display: inline-block;
  /* 9 */
  fill: currentcolor;
  /* 10 */
  line-height: 0;
}
/* Required for `button`. */
button.uk-icon:not(:disabled) {
  cursor: pointer;
}
/*
 * Remove the inner border and padding in Firefox.
 */
.uk-icon::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * Set the fill and stroke color of all SVG elements to the current text color
 */
.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
  fill: currentcolor;
}
.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
  stroke: currentcolor;
}
/*
 * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
 */
.uk-icon > * {
  transform: translate(0, 0);
}
/* Image modifier
 ========================================================================== */
/*
 * Display images in icon dimensions
 * 1. Required for `span` with background image
 * 2. Required for `image`
 */
.uk-icon-image {
  width: 20px;
  height: 20px;
  /* 1 */
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  /* 2 */
  -o-object-fit: scale-down;
     object-fit: scale-down;
  max-width: none;
}
/* Style modifiers
 ========================================================================== */
/*
 * Link
 * 1. Allow text within link
 */
.uk-icon-link {
  color: #999;
  /* 1 */
  text-decoration: none !important;
}
.uk-icon-link:hover {
  color: #666;
}
/* OnClick + Active */
.uk-icon-link:active,
.uk-active > .uk-icon-link {
  color: #595959;
}
/*
 * Button
 * 1. Center icon vertically and horizontally
 */
.uk-icon-button {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 500px;
  background: #f8f8f8;
  color: #999;
  vertical-align: middle;
  /* 1 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}
/* Hover */
.uk-icon-button:hover {
  background-color: #ebebeb;
  color: #666;
}
/* OnClick + Active */
.uk-icon-button:active,
.uk-active > .uk-icon-button {
  background-color: #dfdfdf;
  color: #666;
}
/*
 * Overlay
 */
.uk-icon-overlay,
a .uk-icon-overlay {
  color: rgba(51, 51, 51, 0.6);
  transition: 0.1s ease-in-out;
  transition-property: color;
}
.uk-icon-overlay:hover,
a:hover .uk-icon-overlay {
  color: #333;
}
/* ========================================================================
   Component: Form Range
 ========================================================================== */
/*
 * 1. Remove default style.
 * 2. Define consistent box sizing.
 * 3. Remove `margin` in all browsers.
 * 4. Align to the center of the line box.
 * 5. Prevent content overflow if a fixed width is used.
 * 6. Take the full width.
 * 7. Remove white background in Chrome.
 */
.uk-range {
  /* 1 */
  -webkit-appearance: none;
  /* 2 */
  box-sizing: border-box;
  /* 3 */
  margin: 0;
  /* 4 */
  vertical-align: middle;
  /* 5 */
  max-width: 100%;
  /* 6 */
  width: 100%;
  /* 7 */
  background: transparent;
}
/* Focus */
.uk-range:focus {
  outline: none;
}
.uk-range::-moz-focus-outer {
  border: none;
}
/*
 * Improves consistency of cursor style for clickable elements
 */
.uk-range:not(:disabled)::-webkit-slider-thumb {
  cursor: pointer;
}
.uk-range:not(:disabled)::-moz-range-thumb {
  cursor: pointer;
}
/*
 * Track
 * 1. Safari doesn't have a focus state. Using active instead.
 */
/* Webkit */
.uk-range::-webkit-slider-runnable-track {
  height: 3px;
  background: #ebebeb;
  border-radius: 500px;
}
.uk-range:focus::-webkit-slider-runnable-track,
.uk-range:active::-webkit-slider-runnable-track {
  background: #dedede;
}
/* Firefox */
.uk-range::-moz-range-track {
  height: 3px;
  background: #ebebeb;
  border-radius: 500px;
}
.uk-range:focus::-moz-range-track {
  background: #dedede;
}
/*
 * Thumb
 * 1. Reset
 * 2. Style
 */
/* Webkit */
.uk-range::-webkit-slider-thumb {
  /* 1 */
  -webkit-appearance: none;
  margin-top: -7px;
  /* 2 */
  height: 15px;
  width: 15px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #cccccc;
}
/* Firefox */
.uk-range::-moz-range-thumb {
  /* 1 */
  border: none;
  /* 2 */
  height: 15px;
  width: 15px;
  margin-top: -7px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #cccccc;
}
/* ========================================================================
   Component: Form
 ========================================================================== */
/*
 * 1. Define consistent box sizing.
 *    Default is `content-box` with following exceptions set to `border-box`
 *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
 *    `input[type="search"]` in Chrome, Safari and Opera
 *    `input[type="color"]` in Firefox
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Change font properties to `inherit` in all browsers.
 */
.uk-input,
.uk-select,
.uk-textarea,
.uk-radio,
.uk-checkbox {
  /* 1 */
  box-sizing: border-box;
  /* 2 */
  margin: 0;
  /* 3 */
  border-radius: 0;
  /* 4 */
  font: inherit;
}
/*
 * Show the overflow in Edge.
 */
.uk-input {
  overflow: visible;
}
/*
 * Remove the inheritance of text transform in Firefox.
 */
.uk-select {
  text-transform: none;
}
/*
 * 1. Change font properties to `inherit` in all browsers
 * 2. Don't inherit the `font-weight` and use `bold` instead.
 * NOTE: Both declarations don't work in Chrome, Safari and Opera.
 */
.uk-select optgroup {
  /* 1 */
  font: inherit;
  /* 2 */
  font-weight: bold;
}
/*
 * Remove the default vertical scrollbar in IE 10+.
 */
.uk-textarea {
  overflow: auto;
}
/*
 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
 */
.uk-input[type="search"]::-webkit-search-cancel-button,
.uk-input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
.uk-input[type="number"]::-webkit-inner-spin-button,
.uk-input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/*
 * Correct vertical alignment in Safari.
 */
.uk-input[type="date"]::-webkit-datetime-edit,
.uk-input[type="time"]::-webkit-datetime-edit,
.uk-input[type="datetime-local"]::-webkit-datetime-edit {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
}
/*
 * Removes placeholder transparency in Firefox.
 */
.uk-input::-moz-placeholder,
.uk-textarea::-moz-placeholder {
  opacity: 1;
}
/*
 * Improves consistency of cursor style for clickable elements
 */
.uk-radio:not(:disabled),
.uk-checkbox:not(:disabled) {
  cursor: pointer;
}
/*
 * Define consistent border, margin, and padding.
 * 1. Reset `min-width`
 */
.uk-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  /* 1 */
  min-width: 0;
}
/* Input, select and textarea
 * Allowed: `text`, `password`, `datetime-local`, `date`,  `month`,
            `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
 * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
 ========================================================================== */
/*
 * Remove default style in iOS.
 */
.uk-input,
.uk-textarea {
  -webkit-appearance: none;
}
/*
 * 1. Prevent content overflow if a fixed width is used
 * 2. Take the full width
 * 3. Reset default
 * 4. Style
 */
.uk-input,
.uk-select,
.uk-textarea {
  /* 1 */
  max-width: 100%;
  /* 2 */
  width: 100%;
  /* 3 */
  border: 0 none;
  /* 4 */
  padding: 0 10px;
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  transition: 0.2s ease-in-out;
  transition-property: color, background-color, border;
}
/*
 * Single-line
 */
.uk-input,
.uk-select:not([multiple]):not([size]) {
  height: 40px;
  vertical-align: middle;
}
/*
 * 1. Allow any element to look like an `input` or `select` element
 * 2. Make sure line-height is not larger than height. Also needed to center the text vertically
 * 3. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
 */
.uk-input:where(:not(input)),
.uk-select:where(:not(select)) {
  /* 1 */
  display: inline-block;
  /* 2 */
  line-height: 38px;
  /* 3 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * Multi-line
 */
.uk-select[multiple],
.uk-select[size],
.uk-textarea {
  padding: 6px 10px;
  vertical-align: top;
}
.uk-select[multiple],
.uk-select[size] {
  resize: vertical;
}
/* Focus */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  outline: none;
  background-color: #fff;
  color: #666;
  border-color: #1e87f0;
}
/* Disabled */
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
  background-color: #f8f8f8;
  color: #999;
  border-color: #e5e5e5;
}
/*
 * Placeholder
 */
.uk-input::-moz-placeholder {
  color: #999;
}
.uk-input::placeholder {
  color: #999;
}
.uk-textarea::-moz-placeholder {
  color: #999;
}
.uk-textarea::placeholder {
  color: #999;
}
/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
 ========================================================================== */
/*
 * Error
 */
.uk-form-danger,
.uk-form-danger:focus {
  color: #f0506e;
  border-color: #f0506e;
}
/*
 * Success
 */
.uk-form-success,
.uk-form-success:focus {
  color: #32d296;
  border-color: #32d296;
}
/*
 * Blank
 */
.uk-form-blank {
  background: none;
  border-color: transparent;
}
.uk-form-blank:focus {
  border-color: #e5e5e5;
  border-style: solid;
}
/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`)
 ========================================================================== */
/*
 * Fixed widths
 * Different widths for mini sized `input` and `select` elements
 */
input.uk-form-width-xsmall {
  width: 50px;
}
select.uk-form-width-xsmall {
  width: 75px;
}
.uk-form-width-small {
  width: 130px;
}
.uk-form-width-medium {
  width: 200px;
}
.uk-form-width-large {
  width: 500px;
}
/* Select
 ========================================================================== */
/*
 * 1. Remove default style. Also works in Firefox
 * 2. Style
 * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
 */
.uk-select:not([multiple]):not([size]) {
  /* 1 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 2 */
  padding-left: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: 0% 50%;
}
/* 3 */
.uk-select:not([multiple]):not([size]) option {
  color: #666;
}
/*
 * Disabled
 */
.uk-select:not([multiple]):not([size]):disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* Datalist
 ========================================================================== */
/*
 * 1. Remove default style in Chrome
 */
.uk-input[list] {
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 0% 50%;
}
.uk-input[list]:hover,
.uk-input[list]:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* 1 */
.uk-input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}
/* Radio and checkbox
 ========================================================================== */
/*
 * 1. Style
 * 2. Make box more robust so it clips the child element
 * 3. Vertical alignment
 * 4. Remove default style
 * 5. Fix black background on iOS
 * 6. Cover icons
 */
.uk-radio,
.uk-checkbox {
  /* 1 */
  display: inline-block;
  height: 16px;
  width: 16px;
  /* 2 */
  overflow: hidden;
  /* 3 */
  margin-top: -4px;
  vertical-align: middle;
  /* 4 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 5 */
  background-color: transparent;
  /* 6 */
  background-size: cover;
  border: 1px solid #cccccc;
  transition: 0.2s ease-in-out;
  transition-property: background-color, border;
}
.uk-radio {
  border-radius: 50%;
}
/* Focus */
.uk-radio:focus,
.uk-checkbox:focus {
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  border-color: #1e87f0;
}
/*
 * Checked
 */
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
  background-color: #1e87f0;
  border-color: transparent;
}
/* Focus */
.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
  background-color: #0e6dcd;
}
/*
 * Icons
 */
.uk-radio:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-checkbox:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
/*
 * Disabled
 */
.uk-radio:disabled,
.uk-checkbox:disabled {
  background-color: #f8f8f8;
  border-color: #e5e5e5;
}
.uk-radio:disabled:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-checkbox:disabled:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-checkbox:disabled:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
/* Style modifier (`uk-input`, `uk-select`, `uk-textarea`, `uk-radio`, `uk-checkbox`)
 ========================================================================== */
/*
 * Small
 */
.uk-form-small:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
  font-size: 0.875rem;
}
/* Single-line */
.uk-form-small:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
  height: 30px;
  padding-right: 8px;
  padding-left: 8px;
}
/* Multi-line */
.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
  padding: 5px 8px;
}
/* Any element */
.uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
  line-height: 28px;
}
/* Radio + Checkbox */
.uk-form-small:is(.uk-radio, .uk-checkbox) {
  height: 14px;
  width: 14px;
}
/*
 * Large
 */
.uk-form-large:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
  font-size: 1.25rem;
}
/* Single-line */
.uk-form-large:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
  height: 55px;
  padding-right: 12px;
  padding-left: 12px;
}
/* Multi-line */
.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
  padding: 7px 12px;
}
/* Any element */
.uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
  line-height: 53px;
}
/* Radio + Checkbox */
.uk-form-large:is(.uk-radio, .uk-checkbox) {
  height: 22px;
  width: 22px;
}
/* Legend
 ========================================================================== */
/*
 * Legend
 * 1. Behave like block element
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove padding so people aren't caught out if they zero out fieldsets.
 * 4. Style
 */
.uk-legend {
  /* 1 */
  width: 100%;
  /* 2 */
  color: inherit;
  /* 3 */
  padding: 0;
  /* 4 */
  font-size: 1.5rem;
  line-height: 1.4;
}
/* Custom controls
 ========================================================================== */
/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Behave like most inline-block elements
 */
.uk-form-custom {
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  /* 3 */
  max-width: 100%;
  /* 4 */
  vertical-align: middle;
}
/*
 * 1. Position and resize the form control to always cover its container
 * 2. Required for Firefox for positioning to the left
 * 3. Required for Webkit to make `height` work
 * 4. Hide controls and show cursor
 * 5. Needed for the cursor
 * 6. Clip height caused by 5. Needed for Webkit only
 */
.uk-form-custom select,
.uk-form-custom input[type="file"] {
  /* 1 */
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* 2 */
  right: 0;
  /* 3 */
  -webkit-appearance: none;
  /* 4 */
  opacity: 0;
  cursor: pointer;
}
.uk-form-custom input[type="file"] {
  /* 5 */
  font-size: 500px;
  /* 6 */
  overflow: hidden;
}
/* Label
 ========================================================================== */
.uk-form-label {
  color: #333;
  font-size: 0.875rem;
}
/* Layout
 ========================================================================== */
/*
 * Stacked
 */
.uk-form-stacked .uk-form-label {
  display: block;
  margin-bottom: 5px;
}
/*
 * Horizontal
 */
/* Tablet portrait and smaller */
@media (max-width: 959px) {
  /* Behave like `uk-form-stacked` */
  .uk-form-horizontal .uk-form-label {
    display: block;
    margin-bottom: 5px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-form-horizontal .uk-form-label {
    width: 200px;
    margin-top: 7px;
    float: right;
  }
  .uk-form-horizontal .uk-form-controls {
    margin-right: 215px;
  }
  /* Better vertical alignment if controls are checkboxes and radio buttons with text */
  .uk-form-horizontal .uk-form-controls-text {
    padding-top: 7px;
  }
}
/* Icons
 ========================================================================== */
/*
 * 1. Set position
 * 2. Set width
 * 3. Center icon vertically and horizontally
 * 4. Style
 */
.uk-form-icon {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 2 */
  width: 40px;
  /* 3 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* 4 */
  color: #999;
}
/*
 * Required for `a`.
 */
.uk-form-icon:hover {
  color: #666;
}
/*
 * Make `input` element clickable through icon, e.g. if it's a `span`
 */
.uk-form-icon:not(a):not(button):not(input) {
  pointer-events: none;
}
/*
 * Input padding
 */
.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input {
  padding-right: 40px !important;
}
/*
 * Position modifier
 */
.uk-form-icon-flip {
  left: 0;
  right: auto;
}
.uk-form-icon-flip ~ .uk-input {
  padding-left: 40px !important;
}
/* ========================================================================
   Component: Button
 ========================================================================== */
/*
 * 1. Remove margins in Chrome, Safari and Opera.
 * 2. Remove borders for `button`.
 * 3. Address `overflow` set to `hidden` in IE.
 * 4. Correct `font` properties and `color` not being inherited for `button`.
 * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 6. Remove default style for `input type="submit"`in iOS.
 * 7. Style
 * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
 *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
 * 9. Align text if button has a width
 * 10. Required for `a`.
 */
.uk-button {
  /* 1 */
  margin: 0;
  /* 2 */
  border: none;
  /* 3 */
  overflow: visible;
  /* 4 */
  font: inherit;
  color: inherit;
  /* 5 */
  text-transform: none;
  /* 6 */
  -webkit-appearance: none;
  border-radius: 0;
  /* 7 */
  display: inline-block;
  box-sizing: border-box;
  padding: 0 30px;
  vertical-align: middle;
  font-size: 0.875rem;
  /* 8 */
  line-height: 38px;
  /* 9 */
  text-align: center;
  /* 10 */
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color, border-color;
}
.uk-button:not(:disabled) {
  cursor: pointer;
}
/*
 * Remove the inner border and padding in Firefox.
 */
.uk-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/* Hover */
.uk-button:hover {
  /* 9 */
  text-decoration: none;
}
/* OnClick + Active */
/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-button-default {
  background-color: transparent;
  color: #333;
  border: 1px solid #e5e5e5;
}
/* Hover */
.uk-button-default:hover {
  background-color: transparent;
  color: #333;
  border-color: #b2b2b2;
}
/* OnClick + Active */
.uk-button-default:active,
.uk-button-default.uk-active {
  background-color: transparent;
  color: #333;
  border-color: #999999;
}
/*
 * Primary
 */
.uk-button-primary {
  background-color: #1e87f0;
  color: #fff;
  border: 1px solid transparent;
}
/* Hover */
.uk-button-primary:hover {
  background-color: #0f7ae5;
  color: #fff;
}
/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
  background-color: #0e6dcd;
  color: #fff;
}
/*
 * Secondary
 */
.uk-button-secondary {
  background-color: #222;
  color: #fff;
  border: 1px solid transparent;
}
/* Hover */
.uk-button-secondary:hover {
  background-color: #151515;
  color: #fff;
}
/* OnClick + Active */
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
  background-color: #080808;
  color: #fff;
}
/*
 * Danger
 */
.uk-button-danger {
  background-color: #f0506e;
  color: #fff;
  border: 1px solid transparent;
}
/* Hover */
.uk-button-danger:hover {
  background-color: #ee395b;
  color: #fff;
}
/* OnClick + Active */
.uk-button-danger:active,
.uk-button-danger.uk-active {
  background-color: #ec2147;
  color: #fff;
}
/*
 * Disabled
 * The same for all style modifiers
 */
.uk-button-default:disabled,
.uk-button-primary:disabled,
.uk-button-secondary:disabled,
.uk-button-danger:disabled {
  background-color: transparent;
  color: #999;
  border-color: #e5e5e5;
}
/* Size modifiers
 ========================================================================== */
.uk-button-small {
  padding: 0 15px;
  line-height: 28px;
  font-size: 0.875rem;
}
.uk-button-large {
  padding: 0 40px;
  line-height: 53px;
  font-size: 0.875rem;
}
/* Text modifiers
 ========================================================================== */
/*
 * Text
 * 1. Reset
 * 2. Style
 */
.uk-button-text {
  /* 1 */
  padding: 0;
  line-height: 1.5;
  background: none;
  /* 2 */
  color: #333;
  position: relative;
}
.uk-button-text::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 100%;
  border-bottom: 1px solid currentColor;
  transition: left 0.3s ease-out;
}
/* Hover */
.uk-button-text:hover {
  color: #333;
}
.uk-button-text:hover::before {
  left: 0;
}
/* Disabled */
.uk-button-text:disabled {
  color: #999;
}
.uk-button-text:disabled::before {
  display: none;
}
/*
 * Link
 * 1. Reset
 * 2. Style
 */
.uk-button-link {
  /* 1 */
  padding: 0;
  line-height: 1.5;
  background: none;
  /* 2 */
  color: #333;
}
/* Hover */
.uk-button-link:hover {
  color: #999;
  text-decoration: none;
}
/* Disabled */
.uk-button-link:disabled {
  color: #999;
  text-decoration: none;
}
/* Group
 ========================================================================== */
/*
 * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
 * 2. Behave like button
 * 3. Create position context
 */
.uk-button-group {
  /* 1 */
  display: inline-flex;
  /* 2 */
  vertical-align: middle;
  /* 3 */
  position: relative;
}
/* Group
     ========================================================================== */
/*
     * Collapse border
     */
.uk-button-group > .uk-button:nth-child(n+2),
.uk-button-group > div:nth-child(n+2) .uk-button {
  margin-right: -1px;
}
/*
     * Create position context to superimpose the successor elements border
     * Known issue: If you use an `a` element as button and an icon inside,
     * the active state will not work if you click the icon inside the button
     * Workaround: Just use a `button` or `input` element as button
     */
.uk-button-group .uk-button:hover,
.uk-button-group .uk-button:focus,
.uk-button-group .uk-button:active,
.uk-button-group .uk-button.uk-active {
  position: relative;
  z-index: 1;
}
/* ========================================================================
   Component: Progress
 ========================================================================== */
/*
 * 1. Add the correct vertical alignment in all browsers.
 * 2. Behave like a block element.
 * 3. Remove borders in Firefox.
 * 4. Remove default style in Chrome, Safari and Edge.
 * 5. Style
 */
.uk-progress {
  /* 1 */
  vertical-align: baseline;
  /* 2 */
  display: block;
  width: 100%;
  /* 3 */
  border: 0;
  /* 4 */
  background-color: #f8f8f8;
  /* 5 */
  margin-bottom: 20px;
  height: 15px;
  border-radius: 500px;
  overflow: hidden;
}
/* Add margin if adjacent element */
* + .uk-progress {
  margin-top: 20px;
}
/*
 * Show background color set on `uk-progress` in Chrome, Safari and Edge.
 */
.uk-progress::-webkit-progress-bar {
  background-color: transparent;
}
/*
 * Progress Bar
 * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
 *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
 */
.uk-progress::-webkit-progress-value {
  background-color: #1e87f0;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.uk-progress::-moz-progress-bar {
  background-color: #1e87f0;
  /* 1 */
  -moz-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
/* ========================================================================
   Component: Section
 ========================================================================== */
/*
 * 1. Make it work with `100vh` and height in general
 */
.uk-section {
  display: flow-root;
  box-sizing: border-box;
  /* 1 */
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .uk-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
/*
 * Remove margin from the last-child
 */
.uk-section > :last-child {
  margin-bottom: 0;
}
/* Size modifiers
 ========================================================================== */
/*
 * XSmall
 */
.uk-section-xsmall {
  padding-top: 20px;
  padding-bottom: 20px;
}
.uk-section-xsmall-top {
  padding-top: 20px;
}
.uk-section-xsmall-bottom {
  padding-bottom: 20px;
}
/*
 * Small
 */
.uk-section-small {
  padding-top: 40px;
  padding-bottom: 40px;
}
.uk-section-small-top {
  padding-top: 40px;
}
.uk-section-small-bottom {
  padding-bottom: 40px;
}
/*
 * Medium
 */
.uk-section-medium-top {
  padding-top: 40px;
}
.uk-section-medium-bottom {
  padding-bottom: 40px;
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .uk-section-medium-top {
    padding-top: 70px;
  }
  .uk-section-medium-bottom {
    padding-bottom: 70px;
  }
}
/*
 * Large
 */
.uk-section-large {
  padding-top: 70px;
  padding-bottom: 70px;
}
.uk-section-large-top {
  padding-top: 70px;
}
.uk-section-large-bottom {
  padding-bottom: 70px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-section-large {
    padding-top: 140px;
    padding-bottom: 140px;
  }
  .uk-section-large-top {
    padding-top: 140px;
  }
  .uk-section-large-bottom {
    padding-bottom: 140px;
  }
}
/*
 * XLarge
 */
.uk-section-xlarge {
  padding-top: 140px;
  padding-bottom: 140px;
}
.uk-section-xlarge-top {
  padding-top: 140px;
}
.uk-section-xlarge-bottom {
  padding-bottom: 140px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-section-xlarge {
    padding-top: 210px;
    padding-bottom: 210px;
  }
  .uk-section-xlarge-top {
    padding-top: 210px;
  }
  .uk-section-xlarge-bottom {
    padding-bottom: 210px;
  }
}
/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-section-default {
  --uk-inverse: dark;
  background: #fff;
}
/*
 * Muted
 */
.uk-section-muted {
  --uk-inverse: dark;
  background: #f8f8f8;
}
/*
 * Primary
 */
.uk-section-primary {
  --uk-inverse: light;
  background: #1e87f0;
}
/*
 * Secondary
 */
.uk-section-secondary {
  --uk-inverse: light;
  background: #222;
}
/* Overlap modifier
 ========================================================================== */
/*
 * Reserved modifier to make a section overlap another section with an border image
 * Implemented by the theme
 */
/* ========================================================================
   Component: Container
 ========================================================================== */
/*
 * 1. Box sizing has to be `content-box` so the max-width is always the same and
 *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
 */
.uk-container {
  display: flow-root;
  /* 1 */
  box-sizing: content-box;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-container {
    padding-right: 30px;
    padding-left: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-container {
    padding-right: 40px;
    padding-left: 40px;
  }
}
/*
 * Remove margin from the last-child
 */
.uk-container > :last-child {
  margin-bottom: 0;
}
/*
 * Remove padding from nested containers
 */
.uk-container .uk-container {
  padding-right: 0;
  padding-left: 0;
}
/* Size modifier
 ========================================================================== */
.uk-container-xsmall {
  max-width: 750px;
}
.uk-container-small {
  max-width: 900px;
}
.uk-container-large {
  max-width: 1400px;
}
.uk-container-xlarge {
  max-width: 1600px;
}
.uk-container-expand {
  max-width: none;
}
/* Expand modifier
 ========================================================================== */
/*
 * Expand one side only
 */
.uk-container-expand-right {
  margin-right: 0;
}
.uk-container-expand-left {
  margin-left: 0;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-container-expand-right.uk-container-xsmall,
  .uk-container-expand-left.uk-container-xsmall {
    max-width: calc(50% + (750px / 2) - 30px);
  }
  .uk-container-expand-right.uk-container-small,
  .uk-container-expand-left.uk-container-small {
    max-width: calc(50% + (900px / 2) - 30px);
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-container-expand-right,
  .uk-container-expand-left {
    max-width: calc(50% + (1200px / 2) - 40px);
  }
  .uk-container-expand-right.uk-container-xsmall,
  .uk-container-expand-left.uk-container-xsmall {
    max-width: calc(50% + (750px / 2) - 40px);
  }
  .uk-container-expand-right.uk-container-small,
  .uk-container-expand-left.uk-container-small {
    max-width: calc(50% + (900px / 2) - 40px);
  }
  .uk-container-expand-right.uk-container-large,
  .uk-container-expand-left.uk-container-large {
    max-width: calc(50% + (1400px / 2) - 40px);
  }
  .uk-container-expand-right.uk-container-xlarge,
  .uk-container-expand-left.uk-container-xlarge {
    max-width: calc(50% + (1600px / 2) - 40px);
  }
}
/* Item
 ========================================================================== */
/*
 * Utility classes to reset container padding on the left or right side
 * Note: It has to be negative margin on the item, because it's specific to the item.
 */
.uk-container-item-padding-remove-right,
.uk-container-item-padding-remove-left {
  width: calc(100% + 15px);
}
.uk-container-item-padding-remove-right {
  margin-right: -15px;
}
.uk-container-item-padding-remove-left {
  margin-left: -15px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-container-item-padding-remove-right,
  .uk-container-item-padding-remove-left {
    width: calc(100% + 30px);
  }
  .uk-container-item-padding-remove-right {
    margin-right: -30px;
  }
  .uk-container-item-padding-remove-left {
    margin-left: -30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-container-item-padding-remove-right,
  .uk-container-item-padding-remove-left {
    width: calc(100% + 40px);
  }
  .uk-container-item-padding-remove-right {
    margin-right: -40px;
  }
  .uk-container-item-padding-remove-left {
    margin-left: -40px;
  }
}
/* ========================================================================
   Component: Tile
 ========================================================================== */
.uk-tile {
  display: flow-root;
  position: relative;
  box-sizing: border-box;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-tile {
    padding-right: 30px;
    padding-left: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile {
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
/*
 * Remove margin from the last-child
 */
.uk-tile > :last-child {
  margin-bottom: 0;
}
/* Size modifiers
 ========================================================================== */
/*
 * XSmall
 */
.uk-tile-xsmall {
  padding-top: 20px;
  padding-bottom: 20px;
}
/*
 * Small
 */
.uk-tile-small {
  padding-top: 40px;
  padding-bottom: 40px;
}
/*
 * Large
 */
.uk-tile-large {
  padding-top: 70px;
  padding-bottom: 70px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile-large {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
/*
 * XLarge
 */
.uk-tile-xlarge {
  padding-top: 140px;
  padding-bottom: 140px;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile-xlarge {
    padding-top: 210px;
    padding-bottom: 210px;
  }
}
/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-tile-default {
  --uk-inverse: dark;
  background-color: #fff;
}
/*
 * Muted
 */
.uk-tile-muted {
  --uk-inverse: dark;
  background-color: #f8f8f8;
}
/*
 * Primary
 */
.uk-tile-primary {
  --uk-inverse: light;
  background-color: #1e87f0;
}
/*
 * Secondary
 */
.uk-tile-secondary {
  --uk-inverse: light;
  background-color: #222;
}
/* ========================================================================
   Component: Card
 ========================================================================== */
.uk-card {
  position: relative;
  box-sizing: border-box;
  transition: box-shadow 0.1s ease-in-out;
}
/* Sections
 ========================================================================== */
.uk-card-body {
  display: flow-root;
  padding: 30px 30px;
}
.uk-card-header {
  display: flow-root;
  padding: 15px 30px;
}
.uk-card-footer {
  display: flow-root;
  padding: 15px 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-card-body {
    padding: 40px 40px;
  }
  .uk-card-header {
    padding: 20px 40px;
  }
  .uk-card-footer {
    padding: 20px 40px;
  }
}
/*
 * Remove margin from the last-child
 */
.uk-card-body > :last-child,
.uk-card-header > :last-child,
.uk-card-footer > :last-child {
  margin-bottom: 0;
}
/* Media
 ========================================================================== */
/*
 * Reserved alignment modifier to style the media element, e.g. with `border-radius`
 * Implemented by the theme
 */
/* Title
 ========================================================================== */
.uk-card-title {
  font-size: 1.5rem;
  line-height: 1.4;
}
/* Badge
 ========================================================================== */
/*
 * 1. Position
 * 2. Size
 * 3. Style
 * 4. Center child vertically
 */
.uk-card-badge {
  /* 1 */
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
  /* 2 */
  height: 22px;
  padding: 0 10px;
  /* 3 */
  background: #1e87f0;
  color: #fff;
  font-size: 0.875rem;
  /* 4 */
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  border-radius: 2px;
  text-transform: uppercase;
}
/*
 * Remove margin from adjacent element
 */
.uk-card-badge:first-child + * {
  margin-top: 0;
}
/* Hover modifier
 ========================================================================== */
.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-overlay):hover {
  background-color: #fff;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/* Style modifiers
 ========================================================================== */
/*
 * Default
 * Note: Header and Footer are only implemented for the default style
 */
.uk-card-default {
  --uk-inverse: dark;
  background-color: #fff;
  color: #666;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-default .uk-card-title {
  color: #333;
}
.uk-card-default.uk-card-hover:hover {
  background-color: #fff;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.uk-card-default .uk-card-header {
  border-bottom: 1px solid #e5e5e5;
}
.uk-card-default .uk-card-footer {
  border-top: 1px solid #e5e5e5;
}
/*
 * Primary
 */
.uk-card-primary {
  --uk-inverse: light;
  background-color: #1e87f0;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-primary .uk-card-title {
  color: #fff;
}
.uk-card-primary.uk-card-hover:hover {
  background-color: #1e87f0;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/*
 * Secondary
 */
.uk-card-secondary {
  --uk-inverse: light;
  background-color: #222;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-secondary .uk-card-title {
  color: #fff;
}
.uk-card-secondary.uk-card-hover:hover {
  background-color: #222;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/*
 * Overlay
 */
.uk-card-overlay {
  --uk-inverse: dark;
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-overlay .uk-card-title {
  color: #333;
}
.uk-card-overlay.uk-card-hover:hover {
  background-color: #ffffff;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/* Size modifier
 ========================================================================== */
/*
 * Small
 */
.uk-card-small.uk-card-body,
.uk-card-small .uk-card-body {
  padding: 20px 20px;
}
.uk-card-small .uk-card-header {
  padding: 13px 20px;
}
.uk-card-small .uk-card-footer {
  padding: 13px 20px;
}
/*
 * Large
 */
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-card-large.uk-card-body,
  .uk-card-large .uk-card-body {
    padding: 70px 70px;
  }
  .uk-card-large .uk-card-header {
    padding: 35px 70px;
  }
  .uk-card-large .uk-card-footer {
    padding: 35px 70px;
  }
}
/*
     * Default
     */
.uk-card-body > .uk-nav-default {
  margin-right: -30px;
  margin-left: -30px;
}
.uk-card-body > .uk-nav-default:only-child {
  margin-top: -15px;
  margin-bottom: -15px;
}
.uk-card-body > .uk-nav-default > li > a,
.uk-card-body > .uk-nav-default .uk-nav-header,
.uk-card-body > .uk-nav-default .uk-nav-divider {
  padding-right: 30px;
  padding-left: 30px;
}
.uk-card-body > .uk-nav-default .uk-nav-sub {
  padding-right: 45px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-card-body > .uk-nav-default {
    margin-right: -40px;
    margin-left: -40px;
  }
  .uk-card-body > .uk-nav-default:only-child {
    margin-top: -25px;
    margin-bottom: -25px;
  }
  .uk-card-body > .uk-nav-default > li > a,
  .uk-card-body > .uk-nav-default .uk-nav-header,
  .uk-card-body > .uk-nav-default .uk-nav-divider {
    padding-right: 40px;
    padding-left: 40px;
  }
  .uk-card-body > .uk-nav-default .uk-nav-sub {
    padding-right: 55px;
  }
}
/*
     * Small
     */
.uk-card-small > .uk-nav-default {
  margin-right: -20px;
  margin-left: -20px;
}
.uk-card-small > .uk-nav-default:only-child {
  margin-top: -5px;
  margin-bottom: -5px;
}
.uk-card-small > .uk-nav-default > li > a,
.uk-card-small > .uk-nav-default .uk-nav-header,
.uk-card-small > .uk-nav-default .uk-nav-divider {
  padding-right: 20px;
  padding-left: 20px;
}
.uk-card-small > .uk-nav-default .uk-nav-sub {
  padding-right: 35px;
}
/*
     * Large
     */
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-card-large > .uk-nav-default {
    margin: 0;
  }
  .uk-card-large > .uk-nav-default:only-child {
    margin: 0;
  }
  .uk-card-large > .uk-nav-default > li > a,
  .uk-card-large > .uk-nav-default .uk-nav-header,
  .uk-card-large > .uk-nav-default .uk-nav-divider {
    padding-right: 0;
    padding-left: 0;
  }
  .uk-card-large > .uk-nav-default .uk-nav-sub {
    padding-right: 15px;
  }
}
/* ========================================================================
   Component: Close
 ========================================================================== */
/*
 * Adopts `uk-icon`
 */
.uk-close {
  color: #999;
  transition: 0.1s ease-in-out;
  transition-property: color, opacity;
}
/* Hover */
.uk-close:hover {
  color: #666;
}
/* ========================================================================
   Component: Spinner
 ========================================================================== */
/*
 * Adopts `uk-icon`
 */
/* SVG
 ========================================================================== */
.uk-spinner > * {
  animation: uk-spinner-rotate 1.4s linear infinite;
}
@keyframes uk-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-270deg);
  }
}
/*
 * Circle
 */
.uk-spinner > * > * {
  stroke-dasharray: 88px;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: uk-spinner-dash 1.4s ease-in-out infinite;
  stroke-width: 1;
  stroke-linecap: round;
}
@keyframes uk-spinner-dash {
  0% {
    stroke-dashoffset: -88px;
  }
  50% {
    stroke-dashoffset: -22px;
    transform: rotate(-135deg);
  }
  100% {
    stroke-dashoffset: -88px;
    transform: rotate(-450deg);
  }
}
/* ========================================================================
   Component: Totop
 ========================================================================== */
/*
 * Adopts `uk-icon`
 */
.uk-totop {
  padding: 5px;
  color: #999;
  transition: color 0.1s ease-in-out;
}
/* Hover */
.uk-totop:hover {
  color: #666;
}
/* OnClick */
.uk-totop:active {
  color: #333;
}
/* ========================================================================
   Component: Marker
 ========================================================================== */
/*
 * Addopts `uk-icon`
 */
.uk-marker {
  padding: 5px;
  background: #222;
  color: #fff;
  border-radius: 500px;
}
/* Hover */
.uk-marker:hover {
  color: #fff;
}
/* ========================================================================
   Component: Alert
 ========================================================================== */
.uk-alert {
  position: relative;
  margin-bottom: 20px;
  padding: 15px 15px 15px 29px;
  background: #f8f8f8;
  color: #666;
}
/* Add margin if adjacent element */
* + .uk-alert {
  margin-top: 20px;
}
/*
 * Remove margin from the last-child
 */
.uk-alert > :last-child {
  margin-bottom: 0;
}
/* Close
 * Adopts `uk-close`
 ========================================================================== */
.uk-alert-close {
  position: absolute;
  top: 20px;
  left: 15px;
  color: inherit;
  opacity: 0.4;
}
/*
 * Remove margin from adjacent element
 */
.uk-alert-close:first-child + * {
  margin-top: 0;
}
/*
 * Hover
 */
.uk-alert-close:hover {
  color: inherit;
  opacity: 0.8;
}
/* Style modifiers
 ========================================================================== */
/*
 * Primary
 */
.uk-alert-primary {
  background: #d8eafc;
  color: #1e87f0;
}
/*
 * Success
 */
.uk-alert-success {
  background: #edfbf6;
  color: #32d296;
}
/*
 * Warning
 */
.uk-alert-warning {
  background: #fff6ee;
  color: #faa05a;
}
/*
 * Danger
 */
.uk-alert-danger {
  background: #fef4f6;
  color: #f0506e;
}
/*
     * Content
     */
.uk-alert h1,
.uk-alert h2,
.uk-alert h3,
.uk-alert h4,
.uk-alert h5,
.uk-alert h6 {
  color: inherit;
}
.uk-alert a:not([class]) {
  color: inherit;
  text-decoration: underline;
}
.uk-alert a:not([class]):hover {
  color: inherit;
  text-decoration: underline;
}
/* ========================================================================
   Component: Placeholder
 ========================================================================== */
.uk-placeholder {
  margin-bottom: 20px;
  padding: 30px 30px;
  background: transparent;
  border: 1px dashed #e5e5e5;
}
/* Add margin if adjacent element */
* + .uk-placeholder {
  margin-top: 20px;
}
/*
 * Remove margin from the last-child
 */
.uk-placeholder > :last-child {
  margin-bottom: 0;
}
/* ========================================================================
   Component: Badge
 ========================================================================== */
/*
 * 1. Style
 * 2. Center child vertically and horizontally
 */
.uk-badge {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 500px;
  vertical-align: middle;
  /* 1 */
  background: #1e87f0;
  color: #fff !important;
  font-size: 11px;
  /* 2 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
/*
 * Required for `a`
 */
.uk-badge:hover {
  text-decoration: none;
}
/* ========================================================================
   Component: Label
 ========================================================================== */
.uk-label {
  display: inline-block;
  padding: 0 10px;
  background: #1e87f0;
  line-height: 1.5;
  font-size: 0.875rem;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  text-transform: uppercase;
}
/* Color modifiers
 ========================================================================== */
/*
 * Success
 */
.uk-label-success {
  background-color: #32d296;
  color: #fff;
}
/*
 * Warning
 */
.uk-label-warning {
  background-color: #faa05a;
  color: #fff;
}
/*
 * Danger
 */
.uk-label-danger {
  background-color: #f0506e;
  color: #fff;
}
/* ========================================================================
   Component: Overlay
 ========================================================================== */
.uk-overlay {
  padding: 30px 30px;
}
/*
 * Remove margin from the last-child
 */
.uk-overlay > :last-child {
  margin-bottom: 0;
}
/* Icon
 ========================================================================== */
/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-overlay-default {
  --uk-inverse: dark;
  background: rgba(255, 255, 255, 0.9);
}
/*
 * Primary
 */
.uk-overlay-primary {
  --uk-inverse: light;
  background: rgba(34, 34, 34, 0.9);
}
/* ========================================================================
   Component: Article
 ========================================================================== */
.uk-article {
  display: flow-root;
}
/*
 * Remove margin from the last-child
 */
.uk-article > :last-child {
  margin-bottom: 0;
}
/* Adjacent sibling
 ========================================================================== */
.uk-article + .uk-article {
  margin-top: 70px;
}
/* Title
 ========================================================================== */
.uk-article-title {
  font-size: 2.23125rem;
  line-height: 1.2;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-article-title {
    font-size: 2.625rem;
  }
}
/* Meta
 ========================================================================== */
.uk-article-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}
.uk-article-meta a {
  color: #999;
}
.uk-article-meta a:hover {
  color: #666;
  text-decoration: none;
}
/* ========================================================================
   Component: Comment
 ========================================================================== */
/* Sections
 ========================================================================== */
.uk-comment-body {
  display: flow-root;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.uk-comment-header {
  display: flow-root;
  margin-bottom: 20px;
}
/*
 * Remove margin from the last-child
 */
.uk-comment-body > :last-child,
.uk-comment-header > :last-child {
  margin-bottom: 0;
}
/* Title
 ========================================================================== */
.uk-comment-title {
  font-size: 1.25rem;
  line-height: 1.4;
}
/* Meta
 ========================================================================== */
.uk-comment-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}
/* Avatar
 ========================================================================== */
/* List
 ========================================================================== */
.uk-comment-list {
  padding: 0;
  list-style: none;
}
/* Adjacent siblings */
.uk-comment-list > :nth-child(n+2) {
  margin-top: 70px;
}
/*
 * Sublists
 * Note: General sibling selector allows reply block between comment and sublist
 */
.uk-comment-list .uk-comment ~ ul {
  margin: 70px 0 0 0;
  padding-right: 30px;
  list-style: none;
}
/* Tablet and bigger */
@media (min-width: 960px) {
  .uk-comment-list .uk-comment ~ ul {
    padding-right: 100px;
  }
}
/* Adjacent siblings */
.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
  margin-top: 70px;
}
/* Style modifier
 ========================================================================== */
.uk-comment-primary {
  padding: 30px;
  background-color: #f8f8f8;
}
/* ========================================================================
   Component: Search
 ========================================================================== */
/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Reset `form`
 */
.uk-search {
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  /* 3 */
  max-width: 100%;
  /* 4 */
  margin: 0;
}
/* Input
 ========================================================================== */
/*
 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
 */
.uk-search-input::-webkit-search-cancel-button,
.uk-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
 * Removes placeholder transparency in Firefox.
 */
.uk-search-input::-moz-placeholder {
  opacity: 1;
}
/*
 * 1. Define consistent box sizing.
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Change font properties to `inherit` in all browsers
 * 5. Show the overflow in Edge.
 * 6. Remove default style in iOS.
 * 7. Vertical alignment
 * 8. Take the full container width
 * 9. Style
 */
.uk-search-input {
  /* 1 */
  box-sizing: border-box;
  /* 2 */
  margin: 0;
  /* 3 */
  border-radius: 0;
  /* 4 */
  font: inherit;
  /* 5 */
  overflow: visible;
  /* 6 */
  -webkit-appearance: none;
  /* 7 */
  vertical-align: middle;
  /* 8 */
  width: 100%;
  /* 9 */
  border: none;
  color: #666;
}
.uk-search-input:focus {
  outline: none;
}
/* Placeholder */
.uk-search-input::-moz-placeholder {
  color: #999;
}
.uk-search-input::placeholder {
  color: #999;
}
/* Icon (Adopts `uk-icon`)
 ========================================================================== */
/*
 * Position above input
 * 1. Set position
 * 2. Center icon vertically and horizontally
 * 3. Style
 */
.uk-search .uk-search-icon {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 2 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* 3 */
  color: #999;
}
/*
 * Required for `a`.
 */
.uk-search .uk-search-icon:hover {
  color: #999;
}
/*
 * Make `input` element clickable through icon, e.g. if it's a `span`
 */
.uk-search .uk-search-icon:not(a):not(button):not(input) {
  pointer-events: none;
}
/*
 * Position modifier
 */
.uk-search .uk-search-icon-flip {
  left: 0;
  right: auto;
}
/* Default modifier
 ========================================================================== */
.uk-search-default {
  width: 240px;
}
/*
 * Input
 */
.uk-search-default .uk-search-input {
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
  background: transparent;
  border: 1px solid #e5e5e5;
}
/* Focus */
.uk-search-default .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0);
  border-color: #1e87f0;
}
/*
 * Icon
 */
.uk-search-default .uk-search-icon {
  padding-right: 10px;
  padding-left: 10px;
}
.uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
  padding-right: 40px;
}
.uk-search-default:has(.uk-search-icon-flip) .uk-search-input {
  padding-left: 40px;
}
/* Navbar modifier
 ========================================================================== */
.uk-search-navbar {
  width: 240px;
}
/*
 * Input
 */
.uk-search-navbar .uk-search-input {
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
  background: #fff;
  border: 1px solid #e5e5e5;
}
/* Focus */
.uk-search-navbar .uk-search-input:focus {
  background-color: #fff;
  border-color: #1e87f0;
}
/*
 * Icon
 */
.uk-search-navbar .uk-search-icon {
  padding-right: 10px;
  padding-left: 10px;
}
.uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
  padding-right: 40px;
}
.uk-search-navbar:has(.uk-search-icon-flip) .uk-search-input {
  padding-left: 40px;
}
/* Medium modifier
 ========================================================================== */
.uk-search-medium {
  width: 400px;
}
/*
 * Input
 */
.uk-search-medium .uk-search-input {
  height: 55px;
  padding-right: 12px;
  padding-left: 12px;
  background: transparent;
  font-size: 1.5rem;
  border: 1px solid #e5e5e5;
}
/* Focus */
.uk-search-medium .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0);
  border-color: #1e87f0;
}
/*
 * Icon
 */
.uk-search-medium .uk-search-icon {
  padding-right: 12px;
  padding-left: 12px;
}
.uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
  padding-right: 48px;
}
.uk-search-medium:has(.uk-search-icon-flip) .uk-search-input {
  padding-left: 48px;
}
/* Large modifier
 ========================================================================== */
.uk-search-large {
  width: 500px;
}
/*
 * Input
 */
.uk-search-large .uk-search-input {
  height: 90px;
  padding-right: 20px;
  padding-left: 20px;
  background: transparent;
  font-size: 2.625rem;
  border: 1px solid #e5e5e5;
}
/* Focus */
.uk-search-large .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0);
  border-color: #1e87f0;
}
/*
 * Icon
 */
.uk-search-large .uk-search-icon {
  padding-right: 20px;
  padding-left: 20px;
}
.uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
  padding-right: 80px;
}
.uk-search-large:has(.uk-search-icon-flip) .uk-search-input {
  padding-left: 80px;
}
/* Toggle
 ========================================================================== */
.uk-search-toggle {
  color: #999;
}
/* Hover */
.uk-search-toggle:hover {
  color: #666;
}
/* ========================================================================
   Component: Accordion
 ========================================================================== */
.uk-accordion {
  padding: 0;
  list-style: none;
}
.uk-accordion-title {
  display: block;
}
.uk-accordion-content {
  display: flow-root;
}
/*
 * Remove margin from the last-child
 */
.uk-accordion-content > :last-child {
  margin-bottom: 0;
}
/* Default modifier
 ========================================================================== */
/*
 * Item
 */
.uk-accordion-default > :nth-child(n+2) {
  margin-top: 20px;
}
/* Active */
/*
 * Title
 */
/*
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Reset link
 */
.uk-accordion-default .uk-accordion-title {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 15px;
       column-gap: 15px;
  /* 3 */
  font-size: 1.25rem;
  line-height: 1.4;
  color: #333;
}
/* Hover */
.uk-accordion-default .uk-accordion-title:hover {
  color: #666;
  text-decoration: none;
}
/* Active */
/*
 * Icon
 */
.uk-accordion-default .uk-accordion-icon {
  flex: none;
  margin-right: auto;
  color: #666;
}
/*
 * Content
 */
.uk-accordion-default .uk-accordion-content {
  margin-top: 20px;
}
/* ========================================================================
   Component: Drop
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 */
.uk-drop {
  /* 1 */
  display: none;
  /* 2 */
  position: absolute;
  z-index: 1020;
  --uk-position-offset: 20px;
  --uk-position-viewport-offset: 15px;
  /* 3 */
  box-sizing: border-box;
  width: 300px;
}
/* Show */
.uk-drop.uk-open {
  display: block;
}
/* Grid modifiers
 ========================================================================== */
.uk-drop-stack .uk-drop-grid > * {
  width: 100% !important;
}
/* Parent icon
 ========================================================================== */
.uk-drop-parent-icon {
  margin-right: 0.25em;
  transition: transform 0.3s ease-out;
}
[aria-expanded="true"] > .uk-drop-parent-icon {
  transform: rotateX(180deg);
}
/* ========================================================================
   Component: Dropbar
 ========================================================================== */
/*
 * Adopts `uk-drop`
 * 1. Reset drop
 * 2. Style
 */
.uk-dropbar {
  --uk-position-offset: 0;
  --uk-position-shift-offset: 0;
  --uk-position-viewport-offset: 0;
  --uk-inverse: dark;
  /* 1 */
  width: auto;
  /* 2 */
  padding: 25px 15px 25px 15px;
  background: #fff;
  color: #666;
}
/*
 * Remove margin from the last-child
 */
.uk-dropbar > :last-child {
  margin-bottom: 0;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-dropbar {
    padding-right: 30px;
    padding-left: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-dropbar {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.uk-dropbar :focus-visible {
  outline-color: #333 !important;
}
/* Size modifier
 ========================================================================== */
.uk-dropbar-large {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Direction modifier
 ========================================================================== */
.uk-dropbar-top {
  box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05);
}
.uk-dropbar-bottom {
  box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05);
}
.uk-dropbar-right {
  box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05);
}
.uk-dropbar-left {
  box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05);
}
/* ========================================================================
   Component: Dropnav
 ========================================================================== */
/*
 * 1. Position
 * 2. Reset dropbar
 * 3. Width
 */
.uk-dropnav-dropbar {
  /* 1 */
  position: absolute;
  z-index: 980;
  /* 2 */
  padding: 0;
  /* 3 */
  right: 0;
  left: 0;
}
/* ========================================================================
   Component: Modal
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 */
.uk-modal {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1010;
  /* 3 */
  overflow-y: auto;
  /* 4 */
  padding: 15px 15px;
  /* 5 */
  background: rgba(0, 0, 0, 0.6);
  /* 6 */
  opacity: 0;
  transition: opacity 0.15s linear;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-modal {
    padding: 50px 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-modal {
    padding-right: 40px;
    padding-left: 40px;
  }
}
/*
 * Open
 */
.uk-modal.uk-open {
  opacity: 1;
}
/* Page
 ========================================================================== */
/*
 * Prevent scrollbars
 */
.uk-modal-page {
  overflow: hidden;
}
/* Dialog
 ========================================================================== */
/*
 * 1. Create position context for spinner and close button
 * 2. Dimensions
 * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
 * 4. Style
 * 5. Slide-in transition
 */
.uk-modal-dialog {
  /* 1 */
  position: relative;
  /* 2 */
  box-sizing: border-box;
  margin: 0 auto;
  width: 600px;
  /* 3 */
  max-width: 100% !important;
  /* 4 */
  background: #fff;
  /* 5 */
  opacity: 0;
  transform: translateY(-100px);
  transition: 0.3s linear;
  transition-property: opacity, transform;
}
/*
 * Open
 */
.uk-open > .uk-modal-dialog {
  opacity: 1;
  transform: translateY(0);
}
/* Size modifier
 ========================================================================== */
/*
 * Container size
 * Take the same size as the Container component
 */
.uk-modal-container .uk-modal-dialog {
  width: 1200px;
}
/*
 * Full size
 * 1. Remove padding and background from modal
 * 2. Reset all default declarations from modal dialog
 */
/* 1 */
.uk-modal-full {
  padding: 0;
  background: none;
}
/* 2 */
.uk-modal-full .uk-modal-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: translateY(0);
}
/* Sections
 ========================================================================== */
.uk-modal-body {
  display: flow-root;
  padding: 20px 20px;
}
.uk-modal-header {
  display: flow-root;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.uk-modal-footer {
  display: flow-root;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-modal-body {
    padding: 30px 30px;
  }
  .uk-modal-header {
    padding: 15px 30px;
  }
  .uk-modal-footer {
    padding: 15px 30px;
  }
}
/*
 * Remove margin from the last-child
 */
.uk-modal-body > :last-child,
.uk-modal-header > :last-child,
.uk-modal-footer > :last-child {
  margin-bottom: 0;
}
/* Title
 ========================================================================== */
.uk-modal-title {
  font-size: 2rem;
  line-height: 1.3;
}
/* Close
 * Adopts `uk-close`
 ========================================================================== */
[class*="uk-modal-close-"] {
  position: absolute;
  z-index: 1010;
  top: 10px;
  left: 10px;
  padding: 5px;
}
/*
 * Remove margin from adjacent element
 */
[class*="uk-modal-close-"]:first-child + * {
  margin-top: 0;
}
/*
 * Hover
 */
/*
 * Default
 */
/*
 * Outside
 * 1. Prevent scrollbar on small devices
 */
.uk-modal-close-outside {
  top: 0;
  /* 1 */
  left: -5px;
  transform: translate(0, -100%);
  color: #ffffff;
}
.uk-modal-close-outside:hover {
  color: #fff;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  /* 1 */
  .uk-modal-close-outside {
    left: 0;
    transform: translate(-100%, -100%);
  }
}
/*
 * Full
 */
.uk-modal-close-full {
  top: 0;
  left: 0;
  padding: 10px;
  background: #fff;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-modal-close-full {
    padding: 20px;
  }
}
/* ========================================================================
   Component: Slideshow
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slideshow {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}
/* Items
 ========================================================================== */
/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 * 5. Disable horizontal panning gestures
 */
.uk-slideshow-items {
  /* 1 */
  position: relative;
  z-index: 0;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  overflow: hidden;
  /* 4 */
  -webkit-touch-callout: none;
  /* 5 */
  touch-action: pan-y;
}
/* Item
 ========================================================================== */
/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `uk-cover`
 * 4. Optimize animation
 */
.uk-slideshow-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  right: 0;
  /* 2 */
  left: 0;
  bottom: 0;
  /* 3 */
  overflow: hidden;
  /* 4 */
  will-change: transform, opacity;
}
/*
 * Hide not active items
 */
.uk-slideshow-items > :not(.uk-active) {
  display: none;
}
/* ========================================================================
   Component: Slider
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slider {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}
/* Container
 ========================================================================== */
/*
 * 1. Fallback for Safari 15 and older
 * 2. Clip child elements
 *    `clip` prevents accidental scrolling through elements in slide getting focused
 *    `clip` also works in only one direction
 */
.uk-slider-container {
  /* 1 */
  overflow-x: hidden;
  /* 2 */
  overflow-x: clip;
}
/*
 * Widen container to prevent box-shadows from clipping, `large-box-shadow`
 */
.uk-slider-container-offset {
  margin-right: -25px;
  margin-left: -25px;
  padding-right: 25px;
  padding-left: 25px;
}
/* Items
 ========================================================================== */
/*
 * 1. Optimize animation
 * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
 * 3. Disable horizontal panning gestures
 */
.uk-slider-items {
  /* 1 */
  will-change: transform;
  /* 2 */
  position: relative;
  /* 3 */
  touch-action: pan-y;
}
/*
 * 1. Reset list style without interfering with grid
 * 2. Prevent displaying the callout information on iOS.
 */
.uk-slider-items:not(.uk-grid) {
  display: flex;
  /* 1 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 2 */
  -webkit-touch-callout: none;
}
.uk-slider-items.uk-grid {
  flex-wrap: nowrap;
}
/* Item
 ========================================================================== */
/*
 * 1. Let items take content dimensions (0 0 auto)
 *    `max-width` needed to keep image responsiveness and prevent content overflow
 * 2. Create position context
 */
.uk-slider-items > * {
  /* 1 */
  flex: none !important;
  box-sizing: border-box;
  max-width: 100%;
  /* 2 */
  position: relative;
}
/* ========================================================================
   Component: Sticky
 ========================================================================== */
/*
 * 1. Create position context so it's t the same like when fixed.
 * 2. Create stacking context already when not sticky to have the same context
*     for position set to `sticky` and `relative`
 * 2. More robust if padding and border are used and the sticky height is transitioned
 */
.uk-sticky {
  /* 1 */
  position: relative;
  /* 2 */
  z-index: 980;
  /* 3 */
  box-sizing: border-box;
}
.uk-sticky-fixed {
  margin: 0 !important;
}
/*
 * Faster animations
 */
.uk-sticky[class*="uk-animation-"] {
  animation-duration: 0.2s;
}
.uk-sticky.uk-animation-reverse {
  animation-duration: 0.2s;
}
/*
 * Placeholder
 * Make content clickable for sticky cover and reveal effects
 */
.uk-sticky-placeholder {
  pointer-events: none;
}
/* ========================================================================
   Component: Off-canvas
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 */
.uk-offcanvas {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
}
/*
 * Flip modifier
 */
.uk-offcanvas-flip .uk-offcanvas {
  left: 0;
  right: auto;
}
/* Bar
 ========================================================================== */
/*
 * 1. Set position
 * 2. Size and style
 * 3. Allow scrolling
 */
.uk-offcanvas-bar {
  --uk-inverse: light;
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  right: -270px;
  /* 2 */
  box-sizing: border-box;
  width: 270px;
  padding: 20px 20px;
  background: #222;
  /* 3 */
  overflow-y: auto;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-offcanvas-bar {
    right: -350px;
    width: 350px;
    padding: 30px 30px;
  }
}
/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
  right: auto;
  left: -270px;
}
/* Tablet landscape and bigger */
@media (min-width: 640px) {
  .uk-offcanvas-flip .uk-offcanvas-bar {
    left: -350px;
  }
}
/*
 * Open
 */
.uk-open > .uk-offcanvas-bar {
  right: 0;
}
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
  right: auto;
  left: 0;
}
/*
 * Slide Animation (Used in slide and push mode)
 */
.uk-offcanvas-bar-animation {
  transition: right 0.3s ease-out;
}
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
  transition-property: left;
}
/*
 * Reveal Animation
 * 1. Set position
 * 2. Clip the bar
 * 3. Animation
 * 4. Reset position
 */
.uk-offcanvas-reveal {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 2 */
  width: 0;
  overflow: hidden;
  /* 3 */
  transition: width 0.3s ease-out;
}
.uk-offcanvas-reveal .uk-offcanvas-bar {
  /* 4 */
  right: 0;
}
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
  /* 4 */
  right: auto;
  left: 0;
}
.uk-open > .uk-offcanvas-reveal {
  width: 270px;
}
/* Tablet landscape and bigger */
@media (min-width: 640px) {
  .uk-open > .uk-offcanvas-reveal {
    width: 350px;
  }
}
/*
 * Flip modifier
 */
.uk-offcanvas-flip .uk-offcanvas-reveal {
  left: 0;
  right: auto;
}
/* Close
 * Adopts `uk-close`
 ========================================================================== */
.uk-offcanvas-close {
  position: absolute;
  z-index: 1000;
  top: 5px;
  left: 5px;
  padding: 5px;
}
/* Tablet landscape and bigger */
@media (min-width: 640px) {
  .uk-offcanvas-close {
    top: 10px;
    left: 10px;
  }
}
/*
 * Remove margin from adjacent element
 */
.uk-offcanvas-close:first-child + * {
  margin-top: 0;
}
/* Overlay
 ========================================================================== */
/*
 * Overlay the whole page. Needed for the `::before`
 * 1. Using `100vw` so no modification is needed when off-canvas is flipped
 * 2. Allow for closing with swipe gesture on devices with pointer events.
 */
.uk-offcanvas-overlay {
  /* 1 */
  width: 100vw;
  /* 2 */
  touch-action: none;
}
/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */
.uk-offcanvas-overlay::before {
  /* 1 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  /* 2 */
  opacity: 0;
  transition: opacity 0.15s linear;
}
.uk-offcanvas-overlay.uk-open::before {
  opacity: 1;
}
/* Prevent scrolling
 ========================================================================== */
/*
 * Prevent horizontal scrollbar when the content is slide-out
 * Has to be on the `html` element too to make it work on the `body`
 * 1. `clip` is needed for `position: sticky` elements to keep their position
 */
.uk-offcanvas-page,
.uk-offcanvas-container {
  overflow-x: hidden;
  /* 1 */
  overflow-x: clip;
}
/* Container
 ========================================================================== */
/*
 * Prepare slide-out animation (Used in reveal and push mode)
 * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
 * lose their fixed state and behaves like `absolute` within a transformed container
 * 1. Provide a fixed width and prevent shrinking
 */
.uk-offcanvas-container {
  position: relative;
  right: 0;
  transition: right 0.3s ease-out;
  /* 1 */
  box-sizing: border-box;
  width: 100%;
}
/*
 * Activate slide-out animation
 */
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
  right: 270px;
}
.uk-offcanvas-flip.uk-offcanvas-container-animation {
  right: -270px;
}
/* Tablet landscape and bigger */
@media (min-width: 640px) {
  :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
    right: 350px;
  }
  .uk-offcanvas-flip.uk-offcanvas-container-animation {
    right: -350px;
  }
}
/* ========================================================================
   Component: Switcher
 ========================================================================== */
/*
 * Reset list
 */
.uk-switcher {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Items
 ========================================================================== */
/*
 * Hide not active items
 */
.uk-switcher > :not(.uk-active) {
  display: none;
}
/*
 * Remove margin from the last-child
 */
.uk-switcher > * > :last-child {
  margin-bottom: 0;
}
/* ========================================================================
   Component: Leader
 ========================================================================== */
.uk-leader {
  overflow: hidden;
}
/*
 * 1. Place element in text flow
 * 2. Never break into a new line
 * 3. Get a string back with as many repeating characters to fill the container
 * 4. Prevent wrapping. Overflowing characters will be clipped by the container
 */
.uk-leader-fill::after {
  /* 1 */
  display: inline-block;
  margin-right: 15px;
  /* 2 */
  width: 0;
  /* 3 */
  content: attr(data-fill);
  /* 4 */
  white-space: nowrap;
}
/*
 * Hide if media does not match
 */
.uk-leader-fill.uk-leader-hide::after {
  display: none;
}
/*
 * Pass fill character to JS
 */
:root {
  --uk-leader-fill-content: .;
}
/* ========================================================================
   Component: Notification
 ========================================================================== */
/*
 * 1. Set position
 * 2. Dimensions
 */
.uk-notification {
  /* 1 */
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1040;
  /* 2 */
  box-sizing: border-box;
  width: 350px;
}
/* Position modifiers
========================================================================== */
.uk-notification-top-left,
.uk-notification-bottom-left {
  right: auto;
  left: 10px;
}
.uk-notification-top-center,
.uk-notification-bottom-center {
  right: 50%;
  margin-right: -175px;
}
.uk-notification-bottom-right,
.uk-notification-bottom-left,
.uk-notification-bottom-center {
  top: auto;
  bottom: 10px;
}
/* Responsiveness
========================================================================== */
/* Phones portrait and smaller */
@media (max-width: 639px) {
  .uk-notification {
    right: 10px;
    left: 10px;
    width: auto;
    margin: 0;
  }
}
/* Message
========================================================================== */
.uk-notification-message {
  position: relative;
  padding: 15px;
  background: #f8f8f8;
  color: #666;
  font-size: 1.25rem;
  line-height: 1.4;
  cursor: pointer;
}
* + .uk-notification-message {
  margin-top: 10px;
}
/* Close
 * Adopts `uk-close`
 ========================================================================== */
.uk-notification-close {
  display: none;
  position: absolute;
  top: 20px;
  left: 15px;
}
.uk-notification-message:hover .uk-notification-close {
  display: block;
}
/* Style modifiers
 ========================================================================== */
/*
 * Primary
 */
.uk-notification-message-primary {
  color: #1e87f0;
}
/*
 * Success
 */
.uk-notification-message-success {
  color: #32d296;
}
/*
 * Warning
 */
.uk-notification-message-warning {
  color: #faa05a;
}
/*
 * Danger
 */
.uk-notification-message-danger {
  color: #f0506e;
}
/* ========================================================================
   Component: Tooltip
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Position
 * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
 * 4. Dimensions
 * 5. Style
 */
.uk-tooltip {
  /* 1 */
  display: none;
  /* 2 */
  position: absolute;
  z-index: 1030;
  --uk-position-offset: 10px;
  --uk-position-viewport-offset: 10;
  /* 3 */
  top: 0;
  /* 4 */
  box-sizing: border-box;
  max-width: 200px;
  padding: 3px 6px;
  /* 5 */
  background: #666;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
}
/* Show */
.uk-tooltip.uk-active {
  display: block;
}
/* ========================================================================
   Component: Sortable
 ========================================================================== */
.uk-sortable {
  position: relative;
}
/*
 * Remove margin from the last-child
 */
.uk-sortable > :last-child {
  margin-bottom: 0;
}
/* Drag
 ========================================================================== */
.uk-sortable-drag {
  position: fixed !important;
  z-index: 1050 !important;
  pointer-events: none;
}
/* Placeholder
 ========================================================================== */
.uk-sortable-placeholder {
  opacity: 0;
  pointer-events: none;
}
/* Empty modifier
 ========================================================================== */
.uk-sortable-empty {
  min-height: 50px;
}
/* Handle
 ========================================================================== */
/* Hover */
.uk-sortable-handle:hover {
  cursor: move;
}
/* ========================================================================
   Component: Countdown
 ========================================================================== */
.uk-countdown {
  margin: 0;
}
/* Item
 ========================================================================== */
/* Number
 ========================================================================== */
/*
 * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
 */
.uk-countdown-number {
  margin: 0;
  /* 1 */
  font-variant-numeric: tabular-nums;
}
/* Separator
 ========================================================================== */
.uk-countdown-separator {
  font-size: 0.5em;
  line-height: 2;
}
/* Label
 ========================================================================== */
/* ========================================================================
   Component: Thumbnav
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */
.uk-thumbnav {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  margin-right: -15px;
}
/*
 * Space is allocated based on content dimensions, but shrinks: 0 1 auto
 * 1. Gutter
 */
.uk-thumbnav > * {
  /* 1 */
  padding-right: 15px;
}
/* Items
 ========================================================================== */
/*
 * Items
 */
.uk-thumbnav > * > * {
  display: inline-block;
  position: relative;
}
.uk-thumbnav > * > *::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
  transition: opacity 0.1s ease-in-out;
}
/* Hover */
.uk-thumbnav > * > :hover::after {
  opacity: 0;
}
/* Active */
.uk-thumbnav > .uk-active > *::after {
  opacity: 0;
}
/* Modifier: 'uk-thumbnav-vertical'
 ========================================================================== */
/*
 * 1. Change direction
 * 2. Gutter
 */
.uk-thumbnav-vertical {
  /* 1 */
  flex-direction: column;
  /* 2 */
  margin-right: 0;
  margin-top: -15px;
}
/* 2 */
.uk-thumbnav-vertical > * {
  padding-right: 0;
  padding-top: 15px;
}
/* ========================================================================
   Component: Iconnav
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */
.uk-iconnav {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  margin-right: -10px;
}
/*
 * Space is allocated based on content dimensions, but shrinks: 0 1 auto
 * 1. Gutter
 */
.uk-iconnav > * {
  /* 1 */
  padding-right: 10px;
}
/* Items
 ========================================================================== */
/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * 1. Center content vertically if there is still some text
 * 2. Imitate white space gap when using flexbox
 * 3. Force text not to affect item height
 * 4. Style
 * 5. Required for `a` if there is still some text
 */
.uk-iconnav > * > a {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3 */
  line-height: 0;
  /* 4 */
  color: #999;
  /* 5 */
  text-decoration: none;
  font-size: 0.875rem;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}
/* Hover */
.uk-iconnav > * > a:hover {
  color: #666;
}
/* Active */
.uk-iconnav > .uk-active > a {
  color: #666;
}
/* Modifier: 'uk-iconnav-vertical'
 ========================================================================== */
/*
 * 1. Change direction
 * 2. Gutter
 */
.uk-iconnav-vertical {
  /* 1 */
  flex-direction: column;
  /* 2 */
  margin-right: 0;
  margin-top: -10px;
}
/* 2 */
.uk-iconnav-vertical > * {
  padding-right: 0;
  padding-top: 10px;
}
/* ========================================================================
   Component: Grid
 ========================================================================== */
/*
 * 1. Allow cells to wrap into the next line
 * 2. Reset list
 */
.uk-grid {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * Grid cell
 * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
 * Reset margin for e.g. paragraphs
 */
.uk-grid > * {
  margin: 0;
}
/*
 * Remove margin from the last-child
 */
.uk-grid > * > :last-child {
  margin-bottom: 0;
}
/* Gutter
 ========================================================================== */
/*
 * Default
 */
/* Horizontal */
.uk-grid {
  margin-right: -30px;
}
.uk-grid > * {
  padding-right: 30px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin {
  margin-top: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .uk-grid {
    margin-right: -40px;
  }
  .uk-grid > * {
    padding-right: 40px;
  }
  /* Vertical */
  .uk-grid + .uk-grid,
  .uk-grid > .uk-grid-margin,
  * + .uk-grid-margin {
    margin-top: 40px;
  }
}
/*
 * Small
 */
/* Horizontal */
.uk-grid-small,
.uk-grid-column-small {
  margin-right: -15px;
}
.uk-grid-small > *,
.uk-grid-column-small > * {
  padding-right: 15px;
}
/* Vertical */
.uk-grid + .uk-grid-small,
.uk-grid + .uk-grid-row-small,
.uk-grid-small > .uk-grid-margin,
.uk-grid-row-small > .uk-grid-margin,
* + .uk-grid-margin-small {
  margin-top: 15px;
}
/*
 * Medium
 */
/* Horizontal */
.uk-grid-medium,
.uk-grid-column-medium {
  margin-right: -30px;
}
.uk-grid-medium > *,
.uk-grid-column-medium > * {
  padding-right: 30px;
}
/* Vertical */
.uk-grid + .uk-grid-medium,
.uk-grid + .uk-grid-row-medium,
.uk-grid-medium > .uk-grid-margin,
.uk-grid-row-medium > .uk-grid-margin,
* + .uk-grid-margin-medium {
  margin-top: 30px;
}
/*
 * Large
 */
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large {
  margin-right: -40px;
}
.uk-grid-large > *,
.uk-grid-column-large > * {
  padding-right: 40px;
}
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large {
  margin-top: 40px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .uk-grid-large,
  .uk-grid-column-large {
    margin-right: -70px;
  }
  .uk-grid-large > *,
  .uk-grid-column-large > * {
    padding-right: 70px;
  }
  /* Vertical */
  .uk-grid + .uk-grid-large,
  .uk-grid + .uk-grid-row-large,
  .uk-grid-large > .uk-grid-margin,
  .uk-grid-row-large > .uk-grid-margin,
  * + .uk-grid-margin-large {
    margin-top: 70px;
  }
}
/*
 * Collapse
 */
/* Horizontal */
.uk-grid-collapse,
.uk-grid-column-collapse {
  margin-right: 0;
}
.uk-grid-collapse > *,
.uk-grid-column-collapse > * {
  padding-right: 0;
}
/* Vertical */
.uk-grid + .uk-grid-collapse,
.uk-grid + .uk-grid-row-collapse,
.uk-grid-collapse > .uk-grid-margin,
.uk-grid-row-collapse > .uk-grid-margin {
  margin-top: 0;
}
/* Divider
 ========================================================================== */
.uk-grid-divider > * {
  position: relative;
}
.uk-grid-divider > :not(.uk-first-column)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid #e5e5e5;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid #e5e5e5;
}
/*
 * Default
 */
/* Horizontal */
.uk-grid-divider {
  margin-right: -60px;
}
.uk-grid-divider > * {
  padding-right: 60px;
}
.uk-grid-divider > :not(.uk-first-column)::before {
  right: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
  margin-top: 60px;
}
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
  right: 60px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .uk-grid-divider {
    margin-right: -80px;
  }
  .uk-grid-divider > * {
    padding-right: 80px;
  }
  .uk-grid-divider > :not(.uk-first-column)::before {
    right: 40px;
  }
  /* Vertical */
  .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
    margin-top: 80px;
  }
  .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
    top: -40px;
    right: 80px;
  }
}
/*
 * Small
 */
/* Horizontal */
.uk-grid-divider.uk-grid-small,
.uk-grid-divider.uk-grid-column-small {
  margin-right: -30px;
}
.uk-grid-divider.uk-grid-small > *,
.uk-grid-divider.uk-grid-column-small > * {
  padding-right: 30px;
}
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
  right: 15px;
}
/* Vertical */
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
  margin-top: 30px;
}
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
  top: -15px;
  right: 30px;
}
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
  top: -15px;
}
.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
  right: 30px;
}
/*
 * Medium
 */
/* Horizontal */
.uk-grid-divider.uk-grid-medium,
.uk-grid-divider.uk-grid-column-medium {
  margin-right: -60px;
}
.uk-grid-divider.uk-grid-medium > *,
.uk-grid-divider.uk-grid-column-medium > * {
  padding-right: 60px;
}
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
  right: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
  margin-top: 60px;
}
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
  right: 60px;
}
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
  top: -30px;
}
.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
  right: 60px;
}
/*
 * Large
 */
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large {
  margin-right: -80px;
}
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * {
  padding-right: 80px;
}
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
  right: 40px;
}
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
  margin-top: 80px;
}
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
  top: -40px;
  right: 80px;
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
  top: -40px;
}
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
  right: 80px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .uk-grid-divider.uk-grid-large,
  .uk-grid-divider.uk-grid-column-large {
    margin-right: -140px;
  }
  .uk-grid-divider.uk-grid-large > *,
  .uk-grid-divider.uk-grid-column-large > * {
    padding-right: 140px;
  }
  .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
  .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
    right: 70px;
  }
  /* Vertical */
  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
  .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
    margin-top: 140px;
  }
  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
    top: -70px;
    right: 140px;
  }
  .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
    top: -70px;
  }
  .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
    right: 140px;
  }
}
/* Match child of a grid cell
 ========================================================================== */
/*
 * Behave like a block element
 * 1. Wrap into the next line
 * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
 * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
 */
.uk-grid-match > *,
.uk-grid-item-match {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
}
.uk-grid-match > * > :not([class*="uk-width"]),
.uk-grid-item-match > :not([class*="uk-width"]) {
  /* 2 */
  box-sizing: border-box;
  width: 100%;
  /* 3 */
  flex: auto;
}
/* ========================================================================
   Component: Nav
 ========================================================================== */
/*
 * Reset
 */
.uk-nav,
.uk-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Reset link
 */
.uk-nav li > a {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3*/
  text-decoration: none;
}
/*
 * Items
 * Must target `a` elements to exclude other elements (e.g. lists)
 */
.uk-nav > li > a {
  padding: 5px 0;
}
/* Sublists
 ========================================================================== */
/*
 * Level 2
 * `ul` needed for higher specificity to override padding
 */
ul.uk-nav-sub {
  padding: 5px 15px 5px 0;
}
/*
 * Level 3 and deeper
 */
.uk-nav-sub ul {
  padding-right: 15px;
}
/*
 * Items
 */
.uk-nav-sub a {
  padding: 2px 0;
}
/* Parent icon
 ========================================================================== */
.uk-nav-parent-icon {
  flex: none;
  margin-right: auto;
  transition: transform 0.3s ease-out;
}
.uk-nav > li.uk-open > a .uk-nav-parent-icon {
  transform: rotateX(180deg);
}
/* Header
 ========================================================================== */
.uk-nav-header {
  padding: 5px 0;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.uk-nav-header:not(:first-child) {
  margin-top: 20px;
}
/* Divider
 ========================================================================== */
.uk-nav .uk-nav-divider {
  margin: 5px 0;
}
/* Default modifier
 ========================================================================== */
.uk-nav-default {
  font-size: 0.875rem;
  line-height: 1.5;
}
/*
 * Items
 */
.uk-nav-default > li > a {
  color: #999;
}
/* Hover */
.uk-nav-default > li > a:hover {
  color: #666;
}
/* Active */
.uk-nav-default > li.uk-active > a {
  color: #333;
}
/*
 * Subtitle
 */
.uk-nav-default .uk-nav-subtitle {
  font-size: 12px;
}
/*
 * Header
 */
.uk-nav-default .uk-nav-header {
  color: #333;
}
/*
 * Divider
 */
.uk-nav-default .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}
/*
 * Sublists
 */
.uk-nav-default .uk-nav-sub {
  font-size: 0.875rem;
  line-height: 1.5;
}
.uk-nav-default .uk-nav-sub a {
  color: #999;
}
.uk-nav-default .uk-nav-sub a:hover {
  color: #666;
}
.uk-nav-default .uk-nav-sub li.uk-active > a {
  color: #333;
}
/* Primary modifier
 ========================================================================== */
.uk-nav-primary {
  font-size: 1.5rem;
  line-height: 1.5;
}
/*
 * Items
 */
.uk-nav-primary > li > a {
  color: #999;
}
/* Hover */
.uk-nav-primary > li > a:hover {
  color: #666;
}
/* Active */
.uk-nav-primary > li.uk-active > a {
  color: #333;
}
/*
 * Subtitle
 */
.uk-nav-primary .uk-nav-subtitle {
  font-size: 1.25rem;
}
/*
 * Header
 */
.uk-nav-primary .uk-nav-header {
  color: #333;
}
/*
 * Divider
 */
.uk-nav-primary .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}
/*
 * Sublists
 */
.uk-nav-primary .uk-nav-sub {
  font-size: 1.25rem;
  line-height: 1.5;
}
.uk-nav-primary .uk-nav-sub a {
  color: #999;
}
.uk-nav-primary .uk-nav-sub a:hover {
  color: #666;
}
.uk-nav-primary .uk-nav-sub li.uk-active > a {
  color: #333;
}
/* Secondary modifier
 ========================================================================== */
.uk-nav-secondary {
  font-size: 16px;
  line-height: 1.5;
}
.uk-nav-secondary > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
  margin-top: 0;
}
/*
 * Items
 */
.uk-nav-secondary > li > a {
  color: #333;
  padding: 10px 10px;
}
/* Hover */
.uk-nav-secondary > li > a:hover {
  color: #333;
  background-color: #f8f8f8;
}
/* Active */
.uk-nav-secondary > li.uk-active > a {
  color: #333;
  background-color: #f8f8f8;
}
/*
 * Subtitle
 */
.uk-nav-secondary .uk-nav-subtitle {
  font-size: 0.875rem;
  color: #999;
}
/* Hover */
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
  color: #666;
}
/* Active */
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
  color: #333;
}
/*
 * Header
 */
.uk-nav-secondary .uk-nav-header {
  color: #333;
}
/*
 * Divider
 */
.uk-nav-secondary .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}
/*
 * Sublists
 */
.uk-nav-secondary .uk-nav-sub {
  font-size: 0.875rem;
  line-height: 1.5;
}
.uk-nav-secondary .uk-nav-sub a {
  color: #999;
}
.uk-nav-secondary .uk-nav-sub a:hover {
  color: #666;
}
.uk-nav-secondary .uk-nav-sub li.uk-active > a {
  color: #333;
}
/* Size modifier
 ========================================================================== */
/*
 * Medium
 */
.uk-nav-medium {
  font-size: 2.8875rem;
  line-height: 1;
}
.uk-nav-large {
  font-size: 3.4rem;
  line-height: 1;
}
.uk-nav-xlarge {
  font-size: 4rem;
  line-height: 1;
}
/* Tablet Landscape and bigger */
@media (min-width: 960px) {
  .uk-nav-medium {
    font-size: 3.5rem;
  }
  .uk-nav-large {
    font-size: 4rem;
  }
  .uk-nav-xlarge {
    font-size: 6rem;
  }
}
/* Laptop and bigger */
@media (min-width: 1200px) {
  .uk-nav-medium {
    font-size: 4rem;
  }
  .uk-nav-large {
    font-size: 6rem;
  }
  .uk-nav-xlarge {
    font-size: 8rem;
  }
}
/* Alignment modifier
 ========================================================================== */
/*
 * 1. Center header
 * 2. Center items
 */
/* 1 */
.uk-nav-center {
  text-align: center;
}
/* 2 */
.uk-nav-center li > a {
  justify-content: center;
}
/* Sublists */
.uk-nav-center .uk-nav-sub,
.uk-nav-center .uk-nav-sub ul {
  padding-right: 0;
}
/* Parent icon  */
.uk-nav-center .uk-nav-parent-icon {
  margin-right: 0.25em;
}
/* Style modifier
 ========================================================================== */
/*
 * Divider
 * Naming is in plural to prevent conflicts with divider sub object.
 */
.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #e5e5e5;
}
/* ========================================================================
   Component: Navbar
 ========================================================================== */
/*
 * 1. Create position context to center navbar group
 */
.uk-navbar {
  display: flex;
  /* 1 */
  position: relative;
}
/* Container
 ========================================================================== */
.uk-navbar-container:not(.uk-navbar-transparent) {
  background: #f8f8f8;
}
/* Groups
 ========================================================================== */
/*
 * 1. Stretch height if a sibling's height is expanded by its content
 */
.uk-navbar-right,
.uk-navbar-left,
[class*="uk-navbar-center"] {
  display: flex;
  gap: 15px;
  /* 1 */
  align-items: stretch;
}
/*
 * Horizontal alignment
 * 1. Create position context for centered navbar with sub groups (left/right)
 * 2. Fix text wrapping if content is larger than 50% of the container.
 * 3. Needed for dropdowns because a new position context is created
 *    `z-index` must be smaller than off-canvas
 * 4. Stretch height if a sibling's height is expanded by its content
 * 5. Align sub groups for centered navbar
 */
.uk-navbar-left {
  margin-right: auto;
}
.uk-navbar-center:only-child {
  margin-right: auto;
  margin-left: auto;
  /* 1 */
  position: relative;
}
.uk-navbar-center:not(:only-child) {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  /* 2 */
  width: -moz-max-content;
  width: max-content;
  box-sizing: border-box;
  /* 3 */
  z-index: 990;
  /* 4 */
  height: 100%;
  align-items: stretch;
}
.uk-navbar-center-right,
.uk-navbar-center-left {
  /* 4 */
  height: 100%;
  /* 5 */
  position: absolute;
  top: 0;
}
.uk-navbar-center-right {
  left: calc(100% + 15px);
}
.uk-navbar-center-left {
  right: calc(100% + 15px);
}
[class*="uk-navbar-center-"] {
  width: -moz-max-content;
  width: max-content;
  box-sizing: border-box;
}
/* Nav
 ========================================================================== */
/*
 * 1. Stretch height if a sibling's height is expanded by its content
 * 2. Reset list
 */
.uk-navbar-nav {
  display: flex;
  gap: 15px;
  /* 1 */
  align-items: stretch;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * Allow items to wrap into the next line
 * Only not `absolute` positioned groups
 */
.uk-navbar-right,
.uk-navbar-left,
.uk-navbar-center:only-child {
  flex-wrap: wrap;
}
/*
 * Items
 * 1. Center content vertically and horizontally
 * 2. Imitate white space gap when using flexbox
 * 3. Dimensions
 * 4. Style
 * 5. Required for `a`
 */
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  /* 1 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3 */
  box-sizing: border-box;
  min-height: 80px;
  /* 4 */
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 5 */
  text-decoration: none;
}
/*
 * Nav items
 * 1. Stretch height if a sibling's height is expanded by its content
 * 2. Reset list
 */
.uk-navbar-nav > li > a {
  /* 1 */
  height: 100%;
  /* 2 */
  padding: 0 0;
  color: #999;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}
/*
 * Hover
 * Apply hover style also if dropdown is opened
 */
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"] {
  color: #666;
}
/* OnClick */
.uk-navbar-nav > li > a:active {
  color: #333;
}
/* Active */
.uk-navbar-nav > li.uk-active > a {
  color: #333;
}
/* Parent icon modifier
 ========================================================================== */
.uk-navbar-parent-icon {
  margin-right: 4px;
  transition: transform 0.3s ease-out;
}
.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon {
  transform: rotateX(180deg);
}
/* Item
 ========================================================================== */
.uk-navbar-item {
  padding: 0 0;
  color: #666;
}
/*
 * Remove margin from the last-child
 */
.uk-navbar-item > :last-child {
  margin-bottom: 0;
}
/* Toggle
 ========================================================================== */
.uk-navbar-toggle {
  padding: 0 0;
  color: #999;
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle[aria-expanded="true"] {
  color: #666;
  text-decoration: none;
}
/*
 * Icon
 * Adopts `uk-icon`
 */
/* Hover */
/* Subtitle
 ========================================================================== */
.uk-navbar-subtitle {
  font-size: 0.875rem;
}
/* Justify modifier
 ========================================================================== */
.uk-navbar-justify .uk-navbar-right,
.uk-navbar-justify .uk-navbar-left,
.uk-navbar-justify .uk-navbar-nav,
.uk-navbar-justify .uk-navbar-nav > li,
.uk-navbar-justify .uk-navbar-item,
.uk-navbar-justify .uk-navbar-toggle {
  flex-grow: 1;
}
/* Style modifiers
 ========================================================================== */
/* Dropdown
 ========================================================================== */
/*
 * Adopts `uk-drop`
 * 1. Set a default width
 * 2. Style
 */
.uk-navbar-dropdown {
  --uk-position-offset: 15px;
  --uk-position-shift-offset: 0;
  --uk-position-viewport-offset: 15px;
  --uk-inverse: dark;
  /* 1 */
  width: 200px;
  /* 2 */
  padding: 25px;
  background: #fff;
  color: #666;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}
/*
 * Remove margin from the last-child
 */
.uk-navbar-dropdown > :last-child {
  margin-bottom: 0;
}
.uk-navbar-dropdown :focus-visible {
  outline-color: #333 !important;
}
/*
 * Grid
 * Adopts `uk-grid`
 */
/* Gutter Horizontal */
.uk-navbar-dropdown .uk-drop-grid {
  margin-right: -30px;
}
.uk-navbar-dropdown .uk-drop-grid > * {
  padding-right: 30px;
}
/* Gutter Vertical */
.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin {
  margin-top: 30px;
}
/*
 * Width modifier
 */
.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
  width: 400px;
}
.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
  width: 600px;
}
.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
  width: 800px;
}
.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
  width: 1000px;
}
/*
 * Size modifier
 */
.uk-navbar-dropdown-large {
  --uk-position-shift-offset: 0;
  padding: 40px;
}
/*
 * Dropbar modifier
 * 1. Reset dropdown width to prevent to early shifting
 * 2. Reset style
 * 3. Padding
 */
.uk-navbar-dropdown-dropbar {
  /* 1 */
  width: auto;
  /* 2 */
  background: transparent;
  /* 3 */
  padding: 25px 0 25px 0;
  --uk-position-offset: 0;
  --uk-position-shift-offset: 0;
  --uk-position-viewport-offset: 15px;
  box-shadow: none;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-navbar-dropdown-dropbar {
    --uk-position-viewport-offset: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-navbar-dropdown-dropbar {
    --uk-position-viewport-offset: 40px;
  }
}
.uk-navbar-dropdown-dropbar-large {
  --uk-position-shift-offset: 0;
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Dropdown Nav
 * Adopts `uk-nav`
 ========================================================================== */
.uk-navbar-dropdown-nav {
  font-size: 0.875rem;
}
/*
 * Items
 */
.uk-navbar-dropdown-nav > li > a {
  color: #999;
}
/* Hover */
.uk-navbar-dropdown-nav > li > a:hover {
  color: #666;
}
/* Active */
.uk-navbar-dropdown-nav > li.uk-active > a {
  color: #333;
}
/*
 * Subtitle
 */
.uk-navbar-dropdown-nav .uk-nav-subtitle {
  font-size: 12px;
}
/*
 * Header
 */
.uk-navbar-dropdown-nav .uk-nav-header {
  color: #333;
}
/*
 * Divider
 */
.uk-navbar-dropdown-nav .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}
/*
 * Sublists
 */
.uk-navbar-dropdown-nav .uk-nav-sub a {
  color: #999;
}
.uk-navbar-dropdown-nav .uk-nav-sub a:hover {
  color: #666;
}
.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
  color: #333;
}
/* Dropbar
 ========================================================================== */
/*
 * Adopts `uk-dropnav-dropbar`
 */
.uk-navbar-container {
  transition: 0.1s ease-in-out;
  transition-property: background-color;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-navbar-right,
  .uk-navbar-left,
  [class*="uk-navbar-center"] {
    gap: 30px;
  }
  .uk-navbar-center-right {
    left: calc(100% + 30px);
  }
  .uk-navbar-center-left {
    right: calc(100% + 30px);
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-navbar-nav {
    gap: 30px;
  }
}
/* ========================================================================
   Component: Subnav
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Center items vertically if they have a different height
 * 3. Gutter
 * 4. Reset list
 */
.uk-subnav {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  align-items: center;
  /* 3 */
  margin-right: -20px;
  /* 4 */
  padding: 0;
  list-style: none;
}
/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */
.uk-subnav > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-right: 20px;
  /* 3 */
  position: relative;
}
/* Items
 ========================================================================== */
/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * Using `:first-child` instead of `a` to support `span` elements for text
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Style
 */
.uk-subnav > * > :first-child {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3 */
  color: #999;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}
/* Hover */
.uk-subnav > * > a:hover {
  color: #666;
  text-decoration: none;
}
/* Active */
.uk-subnav > .uk-active > a {
  color: #333;
}
/* Divider modifier
 ========================================================================== */
/*
 * Set gutter
 */
.uk-subnav-divider {
  margin-right: -41px;
}
/*
 * Align items and divider vertically
 */
.uk-subnav-divider > * {
  display: flex;
  align-items: center;
}
/*
 * Divider
 * 1. `nth-child` makes it also work without JS if it's only one row
 */
.uk-subnav-divider > ::before {
  content: "";
  height: 1.5em;
  margin-right: 0px;
  margin-left: 20px;
  border-right: 1px solid transparent;
}
/* 1 */
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  border-right-color: #e5e5e5;
}
/* Pill modifier
 ========================================================================== */
/*
 * Gutter
 */
.uk-subnav-pill {
  margin-right: -20px;
}
.uk-subnav-pill > * {
  padding-right: 20px;
}
.uk-subnav-pill > * > :first-child {
  padding: 5px 10px;
  background: transparent;
  color: #999;
}
/* Hover */
.uk-subnav-pill > * > a:hover {
  background-color: #f8f8f8;
  color: #666;
}
/* OnClick */
.uk-subnav-pill > * > a:active {
  background-color: #f8f8f8;
  color: #666;
}
/* Active */
.uk-subnav-pill > .uk-active > a {
  background-color: #1e87f0;
  color: #fff;
}
/* Disabled
 * The same for all style modifiers
 ========================================================================== */
.uk-subnav > .uk-disabled > :first-child {
  color: #999;
}
/* ========================================================================
   Component: Breadcrumb
 ========================================================================== */
/*
 * 1. Reset list
 * 2. Remove space between elements
 */
.uk-breadcrumb {
  /* 1 */
  padding: 0;
  list-style: none;
  /* 2 */
  font-size: 0;
}
/*
 * 1. Doesn't generate any box and replaced by child boxes
 */
.uk-breadcrumb > * {
  display: contents;
}
/* Items
 ========================================================================== */
.uk-breadcrumb > * > * {
  font-size: 0.875rem;
  color: #999;
}
/* Hover */
.uk-breadcrumb > * > :hover {
  color: #666;
  text-decoration: none;
}
/* Disabled */
/* Active */
.uk-breadcrumb > :last-child > span,
.uk-breadcrumb > :last-child > a:not([href]) {
  color: #666;
}
/*
 * Divider
 * `nth-child` makes it also work without JS if it's only one row
 * 1. Remove space between inline block elements.
 * 2. Style
 */
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  content: "/";
  display: inline-block;
  /* 1 */
  margin: 0 20px;
  /* 2 */
  font-size: 0.875rem;
  color: #999;
}
/* ========================================================================
   Component: Pagination
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Center items vertically if they have a different height
 * 3. Gutter
 * 4. Reset list
 */
.uk-pagination {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  align-items: center;
  /* 3 */
  margin-right: 0;
  /* 4 */
  padding: 0;
  list-style: none;
}
/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */
.uk-pagination > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-right: 0;
  /* 3 */
  position: relative;
}
/* Items
 ========================================================================== */
/*
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Style
 */
.uk-pagination > * > * {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3 */
  padding: 5px 10px;
  color: #999;
  transition: color 0.1s ease-in-out;
}
/* Hover */
.uk-pagination > * > :hover {
  color: #666;
  text-decoration: none;
}
/* Active */
.uk-pagination > .uk-active > * {
  color: #666;
}
/* Disabled */
.uk-pagination > .uk-disabled > * {
  color: #999;
}
/* ========================================================================
   Component: Tab
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Gutter
 * 3. Reset list
 */
.uk-tab {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin-right: -20px;
  /* 3 */
  padding: 0;
  list-style: none;
  position: relative;
}
.uk-tab::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 20px;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
}
/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */
.uk-tab > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-right: 20px;
  /* 3 */
  position: relative;
}
/* Items
 ========================================================================== */
/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Center content if a width is set
 * 4. Style
 */
.uk-tab > * > a {
  /* 1 */
  display: flex;
  align-items: center;
  /* 2 */
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  /* 3 */
  justify-content: center;
  /* 4 */
  padding: 5px 10px;
  color: #999;
  border-bottom: 1px solid transparent;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: color 0.1s ease-in-out;
}
/* Hover */
.uk-tab > * > a:hover {
  color: #666;
  text-decoration: none;
}
/* Active */
.uk-tab > .uk-active > a {
  color: #333;
  border-color: #1e87f0;
}
/* Disabled */
.uk-tab > .uk-disabled > a {
  color: #999;
}
/* Position modifier
 ========================================================================== */
/*
 * Bottom
 */
.uk-tab-bottom::before {
  top: 0;
  bottom: auto;
}
.uk-tab-bottom > * > a {
  border-top: 1px solid transparent;
  border-bottom: none;
}
/*
 * Left + Right
 * 1. Reset Gutter
 */
.uk-tab-right,
.uk-tab-left {
  flex-direction: column;
  /* 1 */
  margin-right: 0;
}
/* 1 */
.uk-tab-right > *,
.uk-tab-left > * {
  padding-right: 0;
}
.uk-tab-right::before {
  top: 0;
  bottom: 0;
  right: auto;
  left: 0;
  border-right: 1px solid #e5e5e5;
  border-bottom: none;
}
.uk-tab-left::before {
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  border-right: 1px solid #e5e5e5;
  border-bottom: none;
}
.uk-tab-right > * > a {
  justify-content: right;
  border-left: 1px solid transparent;
  border-bottom: none;
}
.uk-tab-left > * > a {
  justify-content: right;
  border-right: 1px solid transparent;
  border-bottom: none;
}
.uk-tab .uk-dropdown {
  margin-right: 30px;
}
/* ========================================================================
   Component: Slidenav
 ========================================================================== */
/*
 * Adopts `uk-icon`
 */
.uk-slidenav {
  padding: 5px 10px;
  color: rgba(102, 102, 102, 0.5);
  transition: color 0.1s ease-in-out;
}
/* Hover */
.uk-slidenav:hover {
  color: rgba(102, 102, 102, 0.9);
}
/* OnClick */
.uk-slidenav:active {
  color: rgba(102, 102, 102, 0.5);
}
/* Icon modifier
 ========================================================================== */
/*
 * Previous
 */
/*
 * Next
 */
/* Size modifier
 ========================================================================== */
.uk-slidenav-large {
  padding: 10px 10px;
}
/* Container
 ========================================================================== */
.uk-slidenav-container {
  display: flex;
}
/* ========================================================================
   Component: Dotnav
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */
.uk-dotnav {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  margin-right: -12px;
}
/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 */
.uk-dotnav > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-right: 12px;
}
/* Items
 ========================================================================== */
/*
 * Items
 * 1. Hide text if present
 */
.uk-dotnav > * > * {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  /* 1 */
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(102, 102, 102, 0.4);
  transition: 0.2s ease-in-out;
  transition-property: background-color, border-color;
}
/* Hover */
.uk-dotnav > * > :hover {
  background-color: rgba(102, 102, 102, 0.6);
  border-color: transparent;
}
/* OnClick */
.uk-dotnav > * > :active {
  background-color: rgba(102, 102, 102, 0.2);
  border-color: transparent;
}
/* Active */
.uk-dotnav > .uk-active > * {
  background-color: rgba(102, 102, 102, 0.6);
  border-color: transparent;
}
/* Modifier: 'uk-dotnav-vertical'
 ========================================================================== */
/*
 * 1. Change direction
 * 2. Gutter
 */
.uk-dotnav-vertical {
  /* 1 */
  flex-direction: column;
  /* 2 */
  margin-right: 0;
  margin-top: -12px;
}
/* 2 */
.uk-dotnav-vertical > * {
  padding-right: 0;
  padding-top: 12px;
}
/* ========================================================================
   Component: Dropdown
 ========================================================================== */
/*
 * Adopts `uk-drop`
 * 1. Reset drop and let text expand the width instead of wrapping
 * 2. Set a default width
 * 3. Style
 */
.uk-dropdown {
  --uk-position-offset: 10px;
  --uk-position-viewport-offset: 15px;
  --uk-inverse: dark;
  /* 1 */
  width: auto;
  /* 2 */
  min-width: 200px;
  /* 3 */
  padding: 25px;
  background: #fff;
  color: #666;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}
/*
 * Remove margin from the last-child
 */
.uk-dropdown > :last-child {
  margin-bottom: 0;
}
.uk-dropdown :focus-visible {
  outline-color: #333 !important;
}
/* Size modifier
 ========================================================================== */
.uk-dropdown-large {
  padding: 40px;
}
/* Dropbar modifier
 ========================================================================== */
/*
 * 1. Reset dropdown width to prevent to early shifting
 * 2. Reset style
 * 3. Padding
 */
.uk-dropdown-dropbar {
  --uk-position-offset: 10px;
  /* 1 */
  width: auto;
  /* 2 */
  background: transparent;
  /* 3 */
  padding: 5px 0 25px 0;
  --uk-position-viewport-offset: 15px;
  box-shadow: none;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-dropdown-dropbar {
    --uk-position-viewport-offset: 30px;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-dropdown-dropbar {
    --uk-position-viewport-offset: 40px;
  }
}
.uk-dropdown-dropbar-large {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Nav
 * Adopts `uk-nav`
 ========================================================================== */
.uk-dropdown-nav {
  font-size: 0.875rem;
}
/*
 * Items
 */
.uk-dropdown-nav > li > a {
  color: #999;
}
/* Hover + Active */
.uk-dropdown-nav > li > a:hover,
.uk-dropdown-nav > li.uk-active > a {
  color: #666;
}
/*
 * Subtitle
 */
.uk-dropdown-nav .uk-nav-subtitle {
  font-size: 12px;
}
/*
 * Header
 */
.uk-dropdown-nav .uk-nav-header {
  color: #333;
}
/*
 * Divider
 */
.uk-dropdown-nav .uk-nav-divider {
  border-top: 1px solid #e5e5e5;
}
/*
 * Sublists
 */
.uk-dropdown-nav .uk-nav-sub a {
  color: #999;
}
.uk-dropdown-nav .uk-nav-sub a:hover,
.uk-dropdown-nav .uk-nav-sub li.uk-active > a {
  color: #666;
}
/* ========================================================================
   Component: Lightbox
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 * 7. Prevent cancellation of pointer events while dragging
 */
.uk-lightbox {
  --uk-inverse: light;
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1010;
  /* 5 */
  background: #000;
  /* 6 */
  opacity: 0;
  transition: opacity 0.15s linear;
  /* 7 */
  touch-action: pinch-zoom;
}
/*
 * Open
 * 1. Center child
 * 2. Fade-in
 */
.uk-lightbox.uk-open {
  display: block;
  /* 2 */
  opacity: 1;
}
/*
 * Focus
 */
.uk-lightbox :focus-visible {
  outline-color: rgba(255, 255, 255, 0.7);
}
/* Page
 ========================================================================== */
/*
 * Prevent scrollbars
 */
.uk-lightbox-page {
  overflow: hidden;
}
/* Items
 ========================================================================== */
/*
 * Reset list
 */
.uk-lightbox-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * 1. Center child within the viewport
 * 2. Not visible by default
 * 3. Optimize animation
 * 4. Responsiveness
 *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
 */
.uk-lightbox-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* 2 */
  display: none;
  justify-content: center;
  align-items: flex-start;
  /* 3 */
  will-change: transform, opacity;
  /* 4 */
  overflow: auto;
}
/* 2 */
.uk-lightbox-items > .uk-active {
  display: flex;
}
.uk-lightbox-items-fit > * {
  align-items: center;
}
/* 4 */
.uk-lightbox-items-fit > * > * {
  max-width: 100vw;
  max-height: 100vh;
}
.uk-lightbox-items-fit > * > :not(iframe) {
  -o-object-fit: contain;
     object-fit: contain;
}
/* Zoom Cursor */
.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover {
  cursor: zoom-in;
}
.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover {
  cursor: zoom-out;
}
/* Navs
 ========================================================================== */
.uk-lightbox-thumbnav-vertical :where(img, video) {
  max-width: 100px;
}
.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) {
  max-height: 100px;
}
.uk-lightbox-thumbnav:empty,
.uk-lightbox-dotnav:empty {
  display: none;
}
/* Caption
 ========================================================================== */
.uk-lightbox-caption:empty {
  display: none;
}
.uk-lightbox-caption {
  padding: 10px 10px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
}
.uk-lightbox-caption > * {
  color: rgba(255, 255, 255, 0.7);
}
/* Counter
 ========================================================================== */
.uk-lightbox-counter:empty {
  display: none;
}
/* Iframe
 ========================================================================== */
.uk-lightbox-iframe {
  width: 80%;
  height: 80%;
}
/* ========================================================================
   Component: Animation
 ========================================================================== */
[class*="uk-animation-"] {
  animation: 0.5s ease-out both;
}
/* Animations
 ========================================================================== */
/*
 * Fade
 */
.uk-animation-fade {
  animation-name: uk-fade;
  animation-duration: 0.8s;
  animation-timing-function: linear;
}
/*
 * Scale
 */
.uk-animation-scale-up {
  animation-name: uk-fade, uk-scale-up;
}
.uk-animation-scale-down {
  animation-name: uk-fade, uk-scale-down;
}
/*
 * Slide
 */
.uk-animation-slide-top {
  animation-name: uk-fade, uk-slide-top;
}
.uk-animation-slide-bottom {
  animation-name: uk-fade, uk-slide-bottom;
}
.uk-animation-slide-right {
  animation-name: uk-fade, uk-slide-left;
}
.uk-animation-slide-left {
  animation-name: uk-fade, uk-slide-right;
}
/*
 * Slide Small
 */
.uk-animation-slide-top-small {
  animation-name: uk-fade, uk-slide-top-small;
}
.uk-animation-slide-bottom-small {
  animation-name: uk-fade, uk-slide-bottom-small;
}
.uk-animation-slide-right-small {
  animation-name: uk-fade, uk-slide-left-small;
}
.uk-animation-slide-left-small {
  animation-name: uk-fade, uk-slide-right-small;
}
/*
 * Slide Medium
 */
.uk-animation-slide-top-medium {
  animation-name: uk-fade, uk-slide-top-medium;
}
.uk-animation-slide-bottom-medium {
  animation-name: uk-fade, uk-slide-bottom-medium;
}
.uk-animation-slide-right-medium {
  animation-name: uk-fade, uk-slide-left-medium;
}
.uk-animation-slide-left-medium {
  animation-name: uk-fade, uk-slide-right-medium;
}
/*
 * Kenburns
 */
.uk-animation-kenburns {
  animation-name: uk-kenburns;
  animation-duration: 15s;
}
/*
 * Shake
 */
.uk-animation-shake {
  animation-name: uk-shake;
}
/*
 * SVG Stroke
 * The `--uk-animation-stroke` custom property contains the longest path length.
 * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
 * All strokes are animated by the same pace and doesn't end simultaneously.
 * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
 */
.uk-animation-stroke {
  animation-name: uk-stroke;
  animation-duration: 2s;
  stroke-dasharray: var(--uk-animation-stroke);
}
/* Direction modifier
 ========================================================================== */
.uk-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}
/* Duration modifier
 ========================================================================== */
.uk-animation-fast {
  animation-duration: 0.1s;
}
/* Toggle animation based on the State of the Parent Element
 ========================================================================== */
.uk-animation-toggle:not(:hover):not(:focus) [class*="uk-animation-"] {
  animation-name: none;
}
/* Keyframes used by animation classes
 ========================================================================== */
/*
 * Fade
 */
@keyframes uk-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 * Scale
 */
@keyframes uk-scale-up {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes uk-scale-down {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/*
 * Slide
 */
@keyframes uk-slide-top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * Slide Small
 */
@keyframes uk-slide-top-small {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom-small {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left-small {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right-small {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * Slide Medium
 */
@keyframes uk-slide-top-medium {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-bottom-medium {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes uk-slide-left-medium {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes uk-slide-right-medium {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * Kenburns
 */
@keyframes uk-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
/*
 * Shake
 */
@keyframes uk-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(9px);
  }
  20% {
    transform: translateX(-8px);
  }
  30% {
    transform: translateX(7px);
  }
  40% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  70% {
    transform: translateX(3px);
  }
  80% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(1px);
  }
}
/*
 * Stroke
 */
@keyframes uk-stroke {
  0% {
    stroke-dashoffset: var(--uk-animation-stroke);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* ========================================================================
   Component: Width
 ========================================================================== */
/* Equal child widths
 ========================================================================== */
[class*="uk-child-width"] > * {
  box-sizing: border-box;
  width: 100%;
}
.uk-child-width-1-2 > * {
  width: 50%;
}
.uk-child-width-1-3 > * {
  width: calc(100% / 3);
}
.uk-child-width-1-4 > * {
  width: 25%;
}
.uk-child-width-1-5 > * {
  width: 20%;
}
.uk-child-width-1-6 > * {
  width: calc(100% / 6);
}
.uk-child-width-auto > * {
  width: auto;
}
/*
 * 1. Reset the `min-width`, which is set to auto by default, because
 *    flex items won't shrink below their minimum intrinsic content size.
 *    Using `1px` instead of `0`, so items still wrap into the next line,
 *    if they have zero width and padding and the predecessor is 100% wide.
 */
.uk-child-width-expand > :not([class*="uk-width"]) {
  flex: 1;
  /* 1 */
  min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-child-width-1-1\@s > * {
    width: 100%;
  }
  .uk-child-width-1-2\@s > * {
    width: 50%;
  }
  .uk-child-width-1-3\@s > * {
    width: calc(100% / 3);
  }
  .uk-child-width-1-4\@s > * {
    width: 25%;
  }
  .uk-child-width-1-5\@s > * {
    width: 20%;
  }
  .uk-child-width-1-6\@s > * {
    width: calc(100% / 6);
  }
  .uk-child-width-auto\@s > * {
    width: auto;
  }
  .uk-child-width-expand\@s > :not([class*="uk-width"]) {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-child-width-1-1\@s > :not([class*="uk-width"]),
  .uk-child-width-1-2\@s > :not([class*="uk-width"]),
  .uk-child-width-1-3\@s > :not([class*="uk-width"]),
  .uk-child-width-1-4\@s > :not([class*="uk-width"]),
  .uk-child-width-1-5\@s > :not([class*="uk-width"]),
  .uk-child-width-1-6\@s > :not([class*="uk-width"]),
  .uk-child-width-auto\@s > :not([class*="uk-width"]) {
    flex: initial;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-child-width-1-1\@m > * {
    width: 100%;
  }
  .uk-child-width-1-2\@m > * {
    width: 50%;
  }
  .uk-child-width-1-3\@m > * {
    width: calc(100% / 3);
  }
  .uk-child-width-1-4\@m > * {
    width: 25%;
  }
  .uk-child-width-1-5\@m > * {
    width: 20%;
  }
  .uk-child-width-1-6\@m > * {
    width: calc(100% / 6);
  }
  .uk-child-width-auto\@m > * {
    width: auto;
  }
  .uk-child-width-expand\@m > :not([class*="uk-width"]) {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-child-width-1-1\@m > :not([class*="uk-width"]),
  .uk-child-width-1-2\@m > :not([class*="uk-width"]),
  .uk-child-width-1-3\@m > :not([class*="uk-width"]),
  .uk-child-width-1-4\@m > :not([class*="uk-width"]),
  .uk-child-width-1-5\@m > :not([class*="uk-width"]),
  .uk-child-width-1-6\@m > :not([class*="uk-width"]),
  .uk-child-width-auto\@m > :not([class*="uk-width"]) {
    flex: initial;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-child-width-1-1\@l > * {
    width: 100%;
  }
  .uk-child-width-1-2\@l > * {
    width: 50%;
  }
  .uk-child-width-1-3\@l > * {
    width: calc(100% / 3);
  }
  .uk-child-width-1-4\@l > * {
    width: 25%;
  }
  .uk-child-width-1-5\@l > * {
    width: 20%;
  }
  .uk-child-width-1-6\@l > * {
    width: calc(100% / 6);
  }
  .uk-child-width-auto\@l > * {
    width: auto;
  }
  .uk-child-width-expand\@l > :not([class*="uk-width"]) {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-child-width-1-1\@l > :not([class*="uk-width"]),
  .uk-child-width-1-2\@l > :not([class*="uk-width"]),
  .uk-child-width-1-3\@l > :not([class*="uk-width"]),
  .uk-child-width-1-4\@l > :not([class*="uk-width"]),
  .uk-child-width-1-5\@l > :not([class*="uk-width"]),
  .uk-child-width-1-6\@l > :not([class*="uk-width"]),
  .uk-child-width-auto\@l > :not([class*="uk-width"]) {
    flex: initial;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-child-width-1-1\@xl > * {
    width: 100%;
  }
  .uk-child-width-1-2\@xl > * {
    width: 50%;
  }
  .uk-child-width-1-3\@xl > * {
    width: calc(100% / 3);
  }
  .uk-child-width-1-4\@xl > * {
    width: 25%;
  }
  .uk-child-width-1-5\@xl > * {
    width: 20%;
  }
  .uk-child-width-1-6\@xl > * {
    width: calc(100% / 6);
  }
  .uk-child-width-auto\@xl > * {
    width: auto;
  }
  .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-child-width-1-1\@xl > :not([class*="uk-width"]),
  .uk-child-width-1-2\@xl > :not([class*="uk-width"]),
  .uk-child-width-1-3\@xl > :not([class*="uk-width"]),
  .uk-child-width-1-4\@xl > :not([class*="uk-width"]),
  .uk-child-width-1-5\@xl > :not([class*="uk-width"]),
  .uk-child-width-1-6\@xl > :not([class*="uk-width"]),
  .uk-child-width-auto\@xl > :not([class*="uk-width"]) {
    flex: initial;
  }
}
/* Single Widths
 ========================================================================== */
/*
 * 1. `max-width` is needed for the pixel-based classes
 */
[class*="uk-width"] {
  box-sizing: border-box;
  width: 100%;
  /* 1 */
  max-width: 100%;
}
/* Halves */
.uk-width-1-2 {
  width: 50%;
}
/* Thirds */
.uk-width-1-3 {
  width: calc(100% / 3);
}
.uk-width-2-3 {
  width: calc(200% / 3);
}
/* Quarters */
.uk-width-1-4 {
  width: 25%;
}
.uk-width-3-4 {
  width: 75%;
}
/* Fifths */
.uk-width-1-5 {
  width: 20%;
}
.uk-width-2-5 {
  width: 40%;
}
.uk-width-3-5 {
  width: 60%;
}
.uk-width-4-5 {
  width: 80%;
}
/* Sixths */
.uk-width-1-6 {
  width: calc(100% / 6);
}
.uk-width-5-6 {
  width: calc(500% / 6);
}
/* Pixel */
.uk-width-small {
  width: 150px;
}
.uk-width-medium {
  width: 300px;
}
.uk-width-large {
  width: 450px;
}
.uk-width-xlarge {
  width: 600px;
}
.uk-width-2xlarge {
  width: 750px;
}
/* Auto */
.uk-width-auto {
  width: auto;
}
/* Expand */
.uk-width-expand {
  flex: 1;
  min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  /* Whole */
  .uk-width-1-1\@s {
    width: 100%;
  }
  /* Halves */
  .uk-width-1-2\@s {
    width: 50%;
  }
  /* Thirds */
  .uk-width-1-3\@s {
    width: calc(100% / 3);
  }
  .uk-width-2-3\@s {
    width: calc(200% / 3);
  }
  /* Quarters */
  .uk-width-1-4\@s {
    width: 25%;
  }
  .uk-width-3-4\@s {
    width: 75%;
  }
  /* Fifths */
  .uk-width-1-5\@s {
    width: 20%;
  }
  .uk-width-2-5\@s {
    width: 40%;
  }
  .uk-width-3-5\@s {
    width: 60%;
  }
  .uk-width-4-5\@s {
    width: 80%;
  }
  /* Sixths */
  .uk-width-1-6\@s {
    width: calc(100% / 6);
  }
  .uk-width-5-6\@s {
    width: calc(500% / 6);
  }
  /* Pixel */
  .uk-width-small\@s {
    width: 150px;
  }
  .uk-width-medium\@s {
    width: 300px;
  }
  .uk-width-large\@s {
    width: 450px;
  }
  .uk-width-xlarge\@s {
    width: 600px;
  }
  .uk-width-2xlarge\@s {
    width: 750px;
  }
  /* Auto */
  .uk-width-auto\@s {
    width: auto;
  }
  /* Expand */
  .uk-width-expand\@s {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-width-1-1\@s,
  .uk-width-1-2\@s,
  .uk-width-1-3\@s,
  .uk-width-2-3\@s,
  .uk-width-1-4\@s,
  .uk-width-3-4\@s,
  .uk-width-1-5\@s,
  .uk-width-2-5\@s,
  .uk-width-3-5\@s,
  .uk-width-4-5\@s,
  .uk-width-1-6\@s,
  .uk-width-5-6\@s,
  .uk-width-small\@s,
  .uk-width-medium\@s,
  .uk-width-large\@s,
  .uk-width-xlarge\@s,
  .uk-width-2xlarge\@s,
  .uk-width-auto\@s {
    flex: initial;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  /* Whole */
  .uk-width-1-1\@m {
    width: 100%;
  }
  /* Halves */
  .uk-width-1-2\@m {
    width: 50%;
  }
  /* Thirds */
  .uk-width-1-3\@m {
    width: calc(100% / 3);
  }
  .uk-width-2-3\@m {
    width: calc(200% / 3);
  }
  /* Quarters */
  .uk-width-1-4\@m {
    width: 25%;
  }
  .uk-width-3-4\@m {
    width: 75%;
  }
  /* Fifths */
  .uk-width-1-5\@m {
    width: 20%;
  }
  .uk-width-2-5\@m {
    width: 40%;
  }
  .uk-width-3-5\@m {
    width: 60%;
  }
  .uk-width-4-5\@m {
    width: 80%;
  }
  /* Sixths */
  .uk-width-1-6\@m {
    width: calc(100% / 6);
  }
  .uk-width-5-6\@m {
    width: calc(500% / 6);
  }
  /* Pixel */
  .uk-width-small\@m {
    width: 150px;
  }
  .uk-width-medium\@m {
    width: 300px;
  }
  .uk-width-large\@m {
    width: 450px;
  }
  .uk-width-xlarge\@m {
    width: 600px;
  }
  .uk-width-2xlarge\@m {
    width: 750px;
  }
  /* Auto */
  .uk-width-auto\@m {
    width: auto;
  }
  /* Expand */
  .uk-width-expand\@m {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-width-1-1\@m,
  .uk-width-1-2\@m,
  .uk-width-1-3\@m,
  .uk-width-2-3\@m,
  .uk-width-1-4\@m,
  .uk-width-3-4\@m,
  .uk-width-1-5\@m,
  .uk-width-2-5\@m,
  .uk-width-3-5\@m,
  .uk-width-4-5\@m,
  .uk-width-1-6\@m,
  .uk-width-5-6\@m,
  .uk-width-small\@m,
  .uk-width-medium\@m,
  .uk-width-large\@m,
  .uk-width-xlarge\@m,
  .uk-width-2xlarge\@m,
  .uk-width-auto\@m {
    flex: initial;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Whole */
  .uk-width-1-1\@l {
    width: 100%;
  }
  /* Halves */
  .uk-width-1-2\@l {
    width: 50%;
  }
  /* Thirds */
  .uk-width-1-3\@l {
    width: calc(100% / 3);
  }
  .uk-width-2-3\@l {
    width: calc(200% / 3);
  }
  /* Quarters */
  .uk-width-1-4\@l {
    width: 25%;
  }
  .uk-width-3-4\@l {
    width: 75%;
  }
  /* Fifths */
  .uk-width-1-5\@l {
    width: 20%;
  }
  .uk-width-2-5\@l {
    width: 40%;
  }
  .uk-width-3-5\@l {
    width: 60%;
  }
  .uk-width-4-5\@l {
    width: 80%;
  }
  /* Sixths */
  .uk-width-1-6\@l {
    width: calc(100% / 6);
  }
  .uk-width-5-6\@l {
    width: calc(500% / 6);
  }
  /* Pixel */
  .uk-width-small\@l {
    width: 150px;
  }
  .uk-width-medium\@l {
    width: 300px;
  }
  .uk-width-large\@l {
    width: 450px;
  }
  .uk-width-xlarge\@l {
    width: 600px;
  }
  .uk-width-2xlarge\@l {
    width: 750px;
  }
  /* Auto */
  .uk-width-auto\@l {
    width: auto;
  }
  /* Expand */
  .uk-width-expand\@l {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-width-1-1\@l,
  .uk-width-1-2\@l,
  .uk-width-1-3\@l,
  .uk-width-2-3\@l,
  .uk-width-1-4\@l,
  .uk-width-3-4\@l,
  .uk-width-1-5\@l,
  .uk-width-2-5\@l,
  .uk-width-3-5\@l,
  .uk-width-4-5\@l,
  .uk-width-1-6\@l,
  .uk-width-5-6\@l,
  .uk-width-small\@l,
  .uk-width-medium\@l,
  .uk-width-large\@l,
  .uk-width-xlarge\@l,
  .uk-width-2xlarge\@l,
  .uk-width-auto\@l {
    flex: initial;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  /* Whole */
  .uk-width-1-1\@xl {
    width: 100%;
  }
  /* Halves */
  .uk-width-1-2\@xl {
    width: 50%;
  }
  /* Thirds */
  .uk-width-1-3\@xl {
    width: calc(100% / 3);
  }
  .uk-width-2-3\@xl {
    width: calc(200% / 3);
  }
  /* Quarters */
  .uk-width-1-4\@xl {
    width: 25%;
  }
  .uk-width-3-4\@xl {
    width: 75%;
  }
  /* Fifths */
  .uk-width-1-5\@xl {
    width: 20%;
  }
  .uk-width-2-5\@xl {
    width: 40%;
  }
  .uk-width-3-5\@xl {
    width: 60%;
  }
  .uk-width-4-5\@xl {
    width: 80%;
  }
  /* Sixths */
  .uk-width-1-6\@xl {
    width: calc(100% / 6);
  }
  .uk-width-5-6\@xl {
    width: calc(500% / 6);
  }
  /* Pixel */
  .uk-width-small\@xl {
    width: 150px;
  }
  .uk-width-medium\@xl {
    width: 300px;
  }
  .uk-width-large\@xl {
    width: 450px;
  }
  .uk-width-xlarge\@xl {
    width: 600px;
  }
  .uk-width-2xlarge\@xl {
    width: 750px;
  }
  /* Auto */
  .uk-width-auto\@xl {
    width: auto;
  }
  /* Expand */
  .uk-width-expand\@xl {
    flex: 1;
    min-width: 1px;
  }
  /* Reset expand */
  .uk-width-1-1\@xl,
  .uk-width-1-2\@xl,
  .uk-width-1-3\@xl,
  .uk-width-2-3\@xl,
  .uk-width-1-4\@xl,
  .uk-width-3-4\@xl,
  .uk-width-1-5\@xl,
  .uk-width-2-5\@xl,
  .uk-width-3-5\@xl,
  .uk-width-4-5\@xl,
  .uk-width-1-6\@xl,
  .uk-width-5-6\@xl,
  .uk-width-small\@xl,
  .uk-width-medium\@xl,
  .uk-width-large\@xl,
  .uk-width-xlarge\@xl,
  .uk-width-2xlarge\@xl,
  .uk-width-auto\@xl {
    flex: initial;
  }
}
/* Intrinsic Widths
 ========================================================================== */
.uk-width-fit-content {
  width: -moz-fit-content;
  width: fit-content;
}
.uk-width-max-content {
  width: -moz-max-content;
  width: max-content;
}
.uk-width-min-content {
  width: -moz-min-content;
  width: min-content;
}
/* ========================================================================
   Component: Height
 ========================================================================== */
[class*="uk-height"] {
  box-sizing: border-box;
}
/*
 * Only works if parent element has a height set
 */
.uk-height-1-1 {
  height: 100%;
}
/*
 * Useful to create image teasers
 */
.uk-height-viewport {
  min-height: 100vh;
}
.uk-height-viewport-2 {
  min-height: 200vh;
}
.uk-height-viewport-3 {
  min-height: 300vh;
}
.uk-height-viewport-4 {
  min-height: 400vh;
}
/*
 * Pixel
 * Useful for `overflow: auto`
 */
.uk-height-small {
  height: 150px;
}
.uk-height-medium {
  height: 300px;
}
.uk-height-large {
  height: 450px;
}
.uk-height-max-small {
  max-height: 150px;
}
.uk-height-max-medium {
  max-height: 300px;
}
.uk-height-max-large {
  max-height: 450px;
}
/* ========================================================================
   Component: Text
 ========================================================================== */
/* Style modifiers
 ========================================================================== */
.uk-text-lead {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;
}
.uk-text-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}
.uk-text-meta > a {
  color: #999;
}
.uk-text-meta > a:hover {
  color: #666;
  text-decoration: none;
}
/* Size modifiers
 ========================================================================== */
.uk-text-small {
  font-size: 0.875rem;
  line-height: 1.5;
}
.uk-text-large {
  font-size: 1.5rem;
  line-height: 1.5;
}
.uk-text-default {
  font-size: 16px;
  line-height: 1.5;
}
/* Weight modifier
 ========================================================================== */
.uk-text-light {
  font-weight: 300;
}
.uk-text-normal {
  font-weight: 400;
}
.uk-text-bold {
  font-weight: 700;
}
.uk-text-lighter {
  font-weight: lighter;
}
.uk-text-bolder {
  font-weight: bolder;
}
/* Style modifier
 ========================================================================== */
.uk-text-italic {
  font-style: italic;
}
/* Transform modifier
 ========================================================================== */
.uk-text-capitalize {
  text-transform: capitalize !important;
}
.uk-text-uppercase {
  text-transform: uppercase !important;
}
.uk-text-lowercase {
  text-transform: lowercase !important;
}
/* Decoration modifier
 ========================================================================== */
.uk-text-decoration-none {
  text-decoration: none !important;
}
/* Color modifiers
 ========================================================================== */
.uk-text-muted {
  color: #999 !important;
}
.uk-text-emphasis {
  color: #333 !important;
}
.uk-text-primary {
  color: #1e87f0 !important;
}
.uk-text-secondary {
  color: #222 !important;
}
.uk-text-success {
  color: #32d296 !important;
}
.uk-text-warning {
  color: #faa05a !important;
}
.uk-text-danger {
  color: #f0506e !important;
}
/* Background modifier
 ========================================================================== */
/*
 * 1. The background clips to the foreground text. Works in all browsers.
 * 2. Default color is set to transparent.
 * 3. Container fits the text
 * 4. Style
 */
.uk-text-background {
  /* 1 */
  -webkit-background-clip: text;
  /* 2 */
  color: transparent !important;
  /* 3 */
  display: inline-block;
  /* 4 */
  background-color: #1e87f0;
  background-image: linear-gradient(-90deg, #1e87f0 0%, #411ef0 100%);
}
/* Alignment modifiers
 ========================================================================== */
.uk-text-right {
  text-align: right !important;
}
.uk-text-left {
  text-align: left !important;
}
.uk-text-center {
  text-align: center !important;
}
.uk-text-justify {
  text-align: justify !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-text-right\@s {
    text-align: right !important;
  }
  .uk-text-left\@s {
    text-align: left !important;
  }
  .uk-text-center\@s {
    text-align: center !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-text-right\@m {
    text-align: right !important;
  }
  .uk-text-left\@m {
    text-align: left !important;
  }
  .uk-text-center\@m {
    text-align: center !important;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-text-right\@l {
    text-align: right !important;
  }
  .uk-text-left\@l {
    text-align: left !important;
  }
  .uk-text-center\@l {
    text-align: center !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-text-right\@xl {
    text-align: right !important;
  }
  .uk-text-left\@xl {
    text-align: left !important;
  }
  .uk-text-center\@xl {
    text-align: center !important;
  }
}
/*
 * Vertical
 */
.uk-text-top {
  vertical-align: top !important;
}
.uk-text-middle {
  vertical-align: middle !important;
}
.uk-text-bottom {
  vertical-align: bottom !important;
}
.uk-text-baseline {
  vertical-align: baseline !important;
}
/* Wrap modifiers
 ========================================================================== */
/*
 * Prevent text from wrapping onto multiple lines
 */
.uk-text-nowrap {
  white-space: nowrap;
}
/*
 * 1. Make sure a max-width is set after which truncation can occur
 * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
 * 3. Fix for table cells
 */
.uk-text-truncate {
  /* 1 */
  max-width: 100%;
  /* 2 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 2 */
th.uk-text-truncate,
td.uk-text-truncate {
  max-width: 0;
}
/*
 * Wrap long words onto the next line and break them if they are too long to fit.
 * 1. Make it work with table cells in all browsers.
 * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
 */
.uk-text-break {
  overflow-wrap: break-word;
}
/* 1 */
th.uk-text-break,
td.uk-text-break {
  word-break: break-word;
}
/* Stroke modifiers
 ========================================================================== */
.uk-text-stroke {
  -webkit-text-stroke: calc(1.4px + 0.002em);
  -webkit-text-fill-color: transparent;
}
/* ========================================================================
   Component: Column
 ========================================================================== */
[class*="uk-column-"] {
  -moz-column-gap: 30px;
       column-gap: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  [class*="uk-column-"] {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
/*
 * Fix image 1px line wrapping into the next column in Chrome
 */
[class*="uk-column-"] img {
  transform: translate3d(0, 0, 0);
}
/* Divider
 ========================================================================== */
/*
 * 1. Double the column gap
 */
.uk-column-divider {
  -moz-column-rule: 1px solid #e5e5e5;
       column-rule: 1px solid #e5e5e5;
  /* 1 */
  -moz-column-gap: 60px;
       column-gap: 60px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-column-divider {
    -moz-column-gap: 80px;
         column-gap: 80px;
  }
}
/* Width modifiers
 ========================================================================== */
.uk-column-1-2 {
  -moz-column-count: 2;
       column-count: 2;
}
.uk-column-1-3 {
  -moz-column-count: 3;
       column-count: 3;
}
.uk-column-1-4 {
  -moz-column-count: 4;
       column-count: 4;
}
.uk-column-1-5 {
  -moz-column-count: 5;
       column-count: 5;
}
.uk-column-1-6 {
  -moz-column-count: 6;
       column-count: 6;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-column-1-2\@s {
    -moz-column-count: 2;
         column-count: 2;
  }
  .uk-column-1-3\@s {
    -moz-column-count: 3;
         column-count: 3;
  }
  .uk-column-1-4\@s {
    -moz-column-count: 4;
         column-count: 4;
  }
  .uk-column-1-5\@s {
    -moz-column-count: 5;
         column-count: 5;
  }
  .uk-column-1-6\@s {
    -moz-column-count: 6;
         column-count: 6;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-column-1-2\@m {
    -moz-column-count: 2;
         column-count: 2;
  }
  .uk-column-1-3\@m {
    -moz-column-count: 3;
         column-count: 3;
  }
  .uk-column-1-4\@m {
    -moz-column-count: 4;
         column-count: 4;
  }
  .uk-column-1-5\@m {
    -moz-column-count: 5;
         column-count: 5;
  }
  .uk-column-1-6\@m {
    -moz-column-count: 6;
         column-count: 6;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-column-1-2\@l {
    -moz-column-count: 2;
         column-count: 2;
  }
  .uk-column-1-3\@l {
    -moz-column-count: 3;
         column-count: 3;
  }
  .uk-column-1-4\@l {
    -moz-column-count: 4;
         column-count: 4;
  }
  .uk-column-1-5\@l {
    -moz-column-count: 5;
         column-count: 5;
  }
  .uk-column-1-6\@l {
    -moz-column-count: 6;
         column-count: 6;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-column-1-2\@xl {
    -moz-column-count: 2;
         column-count: 2;
  }
  .uk-column-1-3\@xl {
    -moz-column-count: 3;
         column-count: 3;
  }
  .uk-column-1-4\@xl {
    -moz-column-count: 4;
         column-count: 4;
  }
  .uk-column-1-5\@xl {
    -moz-column-count: 5;
         column-count: 5;
  }
  .uk-column-1-6\@xl {
    -moz-column-count: 6;
         column-count: 6;
  }
}
/* Make element span across all columns
 * Does not work in Firefox yet
 ========================================================================== */
.uk-column-span {
  -moz-column-span: all;
       column-span: all;
}
/* ========================================================================
   Component: Cover
 ========================================================================== */
/*
 * Works with iframes and embedded content
 * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
 * 2. Reset responsiveness for embedded content
 * 3. Center object
 * Note: Percent values on the `top` property only works if this element
 *       is absolute positioned or if the container has a height
 */
/* 1 */
[uk-cover]:where(canvas, iframe, svg),
[data-uk-cover]:where(canvas, iframe, svg) {
  /* 2 */
  max-width: none;
  /* 3 */
  position: absolute;
  right: 50%;
  top: 50%;
  --uk-position-translate-x: 50%;
  --uk-position-translate-y: -50%;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
}
iframe[uk-cover],
iframe[data-uk-cover] {
  pointer-events: none;
}
[uk-cover]:where(img, video),
[data-uk-cover]:where(img, video) {
  /* 3 */
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
/* Container
 ========================================================================== */
/*
 * 1. Parent container which clips resized object
 * 2. Needed if the child is positioned absolute. See note above
 */
.uk-cover-container {
  /* 1 */
  overflow: hidden;
  /* 2 */
  position: relative;
}
/* ========================================================================
   Component: Background
 ========================================================================== */
/* Color
 ========================================================================== */
.uk-background-default {
  background-color: #fff;
}
.uk-background-muted {
  background-color: #f8f8f8;
}
.uk-background-primary {
  background-color: #1e87f0;
}
.uk-background-secondary {
  background-color: #222;
}
/* Size
 ========================================================================== */
.uk-background-cover,
.uk-background-contain,
.uk-background-width-1-1,
.uk-background-height-1-1 {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.uk-background-cover {
  background-size: cover;
}
.uk-background-contain {
  background-size: contain;
}
.uk-background-width-1-1 {
  background-size: 100%;
}
.uk-background-height-1-1 {
  background-size: auto 100%;
}
/* Position
 ========================================================================== */
.uk-background-top-right {
  background-position: 100% 0;
}
.uk-background-top-center {
  background-position: 50% 0;
}
.uk-background-top-left {
  background-position: 0% 0;
}
.uk-background-center-right {
  background-position: 100% 50%;
}
.uk-background-center-center {
  background-position: 50% 50%;
}
.uk-background-center-left {
  background-position: 0% 50%;
}
.uk-background-bottom-right {
  background-position: 100% 100%;
}
.uk-background-bottom-center {
  background-position: 50% 100%;
}
.uk-background-bottom-left {
  background-position: 0% 100%;
}
/* Repeat
 ========================================================================== */
.uk-background-norepeat {
  background-repeat: no-repeat;
}
/* Attachment
 ========================================================================== */
.uk-background-fixed {
  background-attachment: fixed;
}
/*
 * Exclude touch devices because `fixed` doesn't work on iOS and Android
 */
@media (pointer: coarse) {
  .uk-background-fixed {
    background-attachment: scroll;
  }
}
/* Image
 ========================================================================== */
/* Phone portrait and smaller */
@media (max-width: 639px) {
  .uk-background-image\@s {
    background-image: none !important;
  }
}
/* Phone landscape and smaller */
@media (max-width: 959px) {
  .uk-background-image\@m {
    background-image: none !important;
  }
}
/* Tablet landscape and smaller */
@media (max-width: 1199px) {
  .uk-background-image\@l {
    background-image: none !important;
  }
}
/* Desktop and smaller */
@media (max-width: 1599px) {
  .uk-background-image\@xl {
    background-image: none !important;
  }
}
/* Blend modes
 ========================================================================== */
.uk-background-blend-multiply {
  background-blend-mode: multiply;
}
.uk-background-blend-screen {
  background-blend-mode: screen;
}
.uk-background-blend-overlay {
  background-blend-mode: overlay;
}
.uk-background-blend-darken {
  background-blend-mode: darken;
}
.uk-background-blend-lighten {
  background-blend-mode: lighten;
}
.uk-background-blend-color-dodge {
  background-blend-mode: color-dodge;
}
.uk-background-blend-color-burn {
  background-blend-mode: color-burn;
}
.uk-background-blend-hard-light {
  background-blend-mode: hard-light;
}
.uk-background-blend-soft-light {
  background-blend-mode: soft-light;
}
.uk-background-blend-difference {
  background-blend-mode: difference;
}
.uk-background-blend-exclusion {
  background-blend-mode: exclusion;
}
.uk-background-blend-hue {
  background-blend-mode: hue;
}
.uk-background-blend-saturation {
  background-blend-mode: saturation;
}
.uk-background-blend-color {
  background-blend-mode: color;
}
.uk-background-blend-luminosity {
  background-blend-mode: luminosity;
}
/* ========================================================================
   Component: Align
 ========================================================================== */
/*
 * Default
 */
[class*="uk-align"] {
  display: block;
  margin-bottom: 30px;
}
* + [class*="uk-align"] {
  margin-top: 30px;
}
/*
 * Center
 */
.uk-align-center {
  margin-right: auto;
  margin-left: auto;
}
/*
 * Left/Right
 */
.uk-align-right {
  margin-top: 0;
  margin-left: 30px;
  float: right;
}
.uk-align-left {
  margin-top: 0;
  margin-right: 30px;
  float: left;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-align-right\@s {
    margin-top: 0;
    margin-left: 30px;
    float: right;
  }
  .uk-align-left\@s {
    margin-top: 0;
    margin-right: 30px;
    float: left;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-align-right\@m {
    margin-top: 0;
    margin-left: 30px;
    float: right;
  }
  .uk-align-left\@m {
    margin-top: 0;
    margin-right: 30px;
    float: left;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-align-right\@l {
    margin-top: 0;
    float: right;
  }
  .uk-align-left\@l {
    margin-top: 0;
    float: left;
  }
  .uk-align-right,
  .uk-align-right\@s,
  .uk-align-right\@m,
  .uk-align-right\@l {
    margin-left: 40px;
  }
  .uk-align-left,
  .uk-align-left\@s,
  .uk-align-left\@m,
  .uk-align-left\@l {
    margin-right: 40px;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-align-right\@xl {
    margin-top: 0;
    margin-left: 40px;
    float: right;
  }
  .uk-align-left\@xl {
    margin-top: 0;
    margin-right: 40px;
    float: left;
  }
}
/* ========================================================================
   Component: SVG
 ========================================================================== */
/*
 * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
 * 2. Set the fill and stroke color of all SVG elements to the current text color
 */
/* 1 */
.uk-svg,
.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
  fill: currentcolor;
}
.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
  stroke: currentcolor;
}
/*
 * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
 */
.uk-svg {
  transform: translate(0, 0);
}
/* ========================================================================
   Component: Utility
 ========================================================================== */
/* Panel
 ========================================================================== */
.uk-panel {
  display: flow-root;
  position: relative;
  box-sizing: border-box;
}
/*
 * Remove margin from the last-child
 */
.uk-panel > :last-child {
  margin-bottom: 0;
}
/*
 * Scrollable
 */
.uk-panel-scrollable {
  height: 170px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  overflow: auto;
  resize: both;
}
/* Clearfix
 ========================================================================== */
/*
 * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
 * 2. `table` is used again with `::after` because `clear` only works with block elements.
 * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
 */
/* 1 */
.uk-clearfix::before {
  content: "";
  display: table-cell;
}
/* 2 */
.uk-clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* Float
 ========================================================================== */
/*
 * 1. Prevent content overflow
 */
.uk-float-right {
  float: right;
}
.uk-float-left {
  float: left;
}
/* 1 */
[class*="uk-float-"] {
  max-width: 100%;
}
/* Overflow
 ========================================================================== */
.uk-overflow-hidden {
  overflow: hidden;
}
/*
 * Enable scrollbars if content is clipped
 */
.uk-overflow-auto {
  overflow: auto;
}
.uk-overflow-auto > :last-child {
  margin-bottom: 0;
}
/*
 * Overflow fade
 * 1. Overflow
 * 2. Mask
 * 3. Hide scrollbar
 */
@property --uk-overflow-fade-start-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --uk-overflow-fade-end-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.uk-overflow-fade-horizontal {
  overflow-x: auto;
  --uk-overflow-fade-direction: right;
}
.uk-overflow-fade-vertical {
  overflow-y: auto;
  --uk-overflow-fade-direction: bottom;
}
.uk-overflow-fade-horizontal,
.uk-overflow-fade-vertical {
  /* 1 */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* 2 */
  -webkit-mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)), #000 100px, #000 calc(100% - 100px), rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity)));
          mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)), #000 100px, #000 calc(100% - 100px), rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity)));
  /* 3 */
  scrollbar-width: none;
}
.uk-overflow-fade-horizontal > *,
.uk-overflow-fade-vertical > * {
  min-width: -moz-max-content;
  min-width: max-content;
}
/* Box Sizing
 ========================================================================== */
.uk-box-sizing-content {
  box-sizing: content-box;
}
.uk-box-sizing-border {
  box-sizing: border-box;
}
/* Resize
 ========================================================================== */
.uk-resize {
  resize: both;
}
.uk-resize-horizontal {
  resize: horizontal;
}
.uk-resize-vertical {
  resize: vertical;
}
/* Display
 ========================================================================== */
.uk-display-block {
  display: block !important;
}
.uk-display-inline {
  display: inline !important;
}
.uk-display-inline-block {
  display: inline-block !important;
}
/* Inline
 ========================================================================== */
/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Behave like most inline-block elements
 * 5. Force new layer without creating a new stacking context
 *    to fix 1px glitch when combined with overlays and transitions in Webkit
 * 6. Clip child elements
 */
[class*="uk-inline"] {
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  /* 3 */
  max-width: 100%;
  /* 4 */
  vertical-align: middle;
  /* 5 */
  -webkit-backface-visibility: hidden;
}
.uk-inline-clip {
  /* 6 */
  overflow: hidden;
}
/* Responsive objects
 ========================================================================== */
/*
 * Preserve original dimensions
 * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
 */
.uk-preserve-width,
.uk-preserve-width canvas,
.uk-preserve-width img,
.uk-preserve-width svg,
.uk-preserve-width video {
  max-width: none;
  -o-object-fit: fill;
     object-fit: fill;
}
/*
 * Responsiveness
 * Corrects `max-width` and `max-height` behavior if padding and border are used
 */
.uk-responsive-width,
.uk-responsive-height {
  box-sizing: border-box;
}
/*
 * 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
 * 2. Auto scale the height. Only needed if `height` attribute is present
 */
.uk-responsive-width {
  /* 1 */
  max-width: 100% !important;
  /* 2 */
  height: auto;
}
/*
 * 1. Set a maximum height. Only works if the parent element has a fixed height
 * 2. Auto scale the width. Only needed if `width` attribute is present
 * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
 */
.uk-responsive-height {
  /* 1 */
  max-height: 100%;
  /* 2 */
  width: auto;
  /* 3 */
  max-width: none;
}
/*
 * Fix initial iframe width. Without the viewport is expanded on iOS devices
 */
[uk-responsive],
[data-uk-responsive] {
  max-width: 100%;
}
/* Object
 ========================================================================== */
.uk-object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.uk-object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.uk-object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}
.uk-object-none {
  -o-object-fit: none;
     object-fit: none;
}
.uk-object-scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
/*
 * Position
 */
.uk-object-top-right {
  -o-object-position: 100% 0;
     object-position: 100% 0;
}
.uk-object-top-center {
  -o-object-position: 50% 0;
     object-position: 50% 0;
}
.uk-object-top-left {
  -o-object-position: 0% 0;
     object-position: 0% 0;
}
.uk-object-center-right {
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
}
.uk-object-center-center {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.uk-object-center-left {
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
}
.uk-object-bottom-right {
  -o-object-position: 100% 100%;
     object-position: 100% 100%;
}
.uk-object-bottom-center {
  -o-object-position: 50% 100%;
     object-position: 50% 100%;
}
.uk-object-bottom-left {
  -o-object-position: 0% 100%;
     object-position: 0% 100%;
}
/* Border
 ========================================================================== */
.uk-border-circle {
  border-radius: 50%;
}
.uk-border-pill {
  border-radius: 500px;
}
.uk-border-rounded {
  border-radius: 5px;
}
/*
 * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
 */
.uk-inline-clip[class*="uk-border-"] {
  -webkit-transform: translateZ(0);
}
/* Box-shadow
 ========================================================================== */
.uk-box-shadow-small {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.uk-box-shadow-medium {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-box-shadow-large {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.uk-box-shadow-xlarge {
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}
/*
 * Hover
 */
[class*="uk-box-shadow-hover"] {
  transition: box-shadow 0.1s ease-in-out;
}
.uk-box-shadow-hover-small:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.uk-box-shadow-hover-medium:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-box-shadow-hover-large:hover {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.uk-box-shadow-hover-xlarge:hover {
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}
/* Box-shadow bottom
 ========================================================================== */
/*
 * 1. Set position.
 * 2. Set style
 * 3. Fix shadow being clipped in Safari if container is animated
 */
@supports (filter: blur(0)) {
  .uk-box-shadow-bottom {
    display: inline-block;
    position: relative;
    z-index: 0;
    max-width: 100%;
    vertical-align: middle;
  }
  .uk-box-shadow-bottom::after {
    content: "";
    /* 1 */
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 0;
    z-index: -1;
    /* 2 */
    height: 30px;
    border-radius: 100%;
    background: #444;
    filter: blur(20px);
    /* 3 */
    will-change: filter;
  }
}
/* Drop cap
 ========================================================================== */
/*
 * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
 *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
 * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
 *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
 */
.uk-dropcap::first-letter,
.uk-dropcap > p:first-of-type::first-letter {
  display: block;
  margin-left: 10px;
  float: right;
  font-size: 4.5em;
  line-height: 1;
  margin-bottom: -2px;
}
/* 2 */
@-moz-document url-prefix() {
  .uk-dropcap::first-letter,
  .uk-dropcap > p:first-of-type::first-letter {
    margin-top: 1.1%;
  }
}
/* Logo
 ========================================================================== */
/*
 * 1. Style
 * 2. Required for `a`
 * 3. Behave like image but can be overridden through flex utility classes
 */
.uk-logo {
  /* 1 */
  font-size: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #333;
  /* 2 */
  text-decoration: none;
}
/* 3 */
:where(.uk-logo) {
  display: inline-block;
  vertical-align: middle;
}
/* Hover */
.uk-logo:hover {
  color: #333;
  /* 1 */
  text-decoration: none;
}
.uk-logo :where(img, svg, video) {
  display: block;
}
.uk-logo-inverse {
  display: none;
}
/* Disabled State
 ========================================================================== */
.uk-disabled {
  pointer-events: none;
}
/* Drag State
 ========================================================================== */
/*
 * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
 * 2. Fix dragging over iframes
 */
.uk-drag,
.uk-drag * {
  cursor: move;
}
/* 2 */
.uk-drag iframe {
  pointer-events: none;
}
/* Dragover State
 ========================================================================== */
/*
 * Create a box-shadow when dragging a file over the upload area
 */
.uk-dragover {
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
}
/* Blend modes
 ========================================================================== */
.uk-blend-multiply {
  mix-blend-mode: multiply;
}
.uk-blend-screen {
  mix-blend-mode: screen;
}
.uk-blend-overlay {
  mix-blend-mode: overlay;
}
.uk-blend-darken {
  mix-blend-mode: darken;
}
.uk-blend-lighten {
  mix-blend-mode: lighten;
}
.uk-blend-color-dodge {
  mix-blend-mode: color-dodge;
}
.uk-blend-color-burn {
  mix-blend-mode: color-burn;
}
.uk-blend-hard-light {
  mix-blend-mode: hard-light;
}
.uk-blend-soft-light {
  mix-blend-mode: soft-light;
}
.uk-blend-difference {
  mix-blend-mode: difference;
}
.uk-blend-exclusion {
  mix-blend-mode: exclusion;
}
.uk-blend-hue {
  mix-blend-mode: hue;
}
.uk-blend-saturation {
  mix-blend-mode: saturation;
}
.uk-blend-color {
  mix-blend-mode: color;
}
.uk-blend-luminosity {
  mix-blend-mode: luminosity;
}
/* Transform
========================================================================== */
.uk-transform-center {
  transform: translate(50%, -50%);
}
/* Transform Origin
========================================================================== */
.uk-transform-origin-top-right {
  transform-origin: 100% 0;
}
.uk-transform-origin-top-center {
  transform-origin: 50% 0;
}
.uk-transform-origin-top-left {
  transform-origin: 0% 0;
}
.uk-transform-origin-center-right {
  transform-origin: 100% 50%;
}
.uk-transform-origin-center-left {
  transform-origin: 0% 50%;
}
.uk-transform-origin-bottom-right {
  transform-origin: 100% 100%;
}
.uk-transform-origin-bottom-center {
  transform-origin: 50% 100%;
}
.uk-transform-origin-bottom-left {
  transform-origin: 0% 100%;
}
/* ========================================================================
   Component: Flex
 ========================================================================== */
.uk-flex {
  display: flex;
}
.uk-flex-inline {
  display: inline-flex;
}
/* Alignment
 ========================================================================== */
/*
 * Align items along the main axis of the current line of the flex container
 * Row: Horizontal
 */
.uk-flex-right {
  justify-content: flex-start;
}
.uk-flex-center {
  justify-content: center;
}
.uk-flex-left {
  justify-content: flex-end;
}
.uk-flex-between {
  justify-content: space-between;
}
.uk-flex-around {
  justify-content: space-around;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-right\@s {
    justify-content: flex-start;
  }
  .uk-flex-center\@s {
    justify-content: center;
  }
  .uk-flex-left\@s {
    justify-content: flex-end;
  }
  .uk-flex-between\@s {
    justify-content: space-between;
  }
  .uk-flex-around\@s {
    justify-content: space-around;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-right\@m {
    justify-content: flex-start;
  }
  .uk-flex-center\@m {
    justify-content: center;
  }
  .uk-flex-left\@m {
    justify-content: flex-end;
  }
  .uk-flex-between\@m {
    justify-content: space-between;
  }
  .uk-flex-around\@m {
    justify-content: space-around;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-right\@l {
    justify-content: flex-start;
  }
  .uk-flex-center\@l {
    justify-content: center;
  }
  .uk-flex-left\@l {
    justify-content: flex-end;
  }
  .uk-flex-between\@l {
    justify-content: space-between;
  }
  .uk-flex-around\@l {
    justify-content: space-around;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-right\@xl {
    justify-content: flex-start;
  }
  .uk-flex-center\@xl {
    justify-content: center;
  }
  .uk-flex-left\@xl {
    justify-content: flex-end;
  }
  .uk-flex-between\@xl {
    justify-content: space-between;
  }
  .uk-flex-around\@xl {
    justify-content: space-around;
  }
}
/*
 * Align items in the cross axis of the current line of the flex container
 * Row: Vertical
 */
.uk-flex-stretch {
  align-items: stretch;
}
.uk-flex-top {
  align-items: flex-start;
}
.uk-flex-middle {
  align-items: center;
}
.uk-flex-bottom {
  align-items: flex-end;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-stretch\@s {
    align-items: stretch;
  }
  .uk-flex-top\@s {
    align-items: flex-start;
  }
  .uk-flex-middle\@s {
    align-items: center;
  }
  .uk-flex-bottom\@s {
    align-items: flex-end;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-stretch\@m {
    align-items: stretch;
  }
  .uk-flex-top\@m {
    align-items: flex-start;
  }
  .uk-flex-middle\@m {
    align-items: center;
  }
  .uk-flex-bottom\@m {
    align-items: flex-end;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-stretch\@l {
    align-items: stretch;
  }
  .uk-flex-top\@l {
    align-items: flex-start;
  }
  .uk-flex-middle\@l {
    align-items: center;
  }
  .uk-flex-bottom\@l {
    align-items: flex-end;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-stretch\@xl {
    align-items: stretch;
  }
  .uk-flex-top\@xl {
    align-items: flex-start;
  }
  .uk-flex-middle\@xl {
    align-items: center;
  }
  .uk-flex-bottom\@xl {
    align-items: flex-end;
  }
}
/* Direction
 ========================================================================== */
.uk-flex-row {
  flex-direction: row;
}
.uk-flex-row-reverse {
  flex-direction: row-reverse;
}
.uk-flex-column {
  flex-direction: column;
}
.uk-flex-column-reverse {
  flex-direction: column-reverse;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-row\@s {
    flex-direction: row;
  }
  .uk-flex-column\@s {
    flex-direction: column;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-row\@m {
    flex-direction: row;
  }
  .uk-flex-column\@m {
    flex-direction: column;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-row\@l {
    flex-direction: row;
  }
  .uk-flex-column\@l {
    flex-direction: column;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-row\@xl {
    flex-direction: row;
  }
  .uk-flex-column\@xl {
    flex-direction: column;
  }
}
/* Wrap
 ========================================================================== */
.uk-flex-nowrap {
  flex-wrap: nowrap;
}
.uk-flex-wrap {
  flex-wrap: wrap;
}
.uk-flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
/*
 * Aligns items within the flex container when there is extra space in the cross-axis
 * Only works if there is more than one line of flex items
 */
.uk-flex-wrap-stretch {
  align-content: stretch;
}
.uk-flex-wrap-top {
  align-content: flex-start;
}
.uk-flex-wrap-middle {
  align-content: center;
}
.uk-flex-wrap-bottom {
  align-content: flex-end;
}
.uk-flex-wrap-between {
  align-content: space-between;
}
.uk-flex-wrap-around {
  align-content: space-around;
}
/* Item ordering
 ========================================================================== */
/*
 * Default is 0
 */
.uk-flex-first {
  order: -1;
}
.uk-flex-last {
  order: 99;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-first\@s {
    order: -1;
  }
  .uk-flex-last\@s {
    order: 99;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-first\@m {
    order: -1;
  }
  .uk-flex-last\@m {
    order: 99;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-first\@l {
    order: -1;
  }
  .uk-flex-last\@l {
    order: 99;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-first\@xl {
    order: -1;
  }
  .uk-flex-last\@xl {
    order: 99;
  }
}
/* Item dimensions
 ========================================================================== */
/*
 * Initial: 0 1 auto
 * Content dimensions, but shrinks
 */
.uk-flex-initial {
  flex: initial;
}
/*
 * No Flex: 0 0 auto
 * Content dimensions
 */
.uk-flex-none {
  flex: none;
}
/*
 * Relative Flex: 1 1 auto
 * Space is allocated considering content
 */
.uk-flex-auto {
  flex: auto;
}
/*
 * Absolute Flex: 1 1 0%
 * Space is allocated solely based on flex
 */
.uk-flex-1 {
  flex: 1;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-initial\@s {
    flex: initial;
  }
  .uk-flex-none\@s {
    flex: none;
  }
  .uk-flex-1\@s {
    flex: 1;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-initial\@m {
    flex: initial;
  }
  .uk-flex-none\@m {
    flex: none;
  }
  .uk-flex-1\@m {
    flex: 1;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-initial\@l {
    flex: initial;
  }
  .uk-flex-none\@l {
    flex: none;
  }
  .uk-flex-1\@l {
    flex: 1;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-initial\@xl {
    flex: initial;
  }
  .uk-flex-none\@xl {
    flex: none;
  }
  .uk-flex-1\@xl {
    flex: 1;
  }
}
/* ========================================================================
   Component: Margin
 ========================================================================== */
/*
 * Default
 */
.uk-margin {
  margin-bottom: 20px;
}
* + .uk-margin {
  margin-top: 20px !important;
}
.uk-margin-top {
  margin-top: 20px !important;
}
.uk-margin-bottom {
  margin-bottom: 20px !important;
}
.uk-margin-right {
  margin-right: 20px !important;
}
.uk-margin-left {
  margin-left: 20px !important;
}
/* XSmall
 ========================================================================== */
.uk-margin-xsmall {
  margin-bottom: 5px;
}
* + .uk-margin-xsmall {
  margin-top: 5px !important;
}
.uk-margin-xsmall-top {
  margin-top: 5px !important;
}
.uk-margin-xsmall-bottom {
  margin-bottom: 5px !important;
}
.uk-margin-xsmall-right {
  margin-right: 5px !important;
}
.uk-margin-xsmall-left {
  margin-left: 5px !important;
}
/* Small
 ========================================================================== */
.uk-margin-small {
  margin-bottom: 10px;
}
* + .uk-margin-small {
  margin-top: 10px !important;
}
.uk-margin-small-top {
  margin-top: 10px !important;
}
.uk-margin-small-bottom {
  margin-bottom: 10px !important;
}
.uk-margin-small-right {
  margin-right: 10px !important;
}
.uk-margin-small-left {
  margin-left: 10px !important;
}
/* Medium
 ========================================================================== */
.uk-margin-medium {
  margin-bottom: 40px;
}
* + .uk-margin-medium {
  margin-top: 40px !important;
}
.uk-margin-medium-top {
  margin-top: 40px !important;
}
.uk-margin-medium-bottom {
  margin-bottom: 40px !important;
}
.uk-margin-medium-right {
  margin-right: 40px !important;
}
.uk-margin-medium-left {
  margin-left: 40px !important;
}
/* Large
 ========================================================================== */
.uk-margin-large {
  margin-bottom: 40px;
}
* + .uk-margin-large {
  margin-top: 40px !important;
}
.uk-margin-large-top {
  margin-top: 40px !important;
}
.uk-margin-large-bottom {
  margin-bottom: 40px !important;
}
.uk-margin-large-right {
  margin-right: 40px !important;
}
.uk-margin-large-left {
  margin-left: 40px !important;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-margin-large {
    margin-bottom: 70px;
  }
  * + .uk-margin-large {
    margin-top: 70px !important;
  }
  .uk-margin-large-top {
    margin-top: 70px !important;
  }
  .uk-margin-large-bottom {
    margin-bottom: 70px !important;
  }
  .uk-margin-large-right {
    margin-right: 70px !important;
  }
  .uk-margin-large-left {
    margin-left: 70px !important;
  }
}
/* XLarge
 ========================================================================== */
.uk-margin-xlarge {
  margin-bottom: 70px;
}
* + .uk-margin-xlarge {
  margin-top: 70px !important;
}
.uk-margin-xlarge-top {
  margin-top: 70px !important;
}
.uk-margin-xlarge-bottom {
  margin-bottom: 70px !important;
}
.uk-margin-xlarge-right {
  margin-right: 70px !important;
}
.uk-margin-xlarge-left {
  margin-left: 70px !important;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-margin-xlarge {
    margin-bottom: 140px;
  }
  * + .uk-margin-xlarge {
    margin-top: 140px !important;
  }
  .uk-margin-xlarge-top {
    margin-top: 140px !important;
  }
  .uk-margin-xlarge-bottom {
    margin-bottom: 140px !important;
  }
  .uk-margin-xlarge-right {
    margin-right: 140px !important;
  }
  .uk-margin-xlarge-left {
    margin-left: 140px !important;
  }
}
/* Auto
 ========================================================================== */
.uk-margin-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}
.uk-margin-auto-top {
  margin-top: auto !important;
}
.uk-margin-auto-bottom {
  margin-bottom: auto !important;
}
.uk-margin-auto-right {
  margin-right: auto !important;
}
.uk-margin-auto-left {
  margin-left: auto !important;
}
.uk-margin-auto-vertical {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-margin-auto\@s {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .uk-margin-auto-right\@s {
    margin-right: auto !important;
  }
  .uk-margin-auto-left\@s {
    margin-left: auto !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-margin-auto\@m {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .uk-margin-auto-right\@m {
    margin-right: auto !important;
  }
  .uk-margin-auto-left\@m {
    margin-left: auto !important;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-margin-auto\@l {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .uk-margin-auto-right\@l {
    margin-right: auto !important;
  }
  .uk-margin-auto-left\@l {
    margin-left: auto !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-margin-auto\@xl {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .uk-margin-auto-right\@xl {
    margin-right: auto !important;
  }
  .uk-margin-auto-left\@xl {
    margin-left: auto !important;
  }
}
/* Remove
 ========================================================================== */
.uk-margin-remove {
  margin: 0 !important;
}
.uk-margin-remove-top {
  margin-top: 0 !important;
}
.uk-margin-remove-bottom {
  margin-bottom: 0 !important;
}
.uk-margin-remove-right {
  margin-right: 0 !important;
}
.uk-margin-remove-left {
  margin-left: 0 !important;
}
.uk-margin-remove-vertical {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.uk-margin-remove-adjacent + *,
.uk-margin-remove-first-child > :first-child {
  margin-top: 0 !important;
}
.uk-margin-remove-last-child > :last-child {
  margin-bottom: 0 !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-margin-remove-right\@s {
    margin-right: 0 !important;
  }
  .uk-margin-remove-left\@s {
    margin-left: 0 !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-margin-remove-right\@m {
    margin-right: 0 !important;
  }
  .uk-margin-remove-left\@m {
    margin-left: 0 !important;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-margin-remove-right\@l {
    margin-right: 0 !important;
  }
  .uk-margin-remove-left\@l {
    margin-left: 0 !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-margin-remove-right\@xl {
    margin-right: 0 !important;
  }
  .uk-margin-remove-left\@xl {
    margin-left: 0 !important;
  }
}
/* ========================================================================
   Component: Padding
 ========================================================================== */
.uk-padding {
  padding: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-padding {
    padding: 40px;
  }
}
/* Small
 ========================================================================== */
.uk-padding-small {
  padding: 15px;
}
/* Large
 ========================================================================== */
.uk-padding-large {
  padding: 40px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-padding-large {
    padding: 70px;
  }
}
/* Remove
 ========================================================================== */
.uk-padding-remove {
  padding: 0 !important;
}
.uk-padding-remove-top {
  padding-top: 0 !important;
}
.uk-padding-remove-bottom {
  padding-bottom: 0 !important;
}
.uk-padding-remove-right {
  padding-right: 0 !important;
}
.uk-padding-remove-left {
  padding-left: 0 !important;
}
.uk-padding-remove-vertical {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.uk-padding-remove-horizontal {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
/* ========================================================================
   Component: Position
 ========================================================================== */
:root {
  --uk-position-margin-offset: 0px;
}
/* Directions
 ========================================================================== */
/*
 * 1. Prevent content overflow.
 */
[class*="uk-position-top"],
[class*="uk-position-bottom"],
[class*="uk-position-right"],
[class*="uk-position-left"],
[class*="uk-position-center"] {
  position: absolute !important;
  /* 1 */
  max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
  box-sizing: border-box;
}
/*
 * Edges
 * Don't use `width: 100%` because it's wrong if the parent has padding.
 */
.uk-position-top {
  top: 0;
  right: 0;
  left: 0;
}
.uk-position-bottom {
  bottom: 0;
  right: 0;
  left: 0;
}
.uk-position-right {
  top: 0;
  bottom: 0;
  right: 0;
}
.uk-position-left {
  top: 0;
  bottom: 0;
  left: 0;
}
/*
 * Corners
 */
.uk-position-top-right {
  top: 0;
  right: 0;
}
.uk-position-top-left {
  top: 0;
  left: 0;
}
.uk-position-bottom-right {
  bottom: 0;
  right: 0;
}
.uk-position-bottom-left {
  bottom: 0;
  left: 0;
}
/*
 * Center
 * 1. Fix text wrapping if content is larger than 50% of the container.
 *    Using `max-content` requires `max-width` of 100% which is set generally.
 */
.uk-position-center {
  top: calc(50% - var(--uk-position-margin-offset));
  right: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-x: 50%;
  --uk-position-translate-y: -50%;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
  /* 1 */
  width: -moz-max-content;
  width: max-content;
}
/* Vertical */
[class*="uk-position-center-right"],
[class*="uk-position-center-left"],
.uk-position-center-vertical {
  top: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-y: -50%;
  transform: translate(0, var(--uk-position-translate-y));
}
.uk-position-center-right {
  right: 0;
}
.uk-position-center-left {
  left: 0;
}
.uk-position-center-vertical {
  right: 0;
  left: 0;
}
.uk-position-center-right-out {
  left: 100%;
  width: -moz-max-content;
  width: max-content;
}
.uk-position-center-left-out {
  right: 100%;
  width: -moz-max-content;
  width: max-content;
}
/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center,
.uk-position-center-horizontal {
  right: calc(50% - var(--uk-position-margin-offset));
  --uk-position-translate-x: 50%;
  transform: translate(var(--uk-position-translate-x), 0);
  /* 1 */
  width: -moz-max-content;
  width: max-content;
}
.uk-position-top-center {
  top: 0;
}
.uk-position-bottom-center {
  bottom: 0;
}
.uk-position-center-horizontal {
  top: 0;
  bottom: 0;
}
/*
 * Cover
 */
.uk-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
/* Margin
 ========================================================================== */
.uk-position-small {
  margin: 15px;
  --uk-position-margin-offset: 15px;
}
.uk-position-medium {
  margin: 30px;
  --uk-position-margin-offset: 30px;
}
.uk-position-large {
  margin: 30px;
  --uk-position-margin-offset: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-position-large {
    margin: 50px;
    --uk-position-margin-offset: 50px;
  }
}
/* Schemes
 ========================================================================== */
.uk-position-relative {
  position: relative  !important;
}
.uk-position-absolute {
  position: absolute  !important;
}
.uk-position-fixed {
  position: fixed  !important;
}
.uk-position-sticky {
  position: sticky  !important;
}
/* Layer
 ========================================================================== */
.uk-position-z-index {
  z-index: 1;
}
.uk-position-z-index-zero {
  z-index: 0;
}
.uk-position-z-index-negative {
  z-index: -1;
}
.uk-position-z-index-high {
  z-index: 990;
}
.uk-position-z-index-highest {
  z-index: 1060;
}
/* ========================================================================
   Component: Transition
 ========================================================================== */
/* Transitions
 ========================================================================== */
/*
 * The toggle is triggered on touch devices by two methods:
 * 1. Using `:focus` and tabindex
 * 2. Using `:hover` and a `touchstart` event listener registered on the document
 *    (Doesn't work on Surface touch devices)
 */
:where(.uk-transition-fade),
:where([class*="uk-transition-scale"]),
:where([class*="uk-transition-slide"]) {
  --uk-position-translate-x: 0;
  --uk-position-translate-y: 0;
}
.uk-transition-fade,
[class*="uk-transition-scale"],
[class*="uk-transition-slide"] {
  --uk-translate-x: 0;
  --uk-translate-y: 0;
  --uk-scale-x: 1;
  --uk-scale-y: 1;
  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)) translate(var(--uk-translate-x), var(--uk-translate-y)) scale(var(--uk-scale-x), var(--uk-scale-y));
  transition: 0.3s ease-out;
  transition-property: opacity, transform, filter;
  opacity: 0;
}
/*
 * Fade
 */
.uk-transition-toggle:hover .uk-transition-fade,
.uk-transition-toggle:focus .uk-transition-fade,
.uk-transition-toggle:focus-within .uk-transition-fade,
.uk-transition-active.uk-active .uk-transition-fade {
  opacity: 1;
}
/*
 * Scale
 * 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari.
 */
/* 1 */
[class*="uk-transition-scale"] {
  -webkit-backface-visibility: hidden;
}
.uk-transition-scale-up {
  --uk-scale-x: 1;
  --uk-scale-y: 1;
}
.uk-transition-scale-down {
  --uk-scale-x: 1.03;
  --uk-scale-y: 1.03;
}
/* Show */
.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle:focus .uk-transition-scale-up,
.uk-transition-toggle:focus-within .uk-transition-scale-up,
.uk-transition-active.uk-active .uk-transition-scale-up {
  --uk-scale-x: 1.03;
  --uk-scale-y: 1.03;
  opacity: 1;
}
.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle:focus .uk-transition-scale-down,
.uk-transition-toggle:focus-within .uk-transition-scale-down,
.uk-transition-active.uk-active .uk-transition-scale-down {
  --uk-scale-x: 1;
  --uk-scale-y: 1;
  opacity: 1;
}
/*
 * Slide
 */
.uk-transition-slide-top {
  --uk-translate-y: -100%;
}
.uk-transition-slide-bottom {
  --uk-translate-y: 100%;
}
.uk-transition-slide-right {
  --uk-translate-x: -100%;
}
.uk-transition-slide-left {
  --uk-translate-x: 100%;
}
.uk-transition-slide-top-small {
  --uk-translate-y: calc(-1 * 10px);
}
.uk-transition-slide-bottom-small {
  --uk-translate-y: 10px;
}
.uk-transition-slide-right-small {
  --uk-translate-x: calc(-1 * 10px);
}
.uk-transition-slide-left-small {
  --uk-translate-x: 10px;
}
.uk-transition-slide-top-medium {
  --uk-translate-y: calc(-1 * 50px);
}
.uk-transition-slide-bottom-medium {
  --uk-translate-y: 50px;
}
.uk-transition-slide-right-medium {
  --uk-translate-x: calc(-1 * 50px);
}
.uk-transition-slide-left-medium {
  --uk-translate-x: 50px;
}
/* Show */
.uk-transition-toggle:hover [class*="uk-transition-slide"],
.uk-transition-toggle:focus [class*="uk-transition-slide"],
.uk-transition-toggle:focus-within [class*="uk-transition-slide"],
.uk-transition-active.uk-active [class*="uk-transition-slide"] {
  --uk-translate-x: 0;
  --uk-translate-y: 0;
  opacity: 1;
}
/* Opacity modifier
 ========================================================================== */
.uk-transition-opaque {
  opacity: 1;
}
/* Duration modifier
 ========================================================================== */
.uk-transition-slow {
  transition-duration: 0.7s;
}
/* Disable modifier
 ========================================================================== */
.uk-transition-disable,
.uk-transition-disable * {
  transition: none !important;
}
/* ========================================================================
   Component: Visibility
 ========================================================================== */
/*
 * Hidden
 * `hidden` attribute also set here to make it stronger
 */
[hidden],
.uk-hidden,
.uk-hidden-empty:empty {
  display: none !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-hidden\@s {
    display: none !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-hidden\@m {
    display: none !important;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-hidden\@l {
    display: none !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-hidden\@xl {
    display: none !important;
  }
}
/*
 * Visible
 */
/* Phone portrait and smaller */
@media (max-width: 639px) {
  .uk-visible\@s {
    display: none !important;
  }
}
/* Phone landscape and smaller */
@media (max-width: 959px) {
  .uk-visible\@m {
    display: none !important;
  }
}
/* Tablet landscape and smaller */
@media (max-width: 1199px) {
  .uk-visible\@l {
    display: none !important;
  }
}
/* Desktop and smaller */
@media (max-width: 1599px) {
  .uk-visible\@xl {
    display: none !important;
  }
}
/* Visibility
 ========================================================================== */
.uk-invisible {
  visibility: hidden !important;
}
/* Based on the State of the Parent Element
 ========================================================================== */
/*
 * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
 * remove the element from the accessibility tree and that
 * `display: none` and `visibility: hidden` are not focusable.
 *
 * The target stays visible if any element within receives focus through keyboard.
 */
/*
 * Remove space when hidden.
 * 1. Remove from document flow.
 * 2. Hide element and shrink its dimension. Current browsers and screen readers
 *    keep the element in the accessibility tree even with zero dimensions.
 *    Using `tabindex="-1"` will show the element on touch devices.
 *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
 */
.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)),
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
  /* 1 */
  position: absolute !important;
  /* 2 */
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
/*
 * Keep space when hidden.
 * Hide element without shrinking its dimension.
 * Note: `clip-path` doesn't work with hover for elements outside of the toggle box.
 */
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
  opacity: 0 !important;
}
/* Based on Hover Capability of the Pointing Device
 ========================================================================== */
/*
 * Hover
 */
/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
@media (hover: none) {
  .uk-hidden-touch {
    display: none !important;
  }
}
/* Hide if primary pointing device supports hover, e.g. mice. */
@media (hover) {
  .uk-hidden-notouch {
    display: none !important;
  }
}
/* ========================================================================
   Component: Inverse
 ========================================================================== */
/*
 * Implemented class depends on the general theme color
 * `uk-light` is for light colors on dark backgrounds
 * `uk-dark` is or dark colors on light backgrounds
 */
.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-card-primary.uk-card-body,
.uk-card-primary > :not([class*="uk-card-media"]),
.uk-card-secondary.uk-card-body,
.uk-card-secondary > :not([class*="uk-card-media"]),
.uk-overlay-primary,
.uk-offcanvas-bar {
  color: rgba(255, 255, 255, 0.7);
  /* Webkit */
  /* Firefox */
  /* Webkit */
  /* Firefox */
}
.uk-light a,
.uk-light .uk-link,
.uk-section-primary:not(.uk-preserve-color) a,
.uk-section-primary:not(.uk-preserve-color) .uk-link,
.uk-section-secondary:not(.uk-preserve-color) a,
.uk-section-secondary:not(.uk-preserve-color) .uk-link,
.uk-tile-primary:not(.uk-preserve-color) a,
.uk-tile-primary:not(.uk-preserve-color) .uk-link,
.uk-tile-secondary:not(.uk-preserve-color) a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link,
.uk-card-primary.uk-card-body a,
.uk-card-primary.uk-card-body .uk-link,
.uk-card-primary > :not([class*="uk-card-media"]) a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link,
.uk-card-secondary.uk-card-body a,
.uk-card-secondary.uk-card-body .uk-link,
.uk-card-secondary > :not([class*="uk-card-media"]) a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link,
.uk-overlay-primary a,
.uk-overlay-primary .uk-link,
.uk-offcanvas-bar a,
.uk-offcanvas-bar .uk-link {
  color: #fff;
}
.uk-light a:hover,
.uk-light .uk-link:hover,
.uk-light .uk-link-toggle:hover .uk-link,
.uk-section-primary:not(.uk-preserve-color) a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-section-secondary:not(.uk-preserve-color) a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-tile-primary:not(.uk-preserve-color) a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-tile-secondary:not(.uk-preserve-color) a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-card-primary.uk-card-body a:hover,
.uk-card-primary.uk-card-body .uk-link:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link,
.uk-card-primary > :not([class*="uk-card-media"]) a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link,
.uk-card-secondary.uk-card-body a:hover,
.uk-card-secondary.uk-card-body .uk-link:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link,
.uk-card-secondary > :not([class*="uk-card-media"]) a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link,
.uk-overlay-primary a:hover,
.uk-overlay-primary .uk-link:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link,
.uk-offcanvas-bar a:hover,
.uk-offcanvas-bar .uk-link:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link {
  color: #fff;
}
.uk-light :not(pre) > code,
.uk-light :not(pre) > kbd,
.uk-light :not(pre) > samp,
.uk-section-primary:not(.uk-preserve-color) :not(pre) > code,
.uk-section-primary:not(.uk-preserve-color) :not(pre) > kbd,
.uk-section-primary:not(.uk-preserve-color) :not(pre) > samp,
.uk-section-secondary:not(.uk-preserve-color) :not(pre) > code,
.uk-section-secondary:not(.uk-preserve-color) :not(pre) > kbd,
.uk-section-secondary:not(.uk-preserve-color) :not(pre) > samp,
.uk-tile-primary:not(.uk-preserve-color) :not(pre) > code,
.uk-tile-primary:not(.uk-preserve-color) :not(pre) > kbd,
.uk-tile-primary:not(.uk-preserve-color) :not(pre) > samp,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre) > code,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre) > kbd,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre) > samp,
.uk-card-primary.uk-card-body :not(pre) > code,
.uk-card-primary.uk-card-body :not(pre) > kbd,
.uk-card-primary.uk-card-body :not(pre) > samp,
.uk-card-primary > :not([class*="uk-card-media"]) :not(pre) > code,
.uk-card-primary > :not([class*="uk-card-media"]) :not(pre) > kbd,
.uk-card-primary > :not([class*="uk-card-media"]) :not(pre) > samp,
.uk-card-secondary.uk-card-body :not(pre) > code,
.uk-card-secondary.uk-card-body :not(pre) > kbd,
.uk-card-secondary.uk-card-body :not(pre) > samp,
.uk-card-secondary > :not([class*="uk-card-media"]) :not(pre) > code,
.uk-card-secondary > :not([class*="uk-card-media"]) :not(pre) > kbd,
.uk-card-secondary > :not([class*="uk-card-media"]) :not(pre) > samp,
.uk-overlay-primary :not(pre) > code,
.uk-overlay-primary :not(pre) > kbd,
.uk-overlay-primary :not(pre) > samp,
.uk-offcanvas-bar :not(pre) > code,
.uk-offcanvas-bar :not(pre) > kbd,
.uk-offcanvas-bar :not(pre) > samp {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
}
.uk-light em,
.uk-section-primary:not(.uk-preserve-color) em,
.uk-section-secondary:not(.uk-preserve-color) em,
.uk-tile-primary:not(.uk-preserve-color) em,
.uk-tile-secondary:not(.uk-preserve-color) em,
.uk-card-primary.uk-card-body em,
.uk-card-primary > :not([class*="uk-card-media"]) em,
.uk-card-secondary.uk-card-body em,
.uk-card-secondary > :not([class*="uk-card-media"]) em,
.uk-overlay-primary em,
.uk-offcanvas-bar em {
  color: #fff;
}
.uk-light h1,
.uk-light .uk-h1,
.uk-light h2,
.uk-light .uk-h2,
.uk-light h3,
.uk-light .uk-h3,
.uk-light h4,
.uk-light .uk-h4,
.uk-light h5,
.uk-light .uk-h5,
.uk-light h6,
.uk-light .uk-h6,
.uk-light .uk-heading-small,
.uk-light .uk-heading-medium,
.uk-light .uk-heading-large,
.uk-light .uk-heading-xlarge,
.uk-light .uk-heading-2xlarge,
.uk-light .uk-heading-3xlarge,
.uk-section-primary:not(.uk-preserve-color) h1,
.uk-section-primary:not(.uk-preserve-color) .uk-h1,
.uk-section-primary:not(.uk-preserve-color) h2,
.uk-section-primary:not(.uk-preserve-color) .uk-h2,
.uk-section-primary:not(.uk-preserve-color) h3,
.uk-section-primary:not(.uk-preserve-color) .uk-h3,
.uk-section-primary:not(.uk-preserve-color) h4,
.uk-section-primary:not(.uk-preserve-color) .uk-h4,
.uk-section-primary:not(.uk-preserve-color) h5,
.uk-section-primary:not(.uk-preserve-color) .uk-h5,
.uk-section-primary:not(.uk-preserve-color) h6,
.uk-section-primary:not(.uk-preserve-color) .uk-h6,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-small,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-medium,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-large,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-3xlarge,
.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) .uk-h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) .uk-h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) .uk-h3,
.uk-section-secondary:not(.uk-preserve-color) h4,
.uk-section-secondary:not(.uk-preserve-color) .uk-h4,
.uk-section-secondary:not(.uk-preserve-color) h5,
.uk-section-secondary:not(.uk-preserve-color) .uk-h5,
.uk-section-secondary:not(.uk-preserve-color) h6,
.uk-section-secondary:not(.uk-preserve-color) .uk-h6,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-small,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-large,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-3xlarge,
.uk-tile-primary:not(.uk-preserve-color) h1,
.uk-tile-primary:not(.uk-preserve-color) .uk-h1,
.uk-tile-primary:not(.uk-preserve-color) h2,
.uk-tile-primary:not(.uk-preserve-color) .uk-h2,
.uk-tile-primary:not(.uk-preserve-color) h3,
.uk-tile-primary:not(.uk-preserve-color) .uk-h3,
.uk-tile-primary:not(.uk-preserve-color) h4,
.uk-tile-primary:not(.uk-preserve-color) .uk-h4,
.uk-tile-primary:not(.uk-preserve-color) h5,
.uk-tile-primary:not(.uk-preserve-color) .uk-h5,
.uk-tile-primary:not(.uk-preserve-color) h6,
.uk-tile-primary:not(.uk-preserve-color) .uk-h6,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-small,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-large,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-3xlarge,
.uk-tile-secondary:not(.uk-preserve-color) h1,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h1,
.uk-tile-secondary:not(.uk-preserve-color) h2,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h2,
.uk-tile-secondary:not(.uk-preserve-color) h3,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h3,
.uk-tile-secondary:not(.uk-preserve-color) h4,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h4,
.uk-tile-secondary:not(.uk-preserve-color) h5,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h5,
.uk-tile-secondary:not(.uk-preserve-color) h6,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h6,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-3xlarge,
.uk-card-primary.uk-card-body h1,
.uk-card-primary.uk-card-body .uk-h1,
.uk-card-primary.uk-card-body h2,
.uk-card-primary.uk-card-body .uk-h2,
.uk-card-primary.uk-card-body h3,
.uk-card-primary.uk-card-body .uk-h3,
.uk-card-primary.uk-card-body h4,
.uk-card-primary.uk-card-body .uk-h4,
.uk-card-primary.uk-card-body h5,
.uk-card-primary.uk-card-body .uk-h5,
.uk-card-primary.uk-card-body h6,
.uk-card-primary.uk-card-body .uk-h6,
.uk-card-primary.uk-card-body .uk-heading-small,
.uk-card-primary.uk-card-body .uk-heading-medium,
.uk-card-primary.uk-card-body .uk-heading-large,
.uk-card-primary.uk-card-body .uk-heading-xlarge,
.uk-card-primary.uk-card-body .uk-heading-2xlarge,
.uk-card-primary.uk-card-body .uk-heading-3xlarge,
.uk-card-primary > :not([class*="uk-card-media"]) h1,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h1,
.uk-card-primary > :not([class*="uk-card-media"]) h2,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h2,
.uk-card-primary > :not([class*="uk-card-media"]) h3,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h3,
.uk-card-primary > :not([class*="uk-card-media"]) h4,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h4,
.uk-card-primary > :not([class*="uk-card-media"]) h5,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h5,
.uk-card-primary > :not([class*="uk-card-media"]) h6,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-h6,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-small,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-medium,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-large,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-xlarge,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-2xlarge,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-3xlarge,
.uk-card-secondary.uk-card-body h1,
.uk-card-secondary.uk-card-body .uk-h1,
.uk-card-secondary.uk-card-body h2,
.uk-card-secondary.uk-card-body .uk-h2,
.uk-card-secondary.uk-card-body h3,
.uk-card-secondary.uk-card-body .uk-h3,
.uk-card-secondary.uk-card-body h4,
.uk-card-secondary.uk-card-body .uk-h4,
.uk-card-secondary.uk-card-body h5,
.uk-card-secondary.uk-card-body .uk-h5,
.uk-card-secondary.uk-card-body h6,
.uk-card-secondary.uk-card-body .uk-h6,
.uk-card-secondary.uk-card-body .uk-heading-small,
.uk-card-secondary.uk-card-body .uk-heading-medium,
.uk-card-secondary.uk-card-body .uk-heading-large,
.uk-card-secondary.uk-card-body .uk-heading-xlarge,
.uk-card-secondary.uk-card-body .uk-heading-2xlarge,
.uk-card-secondary.uk-card-body .uk-heading-3xlarge,
.uk-card-secondary > :not([class*="uk-card-media"]) h1,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h1,
.uk-card-secondary > :not([class*="uk-card-media"]) h2,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h2,
.uk-card-secondary > :not([class*="uk-card-media"]) h3,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h3,
.uk-card-secondary > :not([class*="uk-card-media"]) h4,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h4,
.uk-card-secondary > :not([class*="uk-card-media"]) h5,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h5,
.uk-card-secondary > :not([class*="uk-card-media"]) h6,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-h6,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-small,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-medium,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-large,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-xlarge,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-2xlarge,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-3xlarge,
.uk-overlay-primary h1,
.uk-overlay-primary .uk-h1,
.uk-overlay-primary h2,
.uk-overlay-primary .uk-h2,
.uk-overlay-primary h3,
.uk-overlay-primary .uk-h3,
.uk-overlay-primary h4,
.uk-overlay-primary .uk-h4,
.uk-overlay-primary h5,
.uk-overlay-primary .uk-h5,
.uk-overlay-primary h6,
.uk-overlay-primary .uk-h6,
.uk-overlay-primary .uk-heading-small,
.uk-overlay-primary .uk-heading-medium,
.uk-overlay-primary .uk-heading-large,
.uk-overlay-primary .uk-heading-xlarge,
.uk-overlay-primary .uk-heading-2xlarge,
.uk-overlay-primary .uk-heading-3xlarge,
.uk-offcanvas-bar h1,
.uk-offcanvas-bar .uk-h1,
.uk-offcanvas-bar h2,
.uk-offcanvas-bar .uk-h2,
.uk-offcanvas-bar h3,
.uk-offcanvas-bar .uk-h3,
.uk-offcanvas-bar h4,
.uk-offcanvas-bar .uk-h4,
.uk-offcanvas-bar h5,
.uk-offcanvas-bar .uk-h5,
.uk-offcanvas-bar h6,
.uk-offcanvas-bar .uk-h6,
.uk-offcanvas-bar .uk-heading-small,
.uk-offcanvas-bar .uk-heading-medium,
.uk-offcanvas-bar .uk-heading-large,
.uk-offcanvas-bar .uk-heading-xlarge,
.uk-offcanvas-bar .uk-heading-2xlarge,
.uk-offcanvas-bar .uk-heading-3xlarge {
  color: #fff;
}
.uk-light blockquote,
.uk-section-primary:not(.uk-preserve-color) blockquote,
.uk-section-secondary:not(.uk-preserve-color) blockquote,
.uk-tile-primary:not(.uk-preserve-color) blockquote,
.uk-tile-secondary:not(.uk-preserve-color) blockquote,
.uk-card-primary.uk-card-body blockquote,
.uk-card-primary > :not([class*="uk-card-media"]) blockquote,
.uk-card-secondary.uk-card-body blockquote,
.uk-card-secondary > :not([class*="uk-card-media"]) blockquote,
.uk-overlay-primary blockquote,
.uk-offcanvas-bar blockquote {
  color: #fff;
}
.uk-light blockquote footer,
.uk-section-primary:not(.uk-preserve-color) blockquote footer,
.uk-section-secondary:not(.uk-preserve-color) blockquote footer,
.uk-tile-primary:not(.uk-preserve-color) blockquote footer,
.uk-tile-secondary:not(.uk-preserve-color) blockquote footer,
.uk-card-primary.uk-card-body blockquote footer,
.uk-card-primary > :not([class*="uk-card-media"]) blockquote footer,
.uk-card-secondary.uk-card-body blockquote footer,
.uk-card-secondary > :not([class*="uk-card-media"]) blockquote footer,
.uk-overlay-primary blockquote footer,
.uk-offcanvas-bar blockquote footer {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light hr,
.uk-light .uk-hr,
.uk-section-primary:not(.uk-preserve-color) hr,
.uk-section-primary:not(.uk-preserve-color) .uk-hr,
.uk-section-secondary:not(.uk-preserve-color) hr,
.uk-section-secondary:not(.uk-preserve-color) .uk-hr,
.uk-tile-primary:not(.uk-preserve-color) hr,
.uk-tile-primary:not(.uk-preserve-color) .uk-hr,
.uk-tile-secondary:not(.uk-preserve-color) hr,
.uk-tile-secondary:not(.uk-preserve-color) .uk-hr,
.uk-card-primary.uk-card-body hr,
.uk-card-primary.uk-card-body .uk-hr,
.uk-card-primary > :not([class*="uk-card-media"]) hr,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-hr,
.uk-card-secondary.uk-card-body hr,
.uk-card-secondary.uk-card-body .uk-hr,
.uk-card-secondary > :not([class*="uk-card-media"]) hr,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-hr,
.uk-overlay-primary hr,
.uk-overlay-primary .uk-hr,
.uk-offcanvas-bar hr,
.uk-offcanvas-bar .uk-hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light :focus-visible,
.uk-section-primary:not(.uk-preserve-color) :focus-visible,
.uk-section-secondary:not(.uk-preserve-color) :focus-visible,
.uk-tile-primary:not(.uk-preserve-color) :focus-visible,
.uk-tile-secondary:not(.uk-preserve-color) :focus-visible,
.uk-card-primary.uk-card-body :focus-visible,
.uk-card-primary > :not([class*="uk-card-media"]) :focus-visible,
.uk-card-secondary.uk-card-body :focus-visible,
.uk-card-secondary > :not([class*="uk-card-media"]) :focus-visible,
.uk-overlay-primary :focus-visible,
.uk-offcanvas-bar :focus-visible {
  outline-color: #fff;
}
.uk-light a.uk-link-muted,
.uk-light .uk-link-muted a,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a,
.uk-card-primary.uk-card-body a.uk-link-muted,
.uk-card-primary.uk-card-body .uk-link-muted a,
.uk-card-primary > :not([class*="uk-card-media"]) a.uk-link-muted,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-muted a,
.uk-card-secondary.uk-card-body a.uk-link-muted,
.uk-card-secondary.uk-card-body .uk-link-muted a,
.uk-card-secondary > :not([class*="uk-card-media"]) a.uk-link-muted,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-muted a,
.uk-overlay-primary a.uk-link-muted,
.uk-overlay-primary .uk-link-muted a,
.uk-offcanvas-bar a.uk-link-muted,
.uk-offcanvas-bar .uk-link-muted a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light a.uk-link-muted:hover,
.uk-light .uk-link-muted a:hover,
.uk-light .uk-link-toggle:hover .uk-link-muted,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-card-primary.uk-card-body a.uk-link-muted:hover,
.uk-card-primary.uk-card-body .uk-link-muted a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-muted,
.uk-card-primary > :not([class*="uk-card-media"]) a.uk-link-muted:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-muted a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-muted,
.uk-card-secondary.uk-card-body a.uk-link-muted:hover,
.uk-card-secondary.uk-card-body .uk-link-muted a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-muted,
.uk-card-secondary > :not([class*="uk-card-media"]) a.uk-link-muted:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-muted a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-muted,
.uk-overlay-primary a.uk-link-muted:hover,
.uk-overlay-primary .uk-link-muted a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-muted,
.uk-offcanvas-bar a.uk-link-muted:hover,
.uk-offcanvas-bar .uk-link-muted a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-muted {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light a.uk-link-text:hover,
.uk-light .uk-link-text a:hover,
.uk-light .uk-link-toggle:hover .uk-link-text,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-card-primary.uk-card-body a.uk-link-text:hover,
.uk-card-primary.uk-card-body .uk-link-text a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-text,
.uk-card-primary > :not([class*="uk-card-media"]) a.uk-link-text:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-text a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-text,
.uk-card-secondary.uk-card-body a.uk-link-text:hover,
.uk-card-secondary.uk-card-body .uk-link-text a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-text,
.uk-card-secondary > :not([class*="uk-card-media"]) a.uk-link-text:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-text a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-text,
.uk-overlay-primary a.uk-link-text:hover,
.uk-overlay-primary .uk-link-text a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-text,
.uk-offcanvas-bar a.uk-link-text:hover,
.uk-offcanvas-bar .uk-link-text a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-text {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light a.uk-link-heading:hover,
.uk-light .uk-link-heading a:hover,
.uk-light .uk-link-toggle:hover .uk-link-heading,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-card-primary.uk-card-body a.uk-link-heading:hover,
.uk-card-primary.uk-card-body .uk-link-heading a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-heading,
.uk-card-primary > :not([class*="uk-card-media"]) a.uk-link-heading:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-heading a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-heading,
.uk-card-secondary.uk-card-body a.uk-link-heading:hover,
.uk-card-secondary.uk-card-body .uk-link-heading a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-heading,
.uk-card-secondary > :not([class*="uk-card-media"]) a.uk-link-heading:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-heading a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-link-toggle:hover .uk-link-heading,
.uk-overlay-primary a.uk-link-heading:hover,
.uk-overlay-primary .uk-link-heading a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-heading,
.uk-offcanvas-bar a.uk-link-heading:hover,
.uk-offcanvas-bar .uk-link-heading a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-heading {
  color: #fff;
}
.uk-light .uk-heading-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-divider,
.uk-card-primary.uk-card-body .uk-heading-divider,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-divider,
.uk-card-secondary.uk-card-body .uk-heading-divider,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-divider,
.uk-overlay-primary .uk-heading-divider,
.uk-offcanvas-bar .uk-heading-divider {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-heading-bullet::before,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-card-primary.uk-card-body .uk-heading-bullet::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-bullet::before,
.uk-card-secondary.uk-card-body .uk-heading-bullet::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-bullet::before,
.uk-overlay-primary .uk-heading-bullet::before,
.uk-offcanvas-bar .uk-heading-bullet::before {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-heading-line > ::before,
.uk-light .uk-heading-line > ::after,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::after,
.uk-card-primary.uk-card-body .uk-heading-line > ::before,
.uk-card-primary.uk-card-body .uk-heading-line > ::after,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-line > ::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-heading-line > ::after,
.uk-card-secondary.uk-card-body .uk-heading-line > ::before,
.uk-card-secondary.uk-card-body .uk-heading-line > ::after,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-line > ::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-heading-line > ::after,
.uk-overlay-primary .uk-heading-line > ::before,
.uk-overlay-primary .uk-heading-line > ::after,
.uk-offcanvas-bar .uk-heading-line > ::before,
.uk-offcanvas-bar .uk-heading-line > ::after {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-divider-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon,
.uk-card-primary.uk-card-body .uk-divider-icon,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-divider-icon,
.uk-card-secondary.uk-card-body .uk-divider-icon,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-divider-icon,
.uk-overlay-primary .uk-divider-icon,
.uk-offcanvas-bar .uk-divider-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.2%29%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-light .uk-divider-icon::before,
.uk-light .uk-divider-icon::after,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-card-primary.uk-card-body .uk-divider-icon::before,
.uk-card-primary.uk-card-body .uk-divider-icon::after,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-divider-icon::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-divider-icon::after,
.uk-card-secondary.uk-card-body .uk-divider-icon::before,
.uk-card-secondary.uk-card-body .uk-divider-icon::after,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-divider-icon::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-divider-icon::after,
.uk-overlay-primary .uk-divider-icon::before,
.uk-overlay-primary .uk-divider-icon::after,
.uk-offcanvas-bar .uk-divider-icon::before,
.uk-offcanvas-bar .uk-divider-icon::after {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-divider-small::after,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-card-primary.uk-card-body .uk-divider-small::after,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-divider-small::after,
.uk-card-secondary.uk-card-body .uk-divider-small::after,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-divider-small::after,
.uk-overlay-primary .uk-divider-small::after,
.uk-offcanvas-bar .uk-divider-small::after {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-divider-vertical,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-card-primary.uk-card-body .uk-divider-vertical,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-divider-vertical,
.uk-card-secondary.uk-card-body .uk-divider-vertical,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-divider-vertical,
.uk-overlay-primary .uk-divider-vertical,
.uk-offcanvas-bar .uk-divider-vertical {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-list-muted > ::marker,
.uk-section-primary:not(.uk-preserve-color) .uk-list-muted > ::marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-muted > ::marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-muted > ::marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-muted > ::marker,
.uk-card-primary.uk-card-body .uk-list-muted > ::marker,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-muted > ::marker,
.uk-card-secondary.uk-card-body .uk-list-muted > ::marker,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-muted > ::marker,
.uk-overlay-primary .uk-list-muted > ::marker,
.uk-offcanvas-bar .uk-list-muted > ::marker {
  color: rgba(255, 255, 255, 0.5) !important;
}
.uk-light .uk-list-emphasis > ::marker,
.uk-section-primary:not(.uk-preserve-color) .uk-list-emphasis > ::marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-emphasis > ::marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-emphasis > ::marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-emphasis > ::marker,
.uk-card-primary.uk-card-body .uk-list-emphasis > ::marker,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-emphasis > ::marker,
.uk-card-secondary.uk-card-body .uk-list-emphasis > ::marker,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-emphasis > ::marker,
.uk-overlay-primary .uk-list-emphasis > ::marker,
.uk-offcanvas-bar .uk-list-emphasis > ::marker {
  color: #fff !important;
}
.uk-light .uk-list-primary > ::marker,
.uk-section-primary:not(.uk-preserve-color) .uk-list-primary > ::marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-primary > ::marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-primary > ::marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-primary > ::marker,
.uk-card-primary.uk-card-body .uk-list-primary > ::marker,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-primary > ::marker,
.uk-card-secondary.uk-card-body .uk-list-primary > ::marker,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-primary > ::marker,
.uk-overlay-primary .uk-list-primary > ::marker,
.uk-offcanvas-bar .uk-list-primary > ::marker {
  color: #fff !important;
}
.uk-light .uk-list-secondary > ::marker,
.uk-section-primary:not(.uk-preserve-color) .uk-list-secondary > ::marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-secondary > ::marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-secondary > ::marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-secondary > ::marker,
.uk-card-primary.uk-card-body .uk-list-secondary > ::marker,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-secondary > ::marker,
.uk-card-secondary.uk-card-body .uk-list-secondary > ::marker,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-secondary > ::marker,
.uk-overlay-primary .uk-list-secondary > ::marker,
.uk-offcanvas-bar .uk-list-secondary > ::marker {
  color: #fff !important;
}
.uk-light .uk-list-bullet > ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-bullet > ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-bullet > ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-bullet > ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-bullet > ::before,
.uk-card-primary.uk-card-body .uk-list-bullet > ::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-bullet > ::before,
.uk-card-secondary.uk-card-body .uk-list-bullet > ::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-bullet > ::before,
.uk-overlay-primary .uk-list-bullet > ::before,
.uk-offcanvas-bar .uk-list-bullet > ::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-light .uk-list-divider > :nth-child(n+2),
.uk-section-primary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-divider > :nth-child(n+2),
.uk-card-primary.uk-card-body .uk-list-divider > :nth-child(n+2),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-divider > :nth-child(n+2),
.uk-card-secondary.uk-card-body .uk-list-divider > :nth-child(n+2),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-divider > :nth-child(n+2),
.uk-overlay-primary .uk-list-divider > :nth-child(n+2),
.uk-offcanvas-bar .uk-list-divider > :nth-child(n+2) {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-list-striped > *:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-list-striped > *:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-striped > *:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-striped > *:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped > *:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-list-striped > *:nth-of-type(odd),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-striped > *:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-list-striped > *:nth-of-type(odd),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-striped > *:nth-of-type(odd),
.uk-overlay-primary .uk-list-striped > *:nth-of-type(odd),
.uk-offcanvas-bar .uk-list-striped > *:nth-of-type(odd) {
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-list-striped > :nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped > :nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-list-striped > :nth-of-type(odd),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-list-striped > :nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-list-striped > :nth-of-type(odd),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-list-striped > :nth-of-type(odd),
.uk-overlay-primary .uk-list-striped > :nth-of-type(odd),
.uk-offcanvas-bar .uk-list-striped > :nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}
.uk-light .uk-table th,
.uk-section-primary:not(.uk-preserve-color) .uk-table th,
.uk-section-secondary:not(.uk-preserve-color) .uk-table th,
.uk-tile-primary:not(.uk-preserve-color) .uk-table th,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table th,
.uk-card-primary.uk-card-body .uk-table th,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table th,
.uk-card-secondary.uk-card-body .uk-table th,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table th,
.uk-overlay-primary .uk-table th,
.uk-offcanvas-bar .uk-table th {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-table caption,
.uk-section-primary:not(.uk-preserve-color) .uk-table caption,
.uk-section-secondary:not(.uk-preserve-color) .uk-table caption,
.uk-tile-primary:not(.uk-preserve-color) .uk-table caption,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table caption,
.uk-card-primary.uk-card-body .uk-table caption,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table caption,
.uk-card-secondary.uk-card-body .uk-table caption,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table caption,
.uk-overlay-primary .uk-table caption,
.uk-offcanvas-bar .uk-table caption {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-table > tr.uk-active,
.uk-light .uk-table tbody tr.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-table > tr.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-table > tr.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-table > tr.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table > tr.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-card-primary.uk-card-body .uk-table > tr.uk-active,
.uk-card-primary.uk-card-body .uk-table tbody tr.uk-active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table > tr.uk-active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table tbody tr.uk-active,
.uk-card-secondary.uk-card-body .uk-table > tr.uk-active,
.uk-card-secondary.uk-card-body .uk-table tbody tr.uk-active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table > tr.uk-active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table tbody tr.uk-active,
.uk-overlay-primary .uk-table > tr.uk-active,
.uk-overlay-primary .uk-table tbody tr.uk-active,
.uk-offcanvas-bar .uk-table > tr.uk-active,
.uk-offcanvas-bar .uk-table tbody tr.uk-active {
  background: rgba(255, 255, 255, 0.08);
}
.uk-light .uk-table-divider > tr:not(:first-child),
.uk-light .uk-table-divider > :not(:first-child) > tr,
.uk-light .uk-table-divider > :first-child > tr:not(:first-child),
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child),
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr,
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > tr:not(:first-child),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > :not(:first-child) > tr,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-card-primary.uk-card-body .uk-table-divider > tr:not(:first-child),
.uk-card-primary.uk-card-body .uk-table-divider > :not(:first-child) > tr,
.uk-card-primary.uk-card-body .uk-table-divider > :first-child > tr:not(:first-child),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-divider > tr:not(:first-child),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-divider > :not(:first-child) > tr,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-card-secondary.uk-card-body .uk-table-divider > tr:not(:first-child),
.uk-card-secondary.uk-card-body .uk-table-divider > :not(:first-child) > tr,
.uk-card-secondary.uk-card-body .uk-table-divider > :first-child > tr:not(:first-child),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-divider > tr:not(:first-child),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-divider > :not(:first-child) > tr,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-divider > :first-child > tr:not(:first-child),
.uk-overlay-primary .uk-table-divider > tr:not(:first-child),
.uk-overlay-primary .uk-table-divider > :not(:first-child) > tr,
.uk-overlay-primary .uk-table-divider > :first-child > tr:not(:first-child),
.uk-offcanvas-bar .uk-table-divider > tr:not(:first-child),
.uk-offcanvas-bar .uk-table-divider > :not(:first-child) > tr,
.uk-offcanvas-bar .uk-table-divider > :first-child > tr:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-table-striped > tr:nth-of-type(odd),
.uk-light .uk-table-striped tbody tr:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-table-striped > tr:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-striped > tr:nth-of-type(odd),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-table-striped > tr:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-striped > tr:nth-of-type(odd),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-overlay-primary .uk-table-striped > tr:nth-of-type(odd),
.uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(odd),
.uk-offcanvas-bar .uk-table-striped > tr:nth-of-type(odd),
.uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-table-hover > tr:hover,
.uk-light .uk-table-hover tbody tr:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-table-hover > tr:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-hover > tr:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-hover > tr:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover > tr:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-card-primary.uk-card-body .uk-table-hover > tr:hover,
.uk-card-primary.uk-card-body .uk-table-hover tbody tr:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-hover > tr:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-hover tbody tr:hover,
.uk-card-secondary.uk-card-body .uk-table-hover > tr:hover,
.uk-card-secondary.uk-card-body .uk-table-hover tbody tr:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-hover > tr:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-hover tbody tr:hover,
.uk-overlay-primary .uk-table-hover > tr:hover,
.uk-overlay-primary .uk-table-hover tbody tr:hover,
.uk-offcanvas-bar .uk-table-hover > tr:hover,
.uk-offcanvas-bar .uk-table-hover tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}
.uk-light .uk-icon-link,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link,
.uk-card-primary.uk-card-body .uk-icon-link,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-link,
.uk-card-secondary.uk-card-body .uk-icon-link,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-link,
.uk-overlay-primary .uk-icon-link,
.uk-offcanvas-bar .uk-icon-link {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-icon-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-card-primary.uk-card-body .uk-icon-link:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-link:hover,
.uk-card-secondary.uk-card-body .uk-icon-link:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-link:hover,
.uk-overlay-primary .uk-icon-link:hover,
.uk-offcanvas-bar .uk-icon-link:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-icon-link:active,
.uk-light .uk-active > .uk-icon-link,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-section-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link,
.uk-card-primary.uk-card-body .uk-icon-link:active,
.uk-card-primary.uk-card-body .uk-active > .uk-icon-link,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-link:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-active > .uk-icon-link,
.uk-card-secondary.uk-card-body .uk-icon-link:active,
.uk-card-secondary.uk-card-body .uk-active > .uk-icon-link,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-link:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-active > .uk-icon-link,
.uk-overlay-primary .uk-icon-link:active,
.uk-overlay-primary .uk-active > .uk-icon-link,
.uk-offcanvas-bar .uk-icon-link:active,
.uk-offcanvas-bar .uk-active > .uk-icon-link {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-icon-button,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button,
.uk-card-primary.uk-card-body .uk-icon-button,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-button,
.uk-card-secondary.uk-card-body .uk-icon-button,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-button,
.uk-overlay-primary .uk-icon-button,
.uk-offcanvas-bar .uk-icon-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-icon-button:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-card-primary.uk-card-body .uk-icon-button:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-button:hover,
.uk-card-secondary.uk-card-body .uk-icon-button:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-button:hover,
.uk-overlay-primary .uk-icon-button:hover,
.uk-offcanvas-bar .uk-icon-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-icon-button:active,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-card-primary.uk-card-body .uk-icon-button:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-button:active,
.uk-card-secondary.uk-card-body .uk-icon-button:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-button:active,
.uk-overlay-primary .uk-icon-button:active,
.uk-offcanvas-bar .uk-icon-button:active {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-icon-overlay,
.uk-light a .uk-icon-overlay,
a.uk-light .uk-icon-overlay,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-section-primary:not(.uk-preserve-color) a .uk-icon-overlay,
a.uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-section-secondary:not(.uk-preserve-color) a .uk-icon-overlay,
a.uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-tile-primary:not(.uk-preserve-color) a .uk-icon-overlay,
a.uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-tile-secondary:not(.uk-preserve-color) a .uk-icon-overlay,
a.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
.uk-card-primary.uk-card-body .uk-icon-overlay,
.uk-card-primary.uk-card-body a .uk-icon-overlay,
a.uk-card-primary.uk-card-body .uk-icon-overlay,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
.uk-card-primary > :not([class*="uk-card-media"]) a .uk-icon-overlay,
a.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
.uk-card-secondary.uk-card-body .uk-icon-overlay,
.uk-card-secondary.uk-card-body a .uk-icon-overlay,
a.uk-card-secondary.uk-card-body .uk-icon-overlay,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
.uk-card-secondary > :not([class*="uk-card-media"]) a .uk-icon-overlay,
a.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
.uk-overlay-primary .uk-icon-overlay,
.uk-overlay-primary a .uk-icon-overlay,
a.uk-overlay-primary .uk-icon-overlay,
.uk-offcanvas-bar .uk-icon-overlay,
.uk-offcanvas-bar a .uk-icon-overlay,
a.uk-offcanvas-bar .uk-icon-overlay {
  color: rgba(255, 255, 255, 0.6);
}
.uk-light .uk-icon-overlay:hover,
.uk-light a:hover .uk-icon-overlay,
a.uk-light:hover .uk-icon-overlay,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
.uk-section-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
a.uk-section-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
.uk-section-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
a.uk-section-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
.uk-tile-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
a.uk-tile-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
.uk-tile-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
a.uk-tile-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
.uk-card-primary.uk-card-body .uk-icon-overlay:hover,
.uk-card-primary.uk-card-body a:hover .uk-icon-overlay,
a.uk-card-primary.uk-card-body:hover .uk-icon-overlay,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
.uk-card-primary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
a.uk-card-primary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
.uk-card-secondary.uk-card-body .uk-icon-overlay:hover,
.uk-card-secondary.uk-card-body a:hover .uk-icon-overlay,
a.uk-card-secondary.uk-card-body:hover .uk-icon-overlay,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
a.uk-card-secondary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
.uk-overlay-primary .uk-icon-overlay:hover,
.uk-overlay-primary a:hover .uk-icon-overlay,
a.uk-overlay-primary:hover .uk-icon-overlay,
.uk-offcanvas-bar .uk-icon-overlay:hover,
.uk-offcanvas-bar a:hover .uk-icon-overlay,
a.uk-offcanvas-bar:hover .uk-icon-overlay {
  color: #fff;
}
.uk-light .uk-range::-webkit-slider-runnable-track,
.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
.uk-card-primary.uk-card-body .uk-range::-webkit-slider-runnable-track,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-runnable-track,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
.uk-overlay-primary .uk-range::-webkit-slider-runnable-track,
.uk-offcanvas-bar .uk-range::-webkit-slider-runnable-track {
  background: rgba(242, 242, 242, 0.1);
}
.uk-light .uk-range:focus::-webkit-slider-runnable-track,
.uk-light .uk-range:active::-webkit-slider-runnable-track,
.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
.uk-section-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
.uk-section-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
.uk-tile-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
.uk-card-primary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
.uk-card-primary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
.uk-card-secondary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
.uk-card-secondary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
.uk-overlay-primary .uk-range:focus::-webkit-slider-runnable-track,
.uk-overlay-primary .uk-range:active::-webkit-slider-runnable-track,
.uk-offcanvas-bar .uk-range:focus::-webkit-slider-runnable-track,
.uk-offcanvas-bar .uk-range:active::-webkit-slider-runnable-track {
  background: rgba(242, 242, 242, 0.15);
}
.uk-light .uk-range::-moz-range-track,
.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
.uk-card-primary.uk-card-body .uk-range::-moz-range-track,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
.uk-card-secondary.uk-card-body .uk-range::-moz-range-track,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
.uk-overlay-primary .uk-range::-moz-range-track,
.uk-offcanvas-bar .uk-range::-moz-range-track {
  background: rgba(242, 242, 242, 0.1);
}
.uk-light .uk-range:focus::-moz-range-track,
.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
.uk-card-primary.uk-card-body .uk-range:focus::-moz-range-track,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
.uk-card-secondary.uk-card-body .uk-range:focus::-moz-range-track,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
.uk-overlay-primary .uk-range:focus::-moz-range-track,
.uk-offcanvas-bar .uk-range:focus::-moz-range-track {
  background: rgba(242, 242, 242, 0.15);
}
.uk-light .uk-range::-webkit-slider-thumb,
.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
.uk-card-primary.uk-card-body .uk-range::-webkit-slider-thumb,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-thumb,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
.uk-overlay-primary .uk-range::-webkit-slider-thumb,
.uk-offcanvas-bar .uk-range::-webkit-slider-thumb {
  background: #808080;
  border-color: #e6e6e6;
}
.uk-light .uk-range::-moz-range-thumb,
.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
.uk-card-primary.uk-card-body .uk-range::-moz-range-thumb,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
.uk-card-secondary.uk-card-body .uk-range::-moz-range-thumb,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
.uk-overlay-primary .uk-range::-moz-range-thumb,
.uk-offcanvas-bar .uk-range::-moz-range-thumb {
  background: #808080;
  border-color: #e6e6e6;
}
.uk-light .uk-input,
.uk-light .uk-select,
.uk-light .uk-textarea,
.uk-section-primary:not(.uk-preserve-color) .uk-input,
.uk-section-primary:not(.uk-preserve-color) .uk-select,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea,
.uk-section-secondary:not(.uk-preserve-color) .uk-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-select,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea,
.uk-tile-primary:not(.uk-preserve-color) .uk-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-select,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-select,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea,
.uk-card-primary.uk-card-body .uk-input,
.uk-card-primary.uk-card-body .uk-select,
.uk-card-primary.uk-card-body .uk-textarea,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-select,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-textarea,
.uk-card-secondary.uk-card-body .uk-input,
.uk-card-secondary.uk-card-body .uk-select,
.uk-card-secondary.uk-card-body .uk-textarea,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-select,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-textarea,
.uk-overlay-primary .uk-input,
.uk-overlay-primary .uk-select,
.uk-overlay-primary .uk-textarea,
.uk-offcanvas-bar .uk-input,
.uk-offcanvas-bar .uk-select,
.uk-offcanvas-bar .uk-textarea {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-input:focus,
.uk-light .uk-select:focus,
.uk-light .uk-textarea:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-select:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-select:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-select:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-select:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-card-primary.uk-card-body .uk-input:focus,
.uk-card-primary.uk-card-body .uk-select:focus,
.uk-card-primary.uk-card-body .uk-textarea:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-input:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-select:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-textarea:focus,
.uk-card-secondary.uk-card-body .uk-input:focus,
.uk-card-secondary.uk-card-body .uk-select:focus,
.uk-card-secondary.uk-card-body .uk-textarea:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-input:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-select:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-textarea:focus,
.uk-overlay-primary .uk-input:focus,
.uk-overlay-primary .uk-select:focus,
.uk-overlay-primary .uk-textarea:focus,
.uk-offcanvas-bar .uk-input:focus,
.uk-offcanvas-bar .uk-select:focus,
.uk-offcanvas-bar .uk-textarea:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-input::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-card-primary.uk-card-body .uk-input::-moz-placeholder, .uk-card-primary > :not([class*="uk-card-media"]) .uk-input::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-input::-moz-placeholder, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-input::-moz-placeholder, .uk-overlay-primary .uk-input::-moz-placeholder, .uk-offcanvas-bar .uk-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-input::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-card-primary.uk-card-body .uk-input::placeholder,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-input::placeholder,
.uk-card-secondary.uk-card-body .uk-input::placeholder,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-input::placeholder,
.uk-overlay-primary .uk-input::placeholder,
.uk-offcanvas-bar .uk-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-textarea::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-card-primary.uk-card-body .uk-textarea::-moz-placeholder, .uk-card-primary > :not([class*="uk-card-media"]) .uk-textarea::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-textarea::-moz-placeholder, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-textarea::-moz-placeholder, .uk-overlay-primary .uk-textarea::-moz-placeholder, .uk-offcanvas-bar .uk-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-textarea::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-card-primary.uk-card-body .uk-textarea::placeholder,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-textarea::placeholder,
.uk-card-secondary.uk-card-body .uk-textarea::placeholder,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-textarea::placeholder,
.uk-overlay-primary .uk-textarea::placeholder,
.uk-offcanvas-bar .uk-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-select:not([multiple]):not([size]),
.uk-section-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-section-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-card-primary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-select:not([multiple]):not([size]),
.uk-card-secondary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-select:not([multiple]):not([size]),
.uk-overlay-primary .uk-select:not([multiple]):not([size]),
.uk-offcanvas-bar .uk-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-light .uk-input[list]:hover,
.uk-light .uk-input[list]:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-card-primary.uk-card-body .uk-input[list]:hover,
.uk-card-primary.uk-card-body .uk-input[list]:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-input[list]:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-input[list]:focus,
.uk-card-secondary.uk-card-body .uk-input[list]:hover,
.uk-card-secondary.uk-card-body .uk-input[list]:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-input[list]:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-input[list]:focus,
.uk-overlay-primary .uk-input[list]:hover,
.uk-overlay-primary .uk-input[list]:focus,
.uk-offcanvas-bar .uk-input[list]:hover,
.uk-offcanvas-bar .uk-input[list]:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-light .uk-radio,
.uk-light .uk-checkbox,
.uk-section-primary:not(.uk-preserve-color) .uk-radio,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox,
.uk-card-primary.uk-card-body .uk-radio,
.uk-card-primary.uk-card-body .uk-checkbox,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-radio,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox,
.uk-card-secondary.uk-card-body .uk-radio,
.uk-card-secondary.uk-card-body .uk-checkbox,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-radio,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox,
.uk-overlay-primary .uk-radio,
.uk-overlay-primary .uk-checkbox,
.uk-offcanvas-bar .uk-radio,
.uk-offcanvas-bar .uk-checkbox {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-radio:focus,
.uk-light .uk-checkbox:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-card-primary.uk-card-body .uk-radio:focus,
.uk-card-primary.uk-card-body .uk-checkbox:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-radio:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:focus,
.uk-card-secondary.uk-card-body .uk-radio:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-radio:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:focus,
.uk-overlay-primary .uk-radio:focus,
.uk-overlay-primary .uk-checkbox:focus,
.uk-offcanvas-bar .uk-radio:focus,
.uk-offcanvas-bar .uk-checkbox:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-radio:checked,
.uk-light .uk-checkbox:checked,
.uk-light .uk-checkbox:indeterminate,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-card-primary.uk-card-body .uk-radio:checked,
.uk-card-primary.uk-card-body .uk-checkbox:checked,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-radio:checked,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate,
.uk-card-secondary.uk-card-body .uk-radio:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-radio:checked,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate,
.uk-overlay-primary .uk-radio:checked,
.uk-overlay-primary .uk-checkbox:checked,
.uk-overlay-primary .uk-checkbox:indeterminate,
.uk-offcanvas-bar .uk-radio:checked,
.uk-offcanvas-bar .uk-checkbox:checked,
.uk-offcanvas-bar .uk-checkbox:indeterminate {
  background-color: #fff;
  border-color: #fff;
}
.uk-light .uk-radio:checked:focus,
.uk-light .uk-checkbox:checked:focus,
.uk-light .uk-checkbox:indeterminate:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-card-primary.uk-card-body .uk-radio:checked:focus,
.uk-card-primary.uk-card-body .uk-checkbox:checked:focus,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-radio:checked:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:checked:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate:focus,
.uk-card-secondary.uk-card-body .uk-radio:checked:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:checked:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-radio:checked:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:checked:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate:focus,
.uk-overlay-primary .uk-radio:checked:focus,
.uk-overlay-primary .uk-checkbox:checked:focus,
.uk-overlay-primary .uk-checkbox:indeterminate:focus,
.uk-offcanvas-bar .uk-radio:checked:focus,
.uk-offcanvas-bar .uk-checkbox:checked:focus,
.uk-offcanvas-bar .uk-checkbox:indeterminate:focus {
  background-color: #ffffff;
}
.uk-light .uk-radio:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-card-primary.uk-card-body .uk-radio:checked,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-radio:checked,
.uk-card-secondary.uk-card-body .uk-radio:checked,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-radio:checked,
.uk-overlay-primary .uk-radio:checked,
.uk-offcanvas-bar .uk-radio:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-light .uk-checkbox:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-card-primary.uk-card-body .uk-checkbox:checked,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:checked,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
.uk-overlay-primary .uk-checkbox:checked,
.uk-offcanvas-bar .uk-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.uk-light .uk-checkbox:indeterminate,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:indeterminate,
.uk-overlay-primary .uk-checkbox:indeterminate,
.uk-offcanvas-bar .uk-checkbox:indeterminate {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.uk-light .uk-form-label,
.uk-section-primary:not(.uk-preserve-color) .uk-form-label,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-label,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-label,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-label,
.uk-card-primary.uk-card-body .uk-form-label,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-form-label,
.uk-card-secondary.uk-card-body .uk-form-label,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-form-label,
.uk-overlay-primary .uk-form-label,
.uk-offcanvas-bar .uk-form-label {
  color: #fff;
}
.uk-light .uk-form-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-form-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon,
.uk-card-primary.uk-card-body .uk-form-icon,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-form-icon,
.uk-card-secondary.uk-card-body .uk-form-icon,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-form-icon,
.uk-overlay-primary .uk-form-icon,
.uk-offcanvas-bar .uk-form-icon {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-form-icon:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-card-primary.uk-card-body .uk-form-icon:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-form-icon:hover,
.uk-card-secondary.uk-card-body .uk-form-icon:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-form-icon:hover,
.uk-overlay-primary .uk-form-icon:hover,
.uk-offcanvas-bar .uk-form-icon:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-button-default,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-card-primary.uk-card-body .uk-button-default,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-default,
.uk-card-secondary.uk-card-body .uk-button-default,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-default,
.uk-overlay-primary .uk-button-default,
.uk-offcanvas-bar .uk-button-default {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-button-default:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-card-primary.uk-card-body .uk-button-default:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-default:hover,
.uk-card-secondary.uk-card-body .uk-button-default:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-default:hover,
.uk-overlay-primary .uk-button-default:hover,
.uk-offcanvas-bar .uk-button-default:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.uk-light .uk-button-default:active,
.uk-light .uk-button-default.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-card-primary.uk-card-body .uk-button-default:active,
.uk-card-primary.uk-card-body .uk-button-default.uk-active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-default:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-default.uk-active,
.uk-card-secondary.uk-card-body .uk-button-default:active,
.uk-card-secondary.uk-card-body .uk-button-default.uk-active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-default:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-default.uk-active,
.uk-overlay-primary .uk-button-default:active,
.uk-overlay-primary .uk-button-default.uk-active,
.uk-offcanvas-bar .uk-button-default:active,
.uk-offcanvas-bar .uk-button-default.uk-active {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-card-primary.uk-card-body .uk-button-primary,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-primary,
.uk-card-secondary.uk-card-body .uk-button-primary,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-primary,
.uk-overlay-primary .uk-button-primary,
.uk-offcanvas-bar .uk-button-primary {
  background-color: #fff;
  color: #666;
}
.uk-light .uk-button-primary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-card-primary.uk-card-body .uk-button-primary:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-primary:hover,
.uk-card-secondary.uk-card-body .uk-button-primary:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-primary:hover,
.uk-overlay-primary .uk-button-primary:hover,
.uk-offcanvas-bar .uk-button-primary:hover {
  background-color: #f2f2f2;
  color: #666;
}
.uk-light .uk-button-primary:active,
.uk-light .uk-button-primary.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-card-primary.uk-card-body .uk-button-primary:active,
.uk-card-primary.uk-card-body .uk-button-primary.uk-active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-primary:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-primary.uk-active,
.uk-card-secondary.uk-card-body .uk-button-primary:active,
.uk-card-secondary.uk-card-body .uk-button-primary.uk-active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-primary:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-primary.uk-active,
.uk-overlay-primary .uk-button-primary:active,
.uk-overlay-primary .uk-button-primary.uk-active,
.uk-offcanvas-bar .uk-button-primary:active,
.uk-offcanvas-bar .uk-button-primary.uk-active {
  background-color: #e6e6e6;
  color: #666;
}
.uk-light .uk-button-secondary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-card-primary.uk-card-body .uk-button-secondary,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-secondary,
.uk-card-secondary.uk-card-body .uk-button-secondary,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-secondary,
.uk-overlay-primary .uk-button-secondary,
.uk-offcanvas-bar .uk-button-secondary {
  background-color: #fff;
  color: #666;
}
.uk-light .uk-button-secondary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-card-primary.uk-card-body .uk-button-secondary:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-secondary:hover,
.uk-card-secondary.uk-card-body .uk-button-secondary:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-secondary:hover,
.uk-overlay-primary .uk-button-secondary:hover,
.uk-offcanvas-bar .uk-button-secondary:hover {
  background-color: #f2f2f2;
  color: #666;
}
.uk-light .uk-button-secondary:active,
.uk-light .uk-button-secondary.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-card-primary.uk-card-body .uk-button-secondary:active,
.uk-card-primary.uk-card-body .uk-button-secondary.uk-active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-secondary:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-secondary.uk-active,
.uk-card-secondary.uk-card-body .uk-button-secondary:active,
.uk-card-secondary.uk-card-body .uk-button-secondary.uk-active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-secondary:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-secondary.uk-active,
.uk-overlay-primary .uk-button-secondary:active,
.uk-overlay-primary .uk-button-secondary.uk-active,
.uk-offcanvas-bar .uk-button-secondary:active,
.uk-offcanvas-bar .uk-button-secondary.uk-active {
  background-color: #e6e6e6;
  color: #666;
}
.uk-light .uk-button-text,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text,
.uk-card-primary.uk-card-body .uk-button-text,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-text,
.uk-card-secondary.uk-card-body .uk-button-text,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-text,
.uk-overlay-primary .uk-button-text,
.uk-offcanvas-bar .uk-button-text {
  color: #fff;
}
.uk-light .uk-button-text::before,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text::before,
.uk-card-primary.uk-card-body .uk-button-text::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-text::before,
.uk-card-secondary.uk-card-body .uk-button-text::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-text::before,
.uk-overlay-primary .uk-button-text::before,
.uk-offcanvas-bar .uk-button-text::before {
  border-bottom-color: #fff;
}
.uk-light .uk-button-text:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-card-primary.uk-card-body .uk-button-text:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-text:hover,
.uk-card-secondary.uk-card-body .uk-button-text:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-text:hover,
.uk-overlay-primary .uk-button-text:hover,
.uk-offcanvas-bar .uk-button-text:hover {
  color: #fff;
}
.uk-light .uk-button-text:disabled,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-card-primary.uk-card-body .uk-button-text:disabled,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-text:disabled,
.uk-card-secondary.uk-card-body .uk-button-text:disabled,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-text:disabled,
.uk-overlay-primary .uk-button-text:disabled,
.uk-offcanvas-bar .uk-button-text:disabled {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-button-link,
.uk-section-primary:not(.uk-preserve-color) .uk-button-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-link,
.uk-card-primary.uk-card-body .uk-button-link,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-link,
.uk-card-secondary.uk-card-body .uk-button-link,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-link,
.uk-overlay-primary .uk-button-link,
.uk-offcanvas-bar .uk-button-link {
  color: #fff;
}
.uk-light .uk-button-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-card-primary.uk-card-body .uk-button-link:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-button-link:hover,
.uk-card-secondary.uk-card-body .uk-button-link:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-button-link:hover,
.uk-overlay-primary .uk-button-link:hover,
.uk-offcanvas-bar .uk-button-link:hover {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light.uk-card-badge,
.uk-section-primary:not(.uk-preserve-color).uk-card-badge,
.uk-section-secondary:not(.uk-preserve-color).uk-card-badge,
.uk-tile-primary:not(.uk-preserve-color).uk-card-badge,
.uk-tile-secondary:not(.uk-preserve-color).uk-card-badge,
.uk-card-primary.uk-card-body.uk-card-badge,
.uk-card-primary > :not([class*="uk-card-media"]).uk-card-badge,
.uk-card-secondary.uk-card-body.uk-card-badge,
.uk-card-secondary > :not([class*="uk-card-media"]).uk-card-badge,
.uk-overlay-primary.uk-card-badge,
.uk-offcanvas-bar.uk-card-badge {
  background-color: #fff;
  color: #666;
}
.uk-light .uk-close,
.uk-section-primary:not(.uk-preserve-color) .uk-close,
.uk-section-secondary:not(.uk-preserve-color) .uk-close,
.uk-tile-primary:not(.uk-preserve-color) .uk-close,
.uk-tile-secondary:not(.uk-preserve-color) .uk-close,
.uk-card-primary.uk-card-body .uk-close,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-close,
.uk-card-secondary.uk-card-body .uk-close,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-close,
.uk-overlay-primary .uk-close,
.uk-offcanvas-bar .uk-close {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-close:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-close:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-close:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-close:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-close:hover,
.uk-card-primary.uk-card-body .uk-close:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-close:hover,
.uk-card-secondary.uk-card-body .uk-close:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-close:hover,
.uk-overlay-primary .uk-close:hover,
.uk-offcanvas-bar .uk-close:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-totop,
.uk-section-primary:not(.uk-preserve-color) .uk-totop,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop,
.uk-card-primary.uk-card-body .uk-totop,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-totop,
.uk-card-secondary.uk-card-body .uk-totop,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-totop,
.uk-overlay-primary .uk-totop,
.uk-offcanvas-bar .uk-totop {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-totop:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-totop:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop:hover,
.uk-card-primary.uk-card-body .uk-totop:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-totop:hover,
.uk-card-secondary.uk-card-body .uk-totop:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-totop:hover,
.uk-overlay-primary .uk-totop:hover,
.uk-offcanvas-bar .uk-totop:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-totop:active,
.uk-section-primary:not(.uk-preserve-color) .uk-totop:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop:active,
.uk-card-primary.uk-card-body .uk-totop:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-totop:active,
.uk-card-secondary.uk-card-body .uk-totop:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-totop:active,
.uk-overlay-primary .uk-totop:active,
.uk-offcanvas-bar .uk-totop:active {
  color: #fff;
}
.uk-light .uk-marker,
.uk-section-primary:not(.uk-preserve-color) .uk-marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-marker,
.uk-card-primary.uk-card-body .uk-marker,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-marker,
.uk-card-secondary.uk-card-body .uk-marker,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-marker,
.uk-overlay-primary .uk-marker,
.uk-offcanvas-bar .uk-marker {
  background: #f8f8f8;
  color: #666;
}
.uk-light .uk-marker:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-marker:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-marker:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-marker:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-marker:hover,
.uk-card-primary.uk-card-body .uk-marker:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-marker:hover,
.uk-card-secondary.uk-card-body .uk-marker:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-marker:hover,
.uk-overlay-primary .uk-marker:hover,
.uk-offcanvas-bar .uk-marker:hover {
  color: #666;
}
.uk-light .uk-badge,
.uk-section-primary:not(.uk-preserve-color) .uk-badge,
.uk-section-secondary:not(.uk-preserve-color) .uk-badge,
.uk-tile-primary:not(.uk-preserve-color) .uk-badge,
.uk-tile-secondary:not(.uk-preserve-color) .uk-badge,
.uk-card-primary.uk-card-body .uk-badge,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-badge,
.uk-card-secondary.uk-card-body .uk-badge,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-badge,
.uk-overlay-primary .uk-badge,
.uk-offcanvas-bar .uk-badge {
  background-color: #fff;
  color: #666 !important;
}
.uk-light .uk-label,
.uk-section-primary:not(.uk-preserve-color) .uk-label,
.uk-section-secondary:not(.uk-preserve-color) .uk-label,
.uk-tile-primary:not(.uk-preserve-color) .uk-label,
.uk-tile-secondary:not(.uk-preserve-color) .uk-label,
.uk-card-primary.uk-card-body .uk-label,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-label,
.uk-card-secondary.uk-card-body .uk-label,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-label,
.uk-overlay-primary .uk-label,
.uk-offcanvas-bar .uk-label {
  background-color: #fff;
  color: #666;
}
.uk-light .uk-article-meta,
.uk-section-primary:not(.uk-preserve-color) .uk-article-meta,
.uk-section-secondary:not(.uk-preserve-color) .uk-article-meta,
.uk-tile-primary:not(.uk-preserve-color) .uk-article-meta,
.uk-tile-secondary:not(.uk-preserve-color) .uk-article-meta,
.uk-card-primary.uk-card-body .uk-article-meta,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-article-meta,
.uk-card-secondary.uk-card-body .uk-article-meta,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-article-meta,
.uk-overlay-primary .uk-article-meta,
.uk-offcanvas-bar .uk-article-meta {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-input,
.uk-overlay-primary .uk-search-input,
.uk-offcanvas-bar .uk-search-input {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-search-input::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-card-primary.uk-card-body .uk-search-input::-moz-placeholder, .uk-card-primary > :not([class*="uk-card-media"]) .uk-search-input::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-search-input::-moz-placeholder, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-input::-moz-placeholder, .uk-overlay-primary .uk-search-input::-moz-placeholder, .uk-offcanvas-bar .uk-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search-input::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-card-primary.uk-card-body .uk-search-input::placeholder,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-input::placeholder,
.uk-card-secondary.uk-card-body .uk-search-input::placeholder,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-input::placeholder,
.uk-overlay-primary .uk-search-input::placeholder,
.uk-offcanvas-bar .uk-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search .uk-search-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-card-primary.uk-card-body .uk-search .uk-search-icon,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search .uk-search-icon,
.uk-card-secondary.uk-card-body .uk-search .uk-search-icon,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search .uk-search-icon,
.uk-overlay-primary .uk-search .uk-search-icon,
.uk-offcanvas-bar .uk-search .uk-search-icon {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search .uk-search-icon:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-card-primary.uk-card-body .uk-search .uk-search-icon:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search .uk-search-icon:hover,
.uk-card-secondary.uk-card-body .uk-search .uk-search-icon:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search .uk-search-icon:hover,
.uk-overlay-primary .uk-search .uk-search-icon:hover,
.uk-offcanvas-bar .uk-search .uk-search-icon:hover {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search-default .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-default .uk-search-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-default .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-default .uk-search-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-default .uk-search-input,
.uk-overlay-primary .uk-search-default .uk-search-input,
.uk-offcanvas-bar .uk-search-default .uk-search-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-search-default .uk-search-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-card-primary.uk-card-body .uk-search-default .uk-search-input:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-default .uk-search-input:focus,
.uk-card-secondary.uk-card-body .uk-search-default .uk-search-input:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-default .uk-search-input:focus,
.uk-overlay-primary .uk-search-default .uk-search-input:focus,
.uk-offcanvas-bar .uk-search-default .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.uk-light .uk-search-navbar .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-navbar .uk-search-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-navbar .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-navbar .uk-search-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-navbar .uk-search-input,
.uk-overlay-primary .uk-search-navbar .uk-search-input,
.uk-offcanvas-bar .uk-search-navbar .uk-search-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-search-navbar .uk-search-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input:focus,
.uk-card-primary.uk-card-body .uk-search-navbar .uk-search-input:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-navbar .uk-search-input:focus,
.uk-card-secondary.uk-card-body .uk-search-navbar .uk-search-input:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-navbar .uk-search-input:focus,
.uk-overlay-primary .uk-search-navbar .uk-search-input:focus,
.uk-offcanvas-bar .uk-search-navbar .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.uk-light .uk-search-medium .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-medium .uk-search-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-medium .uk-search-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input,
.uk-overlay-primary .uk-search-medium .uk-search-input,
.uk-offcanvas-bar .uk-search-medium .uk-search-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-search-medium .uk-search-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
.uk-card-primary.uk-card-body .uk-search-medium .uk-search-input:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
.uk-card-secondary.uk-card-body .uk-search-medium .uk-search-input:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
.uk-overlay-primary .uk-search-medium .uk-search-input:focus,
.uk-offcanvas-bar .uk-search-medium .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.uk-light .uk-search-large .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-large .uk-search-input,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input,
.uk-overlay-primary .uk-search-large .uk-search-input,
.uk-offcanvas-bar .uk-search-large .uk-search-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-search-large .uk-search-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
.uk-card-primary.uk-card-body .uk-search-large .uk-search-input:focus,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input:focus,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
.uk-overlay-primary .uk-search-large .uk-search-input:focus,
.uk-offcanvas-bar .uk-search-large .uk-search-input:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.uk-light .uk-search-toggle,
.uk-section-primary:not(.uk-preserve-color) .uk-search-toggle,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle,
.uk-card-primary.uk-card-body .uk-search-toggle,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-toggle,
.uk-card-secondary.uk-card-body .uk-search-toggle,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-toggle,
.uk-overlay-primary .uk-search-toggle,
.uk-offcanvas-bar .uk-search-toggle {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-search-toggle:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-card-primary.uk-card-body .uk-search-toggle:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-toggle:hover,
.uk-card-secondary.uk-card-body .uk-search-toggle:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-toggle:hover,
.uk-overlay-primary .uk-search-toggle:hover,
.uk-offcanvas-bar .uk-search-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-accordion-default .uk-accordion-title,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-title,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title,
.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-title,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title,
.uk-overlay-primary .uk-accordion-default .uk-accordion-title,
.uk-offcanvas-bar .uk-accordion-default .uk-accordion-title {
  color: #fff;
}
.uk-light .uk-accordion-default .uk-accordion-title:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-title:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title:hover,
.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-title:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title:hover,
.uk-overlay-primary .uk-accordion-default .uk-accordion-title:hover,
.uk-offcanvas-bar .uk-accordion-default .uk-accordion-title:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-accordion-default .uk-accordion-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-icon,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-icon,
.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-icon,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-icon,
.uk-overlay-primary .uk-accordion-default .uk-accordion-icon,
.uk-offcanvas-bar .uk-accordion-default .uk-accordion-icon {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-thumbnav > * > *::after,
.uk-section-primary:not(.uk-preserve-color) .uk-thumbnav > * > *::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-thumbnav > * > *::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-thumbnav > * > *::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-thumbnav > * > *::after,
.uk-card-primary.uk-card-body .uk-thumbnav > * > *::after,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-thumbnav > * > *::after,
.uk-card-secondary.uk-card-body .uk-thumbnav > * > *::after,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-thumbnav > * > *::after,
.uk-overlay-primary .uk-thumbnav > * > *::after,
.uk-offcanvas-bar .uk-thumbnav > * > *::after {
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.uk-light .uk-iconnav > * > a,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a,
.uk-card-primary.uk-card-body .uk-iconnav > * > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-iconnav > * > a,
.uk-card-secondary.uk-card-body .uk-iconnav > * > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-iconnav > * > a,
.uk-overlay-primary .uk-iconnav > * > a,
.uk-offcanvas-bar .uk-iconnav > * > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-iconnav > * > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover,
.uk-card-primary.uk-card-body .uk-iconnav > * > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-iconnav > * > a:hover,
.uk-card-secondary.uk-card-body .uk-iconnav > * > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-iconnav > * > a:hover,
.uk-overlay-primary .uk-iconnav > * > a:hover,
.uk-offcanvas-bar .uk-iconnav > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-iconnav > .uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a,
.uk-card-primary.uk-card-body .uk-iconnav > .uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-iconnav > .uk-active > a,
.uk-card-secondary.uk-card-body .uk-iconnav > .uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-iconnav > .uk-active > a,
.uk-overlay-primary .uk-iconnav > .uk-active > a,
.uk-offcanvas-bar .uk-iconnav > .uk-active > a {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-grid-divider > :not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-grid-divider > :not(.uk-first-column)::before,
.uk-overlay-primary .uk-grid-divider > :not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-grid-divider > :not(.uk-first-column)::before {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-section-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-card-primary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-card-secondary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-overlay-primary .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before,
.uk-offcanvas-bar .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-nav-default > li > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a,
.uk-card-primary.uk-card-body .uk-nav-default > li > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li > a,
.uk-card-secondary.uk-card-body .uk-nav-default > li > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li > a,
.uk-overlay-primary .uk-nav-default > li > a,
.uk-offcanvas-bar .uk-nav-default > li > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-default > li > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover,
.uk-card-primary.uk-card-body .uk-nav-default > li > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:hover,
.uk-card-secondary.uk-card-body .uk-nav-default > li > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:hover,
.uk-overlay-primary .uk-nav-default > li > a:hover,
.uk-offcanvas-bar .uk-nav-default > li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-default > li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-default > li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-default > li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li.uk-active > a,
.uk-overlay-primary .uk-nav-default > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
  color: #fff;
}
.uk-light .uk-nav-default .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-header,
.uk-overlay-primary .uk-nav-default .uk-nav-header,
.uk-offcanvas-bar .uk-nav-default .uk-nav-header {
  color: #fff;
}
.uk-light .uk-nav-default .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-divider,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-divider,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-divider,
.uk-overlay-primary .uk-nav-default .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-default .uk-nav-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-nav-default .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub a,
.uk-overlay-primary .uk-nav-default .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-default .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-default .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-overlay-primary .uk-nav-default .uk-nav-sub li.uk-active > a,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a {
  color: #fff;
}
.uk-light .uk-nav-primary > li > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a,
.uk-card-primary.uk-card-body .uk-nav-primary > li > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary > li > a,
.uk-card-secondary.uk-card-body .uk-nav-primary > li > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary > li > a,
.uk-overlay-primary .uk-nav-primary > li > a,
.uk-offcanvas-bar .uk-nav-primary > li > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-primary > li > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover,
.uk-card-primary.uk-card-body .uk-nav-primary > li > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary > li > a:hover,
.uk-card-secondary.uk-card-body .uk-nav-primary > li > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary > li > a:hover,
.uk-overlay-primary .uk-nav-primary > li > a:hover,
.uk-offcanvas-bar .uk-nav-primary > li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-primary > li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-primary > li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary > li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-primary > li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary > li.uk-active > a,
.uk-overlay-primary .uk-nav-primary > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-primary > li.uk-active > a {
  color: #fff;
}
.uk-light .uk-nav-primary .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-header,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-header,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-header,
.uk-overlay-primary .uk-nav-primary .uk-nav-header,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-header {
  color: #fff;
}
.uk-light .uk-nav-primary .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-divider,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-divider,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-divider,
.uk-overlay-primary .uk-nav-primary .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-nav-primary .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub a,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-primary .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub li.uk-active > a,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub li.uk-active > a {
  color: #fff;
}
.uk-light .uk-nav-secondary > li > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a,
.uk-card-primary.uk-card-body .uk-nav-secondary > li > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a,
.uk-card-secondary.uk-card-body .uk-nav-secondary > li > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a,
.uk-overlay-primary .uk-nav-secondary > li > a,
.uk-offcanvas-bar .uk-nav-secondary > li > a {
  color: #fff;
}
.uk-light .uk-nav-secondary > li > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover,
.uk-card-primary.uk-card-body .uk-nav-secondary > li > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a:hover,
.uk-card-secondary.uk-card-body .uk-nav-secondary > li > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a:hover,
.uk-overlay-primary .uk-nav-secondary > li > a:hover,
.uk-offcanvas-bar .uk-nav-secondary > li > a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.uk-light .uk-nav-secondary > li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-secondary > li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary > li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-secondary > li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary > li.uk-active > a,
.uk-overlay-primary .uk-nav-secondary > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-secondary > li.uk-active > a {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.uk-light .uk-nav-secondary .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-subtitle,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-subtitle,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-subtitle {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary > li > a:hover .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
  color: #fff;
}
.uk-light .uk-nav-secondary .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-header,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-header,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-header,
.uk-overlay-primary .uk-nav-secondary .uk-nav-header,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-header {
  color: #fff;
}
.uk-light .uk-nav-secondary .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-divider,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-divider,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-divider,
.uk-overlay-primary .uk-nav-secondary .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-nav-secondary .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub a,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-nav-secondary .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub li.uk-active > a,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub li.uk-active > a {
  color: #fff;
}
.uk-light .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-section-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-section-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-tile-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-card-primary.uk-card-body .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-card-secondary.uk-card-body .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-overlay-primary .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider),
.uk-offcanvas-bar .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-navbar-nav > li > a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a,
.uk-card-primary.uk-card-body .uk-navbar-nav > li > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a,
.uk-card-secondary.uk-card-body .uk-navbar-nav > li > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a,
.uk-overlay-primary .uk-navbar-nav > li > a,
.uk-offcanvas-bar .uk-navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-navbar-nav > li:hover > a,
.uk-light .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-card-primary.uk-card-body .uk-navbar-nav > li:hover > a,
.uk-card-primary.uk-card-body .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-nav > li:hover > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-card-secondary.uk-card-body .uk-navbar-nav > li:hover > a,
.uk-card-secondary.uk-card-body .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-nav > li:hover > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-overlay-primary .uk-navbar-nav > li:hover > a,
.uk-overlay-primary .uk-navbar-nav > li > a[aria-expanded="true"],
.uk-offcanvas-bar .uk-navbar-nav > li:hover > a,
.uk-offcanvas-bar .uk-navbar-nav > li > a[aria-expanded="true"] {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-navbar-nav > li > a:active,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active,
.uk-card-primary.uk-card-body .uk-navbar-nav > li > a:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a:active,
.uk-card-secondary.uk-card-body .uk-navbar-nav > li > a:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-nav > li > a:active,
.uk-overlay-primary .uk-navbar-nav > li > a:active,
.uk-offcanvas-bar .uk-navbar-nav > li > a:active {
  color: #fff;
}
.uk-light .uk-navbar-nav > li.uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a,
.uk-card-primary.uk-card-body .uk-navbar-nav > li.uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-nav > li.uk-active > a,
.uk-card-secondary.uk-card-body .uk-navbar-nav > li.uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-nav > li.uk-active > a,
.uk-overlay-primary .uk-navbar-nav > li.uk-active > a,
.uk-offcanvas-bar .uk-navbar-nav > li.uk-active > a {
  color: #fff;
}
.uk-light .uk-navbar-item,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-item,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-item,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-item,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-item,
.uk-card-primary.uk-card-body .uk-navbar-item,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-item,
.uk-card-secondary.uk-card-body .uk-navbar-item,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-item,
.uk-overlay-primary .uk-navbar-item,
.uk-offcanvas-bar .uk-navbar-item {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-navbar-toggle,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-card-primary.uk-card-body .uk-navbar-toggle,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-toggle,
.uk-card-secondary.uk-card-body .uk-navbar-toggle,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-toggle,
.uk-overlay-primary .uk-navbar-toggle,
.uk-offcanvas-bar .uk-navbar-toggle {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-navbar-toggle:hover,
.uk-light .uk-navbar-toggle[aria-expanded="true"],
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-card-primary.uk-card-body .uk-navbar-toggle:hover,
.uk-card-primary.uk-card-body .uk-navbar-toggle[aria-expanded="true"],
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-toggle:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-navbar-toggle[aria-expanded="true"],
.uk-card-secondary.uk-card-body .uk-navbar-toggle:hover,
.uk-card-secondary.uk-card-body .uk-navbar-toggle[aria-expanded="true"],
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-toggle:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-navbar-toggle[aria-expanded="true"],
.uk-overlay-primary .uk-navbar-toggle:hover,
.uk-overlay-primary .uk-navbar-toggle[aria-expanded="true"],
.uk-offcanvas-bar .uk-navbar-toggle:hover,
.uk-offcanvas-bar .uk-navbar-toggle[aria-expanded="true"] {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-subnav > * > :first-child,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child,
.uk-card-primary.uk-card-body .uk-subnav > * > :first-child,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav > * > :first-child,
.uk-card-secondary.uk-card-body .uk-subnav > * > :first-child,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav > * > :first-child,
.uk-overlay-primary .uk-subnav > * > :first-child,
.uk-offcanvas-bar .uk-subnav > * > :first-child {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-subnav > * > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover,
.uk-card-primary.uk-card-body .uk-subnav > * > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav > * > a:hover,
.uk-card-secondary.uk-card-body .uk-subnav > * > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav > * > a:hover,
.uk-overlay-primary .uk-subnav > * > a:hover,
.uk-offcanvas-bar .uk-subnav > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-subnav > .uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a,
.uk-card-primary.uk-card-body .uk-subnav > .uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav > .uk-active > a,
.uk-card-secondary.uk-card-body .uk-subnav > .uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav > .uk-active > a,
.uk-overlay-primary .uk-subnav > .uk-active > a,
.uk-offcanvas-bar .uk-subnav > .uk-active > a {
  color: #fff;
}
.uk-light .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-overlay-primary .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-subnav-pill > * > :first-child,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child,
.uk-card-primary.uk-card-body .uk-subnav-pill > * > :first-child,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > :first-child,
.uk-card-secondary.uk-card-body .uk-subnav-pill > * > :first-child,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > :first-child,
.uk-overlay-primary .uk-subnav-pill > * > :first-child,
.uk-offcanvas-bar .uk-subnav-pill > * > :first-child {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-subnav-pill > * > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover,
.uk-card-primary.uk-card-body .uk-subnav-pill > * > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > a:hover,
.uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > a:hover,
.uk-overlay-primary .uk-subnav-pill > * > a:hover,
.uk-offcanvas-bar .uk-subnav-pill > * > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-subnav-pill > * > a:active,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active,
.uk-card-primary.uk-card-body .uk-subnav-pill > * > a:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > a:active,
.uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav-pill > * > a:active,
.uk-overlay-primary .uk-subnav-pill > * > a:active,
.uk-offcanvas-bar .uk-subnav-pill > * > a:active {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-subnav-pill > .uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a,
.uk-card-primary.uk-card-body .uk-subnav-pill > .uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav-pill > .uk-active > a,
.uk-card-secondary.uk-card-body .uk-subnav-pill > .uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav-pill > .uk-active > a,
.uk-overlay-primary .uk-subnav-pill > .uk-active > a,
.uk-offcanvas-bar .uk-subnav-pill > .uk-active > a {
  background-color: #fff;
  color: #666;
}
.uk-light .uk-subnav > .uk-disabled > a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a,
.uk-card-primary.uk-card-body .uk-subnav > .uk-disabled > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-subnav > .uk-disabled > a,
.uk-card-secondary.uk-card-body .uk-subnav > .uk-disabled > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-subnav > .uk-disabled > a,
.uk-overlay-primary .uk-subnav > .uk-disabled > a,
.uk-offcanvas-bar .uk-subnav > .uk-disabled > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-breadcrumb > * > *,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > *,
.uk-card-primary.uk-card-body .uk-breadcrumb > * > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-breadcrumb > * > *,
.uk-card-secondary.uk-card-body .uk-breadcrumb > * > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-breadcrumb > * > *,
.uk-overlay-primary .uk-breadcrumb > * > *,
.uk-offcanvas-bar .uk-breadcrumb > * > * {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-breadcrumb > * > :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover,
.uk-card-primary.uk-card-body .uk-breadcrumb > * > :hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-breadcrumb > * > :hover,
.uk-card-secondary.uk-card-body .uk-breadcrumb > * > :hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-breadcrumb > * > :hover,
.uk-overlay-primary .uk-breadcrumb > * > :hover,
.uk-offcanvas-bar .uk-breadcrumb > * > :hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-breadcrumb > :last-child > *,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *,
.uk-card-primary.uk-card-body .uk-breadcrumb > :last-child > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-breadcrumb > :last-child > *,
.uk-card-secondary.uk-card-body .uk-breadcrumb > :last-child > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-breadcrumb > :last-child > *,
.uk-overlay-primary .uk-breadcrumb > :last-child > *,
.uk-offcanvas-bar .uk-breadcrumb > :last-child > * {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-overlay-primary .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-pagination > * > *,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > *,
.uk-card-primary.uk-card-body .uk-pagination > * > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-pagination > * > *,
.uk-card-secondary.uk-card-body .uk-pagination > * > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-pagination > * > *,
.uk-overlay-primary .uk-pagination > * > *,
.uk-offcanvas-bar .uk-pagination > * > * {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-pagination > * > :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover,
.uk-card-primary.uk-card-body .uk-pagination > * > :hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-pagination > * > :hover,
.uk-card-secondary.uk-card-body .uk-pagination > * > :hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-pagination > * > :hover,
.uk-overlay-primary .uk-pagination > * > :hover,
.uk-offcanvas-bar .uk-pagination > * > :hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-pagination > .uk-active > *,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > *,
.uk-card-primary.uk-card-body .uk-pagination > .uk-active > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-pagination > .uk-active > *,
.uk-card-secondary.uk-card-body .uk-pagination > .uk-active > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-pagination > .uk-active > *,
.uk-overlay-primary .uk-pagination > .uk-active > *,
.uk-offcanvas-bar .uk-pagination > .uk-active > * {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-pagination > .uk-disabled > *,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *,
.uk-card-primary.uk-card-body .uk-pagination > .uk-disabled > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-pagination > .uk-disabled > *,
.uk-card-secondary.uk-card-body .uk-pagination > .uk-disabled > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-pagination > .uk-disabled > *,
.uk-overlay-primary .uk-pagination > .uk-disabled > *,
.uk-offcanvas-bar .uk-pagination > .uk-disabled > * {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-tab::before,
.uk-section-primary:not(.uk-preserve-color) .uk-tab::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab::before,
.uk-card-primary.uk-card-body .uk-tab::before,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-tab::before,
.uk-card-secondary.uk-card-body .uk-tab::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-tab::before,
.uk-overlay-primary .uk-tab::before,
.uk-offcanvas-bar .uk-tab::before {
  border-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-tab > * > a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a,
.uk-card-primary.uk-card-body .uk-tab > * > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-tab > * > a,
.uk-card-secondary.uk-card-body .uk-tab > * > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-tab > * > a,
.uk-overlay-primary .uk-tab > * > a,
.uk-offcanvas-bar .uk-tab > * > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-tab > * > a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover,
.uk-card-primary.uk-card-body .uk-tab > * > a:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-tab > * > a:hover,
.uk-card-secondary.uk-card-body .uk-tab > * > a:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-tab > * > a:hover,
.uk-overlay-primary .uk-tab > * > a:hover,
.uk-offcanvas-bar .uk-tab > * > a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-tab > .uk-active > a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a,
.uk-card-primary.uk-card-body .uk-tab > .uk-active > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-tab > .uk-active > a,
.uk-card-secondary.uk-card-body .uk-tab > .uk-active > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-tab > .uk-active > a,
.uk-overlay-primary .uk-tab > .uk-active > a,
.uk-offcanvas-bar .uk-tab > .uk-active > a {
  color: #fff;
  border-color: #fff;
}
.uk-light .uk-tab > .uk-disabled > a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a,
.uk-card-primary.uk-card-body .uk-tab > .uk-disabled > a,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-tab > .uk-disabled > a,
.uk-card-secondary.uk-card-body .uk-tab > .uk-disabled > a,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-tab > .uk-disabled > a,
.uk-overlay-primary .uk-tab > .uk-disabled > a,
.uk-offcanvas-bar .uk-tab > .uk-disabled > a {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-slidenav,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav,
.uk-card-primary.uk-card-body .uk-slidenav,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-slidenav,
.uk-card-secondary.uk-card-body .uk-slidenav,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-slidenav,
.uk-overlay-primary .uk-slidenav,
.uk-offcanvas-bar .uk-slidenav {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-slidenav:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-card-primary.uk-card-body .uk-slidenav:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-slidenav:hover,
.uk-card-secondary.uk-card-body .uk-slidenav:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-slidenav:hover,
.uk-overlay-primary .uk-slidenav:hover,
.uk-offcanvas-bar .uk-slidenav:hover {
  color: rgba(255, 255, 255, 0.95);
}
.uk-light .uk-slidenav:active,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-card-primary.uk-card-body .uk-slidenav:active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-slidenav:active,
.uk-card-secondary.uk-card-body .uk-slidenav:active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-slidenav:active,
.uk-overlay-primary .uk-slidenav:active,
.uk-offcanvas-bar .uk-slidenav:active {
  color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-dotnav > * > *,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > *,
.uk-card-primary.uk-card-body .uk-dotnav > * > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > *,
.uk-card-secondary.uk-card-body .uk-dotnav > * > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > *,
.uk-overlay-primary .uk-dotnav > * > *,
.uk-offcanvas-bar .uk-dotnav > * > * {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.9);
}
.uk-light .uk-dotnav > * > :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover,
.uk-card-primary.uk-card-body .uk-dotnav > * > :hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > :hover,
.uk-card-secondary.uk-card-body .uk-dotnav > * > :hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > :hover,
.uk-overlay-primary .uk-dotnav > * > :hover,
.uk-offcanvas-bar .uk-dotnav > * > :hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}
.uk-light .uk-dotnav > * > :active,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :active,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active,
.uk-card-primary.uk-card-body .uk-dotnav > * > :active,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > :active,
.uk-card-secondary.uk-card-body .uk-dotnav > * > :active,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > :active,
.uk-overlay-primary .uk-dotnav > * > :active,
.uk-offcanvas-bar .uk-dotnav > * > :active {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.uk-light .uk-dotnav > .uk-active > *,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *,
.uk-card-primary.uk-card-body .uk-dotnav > .uk-active > *,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > .uk-active > *,
.uk-card-secondary.uk-card-body .uk-dotnav > .uk-active > *,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > .uk-active > *,
.uk-overlay-primary .uk-dotnav > .uk-active > *,
.uk-offcanvas-bar .uk-dotnav > .uk-active > * {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}
.uk-light .uk-text-lead,
.uk-section-primary:not(.uk-preserve-color) .uk-text-lead,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-lead,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-lead,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-lead,
.uk-card-primary.uk-card-body .uk-text-lead,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-lead,
.uk-card-secondary.uk-card-body .uk-text-lead,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-lead,
.uk-overlay-primary .uk-text-lead,
.uk-offcanvas-bar .uk-text-lead {
  color: #fff;
}
.uk-light .uk-text-meta,
.uk-section-primary:not(.uk-preserve-color) .uk-text-meta,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-meta,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-meta,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-meta,
.uk-card-primary.uk-card-body .uk-text-meta,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-meta,
.uk-card-secondary.uk-card-body .uk-text-meta,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-meta,
.uk-overlay-primary .uk-text-meta,
.uk-offcanvas-bar .uk-text-meta {
  color: rgba(255, 255, 255, 0.5);
}
.uk-light .uk-text-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-card-primary.uk-card-body .uk-text-muted,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-muted,
.uk-card-secondary.uk-card-body .uk-text-muted,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-muted,
.uk-overlay-primary .uk-text-muted,
.uk-offcanvas-bar .uk-text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}
.uk-light .uk-text-emphasis,
.uk-section-primary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-card-primary.uk-card-body .uk-text-emphasis,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-emphasis,
.uk-card-secondary.uk-card-body .uk-text-emphasis,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-emphasis,
.uk-overlay-primary .uk-text-emphasis,
.uk-offcanvas-bar .uk-text-emphasis {
  color: #fff !important;
}
.uk-light .uk-text-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-text-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-primary,
.uk-card-primary.uk-card-body .uk-text-primary,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-primary,
.uk-card-secondary.uk-card-body .uk-text-primary,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-primary,
.uk-overlay-primary .uk-text-primary,
.uk-offcanvas-bar .uk-text-primary {
  color: #fff !important;
}
.uk-light .uk-text-secondary,
.uk-section-primary:not(.uk-preserve-color) .uk-text-secondary,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-secondary,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-secondary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-secondary,
.uk-card-primary.uk-card-body .uk-text-secondary,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-text-secondary,
.uk-card-secondary.uk-card-body .uk-text-secondary,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-text-secondary,
.uk-overlay-primary .uk-text-secondary,
.uk-offcanvas-bar .uk-text-secondary {
  color: #fff !important;
}
.uk-light .uk-column-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-column-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-column-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-column-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-column-divider,
.uk-card-primary.uk-card-body .uk-column-divider,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-column-divider,
.uk-card-secondary.uk-card-body .uk-column-divider,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-column-divider,
.uk-overlay-primary .uk-column-divider,
.uk-offcanvas-bar .uk-column-divider {
  -moz-column-rule-color: rgba(255, 255, 255, 0.2);
       column-rule-color: rgba(255, 255, 255, 0.2);
}
.uk-light .uk-logo,
.uk-section-primary:not(.uk-preserve-color) .uk-logo,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo,
.uk-card-primary.uk-card-body .uk-logo,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-logo,
.uk-card-secondary.uk-card-body .uk-logo,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-logo,
.uk-overlay-primary .uk-logo,
.uk-offcanvas-bar .uk-logo {
  color: #fff;
}
.uk-light .uk-logo:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-logo:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo:hover,
.uk-card-primary.uk-card-body .uk-logo:hover,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-logo:hover,
.uk-card-secondary.uk-card-body .uk-logo:hover,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-logo:hover,
.uk-overlay-primary .uk-logo:hover,
.uk-offcanvas-bar .uk-logo:hover {
  color: #fff;
}
.uk-light .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-section-primary:not(.uk-preserve-color) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-section-secondary:not(.uk-preserve-color) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-tile-primary:not(.uk-preserve-color) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-card-primary.uk-card-body .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-card-primary > :not([class*="uk-card-media"]) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-card-secondary.uk-card-body .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-overlay-primary .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse),
.uk-offcanvas-bar .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) {
  display: none;
}
.uk-light .uk-logo-inverse,
.uk-section-primary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-card-primary.uk-card-body .uk-logo-inverse,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-logo-inverse,
.uk-card-secondary.uk-card-body .uk-logo-inverse,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-logo-inverse,
.uk-overlay-primary .uk-logo-inverse,
.uk-offcanvas-bar .uk-logo-inverse {
  display: block;
}
.uk-light .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-light .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-primary.uk-card-body .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-card-primary > :not([class*="uk-card-media"]) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-secondary.uk-card-body .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-card-secondary > :not([class*="uk-card-media"]) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-overlay-primary .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-offcanvas-bar .uk-table-striped > tr:nth-of-type(even):last-child,
.uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(even):last-child {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
/*
 * Pass dropbar behind color to JS
 */
* {
  --uk-inverse: initial;
}
.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-card-primary.uk-card-body,
.uk-card-primary > :not([class*="uk-card-media"]),
.uk-card-secondary.uk-card-body,
.uk-card-secondary > :not([class*="uk-card-media"]),
.uk-overlay-primary,
.uk-offcanvas-bar {
  --uk-inverse: light;
}
.uk-dark,
.uk-section-default:not(.uk-preserve-color),
.uk-section-muted:not(.uk-preserve-color),
.uk-tile-default:not(.uk-preserve-color),
.uk-tile-muted:not(.uk-preserve-color),
.uk-card-default.uk-card-body,
.uk-card-default > :not([class*="uk-card-media"]),
.uk-card-overlay.uk-card-body,
.uk-card-overlay > :not([class*="uk-card-media"]),
.uk-overlay-default,
.uk-dropbar,
.uk-navbar-container:not(.uk-navbar-transparent),
.uk-navbar-dropdown:not(.uk-preserve-color),
.uk-dropdown {
  --uk-inverse: dark;
}
.uk-inverse-light {
  --uk-inverse: light !important;
}
.uk-inverse-dark {
  --uk-inverse: dark !important;
}
/* ========================================================================
   Component: Print
 ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* Default modifier
 ========================================================================== */
/*
 * Item
 */
/*
 * Title
 */
/*
 * Icon
 */
/*
 * Content
 */
@charset "UTF-8";
.leo-app-shell {
  background-color: #f8f9fc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Vazir", sans-serif;
}

.leo-app-shell input,
.leo-app-shell select,
.leo-app-shell textarea,
.leo-app-shell button {
  font-family: inherit;
}

.leo-app-shell::-webkit-scrollbar,
.leo-app-shell *::-webkit-scrollbar {
  width: 8px;
}

.leo-app-shell::-webkit-scrollbar-track,
.leo-app-shell *::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.leo-app-shell::-webkit-scrollbar-thumb,
.leo-app-shell *::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.leo-app-shell::-webkit-scrollbar-thumb:hover,
.leo-app-shell *::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.leo-app-shell__container {
  padding-left: 24px;
  padding-right: 24px;
}

.leo-app-shell__layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.leo-app-shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.leo-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  z-index: 20;
}

.leo-mobile-header__brand {
  font-size: 20px;
  font-weight: 900;
  color: #1f2937;
}

.leo-mobile-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  -o-object-fit: cover;
     object-fit: cover;
}

.leo-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 30;
}

.leo-sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.leo-app-user {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100%;
}

.leo-app-user [resource-id=request-animes] {
  white-space: pre-line;
}

.leo-app-user [resource-id=comments] {
  word-break: break-word;
}

.leo-app-user .resourceTableBtn {
  white-space: normal;
}

.leo-app-user .resourceBtnSave.uk-button-danger {
  background-color: #f0506e !important;
}

.leo-app-user .resourceTable th {
  background-color: #fff5e2;
  color: #f6a504;
  border-color: #ffe0a4;
}

.leo-app-user .resourceIndex > h1 {
  margin-top: 13px;
}

.leo-app-user .leo-dashboard {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.leo-app-user .user-top {
  background-color: #fff;
  margin-bottom: 0;
  box-shadow: none;
  padding: 28px;
  border-radius: 32px;
}

.leo-app-user .user-top .user-top__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

.leo-app-user .user-top .user-top__profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f8fafc;
  border: 1px solid #edf1f5;
  border-radius: 24px;
  padding: 12px;
  flex: 1 1 280px;
  min-width: 240px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.leo-app-user .user-top .user-top__profile-card:hover {
  border-color: rgba(246, 165, 4, 0.35);
  box-shadow: 0 16px 30px rgba(246, 165, 4, 0.18);
  transform: translateY(-2px);
}

.leo-app-user .user-top .user-top__profile-avatar {
  position: relative;
  flex-shrink: 0;
}

.leo-app-user .user-top .user-top__profile-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 2px solid #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  -o-object-fit: cover;
     object-fit: cover;
}

.leo-app-user .user-top .user-top__profile-status {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background-color: #3dd68c;
  border: 2px solid #fff;
  bottom: -1px;
  right: -1px;
  animation: pulse-user 1.8s infinite;
}

.leo-app-user .user-top .user-top__profile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.leo-app-user .user-top .user-top__profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.leo-app-user .user-top .user-top__name {
  color: #1f2937;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

.leo-app-user .user-top .user-top__email {
  color: #9aa2a9;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
}

.leo-app-user .user-top .user-top__id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9aa2a9;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}

.leo-app-user .user-top .user-top__id .value {
  color: #111827;
  font-weight: 700;
}

.leo-app-user .user-top .user-top__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #15803d;
  white-space: nowrap;
}

.leo-app-user .user-top .user-top__status .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.leo-app-user .user-top .user-top__status.is-inactive {
  background: #fef2f2;
  color: #b91c1c;
}

.leo-app-user .user-top .user-top__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
}

.leo-app-user .user-top .user-top__profile-link span[aria-hidden=true] {
  font-size: 16px;
  line-height: 1;
}

.leo-app-user .user-top .user-top__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  flex: 1 1 360px;
  width: 100%;
}

.leo-app-user .user-top .user-top__card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #eef1f5;
  border-radius: 32px;
  padding: 20px;
  min-height: 150px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.leo-app-user .user-top .user-top__card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: rgba(246, 165, 4, 0.25);
}

.leo-app-user .user-top .user-top__card-bg {
  position: absolute;
  top: -36px;
  right: -36px;
  width: 136px;
  height: 136px;
  border-radius: 48px;
  background: rgba(246, 165, 4, 0.08);
}

.leo-app-user .user-top .user-top__card--manga .user-top__card-bg {
  background: rgba(37, 99, 235, 0.08);
}

.leo-app-user .user-top .user-top__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.leo-app-user .user-top .user-top__card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.leo-app-user .user-top .user-top__card-label {
  font-size: 12px;
  line-height: 16px;
  color: #9aa2a9;
  font-weight: 700;
  margin-bottom: 8px;
}

.leo-app-user .user-top .user-top__card-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 6px;
}

.leo-app-user .user-top .user-top__card-value .unit {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #9aa2a9;
}

.leo-app-user .user-top .user-top__card-sub {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: #8c8c8c;
  margin: 0;
}

.leo-app-user .user-top .user-top__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(246, 165, 4, 0.1);
  color: #f6a504;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leo-app-user .user-top .user-top__card--manga .user-top__card-icon {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.leo-app-user .user-top .user-top__progress {
  width: 100%;
  height: 10px;
  background: #edf1f7;
  border-radius: 999px;
  overflow: hidden;
}

.leo-app-user .user-top .user-top__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f6a504;
  box-shadow: 0 0 12px rgba(246, 165, 4, 0.4);
}

.leo-app-user .user-top .user-top__card--manga .user-top__progress-bar {
  background: #2563eb;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

.leo-app-user .user-top .user-top__card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: #ecfdf3;
  color: #1d9251;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}

.leo-app-user .user-top .user-top__card-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.leo-app-user .user-top .user-top__card-status.is-inactive {
  background: #fef2f2;
  color: #b91c1c;
}

.leo-app-user .user-top .user-info {
  display: flex;
}

.leo-app-user .user-top .user-info .name {
  color: #848484;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.leo-app-user .user-top .user-info .email {
  color: #727272;
  font-weight: bold;
  margin-bottom: 5px;
}

.leo-app-user .user-top .user-info .user_id {
  color: #848484;
}

.leo-app-user .user-top .user-info .info {
  padding-right: 10px;
}

.leo-app-user .user-top .user-info img {
  width: 72px;
  height: 72px;
  border: 4px solid #F6A504;
  border-radius: 22px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 640px) {
  .leo-app-user .user-top {
    padding: 18px;
    overflow-x: hidden;
  }

  .leo-app-user .user-top .user-top__grid {
    gap: 12px;
  }

  .leo-app-user .user-top .user-top__profile-card {
    min-width: 0;
    width: 100%;
    padding: 10px;
  }

  .leo-app-user .user-top .user-top__profile-body,
  .leo-app-user .user-top .user-top__profile-header,
  .leo-app-user .user-top .user-top__name,
  .leo-app-user .user-top .user-top__email {
    min-width: 0;
  }

  .leo-app-user .user-top .user-top__profile-link {
    font-size: 14px;
    line-height: 20px;
  }

  .leo-app-user .user-top .user-top__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .leo-app-user .user-top .user-top__card {
    border-radius: 22px;
    padding: 16px;
  }

  .leo-app-user .user-top .user-top__card-icon {
    width: auto;
    min-width: 36px;
    height: 36px;
    border-radius: 12px;
    padding: 0 8px;
  }

  .leo-app-user .user-top .user-info {
    gap: 8px;
  }

  .leo-app-user .user-top .user-info .info {
    min-width: 0;
    width: auto;
    padding-right: 0;
  }

  .leo-app-user .user-top .user-info img {
    width: 22%;
    min-width: 52px;
    max-width: 72px;
    height: auto;
    aspect-ratio: 1/1;
  }
}

@keyframes pulse-user {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.6);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 214, 140, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0);
  }
}

.leo-app-user .leo-main {
  flex: 1;
  min-height: 0;
  padding: 32px;
  overflow-y: auto;
}

.leo-app-user .sidebar-content {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  height: 100%;
  min-height: 0;
  border-top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.leo-app-user .leo-sidebar__brand {
  padding: 20px 8px 4px;
  min-height: 112px;
  display: flex;
  align-items: center;
}

.leo-app-user .leo-sidebar__brand-link {
  font-size: 30px;
  font-weight: 900;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.leo-app-user .leo-sidebar__brand-title {
  display: block;
}

.leo-app-user .leo-sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.leo-app-user .leo-sidebar__menu-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa2a9;
  font-weight: 800;
  padding: 0 16px 6px;
}

.leo-app-user .leo-sidebar__menu-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.leo-app-user .leo-sidebar__menu .menu-list,
.leo-app-user .leo-sidebar__menu-list .menu-list {
  min-height: 0;
}

.leo-app-user .leo-sidebar__menu ul.menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: max(24px, 24px + env(safe-area-inset-bottom));
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li {
  border-radius: 24px;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #6b7280;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.active {
  background-color: #F6A504;
  box-shadow: 0 10px 20px rgba(246, 165, 4, 0.25);
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.active > a {
  color: #fff;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.active svg {
  stroke: currentColor;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.active svg[fill=none] {
  fill: none;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li:hover {
  background-color: #f8fafc;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li:hover > a {
  color: #1f2937;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li > a svg {
  width: 22px !important;
  height: 22px !important;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.menu-item-logout > a {
  color: #ef4444;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.menu-item-logout svg {
  stroke: currentColor;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.menu-item-logout svg[fill=none] {
  fill: none;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.menu-item-logout:hover {
  background-color: #fee2e2;
}

.leo-app-user .leo-sidebar__menu ul.menu-list > li.menu-item-logout:hover > a {
  color: #dc2626;
}

.leo-app-user .leo-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.leo-app-user .leo-sidebar-profile:hover {
  border-color: rgba(246, 165, 4, 0.35);
  box-shadow: 0 12px 24px rgba(246, 165, 4, 0.16);
  transform: translateY(-1px);
}

.leo-app-user .leo-sidebar-profile__avatar {
  position: relative;
  flex-shrink: 0;
}

.leo-app-user .leo-sidebar-profile__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  -o-object-fit: cover;
     object-fit: cover;
}

.leo-app-user .leo-sidebar-profile__status {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #22c55e;
  border: 2px solid #fff;
  bottom: -1px;
  right: -1px;
}

.leo-app-user .leo-sidebar-profile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.leo-app-user .leo-sidebar-profile__name {
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leo-app-user .leo-sidebar-profile__email {
  font-size: 10px;
  font-weight: 600;
  color: #9aa2a9;
  direction: ltr;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 959px) {
  .leo-app-user .sidebar {
    height: 100%;
  }
}

.leo-app-user .leo-app-user ul.menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leo-app-user .leo-app-user ul.menu-list > li {
  border-radius: 24px;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.leo-app-user .leo-app-user ul.menu-list > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #6b7280;
}

.leo-app-user .leo-app-user ul.menu-list > li.active {
  background-color: #F6A504;
  box-shadow: 0 10px 20px rgba(246, 165, 4, 0.25);
}

.leo-app-user .leo-app-user ul.menu-list > li.active > a {
  color: #fff;
}

.leo-app-user .leo-app-user ul.menu-list > li.active svg {
  stroke: currentColor;
}

.leo-app-user .leo-app-user ul.menu-list > li.active svg[fill=none] {
  fill: none;
}

.leo-app-user .leo-app-user ul.menu-list > li:hover {
  background-color: #f8fafc;
}

.leo-app-user .leo-app-user ul.menu-list > li:hover > a {
  color: #1f2937;
}

.leo-app-user .leo-app-user ul.menu-list > li > a svg {
  width: 22px !important;
  height: 22px !important;
}

.leo-app-user .leo-app-user ul.menu-list > li.menu-item-logout > a {
  color: #ef4444;
}

.leo-app-user .leo-app-user ul.menu-list > li.menu-item-logout svg {
  stroke: currentColor;
}

.leo-app-user .leo-app-user ul.menu-list > li.menu-item-logout svg[fill=none] {
  fill: none;
}

.leo-app-user .leo-app-user ul.menu-list > li.menu-item-logout:hover {
  background-color: #fee2e2;
}

.leo-app-user .leo-app-user ul.menu-list > li.menu-item-logout:hover > a {
  color: #dc2626;
}

.leo-app-user .leo-app-user .leo-sidebar-bottom {
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leo-app-user .leo-app-user .leo-sidebar-bottom .leo-sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  color: #ef4444;
  font-weight: 700;
  text-decoration: none;
}

.leo-app-user .leo-app-user .leo-sidebar-bottom .leo-sidebar-logout:hover {
  background-color: #fee2e2;
}

.leo-app-user ul.menu-list > li.active,
.leo-app-user ul.menu-list > li:hover {
  background-color: #F1F3F5;
}

.leo-app-user ul.menu-list > li > a svg {
  width: 15px !important;
  height: 15px !important;
}

.leo-app-user .buy-sharing {
  box-shadow: 0px 3px 10px rgba(204, 204, 204, 0.1019607843);
  border-radius: 5px;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 20px;
}

.leo-app-user .dashboard-buy {
  background-color: #fff;
  border-radius: 28px;
  border: 1px solid #f1f3f5;
  box-shadow: 0 8px 24px rgba(229, 231, 235, 0.3019607843);
  padding: 24px;
}

.leo-app-user .dashboard-buy__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.leo-app-user .dashboard-buy__title {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
}

.leo-app-user .dashboard-buy__subtitle {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
}

.leo-app-user .dashboard-buy__action {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 18px;
  padding: 12px 24px;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(246, 165, 4, 0.28);
  background-color: #f6a504;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: right;
}

.leo-app-user .dashboard-buy__action.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 18px;
  padding: 12px 24px;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(246, 165, 4, 0.28);
  background-color: #f6a504;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.leo-app-user .dashboard-buy__action:hover {
  background-color: #f59e0b;
}

.leo-app-user .dashboard-buy__action.disabled,
.leo-app-user .dashboard-buy__action:disabled {
  background-color: #e5e7eb;
  box-shadow: none;
  color: #6b7280;
  cursor: not-allowed;
  pointer-events: none;
}

.leo-app-user .dashboard-buy__action:active {
  transform: scale(0.98);
}

.leo-app-user .dashboard-buy__button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.leo-app-user .dashboard-buy__action svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .leo-app-user .dashboard-buy__action {
    width: 100%;
  }
}

.leo-app-user .user-content {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 24px;
}

@media (min-width: 959px) {
  .leo-app-user .user-content {
    padding-right: 0;
  }
}

.leo-app-user .buy-sharing .label {
  padding-right: 15px;
}

.leo-app-user .buy-sharing .btn {
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
  border-radius: 5px;
  color: #fff;
  background-color: #F6A504;
  padding: 10px 30px;
  text-align: center;
}

.leo-app-user .dashboard-overview {
  margin-top: 24px;
  margin-bottom: 24px;
}

.leo-app-user .dashboard-overview__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.leo-app-user .dashboard-overview__header h1 {
  font-size: 28px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 6px;
}

.leo-app-user .dashboard-overview__header p {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
}

.leo-app-user .dashboard-overview__actions .box-sharing .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 18px;
  font-weight: 700;
  background-color: #111827;
  color: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1215686275);
}

.leo-app-user .dashboard-overview__actions svg {
  width: 16px;
  height: 16px;
}

.leo-app-user .dashboard-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.leo-app-user .dashboard-overview__card {
  position: relative;
  border-radius: 26px;
  padding: 22px;
  border: 1px solid #f1f3f5;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(229, 231, 235, 0.4);
}

.leo-app-user .dashboard-overview__card--dark {
  background-color: #111827;
  color: #fff;
  border: none;
}

.leo-app-user .dashboard-overview__card-accent {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 110px;
  height: 110px;
  border-radius: 40px;
  background-color: rgba(246, 165, 4, 0.08);
}

.leo-app-user .dashboard-overview__card--info .dashboard-overview__card-accent {
  background-color: rgba(59, 130, 246, 0.08);
}

.leo-app-user .dashboard-overview__card--level .dashboard-overview__card-accent {
  background-color: rgba(59, 130, 246, 0.12);
}

.leo-app-user .dashboard-overview__card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.leo-app-user .dashboard-overview__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.leo-app-user .dashboard-overview__card-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.08em;
}

.leo-app-user .dashboard-overview__card-value {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: #1f2937;
}

.leo-app-user .dashboard-overview__card-value small {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
}

.leo-app-user .dashboard-overview__card-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  margin-top: 4px;
}

.leo-app-user .dashboard-overview__card-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f6a504;
  background-color: rgba(246, 165, 4, 0.15);
}

.leo-app-user .dashboard-overview__card-icon svg {
  width: 22px;
  height: 22px;
}

.leo-app-user .dashboard-overview__card-icon--info {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.12);
}

.leo-app-user .dashboard-overview__card-icon--level {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.12);
}

.leo-app-user .dashboard-overview__progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background-color: #f3f4f6;
  overflow: hidden;
}

.leo-app-user .dashboard-overview__progress-bar {
  display: block;
  height: 100%;
  background-color: #f6a504;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(246, 165, 4, 0.4);
}

.leo-app-user .dashboard-overview__progress-bar--info {
  background-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

.leo-app-user .dashboard-overview__glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(246, 165, 4, 0.4);
  border-radius: 999px;
  filter: blur(80px);
}

.leo-app-user .dashboard-overview__support {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leo-app-user .dashboard-overview__support-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leo-app-user .dashboard-overview__support-icon svg {
  width: 20px;
  height: 20px;
}

.leo-app-user .dashboard-overview__support h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.leo-app-user .dashboard-overview__support p {
  font-size: 12px;
  color: #9ca3af;
}

.leo-app-user .dashboard-overview__support-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  background-color: #fff;
  color: #111827;
}

.leo-app-user .dashboard-overview__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.leo-app-user .dashboard-overview__badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: currentColor;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.leo-app-user .dashboard-overview__badge.is-inactive {
  background-color: rgba(156, 163, 175, 0.12);
  color: #9ca3af;
}

.leo-app-user .dashboard-overview__card--dark .dashboard-overview__support-link {
  background-color: #fff;
  color: #111827;
}

.leo-app-user .panel-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.leo-app-user .panel-page-header h1 {
  font-size: 24px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 6px;
}

.leo-app-user .panel-page-header p {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  margin: 0;
}

.leo-app-user .panel-page-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leo-app-user .panel-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 18px;
  border: none;
  background-color: #f6a504;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(246, 165, 4, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.leo-app-user .panel-action-btn svg {
  width: 18px;
  height: 18px;
}

.leo-app-user .panel-action-btn:hover {
  transform: translateY(-1px);
}

.leo-app-user .panel-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.leo-app-user .panel-secondary-btn svg {
  width: 16px;
  height: 16px;
}

.leo-app-user .panel-secondary-btn:hover {
  border-color: #f6a504;
  color: #f6a504;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.leo-app-user .panel-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.leo-app-user .panel-section-title svg {
  width: 20px;
  height: 20px;
  color: #f6a504;
}

.leo-app-user .panel-section-title h3 {
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  margin: 0;
}

.leo-app-user .panel-section-title--compact {
  margin-bottom: 4px;
}

.leo-app-user .leo-modal {
  padding: 16px;
}

.leo-app-user .leo-modal__dialog {
  background: #fff;
  border-radius: 32px;
  padding: 0;
  overflow: hidden;
  max-width: 520px;
}

.leo-app-user .leo-modal__dialog--compact {
  max-width: 420px;
}

.leo-app-user .leo-modal__close {
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  border-radius: 14px;
  background-color: #f3f4f6;
  padding: 6px;
}

.leo-app-user .leo-modal__header {
  padding: 28px 24px 12px;
}

.leo-app-user .leo-modal__header h3 {
  font-size: 22px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 6px;
}

.leo-app-user .leo-modal__header p {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  margin: 0;
}

.leo-app-user .leo-modal__body {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leo-app-user .leo-modal__toggle {
  display: flex;
  gap: 6px;
  background-color: #f3f4f6;
  padding: 6px;
  border-radius: 18px;
}

.leo-app-user .leo-modal__toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
}

.leo-app-user .leo-modal__toggle-btn.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.leo-app-user .leo-modal__field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 8px;
}

.leo-app-user .leo-modal__input,
.leo-app-user .leo-modal__text-input,
.leo-app-user .leo-modal__textarea {
  width: 100%;
  border-radius: 18px;
  background-color: #f9fafb;
  border: 2px solid transparent;
  transition: 0.2s ease;
}

.leo-app-user .leo-modal__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.leo-app-user .leo-modal__input svg {
  width: 18px;
  height: 18px;
  color: #9ca3af;
}

.leo-app-user .leo-modal__input input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.leo-app-user .leo-modal__text-input {
  padding: 12px 16px;
  border: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  outline: none;
}

.leo-app-user .leo-modal__textarea {
  padding: 10px 14px;
}

.leo-app-user .leo-modal__textarea textarea {
  border: none;
  background: transparent;
  width: 100%;
  resize: none;
  outline: none;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.leo-app-user .leo-modal__hash {
  font-size: 18px;
  font-weight: 900;
  color: #9ca3af;
}

.leo-app-user .leo-modal__hint {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  margin-top: 6px;
}

.leo-app-user .leo-modal__upload {
  border: 2px dashed #e5e7eb;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-weight: 700;
  transition: 0.2s ease;
}

.leo-app-user .leo-modal__upload svg {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}

.leo-app-user .leo-modal__upload small {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: #d1d5db;
}

.leo-app-user .leo-modal__counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background-color: #f9fafb;
  border: 1px solid #eef2f7;
}

.leo-app-user .leo-modal__counter span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
}

.leo-app-user .leo-modal__counter small {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

.leo-app-user .leo-modal__counter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 6px;
}

.leo-app-user .leo-modal__counter-controls button {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-weight: 800;
  color: #6b7280;
  cursor: pointer;
}

.leo-app-user .leo-modal__counter-controls span {
  min-width: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: #1f2937;
}

.leo-app-user .leo-modal__counter-controls .is-highlight {
  color: #f6a504;
}

.leo-app-user .leo-modal__delete {
  text-align: center;
  padding: 28px 24px 12px;
}

.leo-app-user .leo-modal__delete-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leo-app-user .leo-modal__delete h3 {
  font-size: 20px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 8px;
}

.leo-app-user .leo-modal__delete p {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.leo-app-user .leo-modal__footer {
  padding: 18px 24px 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 12px;
}

.leo-app-user .leo-modal__footer--split {
  justify-content: space-between;
}

.leo-app-user .leo-modal__footer--split button {
  flex: 1;
}

.leo-app-user .leo-modal__primary,
.leo-app-user .leo-modal__ghost,
.leo-app-user .leo-modal__danger {
  border-radius: 16px;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.leo-app-user .leo-modal__primary {
  background-color: #f6a504;
  color: #fff;
  box-shadow: 0 12px 24px rgba(246, 165, 4, 0.25);
}

.leo-app-user .leo-modal__ghost {
  background-color: #f9fafb;
  color: #6b7280;
}

.leo-app-user .leo-modal__danger {
  background-color: #ef4444;
  color: #fff;
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.25);
}

.leo-app-user .uk-notification {
  z-index: 1200;
}

.leo-app-user .uk-notification-message {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
}

.leo-app-user .uk-notification-message-success {
  background-color: #fff;
  border: 1px solid #dcfce7;
  color: #16a34a;
}

.leo-app-user .uk-notification-message-warning,
.leo-app-user .uk-notification-message-danger {
  background-color: #fff;
  border: 1px solid #fee2e2;
  color: #dc2626;
}

.leo-app-user .content > .resourceIndex > h1 {
  position: absolute;
  margin-top: 17px;
}

.leo-app-user .last-payment {
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(204, 204, 204, 0.1019607843);
  border-radius: 5px;
}

.leo-app-user .last-payment .resourceTable {
  border-radius: 5px;
  overflow: hidden;
}

.leo-app-user .last-payment .resourceTable td:first-child,
.leo-app-user .last-payment .resourceTable th:first-child {
  padding: 0 !important;
}

.leo-app-user .last-payment td {
  border: 0;
}

.leo-app-user .last-payment tr:nth-child(odd) {
  background-color: #F5F9FC;
}

.leo-app-user .last-payment thead th {
  background-color: #ffffff;
  color: #7c858e;
}

.leo-app-user .last-payment th,
.leo-app-user .last-payment td {
  border: 1px solid #E2F3FF;
}

.leo-app-user .last-payment h1 {
  border-bottom: 1px solid #ECECEC;
  padding: 15px;
  font-size: 16px;
  padding-top: 5px;
}

.leo-app-user .last-payment .resourceIndexBodyContent {
  padding: 15px;
  padding-top: 0;
}

.leo-app-user .resourceIndex {
  position: relative;
}

.leo-app-user .resourceIndex .resourceIndexHeader.navbar ~ .resourceIndexBody {
  margin-top: 20px;
}

.leo-app-user .resourceIndex .resourceIndexBodyHeader.navbar {
  display: none;
}

.leo-app-user .resourceIndex .resourceTableBtn [leoicon=leoView] {
  color: #7c7c7c !important;
}

.leo-app-user .resourceIndex .resourceTableBtn [leoicon=leoView] ~ .label {
  color: #7c7c7c !important;
}

.leo-main__grid {
  align-items: flex-start;
}

.leo-sidebar-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  max-width: 280px;
  min-height: 0;
}

.leo-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

.leo-sidebar__content {
  border-radius: 0;
  background-color: #fff;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.06);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.leo-content-col {
  min-width: 0;
}

.leo-content {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 991px) {
  .leo-sidebar__content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .leo-app-user .leo-main {
    padding: 12px;
  }
}

@media (max-width: 1024px) {
  body.leo-sidebar-open {
    overflow: hidden;
  }

  .leo-app-shell__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .leo-app-shell__layout {
    flex-direction: column;
  }

  .leo-mobile-header {
    display: flex;
  }

  .leo-main {
    padding: 20px 16px 80px;
  }

  .leo-sidebar-col {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    width: min(390px, 100vw - 32px);
    max-width: calc(100vw - 32px);
    transform: translateX(calc(100% + 24px));
    transition: transform 0.3s ease;
    z-index: 40;
  }

  .leo-sidebar {
    position: static;
    height: 100%;
  }

  .leo-sidebar__content,
  .leo-content {
    border-radius: 24px;
  }

  .leo-sidebar__content {
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 16px 12px;
  }

  .leo-sidebar__menu-list {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .leo-sidebar-col.is-open {
    transform: translateX(0);
  }

  .leo-sidebar-col.is-closed {
    transform: translateX(calc(100% + 24px));
  }
}

.leo-sidebar-bottom {
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leo-sidebar-bottom span.leoIcon {
  margin-left: 12px;
}

@media (max-width: 768px) {
  .leo-app-shell,
  .leo-app-shell__layout,
  .leo-app-shell__main {
    overflow-x: hidden;
  }

  .leo-app-shell__layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .leo-sidebar-col {
    display: flex;
    width: min(390px, 100vw - 32px);
    max-width: calc(100vw - 32px);
    flex-basis: auto;
  }

  .leo-app-shell__main {
    margin-left: 0;
    padding-left: 0;
    max-width: 100%;
    width: 100%;
    justify-content: stretch;
  }

  .leo-content,
  .leo-app-user,
  .resourceIndex,
  .resourceDetail,
  .resourceForm {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .resourceIndexBody {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 12px;
  }

  .resourceIndexBodyContent {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .resourceTable {
    min-width: 760px;
  }

  .resourceTable td,
  .resourceTable th {
    padding: 10px 8px;
    font-size: 12px;
  }

  .resourceTable img {
    max-width: 72px;
    height: auto;
    border-radius: 10px;
  }

  .resourceIndexBodyHeader,
  .resourceIndexBodyFooter,
  .resourceActionIndexToolbar,
  .resourceFilterTop .resourceFilterItems {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .resourceFormBody .panel,
  .resourceFormBodyDetail .panel,
  .resourceFormBody .w-1\/2,
  .resourceFormBody .w-1\/3,
  .resourceFormBody .w-2\/3,
  .resourceFormBody .w-1\/4,
  .resourceFormBody .w-3\/4,
  .resourceFormBodyDetail .w-1\/2,
  .resourceFormBodyDetail .w-1\/3,
  .resourceFormBodyDetail .w-2\/3,
  .resourceFormBodyDetail .w-1\/4,
  .resourceFormBodyDetail .w-3\/4 {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  .w-full .rowField,
  .rowField {
    display: block !important;
  }

  .rowField-left,
  .rowField-right {
    width: 100% !important;
    padding: 10px 12px !important;
  }

  .resourceFormBody input,
  .resourceFormBody select,
  .resourceFormBody textarea,
  .searchResource input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .js-box-sharing-model {
    padding: 0;
  }

  .js-box-sharing-model .uk-modal-dialog {
    height: 100%;
    max-height: 100%;
    border-radius: 40px 40px 0 0;
  }

  .js-box-sharing-model .uk-close {
    top: -4px !important;
    right: -1px !important;
  }

  .model-box-sharing {
    height: 100%;
    max-height: 100vh;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
  }

  .sharing-modal__handle {
    display: block;
  }

  .sharing-modal__body {
    padding-bottom: 120px;
  }

  .sharing-modal__footer {
    position: sticky;
    bottom: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.08);
  }
}

.model-box-sharing {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  max-height: 95vh;
}

.js-box-sharing-model .uk-modal-dialog {
  max-width: 28rem !important;
  width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 40px;
}

.sharing-modal__close {
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 6px;
}

.sharing-modal__handle {
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  margin: 12px auto 0;
  display: none;
}

.sharing-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  z-index: 10;
}

.sharing-modal__header {
  padding: 32px 24px 12px;
}

.sharing-modal__header h3 {
  font-size: 24px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.sharing-modal__header p {
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  margin: 0;
}

.sharing-modal__body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sharing-modal__section {
  margin-bottom: 0;
}

.sharing-modal__title {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0 4px;
}

.sharing-gateway {
  background: #f3f4f6;
  padding: 6px;
  border-radius: 16px;
  display: flex;
  gap: 6px;
}

.sharing-gateway__item {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sharing-gateway__item.active {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.sharing-plan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sharing-plan {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid #f3f4f6;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: right;
}

.sharing-plan.active {
  border-color: #f6a504;
  background: rgba(246, 165, 4, 0.08);
}

.sharing-plan__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sharing-plan__radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sharing-plan__radio.active {
  border-color: #f6a504;
}

.sharing-plan__radio-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f6a504;
  opacity: 0;
}

.sharing-plan__radio.active .sharing-plan__radio-dot {
  opacity: 1;
}

.sharing-plan__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sharing-plan__title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.sharing-plan__days {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}

.sharing-plan__price {
  text-align: left;
}

.sharing-plan__price-main {
  font-size: 18px;
  font-weight: 900;
  color: #1f2937;
}

.sharing-plan__price-old {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-decoration: line-through;
}

.sharing-discount {
  display: flex;
  gap: 8px;
}

.sharing-discount__input {
  flex: 1;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: all 0.2s ease;
}

.sharing-discount__input svg {
  width: 20px;
  height: 20px;
  color: #9ca3af;
  margin-left: 8px;
}

.sharing-discount__input input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  outline: none;
}

.sharing-discount__input input::-moz-placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.sharing-discount__input input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.sharing-discount__input:focus-within {
  border-color: #9ca3af;
  background: #fff;
}

.sharing-discount__input.disabled {
  opacity: 0.6;
}

.sharing-discount__btn {
  border: none;
  background: #1f2937;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
}

.sharing-discount__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sharing-terms {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.7;
  padding: 0 4px;
}

.sharing-terms__checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.sharing-terms__checkbox input {
  width: 20px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}

.sharing-terms__checkbox input:checked {
  background: #f6a504;
  border-color: #f6a504;
}

.sharing-terms__checkbox svg {
  width: 12px;
  height: 12px;
  color: #fff;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sharing-terms__checkbox input:checked + svg {
  opacity: 1;
}

.sharing-terms__text {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1.7;
}

.sharing-terms__text a {
  font-weight: 700;
  color: #1f2937;
}

.sharing-modal__footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}

.sharing-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
}

.sharing-total span:last-child {
  font-size: 24px;
  font-weight: 900;
  color: #1f2937;
}

.sharing-pay {
  width: 100%;
  border: none;
  background: #f6a504;
  color: #fff;
  padding: 16px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 16px 24px rgba(246, 165, 4, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sharing-pay:active {
  transform: scale(0.98);
}

.sharing-pay:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.resourceIndex[resource-name=notifications] thead {
  display: none;
}

.comodolab-help-field pre {
  white-space: pre-wrap;
}

.dark .user-dashboard-tabs .tabs a {
  background-color: #2c2c2c;
  color: #e5e7eb;
}

.user-dashboard-tabs h1 {
  display: none;
}

.leo-tabs {
  display: grid;
  gap: 16px;
}

.leo-tabs-surface {
  background-color: #fff;
  border-radius: 2.5rem;
  border: 1px solid #f1f1f5;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.leo-tabs__switcher {
  background-color: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  border: 1px solid #f1f1f5;
}

.leo-tabs__switcher--responsive {
  width: 100%;
  min-width: 280px;
}

.leo-tabs__switcher--spaced {
  margin: 16px 16px 0;
}

.leo-tabs__list {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f8f9fc;
  border-radius: 12px;
  padding: 6px;
  flex-wrap: wrap;
}

.leo-tabs__button {
  border: none;
  background-color: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.leo-tabs__button--stretch {
  flex: 1;
}

.leo-tabs__button:hover,
.leo-tabs__button:focus-visible {
  color: #374151;
}

.leo-tabs__button.is-active {
  background-color: #fff;
  color: #f6a504;
  box-shadow: 0 6px 14px rgba(246, 165, 4, 0.15);
}

.leo-tabs__content {
  display: grid;
  gap: 16px;
}

.leo-tabs__content--padded {
  padding: 24px;
}

.leo-tabs__content--padded-sm {
  padding: 16px;
}

.leo-tabs__panel {
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #f1f1f5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.leo-tabs__panel--plain {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.dark .leo-tabs-surface {
  background-color: #1f1f1f;
  border-color: #2c2c2c;
  box-shadow: none;
}

.dark .leo-tabs__switcher,
.dark .leo-tabs__panel {
  background-color: #1f1f1f;
  border-color: #2c2c2c;
  box-shadow: none;
}

.dark .leo-tabs__list {
  background-color: #2c2c2c;
}

.dark .leo-tabs__button {
  color: #9ca3af;
}

.dark .leo-tabs__button:hover,
.dark .leo-tabs__button:focus-visible {
  color: #e5e7eb;
}

.dark .leo-tabs__button.is-active {
  background-color: #1f1f1f;
  color: #f6a504;
  box-shadow: 0 6px 14px rgba(246, 165, 4, 0.2);
}

.dark .leo-tabs__panel--plain {
  background-color: transparent;
}

.user-dashboard-tabs .resourceIndex.last-payment {
  padding-top: 10px;
}

.user-dashboard-tabs .tabs {
  display: flex;
  gap: 6px;
  background-color: #f3f4f6;
  padding: 6px;
  border-radius: 18px;
  border: 0;
  margin: 0 16px 16px;
}

.user-dashboard-tabs .tabs a {
  border: 0;
  background-color: transparent;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
}

.user-dashboard-tabs .tabs .active a {
  background-color: #fff;
  color: #f6a504;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.user-dashboard-tabs-modern {
  background-color: #fff;
  border-radius: 32px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
  margin: 24px 0;
  overflow: hidden;
}

.user-dashboard-tabs-modern__segmented {
  display: flex;
  gap: 8px;
  background-color: #f9fafb;
  padding: 8px;
  border-radius: 20px;
  margin: 16px 16px 8px;
}

.user-dashboard-tabs-modern__tab {
  flex: 1;
  border: none;
  background-color: transparent;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.25s ease;
}

.user-dashboard-tabs-modern__tab.is-active {
  background-color: #fff;
  color: #f6a504;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.user-dashboard-tabs-modern__content {
  padding: 8px 24px 24px;
}

.user-dashboard-tabs-modern__table-wrapper {
  overflow-x: auto;
}

.user-dashboard-tabs-modern__table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
}

.user-dashboard-tabs-modern__table thead th {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.user-dashboard-tabs-modern__table tbody tr {
  transition: background-color 0.2s ease;
}

.user-dashboard-tabs-modern__table tbody tr:hover {
  background-color: #f9fafb;
}

.user-dashboard-tabs-modern__table td {
  padding: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
}

.user-dashboard-tabs-modern__date {
  color: #374151;
}

.user-dashboard-tabs-modern__amount {
  font-size: 14px;
  font-weight: 900;
  color: #111827;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid transparent;
}

.status-badge--success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.2);
}

.status-badge--pending {
  background-color: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.2);
}

.status-badge--error {
  background-color: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
}

.user-dashboard-tabs-modern__payment-cards {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.user-dashboard-tabs-modern__payment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background-color: #f9fafb;
  border: 1px solid rgba(243, 244, 246, 0.9);
}

.user-dashboard-tabs-modern__payment-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-dashboard-tabs-modern__payment-date {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}

.user-dashboard-tabs-modern__login-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-dashboard-tabs-modern__login-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background-color: #f9fafb;
  border: 1px solid rgba(243, 244, 246, 0.9);
}

.user-dashboard-tabs-modern__login-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-color: #fff;
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.user-dashboard-tabs-modern__login-body {
  flex: 1;
}

.user-dashboard-tabs-modern__login-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.user-dashboard-tabs-modern__login-os {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.user-dashboard-tabs-modern__login-date {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  direction: ltr;
}

.user-dashboard-tabs-modern__login-browser {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
}

.user-dashboard-tabs-modern__empty {
  margin: 12px 0;
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  text-align: center;
}

@media (max-width: 768px) {
  .leo-tabs__switcher--responsive {
    width: 100%;
  }

  .leo-tabs__list {
    width: 100%;
  }

  .leo-tabs__content--padded {
    padding: 16px;
  }

  .user-dashboard-tabs-modern__table-wrapper {
    display: none;
  }

  .user-dashboard-tabs-modern__payment-cards {
    display: flex;
  }

  .user-dashboard-tabs-modern__content {
    padding: 8px 16px 20px;
  }
}

.leo-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #edf1f5;
  backdrop-filter: blur(20px);
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.leo-mobile-nav__items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 12px;
}

.leo-mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-radius: 18px;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.leo-mobile-nav__item svg {
  width: 24px;
  height: 24px;
}

.leo-mobile-nav__item:hover,
.leo-mobile-nav__item:focus-visible {
  color: #6b7280;
}

.leo-mobile-nav__item.is-active {
  background-color: rgba(246, 165, 4, 0.12);
  color: #f6a504;
}

.leo-mobile-nav__item.is-active svg {
  filter: drop-shadow(0 6px 12px rgba(246, 165, 4, 0.22));
}

.leo-mobile-nav__action {
  border: none;
  background: transparent;
  padding: 0;
  margin-top: -32px;
  cursor: pointer;
  text-decoration: none;
}

.leo-mobile-nav__action:focus-visible {
  outline: 2px solid rgba(246, 165, 4, 0.55);
  outline-offset: 4px;
  border-radius: 999px;
}

.leo-mobile-nav__action.is-active .leo-mobile-nav__action-circle {
  box-shadow: 0 14px 28px rgba(246, 165, 4, 0.45), 0 0 0 6px rgba(246, 165, 4, 0.14);
  transform: translateY(-2px);
}

.leo-mobile-nav__action-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: #f6a504;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(246, 165, 4, 0.35);
}

.leo-mobile-nav__action-circle svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 1024px) {
  .leo-mobile-nav {
    display: block;
  }

  .leo-app-user {
    padding-bottom: 96px;
  }
}

.resourceBookmark {
  color: #101827;
}

.resourceBookmark .bookmark-toolbar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e7eaf0;
}

.resourceBookmark .bookmark-search {
  position: relative;
  width: 320px;
  max-width: 100%;
  min-width: 0;
}

.resourceBookmark .bookmark-search__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: #98a1b3;
  pointer-events: none;
}

.resourceBookmark .bookmark-search__icon svg {
  width: 100%;
  height: 100%;
}

.resourceBookmark .bookmark-search__input {
  width: 100%;
  height: 52px;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #fff;
  padding: 0 48px 0 16px;
  color: #101827;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.resourceBookmark .bookmark-search__input::-moz-placeholder {
  color: #98a1b3;
}

.resourceBookmark .bookmark-search__input::placeholder {
  color: #98a1b3;
}

.resourceBookmark .bookmark-search__clear {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: #f4f6f9;
  color: #98a1b3;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.resourceBookmark .bookmark-search__clear:hover {
  color: #101827;
}

.resourceBookmark .bookmark-toolbar__filters {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.resourceBookmark .box-select .select {
  min-width: 112px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background-color: #fff;
  padding: 0 18px;
  color: #101827;
  box-shadow: 0 1px 2px rgba(16, 24, 39, 0.03);
  transition: 0.2s ease;
}

.resourceBookmark .box-select .select:hover {
  border-color: #cbd5e1;
  opacity: 1;
}

.resourceBookmark .box-select .select span {
  padding: 0;
}

.resourceBookmark .box-select .select .label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  color: #101827;
  white-space: nowrap;
}

.resourceBookmark .box-select .select .label-title {
  color: #101827;
  font-weight: 900;
}

.resourceBookmark .box-select .body-items {
  max-height: unset;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.1);
}

.resourceBookmark .bookmark-list-shell {
  position: relative;
}

.resourceBookmark .bookmark-table {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(16, 24, 39, 0.06);
}

.resourceBookmark .bookmark-table__head,
.resourceBookmark .bookmark-anime-row--desktop {
  display: grid;
  grid-template-columns: 88px minmax(260px, 1.8fr) minmax(96px, 0.75fr) minmax(96px, 0.75fr) minmax(150px, 1fr) 136px;
  align-items: center;
  gap: 14px;
}

.resourceBookmark .bookmark-item {
  position: relative;
}

.resourceBookmark .bookmark-anime-row--mobile {
  display: none;
}

.resourceBookmark .bookmark-table__head {
  padding: 18px 28px;
  border-bottom: 1px solid #eef1f5;
  color: #9aa3b3;
  font-size: 13px;
  font-weight: 950;
}

.resourceBookmark .bookmark-table__cell {
  text-align: center;
}

.resourceBookmark .bookmark-table__cell--poster,
.resourceBookmark .bookmark-table__cell--title {
  text-align: right;
}

.resourceBookmark .anime-list-row.bookmark-anime-row {
  position: relative;
  background: #fff;
}

.resourceBookmark .anime-list-row.bookmark-anime-row--desktop {
  padding: 16px 28px;
  border-bottom: 1px solid #f0f2f6;
}

.resourceBookmark .bookmark-item:last-child .anime-list-row.bookmark-anime-row--desktop {
  border-bottom: 0;
}

.resourceBookmark .bookmark-anime-row__poster {
  display: block;
  width: 68px;
  height: 104px;
  overflow: hidden;
  border-radius: 13px;
  background: #f4f6f9;
  box-shadow: 0 10px 22px rgba(16, 24, 39, 0.16);
}

.resourceBookmark .bookmark-anime-row__poster img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.resourceBookmark .anime-title.bookmark-anime-row__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: ltr;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  color: #f5a400;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.resourceBookmark .anime-title.bookmark-anime-row__title:hover {
  color: #d98f00;
}

.resourceBookmark .bookmark-anime-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.resourceBookmark .bookmark-chip,
.resourceBookmark .list-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.resourceBookmark .bookmark-chip {
  padding: 6px 10px;
  background: #f4f6f9;
  color: #667085;
}

.resourceBookmark .bookmark-chip--episodes {
  background: #fff7e8;
  color: #f0a000;
}

.resourceBookmark .bookmark-chip--rating {
  background: #eef6ff;
  color: #2563eb;
}

.resourceBookmark .list-count-badge {
  min-width: 62px;
  height: 34px;
  flex-direction: row-reverse;
  border: 1px solid #e4e8ef;
  background: #f8fafc;
  color: #101827;
  font-size: 14px;
  direction: ltr;
}

.resourceBookmark .list-count-badge__total {
  color: #98a1b3;
}

.resourceBookmark .list-count-badge__divider {
  margin: 0 4px;
  color: #101827;
}

.resourceBookmark .bookmark-anime-row__stat,
.resourceBookmark .bookmark-anime-row__status,
.resourceBookmark .bookmark-anime-row__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.resourceBookmark .bookmark-anime-row__actions {
  gap: 12px;
}

.resourceBookmark .bookmark-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  transition: color 0.2s ease;
}

.resourceBookmark .bookmark-action svg {
  width: 16px;
  height: 16px;
}

.resourceBookmark .bookmark-action--edit {
  color: #f5a400;
}

.resourceBookmark .bookmark-action--edit:hover {
  color: #d98f00;
}

.resourceBookmark .bookmark-action--delete {
  color: #101827;
}

.resourceBookmark .bookmark-action--delete:hover {
  color: #e11d48;
}

.resourceBookmark .loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(2px);
}

.resourceBookmark .bookmark-empty {
  margin-top: 22px;
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #d9dee8;
  border-radius: 26px;
  background: #fff;
  color: #667085;
  text-align: center;
  box-shadow: 0 10px 24px rgba(16, 24, 39, 0.04);
}

.resourceBookmark .bookmark-empty__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff7e8;
  color: #f0a000;
  font-weight: 950;
}

.resourceBookmark .bookmark-empty strong {
  color: #101827;
  font-size: 15px;
}

.resourceBookmark .bookmark-empty small {
  font-size: 12px;
  font-weight: 700;
}

.resourceBookmark .bookmark-status {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-block;
}

.resourceBookmark .bookmark-status .btn-status {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
  background-color: #eff6ff;
  color: #2563eb;
}

.resourceBookmark .bookmark-status .btn-status .custom_badge {
  display: flex;
  align-items: center;
  gap: 7px;
}

.resourceBookmark .bookmark-status .btn-status .custom_badge_box {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.resourceBookmark .bookmark-status .btn-status svg {
  width: 14px;
  height: 14px;
  color: #334155;
}

.resourceBookmark .bookmark-status .btn-status ~ .resourceActionBody {
  left: auto;
  right: 0;
}

.resourceBookmark .bookmark-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

.resourceBookmark .bookmark-modal__dialog {
  width: 100%;
  max-width: 448px;
  border-radius: 30px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
}

.resourceBookmark .bookmark-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.resourceBookmark .bookmark-modal__head h3 {
  margin: 0;
  color: #101827;
  font-size: 18px;
  font-weight: 950;
}

.resourceBookmark .bookmark-modal__head p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.resourceBookmark .bookmark-modal__close {
  border: 0;
  border-radius: 50%;
  background: #f4f6f9;
  color: #667085;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.resourceBookmark .bookmark-modal__fields {
  display: grid;
  gap: 14px;
}

.resourceBookmark .bookmark-modal__fields label {
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 950;
}

.resourceBookmark .bookmark-modal__fields input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #f8fafc;
  padding: 12px 14px;
  text-align: center;
  color: #101827;
  font-size: 16px;
  font-weight: 950;
  outline: none;
}

.resourceBookmark .bookmark-modal__fields input:focus {
  border-color: #f5a400;
  box-shadow: 0 0 0 4px rgba(245, 164, 0, 0.12);
}

.resourceBookmark .bookmark-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.resourceBookmark .bookmark-modal__actions button {
  border: 0;
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.resourceBookmark .bookmark-modal__save {
  background: #f5a400;
  color: #111827;
}

.resourceBookmark .bookmark-modal__cancel {
  background: #f4f6f9;
  color: #667085;
}

.resourceBookmark .bookmark-pagination {
  margin-top: 20px;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.dark .resourceBookmark .bookmark-table,
.dark .resourceBookmark .anime-list-row.bookmark-anime-row,
.dark .resourceBookmark .bookmark-empty,
.dark .resourceBookmark .box-select .select,
.dark .resourceBookmark .bookmark-search__input,
.dark .resourceBookmark .bookmark-modal__dialog {
  background-color: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 1023px) {
  .resourceBookmark .bookmark-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .resourceBookmark .bookmark-search {
    width: 100%;
    justify-self: stretch;
  }

  .resourceBookmark .bookmark-toolbar__filters {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .resourceBookmark .bookmark-filter-select .select {
    width: 100%;
    justify-content: center;
  }

  .resourceBookmark .bookmark-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .resourceBookmark .bookmark-table__head,
  .resourceBookmark .bookmark-anime-row--desktop {
    display: none;
  }

  .resourceBookmark .bookmark-anime-row--mobile {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #e4e8ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 39, 0.06);
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__poster {
    grid-row: 1/span 4;
    width: 68px;
    height: 104px;
    border-radius: 13px;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__content {
    min-width: 0;
    align-self: start;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__meta {
    gap: 8px;
    margin-top: 9px;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__stat,
  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__status {
    justify-content: space-between;
    gap: 12px;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__stat::before,
  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__status::before {
    content: attr(data-label);
    color: #98a1b3;
    font-size: 12px;
    font-weight: 900;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__actions {
    justify-content: flex-start;
    gap: 14px;
  }

  .resourceBookmark .bookmark-empty {
    min-height: 168px;
    border-radius: 24px;
  }

  .resourceBookmark .bookmark-pagination {
    margin-top: 14px;
    border: 1px solid #e4e8ef;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(16, 24, 39, 0.06);
  }
}

@media (max-width: 480px) {
  .resourceBookmark {
    padding-right: 12px;
    padding-left: 12px;
  }

  .resourceBookmark .bookmark-toolbar__filters {
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resourceBookmark .box-select .select {
    min-width: 0;
    padding: 0 12px;
  }

  .resourceBookmark .bookmark-anime-row--mobile {
    grid-template-columns: 74px minmax(0, 1fr);
    border-radius: 22px;
    padding: 14px;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-anime-row__poster {
    width: 62px;
    height: 94px;
    border-radius: 12px;
  }

  .resourceBookmark .bookmark-anime-row--mobile .anime-title.bookmark-anime-row__title {
    font-size: 15px;
    line-height: 1.7;
  }

  .resourceBookmark .bookmark-anime-row--mobile .bookmark-chip {
    padding: 5px 8px;
  }

  .resourceBookmark .bookmark-modal {
    align-items: flex-end;
  }
}

.leo-sidebar__menu ul.menu-list > li.menu-item-logout > a,
.menu-item-logout > a {
  color: #ef4444 !important;
}

.leo-sidebar__menu ul.menu-list > li.menu-item-logout:hover > a,
.menu-item-logout:hover > a {
  color: #dc2626 !important;
}

@media (max-width: 768px) {
  .leo-app-user .leo-main,
  .leo-main {
    padding-top: 0;
  }

  .leo-mobile-header {
    margin-bottom: 0;
  }
}

.page-blog-title {
  font-size: 20px;
  font-weight: bold;
  color: #606060;
}

.blog-card {
  background: #FFFFFF;
  border-radius: 32px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f1f3;
  overflow: hidden;
  transition: 0.4s ease;
}

.blog-card:hover {
  box-shadow: 0 22px 40px -15px rgba(248, 160, 8, 0.2);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.07);
}

.blog-card:hover .blog-card__title {
  color: #F8A008;
}

.blog-card:hover .blog-card__cta {
  background-color: #F8A008;
  color: #fff;
  transform: rotate(-35deg);
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card__media {
  position: relative;
  border-radius: 26px;
  margin: 12px;
  overflow: hidden;
  aspect-ratio: 1.45/1;
  background: #f1f1f1;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%);
}

.blog-card__time {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e5e5e5;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.blog-card__category {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #F8A008;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(248, 160, 8, 0.25);
  z-index: 2;
}

.blog-card__body {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 6px;
  min-height: 32px;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.blog-card__excerpt {
  color: #8b8b99;
  line-height: 2;
  font-size: 13px;
  margin: 0 0 12px;
  min-height: 78px;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.blog-card__meta {
  background: #f6f6f9;
  border-radius: 16px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f0f0f5;
  margin-top: auto;
}

.blog-card__stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9aa0ad;
  font-size: 12px;
  font-weight: 700;
}

.blog-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.blog-card__stats svg {
  width: 14px;
  height: 14px;
}

.blog-card__divider {
  width: 1px;
  height: 14px;
  background: #e2e2ea;
}

.blog-card__cta {
  width: 38px;
  height: 38px;
  background: #fff;
  color: #c4c4d1;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.blog-card__cta svg {
  width: 20px;
  height: 20px;
}

.page-blog {
  padding: 32px 0 60px;
}

.blog-page__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.blog-page__title-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  text-align: right;
}

.blog-page__title {
  font-size: 26px;
  font-weight: 800;
  color: #5b5b6a;
  margin: 0;
}

.blog-page__title-accent {
  color: #F8A008;
}

.blog-page__title-line {
  height: 2px;
  width: 100%;
  background: linear-gradient(270deg, #F8A008, transparent);
  border-radius: 4px;
}

.blog-page__filters {
  display: flex;
  margin: 10px 0 16px;
}

.blog-page__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.blog-page__category {
  background: #fff;
  color: #8b8b99;
  border: 1px solid #f0f0f5;
  padding: 8px 20px;
  border-radius: 18px;
  font-size: 12.5px;
  font-weight: 700;
  transition: 0.3s ease;
  text-decoration: none;
}

.blog-page__category:hover {
  color: #2f2f3a;
  background: #fdf7ec;
}

.blog-page__category.is-active {
  background: #F8A008;
  color: #fff;
  border-color: transparent;
}

.blog-page__search {
  background: #fff;
  border-radius: 26px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f1f5;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.blog-page__search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.blog-page__search-field .leoIcon {
  color: #b3b3c2;
}

.blog-page__search-field input {
  border: 0;
  background: transparent;
  width: 100%;
  height: 46px;
  font-size: 13.5px;
  color: #3a3a45;
}

.blog-page__search-field input::-moz-placeholder {
  color: #a0a0b0;
}

.blog-page__search-field input::placeholder {
  color: #a0a0b0;
}

.blog-page__search-button {
  background: #F8A008;
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 0 28px;
  height: 46px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.blog-page__search-button:hover {
  opacity: 0.9;
}

.blog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 960px) {
  .blog-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .blog-page__grid {
    grid-template-columns: 1fr;
  }
}

.blog-page__pagination {
  margin-top: 24px;
}

.blog-page__empty {
  background: #fff;
  border-radius: 26px;
  padding: 48px 24px;
  text-align: center;
  color: #8b8b99;
  border: 1px solid #f1f1f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.blog-page__empty h3 {
  color: #4c4c58;
  margin: 16px 0 8px;
  font-weight: 800;
}

.blog-page__empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f2f2f7, #e6e6ef);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7b7c7;
}

.blog-page__empty-icon svg {
  width: 36px;
  height: 36px;
}

.blog-single .box-comment {
  padding: 0;
}

.blog-single ul {
  margin-right: 16px;
}

.blog-single .blog-single__hero {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
  margin-bottom: 32px;
  aspect-ratio: 21/8;
  background: #e5e7eb;
}

@media (max-width: 960px) {
  .blog-single .blog-single__hero {
    aspect-ratio: 16/9;
  }
}

.blog-single .blog-single__hero img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.blog-single .blog-single__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.6) 45%, rgba(15, 23, 42, 0.95) 100%);
}

.blog-single .blog-single__hero-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 32px 32px;
  color: #fff;
  max-width: 960px;
}

.blog-single .blog-single__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.blog-single .blog-single__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.blog-single .blog-single__badge--category {
  background: #f8a008;
  color: #fff;
  box-shadow: 0 8px 20px rgba(248, 160, 8, 0.35);
}

.blog-single .blog-single__badge--time {
  background: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  backdrop-filter: blur(8px);
}

.blog-single h1.page-blog-title {
  font-size: 22px;
}

.blog-single .blog-single__title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 12px 30px rgba(15, 23, 42, 0.4);
}

@media (max-width: 960px) {
  .blog-single .blog-single__title {
    font-size: 26px;
  }
}

.blog-single .blog-single__hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-single .blog-single__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  backdrop-filter: blur(8px);
}

.blog-single .blog-single__meta-item .leoIcon {
  color: #f8a008;
}

.blog-single .blog-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr);
  grid-template-areas: "main sidebar";
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  .blog-single .blog-single__layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
  }
}

.blog-single .blog-single__sidebar,
.blog-single .blog-single__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  direction: rtl;
}

.blog-single .blog-single__sidebar {
  grid-area: sidebar;
}

.blog-single .blog-single__main {
  grid-area: main;
}

.blog-single .blog-single__card {
  background: #fff;
  border-radius: 28px;
  border: 1px solid #f1f1f5;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  padding: 24px;
}

.blog-single .blog-single__card--summary {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.blog-single .blog-single__card--summary:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  background: rgba(248, 160, 8, 0.25);
  filter: blur(80px);
  border-radius: 50%;
}

.blog-single .blog-single__card--summary p {
  color: #d1d5db;
  font-size: 14px;
  line-height: 2.2;
  margin: 0;
  position: relative;
  z-index: 1;
  text-align: justify;
}

.blog-single .blog-single__card--summary .blog-single__card-header h3 {
  color: #fff;
}

.blog-single .blog-single__card--summary .blog-single__staff {
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.blog-single .blog-single__card--summary .blog-single__staff-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 10px;
}

.blog-single .blog-single__card--summary .blog-single__staff-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-single .blog-single__card--summary .blog-single__staff-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  background: rgba(248, 250, 252, 0.12);
  border: 1px solid rgba(248, 250, 252, 0.2);
  transition: all 0.3s ease;
}

.blog-single .blog-single__card--summary .blog-single__staff-tag:hover {
  background: #f8a008;
  border-color: #f8a008;
  color: #fff;
}

.blog-single .blog-single__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.blog-single .blog-single__card-header h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.blog-single .blog-single__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(248, 160, 8, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8a008;
}

.blog-single .blog-single__card--genres .blog-single__card-header {
  margin-bottom: 14px;
}

.blog-single .blog-single__genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-single .blog-single__genre-tag {
  padding: 8px 16px;
  background: #f8fafc;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  border: 1px solid #eef2f6;
  transition: all 0.3s ease;
}

.blog-single .blog-single__genre-tag:hover {
  background: #f8a008;
  color: #fff;
  border-color: #f8a008;
}

.blog-single .blog-single__content .blog-box-dic {
  line-height: 34px;
  padding-bottom: 10px;
  color: #475569;
  text-align: justify;
}

.blog-single .blog-single__content .blog-box-dic p {
  margin: 8px 0;
}

.blog-single .blog-single__content .blog-box-dic blockquote {
  border-right: 3px solid #f8a008;
  padding: 16px;
  border-radius: 16px;
  background-color: #f8fafc;
  margin: 0;
  color: #64748b;
  line-height: 30px;
}

.blog-single .blog-single__content .blog-box-dic blockquote p:last-child {
  margin-bottom: 0;
}

.blog-single .blog-single__content .blog-box-dic h2 {
  font-size: 22px;
}

.blog-single .blog-single__content .blog-box-dic h3 {
  font-size: 18px;
}

.blog-single .blog-single__content .blog-box-dic h4 {
  font-size: 15px;
}

.blog-single .blog-single__content .blog-box-dic h2,
.blog-single .blog-single__content .blog-box-dic h3,
.blog-single .blog-single__content .blog-box-dic h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.blog-single .blog-single__content .blog-box-dic h2:before,
.blog-single .blog-single__content .blog-box-dic h3:before,
.blog-single .blog-single__content .blog-box-dic h4:before {
  width: 35px;
  height: 3px;
  background-color: #F8A008;
  content: "";
  display: inline-block;
}

.blog-single .blog-single__section-title {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 16px;
}

.blog-single .blog-single__section-title--video {
  text-align: right;
}

.blog-single .blog-single__video {
  padding: 20px;
}

.blog-single .blog-single__video-body {
  border-radius: 26px;
  background: #fff;
  padding: 14px;
}

.blog-single .blog-single__video-stage {
  border-radius: 24px;
  padding: 24px;
}

.blog-single .blog-single__video-frame {
  width: 320px;
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

.blog-single .blog-single__video-frame iframe,
.blog-single .blog-single__video-frame video,
.blog-single .blog-single__video-frame img {
  width: 100%;
  height: 100%;
  display: block;
}

.blog-single .blog-single__video-label {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 6px 20px rgba(15, 23, 42, 0.8);
}

@media (max-width: 768px) {
  .blog-single .blog-single__video-stage {
    justify-content: center;
    padding: 18px;
  }

  .blog-single .blog-single__video-frame {
    width: 100%;
  }
}

.blog-single .blog-single__download {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, #0f172a, #1f2937);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  transition: all 0.3s ease;
}

.blog-single .blog-single__download:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 45px rgba(248, 160, 8, 0.25);
  color: #fff;
}

.blog-single .blog-single__download-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #f8a008;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(248, 160, 8, 0.35);
}

.blog-single .blog-single__download-icon .leoIcon {
  color: #fff;
}

.blog-single .blog-single__download-title {
  font-size: 18px;
  font-weight: 800;
}

.blog-single .blog-single__related-anime {
  margin-top: 32px;
}

.blog-single .blog-single__related-posts {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e5e7eb;
}

.blog-single .blog-single__related-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.blog-single .blog-single__related-header h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #1f2937;
}

.blog-single .blog-single__related-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #f1f1f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8a008;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.blog-single .blog-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 960px) {
  .blog-single .blog-single__related-grid {
    grid-template-columns: 1fr;
  }
}

.blog-single .blog-single__related-card {
  background: #fff;
  border-radius: 28px;
  border: 1px solid #f1f1f5;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s ease;
  color: inherit;
}

.blog-single .blog-single__related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(248, 160, 8, 0.18);
}

.blog-single .blog-single__related-card h3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.7;
  margin: 0;
  color: #1f2937;
}

.blog-single .blog-single__related-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #e2e8f0;
  aspect-ratio: 16/9;
}

.blog-single .blog-single__related-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.blog-single .blog-single__related-time {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.blog-single .blog-single__related-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

.blog-single .blog-single__related-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-single .blog-single__related-meta .leoIcon {
  color: #94a3b8;
}

.blog-single .comment-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
}

.blog-single .blog-comment {
  margin-top: 40px;
  margin-bottom: 30px;
}

.blog-anime {
  background-color: #fff;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
  border-radius: 24px;
  margin-bottom: 40px;
  overflow: hidden;
}

.blog-anime h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

.blog-anime a {
  padding: 13px;
  display: block;
  margin: 15px !important;
  border-radius: 20px;
  color: #4f4f4f;
  transition: 0.3s all;
  background-color: #f7f7f7;
}

.blog-anime a:hover {
  opacity: 0.6;
  transition: 0.3s all;
  color: #4f4f4f;
}

.blog-anime .blog-anime-title {
  padding: 15px;
  background-color: #f8fafc;
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: bold;
  color: #f8a008;
}

.dark .uk-breadcrumb > * > * {
  color: #dadada;
}

.dark .uk-breadcrumb > :last-child > span,
.dark .uk-breadcrumb > :last-child > a:not([href]) {
  color: #dadada;
}

.dark .page-blog {
  background: none;
}

.dark .blog-page__title {
  color: #e6e6e6;
}

.dark .blog-page__title-line {
  background: linear-gradient(270deg, #F8A008, transparent);
}

.dark .blog-page__category {
  background: #3c3c3c;
  color: #d5d5d5;
  border-color: #4a4a4a;
}

.dark .blog-page__category:hover {
  background: #464646;
  color: #fff;
}

.dark .blog-page__category.is-active {
  color: #fff;
}

.dark .blog-page__search {
  background: #3b3b3b;
  border-color: #4a4a4a;
  box-shadow: none;
}

.dark .blog-page__search-field .leoIcon {
  color: #b5b5b5;
}

.dark .blog-page__search-field input {
  color: #fff;
}

.dark .blog-page__search-field input::-moz-placeholder {
  color: #b0b0b0;
}

.dark .blog-page__search-field input::placeholder {
  color: #b0b0b0;
}

.dark .blog-card {
  background: #3c3c3c;
  border-color: #4a4a4a;
}

.dark .blog-card__title {
  color: #f2f2f2;
}

.dark .blog-card__excerpt {
  color: #c1c1c1;
}

.dark .blog-card__meta {
  background: #2f2f2f;
  border-color: #444;
}

.dark .blog-card__stats {
  color: #cfcfcf;
}

.dark .blog-card__divider {
  background: #555;
}

.dark .blog-card__cta {
  background: #2b2b2b;
  color: #bdbdbd;
}

.dark .blog-page__empty {
  background: #3c3c3c;
  border-color: #4a4a4a;
  color: #c9c9c9;
}

.dark .blog-page__empty h3 {
  color: #f0f0f0;
}

.dark .blog-page__empty-icon {
  background: linear-gradient(135deg, #3a3a3a, #2f2f2f);
  color: #b5b5b5;
}

.dark .blog-single .box-comment {
  background-color: unset;
}

.dark .blog-single .blog-single__hero {
  box-shadow: none;
}

.dark .blog-single .blog-single__hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.75) 50%, rgba(15, 23, 42, 0.95) 100%);
}

.dark .blog-single .blog-single__card,
.dark .blog-single .blog-single__related-card {
  background-color: #4a4a4a;
  border-color: #3f3f3f;
  box-shadow: none;
}

.dark .blog-single .blog-single__card--summary {
  background-color: #3b3b3b;
}

.dark .blog-single .blog-single__related-posts {
  border-top-color: #3f3f3f;
}

.dark .blog-single .blog-single__title,
.dark .blog-single .blog-single__related-header h2,
.dark .blog-single .blog-single__related-card h3 {
  color: #f0f0f0;
}

.dark .blog-single .blog-single__genre-tag {
  background: #2f2f2f;
  border-color: #444;
  color: #d1d5db;
}

.dark .blog-single .blog-single__genre-tag:hover {
  color: #fff;
}

.dark .blog-single .blog-single__related-time {
  background: rgba(0, 0, 0, 0.65);
}

.dark .blog-single .blog-box-dic * {
  color: #dadada;
}

.dark .blog-single .blog-box-dic blockquote {
  background-color: #5d5d5d;
}

.dark .blog-single .blog-box-dic a {
  color: #f6a504;
}

.dark .blog-single .blog-box-dic a:hover {
  opacity: 0.6;
}

.dark .blog-single pre {
  background-color: #2c2c2c;
  border: 0;
}

.dark .blog-single .uk-icon-button {
  background-color: #646464;
  color: #dadada;
}

.dark .blog-single .blog-single__download {
  background: #2b2b2b;
  box-shadow: none;
}

.dark .blog-anime {
  background-color: #4a4a4a;
}

.dark .blog-anime .blog-anime-title {
  background-color: #373737;
}

.dark .blog-anime a {
  background-color: #2c2c2c;
  border: 0;
  color: #dadada;
}

.dark .blog-anime a:hover {
  color: #dadada;
}

.dark .blog-anime h2 {
  color: #dadada;
}

blockquote {
  font-size: 15px;
  font-style: normal;
  line-height: 25px;
  color: #5e35b1;
}

.fr-img-wrap span.fr-inner {
  display: block;
}

.box-comment {
  position: relative;
  padding: 42px 0;
  background: transparent;
}

.box-comment > div {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 640px) {
  .box-comment {
    padding: 0;
  }

  .box-comment > div {
    padding: 0;
  }
}

.post-comment h1 {
  color: #818181;
  border-bottom: 1px solid #a8a8a8;
  text-align: center;
  font-size: 16px;
  padding: 14px;
  background-color: #fff;
  font-weight: bold;
  transition: 0.3s all;
  margin-bottom: 30px;
  border-radius: 5px;
}

.post-comment h1:hover {
  color: #000;
  transition: 0.3s all;
}

.dark .post-comment h1 {
  color: #dadada;
  background-color: #4a4a4a;
}

/* Single comment permalink — isolated from the reusable comment list. */

.ap-comment-detail {
  --ap-accent: #f59e0b;
  max-width: 1330px;
  margin: 0 auto 64px;
  padding: 4px 14px 0;
  color: #263248;
}

.ap-comment-detail__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 4px 20px;
  color: #94a3b8;
  font-size: 12px;
}

.ap-comment-detail__breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s;
}

.ap-comment-detail__breadcrumb a:hover {
  color: #ed9900;
}

.ap-comment-detail__breadcrumb .fa-chevron-left {
  font-size: 9px;
  opacity: 0.65;
}

.ap-comment-detail__hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 32px;
  margin-bottom: 22px;
  border: 1px solid #f6ddb0;
  border-radius: 24px;
  background: radial-gradient(circle at 10% 0, rgba(253, 186, 116, 0.18), transparent 45%), linear-gradient(115deg, #fff 35%, #fff8eb);
  overflow: hidden;
  box-shadow: 0 18px 42px -35px rgba(104, 69, 18, 0.33);
}

.ap-comment-detail__hero::before {
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(#ffba34, #f28b00);
}

.ap-comment-detail__hero-icon,
.ap-comment-detail__panel-icon,
.ap-comment-detail__info-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  color: #db8200;
  border: 1px solid #ffebb7;
  background: #fff3d9;
  border-radius: 17px;
  font-size: 22px;
}

.ap-comment-detail__hero-copy {
  min-width: 180px;
  flex: 1;
}

.ap-comment-detail__eyebrow,
.ap-comment-detail__panel-kicker {
  display: block;
  color: #c17b06;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1px;
}

.ap-comment-detail__hero h1 {
  margin: 4px 0 6px;
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 900;
  color: #1e293b;
}

.ap-comment-detail__hero p {
  margin: 0;
  color: #64748b;
  line-height: 1.9;
  font-size: 13px;
}

.ap-comment-detail__hero p strong {
  color: #334155;
}

.ap-comment-detail__back,
.ap-comment-detail__info-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 11px 15px;
  background: #ffad17;
  color: #37290d;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s;
}

.ap-comment-detail__back:hover,
.ap-comment-detail__info-card a:hover {
  background: #ffc04c;
  box-shadow: 0 10px 24px -13px #e9970e;
  transform: translateY(-2px);
  color: #37290d;
}

.ap-comment-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 22px;
}

.ap-comment-detail__conversation {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.ap-comment-detail__panel,
.ap-comment-detail__info-card {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 21px;
  box-shadow: 0 15px 45px -37px #34425a;
}

.ap-comment-detail__panel {
  padding: 22px 26px 12px;
}

.ap-comment-detail__panel--main {
  border-color: #f1d9a6;
}

.ap-comment-detail__panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f6;
}

.ap-comment-detail__panel-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 16px;
}

.ap-comment-detail__panel-heading h2 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: #263248;
}

.ap-comment-detail__live-dot {
  margin-inline-start: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f9b42c;
  box-shadow: 0 0 0 5px #fef3db;
}

.ap-comment-detail__comments .commentBody,
.ap-comment-detail__comments .bodyComments {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ap-comment-detail__comments .ap-comment-card {
  padding: 22px 0 12px;
}

.ap-comment-detail__comments .ap-comment-card__content {
  min-width: 0;
}

.ap-comment-detail__info-card {
  padding: 24px 21px;
  position: sticky;
  top: 105px;
}

.ap-comment-detail__info-icon {
  margin-bottom: 15px;
}

.ap-comment-detail__info-card h2 {
  margin: 7px 0 12px;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  color: #253248;
}

.ap-comment-detail__info-card p {
  font-size: 12px;
  line-height: 2;
  color: #718096;
  margin: 0 0 20px;
}

.ap-comment-detail__info-card a {
  width: 100%;
}

body.dark .ap-comment-detail {
  color: #e2e8f0;
}

body.dark .ap-comment-detail__hero {
  background: linear-gradient(115deg, #1e293b, #29291f);
  border-color: #594328;
}

body.dark .ap-comment-detail__hero h1,
body.dark .ap-comment-detail__hero p strong,
body.dark .ap-comment-detail__panel-heading h2,
body.dark .ap-comment-detail__info-card h2 {
  color: #f1f5f9;
}

body.dark .ap-comment-detail__panel,
body.dark .ap-comment-detail__info-card {
  background: #1c2535;
  border-color: #364357;
}

body.dark .ap-comment-detail__panel-heading {
  border-color: #354154;
}

body.dark .ap-comment-detail__breadcrumb a {
  color: #b4c1d2;
}

@media (max-width: 900px) {
  .ap-comment-detail__layout {
    grid-template-columns: 1fr;
  }

  .ap-comment-detail__aside {
    display: none;
  }
}

@media (max-width: 600px) {
  .ap-comment-detail {
    padding: 0 8px 24px;
  }

  .ap-comment-detail__hero {
    padding: 22px 17px;
    gap: 12px;
    border-radius: 17px;
  }

  .ap-comment-detail__hero-icon {
    width: 43px;
    height: 43px;
    font-size: 18px;
  }

  .ap-comment-detail__back {
    width: 100%;
  }

  .ap-comment-detail__panel {
    padding: 16px 15px 5px;
    border-radius: 16px;
  }

  .ap-comment-detail__comments .ap-comment-card {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-comment-detail__back,
  .ap-comment-detail__info-card a {
    transition: none;
    transform: none !important;
  }
}

.commentBody {
  margin-bottom: 30px;
}

.commentBody .commentable {
  margin-bottom: 20px;
  background-color: #fbf8f5;
  padding: 10px;
  border-radius: 5px;
}

.commentBody .commentable a {
  color: #c98600;
}

.commentBody .commentable a:hover {
  opacity: 0.6;
}

.commentBody .bodyComment {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  position: relative;
}

.commentBody .bodyComment .dic img {
  width: 20px;
  height: 20px;
  margin: 0 5px !important;
}

.commentBody .bodyComment .is-deleted {
  color: #e91e63;
  font-weight: bold;
}

.commentBody .bodyComment .avatar {
  width: 60px;
  height: 60px;
  max-width: none;
  border-radius: 50%;
}

.commentBody .bodyComment .dic {
  color: #676767;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.commentBody .bodyComment .box-spoiler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
}

.commentBody .bodyComment .box-spoiler > div {
  width: 100%;
}

.commentBody .bodyComment .box-spoiler .spoiler-btn {
  background-color: #4caf50;
  display: inline-block;
  margin-top: 10px;
  border-radius: 5px;
  color: #fff;
  padding: 3px 15px;
  cursor: pointer;
  transition: 0.3s all;
}

.commentBody .bodyComment .box-spoiler .spoiler-btn:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.commentBody .bodyComment .box-spoiler .spoiler-dic {
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
  max-width: 90%;
}

.commentBody .bodyComment.spoilerActive .data-body {
  opacity: 0.5;
  filter: blur(4px);
}

.commentBody .bodyComment .data-bottom {
  text-align: left;
  position: relative;
}

.commentBody .bodyComment .data-bottom .box-main-sub {
  position: absolute;
  left: 80px;
  top: -2px;
  width: 160px;
}

.commentBody .bodyComment .data-bottom .comments.form {
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
}

.commentBody .bodyComment .data-bottom .comments.form textarea {
  box-shadow: none;
}

.commentBody .bodyComment .data-left {
  flex: 1;
}

.commentBody .bodyComment .data-left .spoiler-btn {
  background-color: #585858;
  display: inline-block;
  border-radius: 5px;
  color: #fff;
  padding: 3px 15px;
  cursor: pointer;
  transition: 0.3s all;
}

.commentBody .bodyComment .data-left .spoiler-btn:hover {
  transition: 0.3s all;
  opacity: 0.5;
}

.commentBody .bodyComment .data-left img {
  margin-left: 10px;
}

.commentBody .bodyComment .data-top {
  margin-bottom: 10px;
}

.commentBody .bodyComment .data-top [leoicon=verified] {
  margin-left: 8px;
}

.commentBody .bodyComment .data-top .name {
  font-weight: bold;
  margin-left: 8px;
}

.commentBody .bodyComment .data-top .name a {
  color: #666;
}

.commentBody .bodyComment .data-top .name a:hover {
  color: #f3a303;
}

.commentBody .bodyComment .data-top .date {
  color: #B4B2B2;
}

.commentBody .bodyComment .reply {
  display: inline-block;
  cursor: pointer;
  transition: 0.3s all;
}

.commentBody .bodyComment .reply:hover {
  color: #000;
  transition: 0.3s all;
}

.commentBody .childComment {
  margin-right: 20px;
}

@media (max-width: 480px) {
  .commentBody .childComment {
    margin-right: 15px;
  }
}

.commentBody span.show-more-comment {
  cursor: pointer;
  border: 1px solid #ccc;
  color: #696969;
  padding: 5px 15px;
  border-radius: 5px;
  transition: 0.3s all;
  margin-bottom: 20px;
  display: inline-block;
  background-color: #fff;
}

.commentBody span.show-more-comment:hover {
  color: #000;
  transition: 0.3s all;
}

.dark .commentBody .bodyComment .data-top a {
  color: #e9e9e9;
}

.comment-menu .btn {
  cursor: pointer;
}

.comment-menu .body {
  position: absolute;
  width: 200px;
  left: 0;
  background-color: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
  padding: 5px;
  z-index: 1;
}

.comment-menu .body .item-menu {
  display: block;
  text-align: right;
  padding: 4px;
  color: #666666;
  transition: 0.3s all;
}

.comment-menu .body .item-menu:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.dark .comment-menu .body {
  background-color: #4c4c4c;
}

.dark .comment-menu .body .item-menu {
  color: #e9e9e9;
}

.featured-comment-section {
  max-width: 940px;
  margin: 40px auto;
  color: #212529;
}

.featured-comment-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.featured-comment-section__heading {
  display: flex;
  align-items: center;
}

.featured-comment-section__heading h4 {
  margin: 0;
}

.featured-comment-section__actions {
  display: flex;
  align-items: center;
}

.featured-comment-section__list {
  display: grid;
  gap: 24px;
}

.featured-comment-section__empty {
  margin: 0;
  font-size: 1rem;
  color: #6c757d;
  text-align: center;
  padding: 28px 0;
  border: 1px dashed #f1f3f6;
  border-radius: 12px;
  background-color: rgba(241, 243, 246, 0.25);
}

.featured-comment-item {
  list-style: none;
}

.comment-card-pro {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid #f1f3f6;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comment-card-pro:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
}

.comment-card-pro .card-badge {
  position: absolute;
  top: 20px;
  left: 24px;
  background: linear-gradient(45deg, #f6a504, #fc4a1a);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.comment-card-pro .card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.comment-card-pro .card-header .avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(246, 165, 4, 0.35);
  -o-object-fit: cover;
     object-fit: cover;
}

.comment-card-pro .card-header .user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-card-pro .card-header .user-info .username {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  color: #212529;
}

.comment-card-pro .card-header .user-info .username a {
  color: inherit;
  text-decoration: none;
}

.comment-card-pro .verified-badge {
  width: 20px;
  height: 20px;
  color: #f6a504;
}

.comment-card-pro .card-header .user-info .date {
  font-size: 0.85rem;
  color: #6c757d;
}

.comment-card-pro .card-menu {
  margin-inline-start: auto;
}

.comment-card-pro .card-menu .menu-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.comment-card-pro .card-menu .menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.comment-card-pro .card-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comment-card-pro .card-body p {
  font-size: 1.05rem;
  color: #343a40;
  margin: 0;
  padding-right: 22px;
  border-right: 4px solid #f6a504;
  border-radius: 4px;
  line-height: 1.9;
}

.comment-card-pro .comment-context {
  font-size: 0.9rem;
  color: #6c757d;
}

.comment-card-pro .comment-context a {
  color: #fc4a1a;
  font-weight: 700;
  text-decoration: none;
}

.comment-card-pro .comment-context a__spoiler {
  background: rgba(246, 165, 4, 0.08);
  border: 1px dashed rgba(246, 165, 4, 0.4);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.comment-card-pro .comment-context a__spoiler-text {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 14px;
  line-height: 1.8;
}

.comment-card-pro .comment-context a__spoiler-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(45deg, #f6a504, #fc4a1a);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-card-pro .comment-context a__spoiler-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(252, 74, 26, 0.25);
}

.comment-card-pro .comment-context a__footer {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(241, 243, 246, 0.9);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.comment-card-pro .card-alert {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.comment-card-pro .card-spoiler {
  background: rgba(246, 165, 4, 0.08);
  border: 1px dashed rgba(246, 165, 4, 0.4);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.comment-card-pro .card-spoiler__text {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 14px;
  line-height: 1.8;
}

.comment-card-pro .card-spoiler__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(45deg, #f6a504, #fc4a1a);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-card-pro .card-spoiler__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(252, 74, 26, 0.25);
}

.comment-card-pro .card-footer {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(241, 243, 246, 0.9);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.comment-card-pro .vote-widget {
  flex: 1 1 220px;
}

.comment-card-pro .action-buttons {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.comment-card-pro .action-buttons .reply {
  color: #6c757d;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.comment-card-pro .action-buttons .reply:hover {
  color: #fc4a1a;
}

.featured-like-widget {
  direction: rtl;
}

.featured-like-widget__btn .count {
  font-weight: 700;
}

.featured-like-widget__btn {
  color: #6c757d;
}

.featured-like-widget__btn:hover,
.featured-like-widget__btn.is-active {
  color: #212529;
}

.featured-like-widget__btn--like.is-active,
.featured-like-widget__btn--like:hover {
  color: #28a745;
}

.featured-like-widget__btn--dislike.is-active,
.featured-like-widget__btn--dislike:hover {
  color: #dc3545;
}

.featured-like-widget__bar {
  flex-grow: 1;
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.featured-like-widget__bar-fill {
  height: 100%;
  background-color: #28a745;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.comment-card-pro .dic img {
  max-width: 24px;
  max-height: 24px;
}

@media (max-width: 960px) {
  .featured-comment-section {
    margin: 30px auto;
  }

  .featured-comment-section__heading h4 {
    font-size: 1.2rem;
  }

  .comment-card-pro {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .featured-comment-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .comment-card-pro {
    padding: 24px;
  }

  .comment-card-pro .card-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .comment-card-pro .card-menu {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .comment-card-pro .card-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.dark .featured-comment-section {
  color: #f1f3f6;
}

.dark .featured-comment-section__heading h4 {
  color: #f1f3f6;
}

.dark .featured-comment-section__empty {
  color: rgba(241, 243, 246, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(33, 37, 43, 0.6);
}

.dark .comment-card-pro {
  background: #1d1f26;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.dark .comment-card-pro .card-badge {
  color: #fff;
}

.dark .comment-card-pro .card-body p {
  color: rgba(248, 249, 250, 0.92);
  border-right-color: rgba(246, 165, 4, 0.8);
}

.dark .comment-card-pro .comment-context {
  color: rgba(226, 230, 236, 0.75);
}

.dark .comment-card-pro .comment-context a {
  color: rgb(252.9892241379, 133.6831896552, 101.5107758621);
}

.dark .comment-card-pro .card-alert {
  background: rgba(220, 53, 69, 0.14);
  color: rgb(227.5316455696, 96.4683544304, 109.0253164557);
}

.dark .comment-card-pro .card-footer {
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .comment-card-pro .card-spoiler {
  background: rgba(246, 165, 4, 0.12);
  border-color: rgba(246, 165, 4, 0.45);
}

.dark .comment-card-pro .card-spoiler__text {
  color: rgba(226, 230, 236, 0.75);
}

.dark .comment-card-pro .card-spoiler__btn {
  box-shadow: none;
}

.dark .comment-card-pro .card-spoiler__btn:hover {
  box-shadow: 0 10px 24px rgba(246, 165, 4, 0.35);
}

.dark .comment-card-pro__spoiler {
  background: rgba(246, 165, 4, 0.12);
  border-color: rgba(246, 165, 4, 0.45);
}

.dark .comment-card-pro__spoiler-text {
  color: rgba(226, 230, 236, 0.75);
}

.dark .comment-card-pro__spoiler-btn {
  box-shadow: none;
}

.dark .comment-card-pro__spoiler-btn:hover {
  box-shadow: 0 10px 24px rgba(246, 165, 4, 0.35);
}

.dark .comment-card-pro__actions .reply {
  color: rgba(226, 230, 236, 0.7);
}

.dark .comment-card-pro__actions .reply:hover {
  color: rgb(252.6594827586, 113.7887931034, 76.3405172414);
}

.dark .featured-like-widget__btn {
  color: rgba(226, 230, 236, 0.7);
}

.dark .featured-like-widget__btn.is-active,
.dark .featured-like-widget__btn:hover {
  color: #fff;
}

.dark .featured-like-widget__bar {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark .featured-like-widget__bar-fill {
  background: rgb(44.9275362319, 187.5724637681, 77.5);
}

@keyframes ap-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ap-animate-fade-in-up {
  animation: ap-fade-in-up 0.32s ease-out both;
}

html.ap-modal-open,
html.ap-modal-open body {
  overflow: hidden;
}

.ap-comments {
  position: relative;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.25);
  margin-bottom: 3rem;
  overflow: hidden;
  font-family: "Vazirmatn", sans-serif;
}

.ap-comments.is-loading {
  opacity: 0.6;
}

.ap-comments__header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}

.ap-comments__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ap-comments__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ap-comments__filter-btn .ap-comments__filter-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ap-comments__filter-btn:hover {
  transform: scale(1.05);
  background: #fde68a;
  color: #b45309;
  box-shadow: 0 18px 36px -26px rgba(251, 146, 60, 0.4);
}

.ap-comments__filter-btn.active {
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 20px 48px -28px rgba(249, 115, 22, 0.4);
}

.ap-comments__empty {
  text-align: center;
  padding: 4.5rem 1.5rem;
  color: #6b7280;
  font-size: 1rem;
}

.ap-comments__empty-sub {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #94a3b8;
}

.ap-comments__list {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.5rem;
}

@media (max-width: 640px) {
  .ap-comments__filters {
    gap: 0.35rem;
  }

  .ap-comments__filter-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    gap: 0.35rem;
  }

  .ap-comments__filter-btn .ap-comments__filter-icon svg {
    width: 1rem;
    height: 1rem;
  }
}

.ap-comment-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.ap-comment-card:last-child {
  border-bottom: none;
}

.ap-comment-card--featured {
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.7), rgba(255, 247, 237, 0.9));
  border-bottom-color: rgba(249, 115, 22, 0.25);
}

.ap-comment-card__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.4);
}

.ap-comment-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ap-comment-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.875rem;
}

.ap-comment-card__header > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.ap-comment-card__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ap-comment-card__name {
  font-weight: 700;
  color: #111827;
  font-size: 1.125rem;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-comment-card__name:hover {
  color: #f97316;
}

.ap-comment-card__verified svg {
  width: 16px;
  height: 16px;
}

.ap-comment-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.ap-comment-card__badge-link a {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-comment-card__badge-link a:hover {
  background: rgba(249, 115, 22, 0.2);
}

.ap-comment-card__menu {
  position: relative;
  display: inline-flex;
  direction: rtl;
  margin-inline-start: auto;
}

.ap-comment-card__menu > div {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 70;
  transform: translate3d(0, 6px, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease;
}

.ap-comment-card__menu.is-open > div {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}

.ap-comment-card__menu-btn {
  padding: 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-card__menu-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.ap-comment-card__menu-btn:hover,
.ap-comment-card__menu-btn:focus-visible {
  background: rgba(148, 163, 184, 0.16);
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.35);
  outline: none;
}

.ap-comment-card__menu-items {
  min-width: 12.5rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 26px 60px -36px rgba(15, 23, 42, 0.35);
  padding: 0.35rem 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.ap-comment-card__menu-items[role=menu] {
  direction: rtl;
}

.ap-comment-card__menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1f2937;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none;
  text-align: right;
}

.ap-comment-card__menu-item:focus-visible {
  outline: none;
  background: rgba(248, 250, 252, 0.95);
  color: #c2410c;
}

.ap-comment-card__menu-item svg {
  width: 1rem;
  height: 1rem;
  color: #64748b;
  transition: color 0.18s ease;
}

.ap-comment-card__menu-item:hover {
  background: rgba(248, 250, 252, 0.9);
  color: #0f172a;
}

.ap-comment-card__menu-item:hover svg,
.ap-comment-card__menu-item:focus-visible svg {
  color: #ea580c;
}

.ap-comment-card__menu-item.is-danger {
  color: #dc2626;
}

.ap-comment-card__menu-item.is-danger svg {
  color: #f87171;
}

.ap-comment-card__menu-item.is-danger:hover {
  background: rgba(254, 226, 226, 0.6);
}

.ap-comment-card__menu-divider {
  height: 1px;
  margin: 0.25rem 0;
  background: rgba(226, 232, 240, 0.9);
}

.dark .ap-comment-card__menu-item svg {
  color: #9ca3c9;
}

.dark .ap-comment-card__menu-item:hover svg,
.dark .ap-comment-card__menu-item:focus-visible svg {
  color: #fb923c;
}

.ap-comment-card__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  font-weight: 600;
}

.ap-comment-card__body {
  line-height: 1.75;
  color: #1f2937;
  font-size: 0.95rem;
}

.ap-comment-card__text {
  margin-top: 1rem;
  color: inherit;
}

.ap-comment-card__text img {
  display: inline-block;
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .ap-comments__list {
    padding: 1rem;
  }

  .ap-comment-card {
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .ap-comment-card__content {
    min-width: 0;
  }

  .ap-comment-card__header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .ap-comment-card__user {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }

  .ap-comment-card__menu {
    flex-shrink: 0;
  }

  .ap-comment-card__name,
  .ap-comment-card__badge-link a,
  .ap-comment-card__text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ap-comment-card__name {
    font-size: 0.8rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .ap-comment-card__body,
  .ap-comment-card__text {
    font-size: 0.875rem;
  }

  .ap-comment-card__footer {
    margin-top: 1rem;
    gap: 0.5rem;
  }

  .ap-comment-card__reactions {
    gap: 0.5rem;
  }

  .ap-comment-card__menu > div {
    max-inline-size: min(92vw, 18rem);
    inset-inline-end: 0;
    inset-inline-start: auto;
    transform: translate3d(0, 6px, 0) translateX(0);
  }

  .ap-comment-card__menu.is-open > div {
    transform: translate3d(0, 0, 0) translateX(0);
  }

  .ap-comment-card__menu-items {
    max-inline-size: 100%;
  }

  [dir=rtl] .ap-comment-card__menu > div {
    transform: translate3d(0, 6px, 0) translateX(8px);
  }

  [dir=rtl] .ap-comment-card__menu.is-open > div {
    transform: translate3d(0, 0, 0) translateX(8px);
  }

  .ap-comment-reply__btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }

  .ap-comment-card__replies-btn {
    font-size: 0.8rem;
    padding: 0;
  }
}

.ap-comment-card__spoiler {
  position: relative;
  margin-top: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  overflow: hidden;
  min-height: 160px;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.92));
}

.ap-comment-card__spoiler-blur {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 2.5rem 1.75rem;
  text-align: center;
  filter: blur(6px);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
}

.ap-comment-card__spoiler-blur p {
  color: #94a3b8;
  font-weight: 600;
}

.ap-comment-card__spoiler-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1.75rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  text-align: center;
}

.ap-comment-card__spoiler-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.ap-comment-card__spoiler-icon svg {
  width: 28px;
  height: 28px;
}

.ap-comment-card__spoiler-overlay h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.ap-comment-card__spoiler-overlay p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
}

.ap-comment-card__spoiler-btn {
  margin-top: 0.5rem;
  padding: 0.3rem 1rem;
  background: linear-gradient(120deg, #f97316, #fb923c);
  color: #ffffff;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 36px -26px rgba(249, 115, 22, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-card__spoiler-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 40px -28px rgba(249, 115, 22, 0.6);
}

.ap-comment-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ap-comment-card__reactions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  order: 1;
}

.ap-comment-card__reply {
  order: 2;
  margin-inline-start: auto;
}

.ap-comment-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ap-comment-card__replies {
  margin-top: 1rem;
}

.ap-comment-card__replies-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 0.75rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.875rem;
  background: rgba(253, 186, 116, 0.12);
  color: #ea580c;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ap-comment-card__replies-text {
  color: inherit;
}

.ap-comment-card__replies-btn:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.45);
}

.ap-comment-card__replies-btn:hover .ap-comment-card__replies-icon svg {
  transform: translateX(-4px);
}

.ap-comment-card__replies-icon {
  margin-inline-start: auto;
  display: inline-flex;
}

.ap-comment-card__replies-avatars {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.ap-comment-card__replies-avatars img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 6px 12px -8px rgba(15, 23, 42, 0.4);
  margin-inline-start: -0.5rem;
}

.ap-comment-card__replies-avatars img:first-child {
  margin-inline-start: 0;
}

.ap-comment-card__replies-icon {
  margin-inline-start: auto;
  display: inline-flex;
}

.ap-comment-card__replies-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.ap-comment-reply {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-comment-reply__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: #4b5563;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.ap-comment-reply__btn:hover {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.ap-comment-reply__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  transform: scaleX(-1);
}

.ap-comment-reply__form {
  padding-top: 1rem;
}

.ap-comment-reply__form .ap-comment-composer__card {
  border: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 0;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-reply__form .ap-comment-composer__card:focus-within {
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.ap-comment-reply__form .ap-comment-composer__footer {
  margin-top: 0;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.ap-comment-reply__form .ap-comment-composer__textarea {
  padding: 16px 18px;
  border-radius: 14px 14px 0 0;
  font-size: 0.95rem;
}

.ap-comment-card__children {
  display: contents;
}

.ap-comment-children__modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  z-index: 9999;
  width: 100vw;
  height: 100vh;
}

.ap-comment-children__dialog {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@supports (padding: clamp(1.25rem, 5vw, 3.25rem)) {
  .ap-comment-children__modal {
    padding: 0;
  }
}

@supports (max-height: min(90vh, 780px)) {
  .ap-comment-children__dialog {
    max-height: 100%;
  }
}

.ap-comment-children__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
  padding: 1.75rem 2.5rem;
}

.ap-comment-children__dialog-title h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  color: #0f172a;
}

.ap-comment-children__dialog-close {
  border: none;
  background: rgba(148, 163, 184, 0.16);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-comment-children__dialog-close:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #f97316;
}

.ap-comment-children__dialog-close svg {
  width: 1.35rem;
  height: 1.35rem;
}

.ap-comment-children__dialog-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 2.5rem 2.25rem;
  overflow-y: auto;
  flex: 1;
}

.ap-comment-children__parent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.ap-comment-children__parent-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ap-comment-children__parent-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ap-comment-children__parent-name {
  font-weight: 700;
  color: #0f172a;
}

.ap-comment-children__parent-text {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-comment-children__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-inline-end: 0.5rem;
}

@media (max-width: 768px) {
  .ap-comment-children__dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .ap-comment-children__dialog-header {
    padding: 1.4rem 1.6rem;
  }

  .ap-comment-children__dialog-body {
    padding: 1.6rem;
  }
}

@media (max-width: 480px) {
  .ap-comment-children__modal {
    padding: 0;
  }

  .ap-comment-children__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .ap-comment-children__dialog-header {
    padding: 1.25rem 1.4rem;
  }

  .ap-comment-children__dialog-body {
    padding: 1.5rem 1.4rem 1.75rem;
  }
}

@media (max-width: 640px) {
  .ap-comment-children__modal {
    padding: 0;
  }

  .ap-comment-children__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .ap-comment-children__dialog-body {
    padding: 1.25rem 1.1rem 1.5rem;
  }
}

.ap-comment-children-enter-active,
.ap-comment-children-leave-active {
  transition: opacity 0.2s ease;
}

.ap-comment-children-enter,
.ap-comment-children-leave-to {
  opacity: 0;
}

.ap-comment-composer {
  position: relative;
  margin-bottom: 32px;
}

.ap-comment-composer__card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 42px -28px rgba(15, 23, 42, 0.16);
  border: 1px solid #e4e7ee;
  padding: 22px;
  overflow: visible;
}

.ap-comment-composer__textarea {
  width: 100%;
  min-height: 120px;
  border: none;
  resize: none;
  font-size: 1rem;
  color: #0f172a;
  line-height: 1.75;
}

.ap-comment-composer__textarea:focus {
  outline: none;
}

.ap-comment-composer__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.ap-comment-composer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-comment-composer__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(226, 232, 240, 0.6);
  color: #475569;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-composer__icon-btn svg {
  width: 16px;
  height: 16px;
}

.ap-comment-composer__icon-btn:hover,
.ap-comment-composer__icon-btn.is-active {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  box-shadow: 0 10px 24px -18px rgba(249, 115, 22, 0.3);
}

.ap-comment-composer__toggles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ap-comment-composer__spoiler-message {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111827;
  background: transparent;
  border-radius: 10px;
  padding: 6px 12px;
}

.ap-comment-toggle {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
  font-size: 0.85rem;
  color: #475569;
}

.ap-comment-toggle__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

.ap-comment-toggle__input::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.6);
  transition: transform 0.25s ease;
}

.ap-comment-toggle__input:checked {
  background: linear-gradient(120deg, #f97316, #fb923c);
  box-shadow: 0 12px 26px -18px rgba(249, 115, 22, 0.75);
}

.ap-comment-toggle__input:checked::before {
  transform: translateX(-20px);
}

.ap-comment-toggle__input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ap-comment-toggle__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
}

.ap-comment-composer__submit {
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  background: #f97316;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ap-comment-composer__submit:hover {
  background: #ea580c;
}

.ap-comment-composer__submit:disabled {
  background: rgba(249, 115, 22, 0.4);
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .ap-comment-composer__textarea {
    min-height: 96px;
  }

  .ap-comment-composer__icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .ap-comment-composer__icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .ap-comment-composer__submit {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

.ap-comment-composer__alert {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
}

.ap-comment-composer__alert.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.ap-comment-composer__alert.is-warning {
  background: rgba(251, 191, 36, 0.14);
  color: #b45309;
}

.ap-comment-composer__notification {
  position: absolute;
  top: -16px;
  right: 32px;
  background: #111827;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 18px 45px -30px rgba(15, 23, 42, 0.6);
  font-size: 0.85rem;
}

.ap-comment-toast-enter-active,
.ap-comment-toast-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ap-comment-toast-enter,
.ap-comment-toast-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.ap-comment-modal-enter-active,
.ap-comment-modal-leave-active {
  transition: opacity 0.25s ease;
}

.ap-comment-modal-enter-from,
.ap-comment-modal-leave-to {
  opacity: 0;
}

.ap-comment-poll__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #37bf3c;
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-poll__trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -28px rgba(55, 191, 60, 0.6);
}

.ap-comment-poll__modal {
  position: fixed;
  inset: 0;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}

.ap-comment-poll__dialog {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  box-shadow: 0 28px 64px -32px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
}

.ap-comment-poll__close {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(226, 232, 240, 0.6);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.ap-comment-poll__close svg {
  width: 22px;
  height: 22px;
}

.ap-comment-poll__close:hover {
  background: rgba(249, 115, 22, 0.12);
  color: #ea580c;
}

.ap-comment-poll__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  background: #ffffff;
  overflow-y: auto;
  max-height: calc(90vh - 60px);
}

.ap-comment-poll__loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ap-comment-poll__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ap-comment-poll__header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ea580c;
}

.ap-comment-poll__header-icon svg {
  width: 24px;
  height: 24px;
}

.ap-comment-poll__title {
  font-weight: 800;
  font-size: 1.2rem;
  color: #111827;
  margin-bottom: 4px;
}

.ap-comment-poll__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 0.85rem;
}

.ap-comment-poll__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-comment-poll__label {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.9rem;
}

.ap-comment-poll__input,
.ap-comment-poll__textarea {
  width: 100%;
  border: 1px solid #dce1ea;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-poll__input:focus,
.ap-comment-poll__textarea:focus {
  outline: none;
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.ap-comment-poll__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-comment-poll__option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ap-comment-poll__option-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ap-comment-poll__option-field {
  flex: 1;
}

.ap-comment-poll__option-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(203, 213, 225, 0.9);
  background: #ffffff;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-comment-poll__option-control:checked {
  border-color: rgba(249, 115, 22, 0.7);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.ap-comment-poll__option-control:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #f97316;
}

.ap-comment-poll__option-remove {
  border: none;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ap-comment-poll__option-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
  transform: translateY(-1px);
}

.ap-comment-poll__add-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: transparent;
  color: #ea580c;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0;
  margin-top: 0.75rem;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ap-comment-poll__add-option svg {
  width: 1.1rem;
  height: 1.1rem;
}

.ap-comment-poll__add-option:hover {
  color: #c2410c;
  transform: translateY(-1px);
}

.ap-comment-poll__toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-comment-poll__toggle {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ap-comment-poll__toggle:hover {
  background: rgba(249, 115, 22, 0.04);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 16px 34px -28px rgba(249, 115, 22, 0.25);
}

.ap-comment-poll__toggle > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-comment-poll__toggle.is-disabled {
  opacity: 0.6;
}

.ap-comment-poll__toggle-title {
  font-weight: 700;
  color: #0f172a;
}

.ap-comment-poll__toggle-desc {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

.ap-comment-poll__footer {
  border-top: 1px solid #edf0f6;
  padding-top: 16px;
  display: flex;
  justify-content: center;
}

.ap-comment-poll__submit {
  border: none;
  border-radius: 12px;
  background: linear-gradient(120deg, #f97316, #fb923c);
  color: #fff;
  padding: 12px 28px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ap-comment-poll__submit:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -28px rgba(249, 115, 22, 0.6);
}

.ap-comment-poll__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.ap-comment-poll-card {
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap-comment-poll-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.ap-comment-poll-card.is-quiz .ap-comment-poll-card__badge {
  background: rgba(250, 204, 21, 0.18);
  color: #b45309;
}

.ap-comment-poll-card__title {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-weight: 700;
}

.ap-comment-poll-card__option-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.ap-comment-poll-card__option-input:hover {
  border-color: rgba(249, 115, 22, 0.5);
}

.ap-comment-poll-card__option-input.is-selected {
  border-color: rgba(249, 115, 22, 0.6);
  background: rgba(253, 186, 116, 0.18);
  box-shadow: 0 18px 38px -30px rgba(249, 115, 22, 0.55);
}

.ap-comment-poll-card__option-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-radius: 50%;
  background: #ffffff;
  position: relative;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.ap-comment-poll-card__option-control[type=checkbox] {
  border-radius: 6px;
}

.ap-comment-poll-card__option-control::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: transparent;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ap-comment-poll-card__option-control:checked {
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 12px 26px -18px rgba(249, 115, 22, 0.7);
}

.ap-comment-poll-card__option-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

.ap-comment-poll-card__option-control[type=radio]:checked::after {
  background: linear-gradient(120deg, #f97316, #fb923c);
}

.ap-comment-poll-card__option-control[type=checkbox]:checked::after {
  background: linear-gradient(120deg, #f97316, #fb923c);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.173 12.414a1 1 0 0 1-1.414 0l-2.879-2.88 1.414-1.414 2.172 2.173 5.12-5.121 1.414 1.414-5.12 5.12a1 1 0 0 1-1.414 0Z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.173 12.414a1 1 0 0 1-1.414 0l-2.879-2.88 1.414-1.414 2.172 2.173 5.12-5.121 1.414 1.414-5.12 5.12a1 1 0 0 1-1.414 0Z"/></svg>') center/contain no-repeat;
}

.ap-comment-poll-card__option-control:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ap-comment-poll-card__result {
  padding: 12px 0;
}

.ap-comment-poll-card__result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #0f172a;
}

.ap-comment-poll-card__result-bar {
  position: relative;
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.ap-comment-poll-card__result-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.ap-comment-poll-card__result.is-correct .ap-comment-poll-card__result-bar-fill {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.ap-comment-poll-card__result.is-incorrect .ap-comment-poll-card__result-bar-fill {
  background: linear-gradient(90deg, #ef4444, #fca5a5);
}

.ap-comment-poll-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ap-comment-poll-card__participants {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #475569;
  font-weight: 600;
}

.ap-comment-poll-card__avatars {
  display: inline-flex;
  align-items: center;
}

.ap-comment-poll-card__avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #fff;
  margin-left: -8px;
  overflow: hidden;
  box-shadow: 0 10px 20px -14px rgba(15, 23, 42, 0.5);
}

.ap-comment-poll-card__avatar:first-child {
  margin-left: 0;
}

.ap-comment-poll-card__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ap-comment-poll-card__vote-btn {
  border: none;
  border-radius: 12px;
  background: #f97316;
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
}

.ap-comment-poll-card__status {
  color: #16a34a;
  font-weight: 700;
}

.ap-comment-card__children .ap-comment-card {
  box-shadow: 0 16px 44px -34px rgba(15, 23, 42, 0.35);
}

.ap-report-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 12000;
}

@supports (padding: clamp(1.25rem, 5vw, 3.25rem)) {
  .ap-report-modal {
    padding: clamp(1.25rem, 5vw, 3.25rem);
  }
}

.ap-report-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 48px 120px -40px rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  margin: auto;
}

@supports (max-height: min(92vh, 720px)) {
  .ap-report-modal__dialog {
    max-height: min(92vh, 720px);
  }
}

.ap-report-modal__close {
  position: absolute;
  top: 22px;
  left: 22px;
  border: none;
  background: rgba(226, 232, 240, 0.7);
  color: #475569;
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.ap-report-modal__close:hover:not([disabled]) {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  transform: translateY(-1px);
}

.ap-report-modal__close[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.ap-report-modal__close svg {
  width: 22px;
  height: 22px;
}

.ap-report-modal__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 36px 0;
  overflow-y: auto;
  flex: 1;
}

.ap-report-modal__header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ap-report-modal__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-report-modal__header-copy h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  color: #0f172a;
}

.ap-report-modal__header-copy p {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: #475569;
}

.ap-report-modal__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: rgba(254, 226, 226, 0.92);
  color: #dc2626;
}

.ap-report-modal__header-icon svg {
  width: 28px;
  height: 28px;
}

.ap-report-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 32px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 6px;
  padding-inline-end: 6px;
}

@supports (max-height: min(52vh, 360px)) {
  .ap-report-modal__body {
    max-height: min(52vh, 360px);
  }
}

html[dir=ltr] .ap-report-modal__body {
  padding-right: 0;
  padding-left: 6px;
}

.ap-report-modal__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 2px solid rgba(226, 232, 240, 0.95);
  cursor: pointer;
  transition: border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  background: rgba(248, 250, 252, 0.75);
}

.ap-report-modal__option:hover {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(253, 186, 116, 0.14);
}

.ap-report-modal__option input {
  display: none;
}

.ap-report-modal__option span {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f2937;
  text-align: right;
  display: block;
}

.ap-report-modal__option.is-active {
  border-color: rgba(249, 115, 22, 0.55);
  background: rgba(253, 186, 116, 0.22);
  box-shadow: 0 20px 50px -34px rgba(249, 115, 22, 0.55);
}

.ap-report-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 24px 36px 32px;
  border-top: 1px solid rgba(226, 232, 240, 0.55);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.4) 0%, rgba(248, 250, 252, 0.85) 100%);
}

.ap-report-modal__btn {
  border: none;
  border-radius: 12px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ap-report-modal__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ap-report-modal__btn--ghost {
  background: rgba(226, 232, 240, 0.7);
  color: #475569;
}

.ap-report-modal__btn--ghost:hover:not([disabled]) {
  background: rgba(203, 213, 225, 0.9);
}

.ap-report-modal__btn--primary {
  background: #f97316;
  color: #fff;
  box-shadow: 0 26px 54px -28px rgba(249, 115, 22, 0.55);
}

.ap-report-modal__btn--primary:hover:not([disabled]) {
  background: #ea580c;
}

.ap-report-modal-enter-active,
.ap-report-modal-leave-active {
  transition: opacity 0.25s ease;
}

.ap-report-modal-enter,
.ap-report-modal-leave-to {
  opacity: 0;
}

.ap-reply-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 12000;
}

@supports (padding: clamp(1.25rem, 5vw, 3.25rem)) {
  .ap-reply-modal {
    padding: clamp(1.25rem, 5vw, 3.25rem);
  }
}

.ap-reply-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 48px 120px -40px rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  margin: auto;
}

@supports (max-height: min(92vh, 720px)) {
  .ap-reply-modal__dialog {
    max-height: min(92vh, 720px);
  }
}

.ap-reply-modal__close {
  position: absolute;
  top: 22px;
  left: 22px;
  border: none;
  background: rgba(226, 232, 240, 0.7);
  color: #475569;
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.ap-reply-modal__close:hover:not([disabled]) {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  transform: translateY(-1px);
}

.ap-reply-modal__close svg {
  width: 22px;
  height: 22px;
}

.ap-reply-modal__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 36px 36px;
  overflow-y: auto;
  flex: 1;
}

.ap-reply-modal__header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ap-reply-modal__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-reply-modal__header-copy h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  color: #0f172a;
}

.ap-reply-modal__header-copy p {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: #475569;
}

.ap-reply-modal__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: rgba(219, 234, 254, 0.85);
  color: #2563eb;
}

.ap-reply-modal__header-icon svg {
  width: 28px;
  height: 28px;
}

.ap-reply-modal__body {
  width: 100%;
}

.ap-reply-modal-enter-active,
.ap-reply-modal-leave-active {
  transition: opacity 0.25s ease;
}

.ap-reply-modal-enter,
.ap-reply-modal-leave-to {
  opacity: 0;
}

@media (max-width: 640px) {
  .ap-report-modal {
    padding: 0;
  }

  .ap-report-modal__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .ap-report-modal__close {
    top: 18px;
    right: 18px;
  }

  .ap-report-modal__content {
    padding: 28px 22px 0;
  }

  .ap-report-modal__header {
    align-items: flex-start;
  }

  .ap-report-modal__body {
    max-height: calc(100vh - 240px);
    padding-bottom: 28px;
  }

  .ap-report-modal__footer {
    padding: 20px 22px 24px;
  }

  .ap-reply-modal {
    padding: 0;
  }

  .ap-reply-modal__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .ap-reply-modal__close {
    top: 18px;
    padding: 6px;
    border-radius: 10px;
  }

  .ap-reply-modal__close svg {
    width: 16px;
    height: 16px;
  }

  .ap-reply-modal__content {
    padding: 28px 22px 32px;
  }

  .ap-reply-modal__header {
    align-items: flex-start;
    gap: 14px;
  }

  .ap-reply-modal__header-copy {
    gap: 2px;
  }

  .ap-reply-modal__header-copy h2 {
    font-size: 1.05rem;
  }

  .ap-reply-modal__header-copy p {
    margin-top: 4px;
    font-size: 0.82rem;
  }

  .ap-reply-modal__header-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .ap-reply-modal__header-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Dark mode */

.dark .ap-comments {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(30, 41, 59, 0.8);
  box-shadow: 0 24px 60px -32px rgba(2, 6, 23, 0.75);
}

.dark .ap-comments__filter-btn {
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
}

.dark .ap-comments__filter-btn:hover,
.dark .ap-comments__filter-btn.active {
  background: #f97316;
  color: #fff;
}

.dark .ap-comments__empty {
  color: #94a3b8;
}

.dark .ap-comment-card {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: none;
}

.dark .ap-comment-card__name {
  color: #e2e8f0;
}

.dark .ap-comment-card__meta {
  color: #94a3b8;
}

.dark .ap-comment-card__badge-link a {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
}

.dark .ap-comment-card__menu-btn {
  background: transparent;
  color: #cbd5f5;
}

.dark .ap-comment-card__menu-btn:hover,
.dark .ap-comment-card__menu-btn:focus-visible {
  background: rgba(30, 41, 59, 0.65);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
}

.dark .ap-comment-card__menu-items {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 32px 60px -28px rgba(2, 6, 23, 0.85);
  border-color: rgba(148, 163, 184, 0.12);
}

.dark .ap-comment-card__menu-item {
  color: #e2e8f0;
}

.dark .ap-comment-card__menu-item:focus-visible {
  background: rgba(30, 41, 59, 0.78);
  color: #fb923c;
}

.dark .ap-comment-card__menu-item:hover {
  background: rgba(30, 41, 59, 0.65);
  color: #fcd34d;
}

.dark .ap-comment-card__menu-divider {
  background: rgba(148, 163, 184, 0.24);
}

.dark .ap-comment-card__status {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

.dark .ap-comment-card__body {
  color: #e2e8f0;
}

.dark .ap-like-button {
  color: #e2e8f0;
}

.dark .ap-like-button:hover {
  background: rgba(249, 115, 22, 0.25);
  color: #f97316;
}

.dark .ap-like-button.is-active {
  background: rgba(249, 115, 22, 0.35);
  color: #fb923c;
}

.dark .ap-like-button--dislike.is-active {
  background: rgba(248, 113, 113, 0.28);
  color: #fca5a5;
}

.dark .ap-like-button--dislike:hover {
  background: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.dark .ap-comment-children__dialog {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

.dark .ap-comment-children__dialog-title h2 {
  color: #f8fafc;
}

.dark .ap-comment-children__dialog-close {
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
}

.dark .ap-comment-children__dialog-close:hover {
  background: rgba(249, 115, 22, 0.25);
  color: #f97316;
}

.dark .ap-comment-children__parent {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(51, 65, 85, 0.8);
}

.dark .ap-comment-children__parent-name {
  color: #e2e8f0;
}

.dark .ap-comment-children__parent-text {
  color: #cbd5f5;
}

.dark .ap-report-modal {
  background: rgba(2, 6, 23, 0.82);
}

.dark .ap-report-modal__dialog {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(71, 85, 105, 0.55);
}

.dark .ap-report-modal__content {
  background: transparent;
}

.dark .ap-report-modal__header-copy h2 {
  color: #f8fafc;
}

.dark .ap-report-modal__header-copy p {
  color: #cbd5f5;
}

.dark .ap-report-modal__header-icon {
  background: rgba(248, 113, 113, 0.24);
  color: #fca5a5;
}

.dark .ap-report-modal__close {
  color: #cbd5f5;
}

.dark .ap-report-modal__close:hover:not([disabled]) {
  background: rgba(51, 65, 85, 0.55);
  color: #f8fafc;
}

.dark .ap-report-modal__option {
  border-color: rgba(51, 65, 85, 0.75);
  background: rgba(15, 23, 42, 0.68);
}

.dark .ap-report-modal__option:hover {
  border-color: rgba(249, 115, 22, 0.38);
  background: rgba(249, 115, 22, 0.18);
}

.dark .ap-report-modal__footer {
  border-top-color: rgba(71, 85, 105, 0.6);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.dark .ap-report-modal__option span {
  color: #e2e8f0;
}

.dark .ap-report-modal__option.is-active {
  border-color: rgba(249, 115, 22, 0.55);
  background: rgba(249, 115, 22, 0.24);
}

.dark .ap-report-modal__btn--ghost {
  background: rgba(30, 41, 59, 0.72);
  color: #cbd5f5;
}

.dark .ap-report-modal__btn--ghost:hover:not([disabled]) {
  background: rgba(51, 65, 85, 0.82);
}

.dark .ap-report-modal__btn--primary {
  background: #f97316;
  color: #fff;
}

.dark .ap-reply-modal {
  background: rgba(2, 6, 23, 0.82);
}

.dark .ap-reply-modal__dialog {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(71, 85, 105, 0.55);
}

.dark .ap-reply-modal__header-copy h2 {
  color: #f8fafc;
}

.dark .ap-reply-modal__header-copy p {
  color: #cbd5f5;
}

.dark .ap-reply-modal__header-icon {
  background: rgba(30, 41, 59, 0.85);
  color: #93c5fd;
}

.dark .ap-reply-modal__close {
  color: #cbd5f5;
}

.dark .ap-reply-modal__close:hover:not([disabled]) {
  background: rgba(51, 65, 85, 0.55);
  color: #f8fafc;
}

.dark .ap-comment-card__spoiler {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(15, 23, 42, 0.92));
  border-color: rgba(148, 163, 184, 0.28);
}

.dark .ap-comment-card__spoiler-blur {
  background: rgba(15, 23, 42, 0.9);
}

.dark .ap-comment-card__spoiler-blur p {
  color: #94a3b8;
}

.dark .ap-comment-card__spoiler-overlay {
  background: rgba(15, 23, 42, 0.85);
}

.dark .ap-comment-card__spoiler-icon {
  background: rgba(249, 115, 22, 0.25);
  color: #fb923c;
}

.dark .ap-comment-card__spoiler-overlay h4 {
  color: #f8fafc;
}

.dark .ap-comment-card__spoiler-overlay p {
  color: #cbd5f5;
}

.dark .ap-comment-card__spoiler-btn {
  background: linear-gradient(120deg, #f97316, #fb923c);
  color: #fff;
}

.dark .ap-comment-reply__btn,
.dark .ap-comment-card__replies-btn {
  background: transparent;
  color: #e2e8f0;
}

.dark .ap-comment-reply__btn:hover,
.dark .ap-comment-card__replies-btn:hover {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.dark .ap-comment-composer__card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 28px 60px -32px rgba(2, 6, 23, 0.85);
}

.dark .ap-comment-reply__form .ap-comment-composer__card {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}

.dark .ap-comment-reply__form .ap-comment-composer__card:focus-within {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25);
}

.dark .ap-comment-reply__form .ap-comment-composer__footer {
  border-top-color: rgba(148, 163, 184, 0.24);
  background: transparent;
}

.dark .ap-comment-composer__textarea {
  color: #e2e8f0;
  background: transparent;
}

.dark .ap-comment-composer__footer {
  border-top-color: rgba(148, 163, 184, 0.18);
}

.dark .ap-comment-composer__icon-btn {
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
}

.dark .ap-comment-toggle {
  color: #cbd5f5;
}

.dark .ap-comment-composer__alert.is-success {
  background: rgba(34, 197, 94, 0.18);
  color: #bbf7d0;
}

.dark .ap-comment-composer__alert.is-warning {
  background: rgba(251, 191, 36, 0.22);
  color: #facc15;
}

.dark .ap-comment-composer__notification {
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
}

.dark .ap-comment-poll__dialog {
  background: rgba(15, 23, 42, 0.96);
}

.dark .ap-comment-poll__modal {
  background: rgba(15, 23, 42, 0.85);
}

.dark .ap-comment-poll__header-icon {
  background: rgba(249, 115, 22, 0.22);
  color: #fb923c;
}

.dark .ap-comment-poll__title {
  color: #f8fafc;
}

.dark .ap-comment-poll__subtitle {
  color: #94a3b8;
}

.dark .ap-comment-poll__input,
.dark .ap-comment-poll__textarea {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}

.dark .ap-comment-poll__toggle {
  background: rgba(30, 41, 59, 0.7);
}

.dark .ap-comment-poll__toggle-title {
  color: #e2e8f0;
}

.dark .ap-comment-poll__toggle-desc {
  color: #cbd5f5;
}

.dark .ap-comment-poll__close {
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5f5;
}

.dark .ap-comment-poll__close:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}

.dark .ap-comment-poll__option-control {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.9);
}

.dark .ap-comment-poll__option-control:checked::after {
  background: #fb923c;
}

.dark .ap-comment-poll__option-remove {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

.dark .ap-comment-poll__option-remove:hover {
  background: rgba(239, 68, 68, 0.24);
  color: #fecaca;
}

.dark .ap-comment-poll__loading {
  background: rgba(15, 23, 42, 0.75);
}

.dark .ap-comment-poll-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.24);
}

.dark .ap-comment-poll-card__badge {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.dark .ap-comment-poll-card__title {
  color: #e2e8f0;
}

.dark .ap-comment-poll-card__option-input {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
}

.dark .ap-comment-poll-card__result-header {
  color: #cbd5f5;
}

.dark .ap-comment-poll-card__participants {
  color: #cbd5f5;
}

@media (max-width: 768px) {
  .ap-comments {
    padding: 24px;
  }

  .ap-comment-card {
    grid-template-columns: 1fr;
  }

  .ap-comment-card__avatar {
    order: -1;
  }

  .ap-comment-card__header {
    align-items: flex-start;
  }

  .ap-comment-children {
    margin-right: 0;
  }
}

/* AniPlus unified 2026 comment design — compact, accessible and mobile first.
   Existing actions, polls, spoilers, reactions, reporting and reply dialogs remain intact. */

:root {
  --apc-accent: #efa51b;
  --apc-text: #192436;
  --apc-muted: #8190a4;
  --apc-stroke: #e8edf3;
  --apc-canvas: #f8fafc;
  --apc-surface: #fff;
}

.ap-comments,
.ap-comment-composer,
.post-comment {
  color: var(--apc-text);
  font-family: Vazirmatn, Tahoma, sans-serif;
  direction: rtl;
}

.ap-comments {
  max-width: 1100px;
  margin: 18px auto 32px;
  background: var(--apc-surface);
  border: 1px solid var(--apc-stroke);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(24, 39, 67, 0.035);
  overflow: visible;
  padding: 0;
}

.ap-comments__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--apc-stroke);
  background: var(--apc-surface);
  border-radius: 20px 20px 0 0;
}

.ap-comments__filters {
  gap: 7px;
}

.ap-comments__filter-btn {
  display: inline-flex;
  gap: 6px;
  min-height: 35px;
  padding: 7px 12px;
  background: var(--apc-canvas);
  color: #64748b;
  border: 1px solid var(--apc-stroke);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transform: none;
}

.ap-comments__filter-btn:hover {
  background: #fff7e8;
  border-color: #f3d393;
  color: #ad7100;
  box-shadow: none;
  transform: none;
}

.ap-comments__filter-btn.active {
  background: #fff6e6;
  border-color: #f1c975;
  color: #9d6800;
  box-shadow: none;
}

.ap-comments__filter-btn .ap-comments__filter-icon svg {
  width: 15px;
  height: 15px;
}

.ap-comments__list {
  padding: 4px 20px;
  gap: 0;
}

.ap-comments__empty {
  padding: 34px 15px;
  font-size: 13px;
}

.ap-comments__empty-sub {
  margin-top: 5px;
  font-size: 12px;
}

.ap-comment-card {
  gap: 12px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--apc-stroke);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.ap-comment-card--featured {
  background: #fffbf3;
  border-bottom-color: #f6e8c8;
}

.ap-comment-card__avatar {
  flex: 0 0 auto;
}

.ap-comment-card__avatar img {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  box-shadow: none;
}

.ap-comment-card__content {
  min-width: 0;
  gap: 9px;
}

.ap-comment-card__header {
  gap: 8px;
  align-items: flex-start;
}

.ap-comment-card__user {
  gap: 6px;
  min-width: 0;
}

.ap-comment-card__name {
  font-size: 13px;
  font-weight: 850;
  color: var(--apc-text);
}

.ap-comment-card__meta {
  margin-top: 3px;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--apc-muted);
  font-size: 10.5px;
}

.ap-comment-card__badge-link a {
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--apc-canvas);
  color: #79869b;
  font-size: 10px;
}

.ap-comment-card__body {
  min-width: 0;
}

.ap-comment-card__text {
  font-size: 12.5px;
  line-height: 2;
  color: #354257;
  overflow-wrap: anywhere;
}

.ap-comment-card__footer {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-comment-card__replies {
  margin-top: 6px;
}

.ap-comment-card__replies-btn,
.ap-comment-reply__btn {
  font-size: 11px;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  box-shadow: none;
}

.ap-comment-card__replies-btn:hover,
.ap-comment-reply__btn:hover {
  background: #fff7eb;
  color: #ac7100;
}

.ap-comment-card__menu-btn {
  min-width: 30px;
  min-height: 30px;
  border-radius: 9px;
}

.ap-comment-card__menu-items {
  border: 1px solid var(--apc-stroke);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(24, 39, 67, 0.12);
}

.ap-comment-composer {
  max-width: 1100px;
  margin-inline: auto;
}

.ap-comment-composer__card {
  border: 1px solid var(--apc-stroke);
  border-radius: 18px;
  background: var(--apc-surface);
  box-shadow: 0 8px 24px rgba(24, 39, 67, 0.04);
}

.ap-comment-composer__textarea {
  min-height: 110px;
  font-size: 12.5px;
  line-height: 2;
}

.ap-comment-composer__footer {
  gap: 10px;
}

.ap-comment-composer__icon-btn {
  border-radius: 9px;
}

.ap-comment-composer__submit {
  border-radius: 10px;
  background: var(--apc-accent);
}

.ap-comment-composer__submit:hover {
  background: #dc9200;
}

.ap-comments :is(button, a, textarea, input):focus-visible,
.ap-comment-composer :is(button, a, textarea, input):focus-visible {
  outline: 2px solid #e7ab40;
  outline-offset: 3px;
}

.dark .ap-comments,
.dark .ap-comment-composer {
  --apc-text: #e2e8f0;
  --apc-muted: #94a3b8;
  --apc-stroke: rgba(148,163,184,.2);
  --apc-canvas: #162337;
  --apc-surface: #101b2d;
}

.dark .ap-comments,
.dark .ap-comments__header {
  background: var(--apc-surface);
  border-color: var(--apc-stroke);
  box-shadow: none;
}

.dark .ap-comment-card,
.dark .ap-comment-card__header {
  border-color: var(--apc-stroke);
}

.dark .ap-comment-card__name,
.dark .ap-comment-card__text {
  color: var(--apc-text);
}

.dark .ap-comment-card__badge-link a,
.dark .ap-comments__filter-btn {
  background: var(--apc-canvas);
  color: var(--apc-muted);
  border-color: var(--apc-stroke);
}

.dark .ap-comments__filter-btn.active {
  color: #f7c669;
  background: #312611;
  border-color: #6d5321;
}

.dark .ap-comment-card--featured {
  background: rgba(241, 171, 48, 0.08);
}

@media (max-width: 700px) {
  .ap-comments {
    margin: 12px 0 24px;
    border-radius: 15px;
    padding: 0;
  }

  .ap-comments__header {
    padding: 11px;
    border-radius: 15px 15px 0 0;
  }

  .ap-comments__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .ap-comments__filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    min-height: 32px;
    padding: 6px 9px;
  }

  .ap-comments__list {
    padding: 2px 12px;
  }

  .ap-comment-card {
    display: flex;
    gap: 9px;
    padding: 14px 0;
    min-width: 0;
  }

  .ap-comment-card__avatar {
    order: 0;
  }

  .ap-comment-card__avatar img {
    width: 33px;
    height: 33px;
    border-radius: 10px;
  }

  .ap-comment-card__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ap-comment-card__name {
    font-size: 12px;
  }

  .ap-comment-card__text {
    font-size: 12px;
  }

  .ap-comment-composer__card {
    border-radius: 14px;
  }

  .ap-comment-composer__textarea {
    min-height: 105px;
  }

  .ap-comment-composer__footer {
    flex-wrap: wrap;
  }

  .ap-comment-card__footer {
    margin-top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-comments *,
  .ap-comment-composer * {
    animation: none !important;
    transition-duration: 0s !important;
  }
}

/* Compact, responsive report dialog. These declarations follow the legacy fullscreen mobile rules. */

.ap-report-modal {
  padding: 16px !important;
  backdrop-filter: blur(5px);
}

.ap-report-modal__dialog {
  width: min(100%, 420px);
  max-width: 420px;
  max-height: min(85dvh, 610px);
  border-radius: 20px;
  box-shadow: 0 26px 70px -24px rgba(15, 23, 42, 0.48);
}

.ap-report-modal__content {
  gap: 16px;
  padding: 22px 23px 0;
  min-height: 0;
}

.ap-report-modal__header {
  gap: 12px;
  padding-inline-start: 32px;
}

.ap-report-modal__header-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
}

.ap-report-modal__header-icon svg {
  width: 22px;
  height: 22px;
}

.ap-report-modal__header-copy h2 {
  font-size: 16px;
}

.ap-report-modal__header-copy p {
  font-size: 12px;
  margin-top: 2px;
}

.ap-report-modal__close {
  top: 14px;
  left: 14px;
  right: auto;
  padding: 7px;
}

.ap-report-modal__close svg {
  width: 17px;
  height: 17px;
}

.ap-report-modal__body {
  gap: 7px;
  max-height: min(45dvh, 310px);
  padding: 0 2px 10px;
}

.ap-report-modal__option {
  position: relative;
  min-height: 43px;
  gap: 12px;
  justify-content: flex-start;
  border-width: 1px;
  border-radius: 11px;
  padding: 10px 12px;
}

.ap-report-modal__option input {
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
}

.ap-report-modal__option input:checked {
  border: 5px solid #f59e0b;
}

.ap-report-modal__option input:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 3px;
}

.ap-report-modal__option span {
  font-size: 12px;
  line-height: 1.7;
}

.ap-report-modal__option.is-active {
  border-color: #f5b644;
  box-shadow: 0 3px 14px -12px #ea9800;
}

.ap-report-modal__footer {
  gap: 9px;
  padding: 13px 23px 18px;
}

.ap-report-modal__btn {
  padding: 10px 13px;
  font-size: 12px;
  border-radius: 10px;
}

.ap-report-modal__btn--primary {
  flex: 1;
  background: linear-gradient(120deg, #f7ac22, #f58b16);
  box-shadow: 0 10px 25px -16px #f97316;
}

body.dark .ap-report-modal__dialog {
  background: #1d2838;
  border: 1px solid #394659;
}

body.dark .ap-report-modal__header-copy h2,
body.dark .ap-report-modal__option span {
  color: #e2e8f0;
}

body.dark .ap-report-modal__header-copy p {
  color: #a8b7c9;
}

body.dark .ap-report-modal__option {
  background: #253146;
  border-color: #3b475b;
}

body.dark .ap-report-modal__option.is-active {
  background: #433826;
  border-color: #f0a42a;
}

body.dark .ap-report-modal__footer {
  background: #202b3b;
  border-color: #3a4759;
}

@media (max-width: 640px) {
  .ap-report-modal {
    padding: 12px !important;
  }

  .ap-report-modal__dialog {
    width: 100%;
    max-height: min(82dvh, 600px);
    border-radius: 18px;
  }

  .ap-report-modal__content {
    padding: 20px 17px 0;
  }

  .ap-report-modal__footer {
    padding: 12px 17px 16px;
  }

  .ap-report-modal__body {
    max-height: 41dvh;
    padding-bottom: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-report-modal__dialog {
    animation: none !important;
  }
}

@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.page-season {
  background-color: transparent;
}

.page-season .seasonal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-season .season-filter {
  font-family: "Vazirmatn", sans-serif;
  color: #333333;
}

.page-season .season-filter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-season .season-filter__title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.page-season .season-filter__bar {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.page-season .season-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
}

.page-season .season-filter__item {
  position: relative;
}

.page-season .season-filter__trigger {
  background-color: #f0f4f8;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555555;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  min-height: 40px;
  white-space: nowrap;
}

.page-season .season-filter__trigger-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: rgb(110.5, 110.5, 110.5);
  transition: color 0.25s ease;
}

.page-season .season-filter__trigger-icon svg {
  width: 16px;
  height: 16px;
}

.page-season .season-filter__trigger:hover {
  background-color: #e6ecf1;
}

.page-season .season-filter__trigger.is-open {
  box-shadow: inset 0 0 0 2px rgba(243, 163, 3, 0.18);
}

.page-season .season-filter__trigger.is-open .page-season .season-filter__trigger-icon {
  color: #f3a303;
}

.page-season .season-filter__trigger.is-active {
  background-color: #f3a303;
  color: #ffffff;
  font-weight: 700;
}

.page-season .season-filter__trigger.is-active .page-season .season-filter__trigger-icon {
  color: #ffffff;
}

.page-season .season-filter__dropdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-season .season-filter__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-season .season-filter__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
}

.page-season .season-filter__modal {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: min(90vw, 850px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-season .season-filter__dropdown.is-open .page-season .season-filter__modal {
  transform: scale(1);
}

.page-season .season-filter__modal-header,
.page-season .season-filter__modal-footer {
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-season .season-filter__modal-footer {
  border-bottom: none;
  border-top: 1px solid #e0e0e0;
  justify-content: flex-end;
}

.page-season .season-filter__modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.page-season .season-filter__modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #aaaaaa;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.page-season .season-filter__modal-close:hover {
  color: #333333;
}

.page-season .season-filter__modal-content {
  padding: 20px 24px;
  overflow-y: auto;
}

.page-season .season-filter__apply {
  background-color: #f3a303;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.page-season .season-filter__apply:hover {
  background-color: rgb(217.8109756098, 146.1036585366, 2.6890243902);
}

.page-season .season-filter__years {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.page-season .season-filter__year {
  background-color: #f8f9fb;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-season .season-filter__year-title {
  font-weight: 700;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 15px;
}

.page-season .season-filter__season-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-season .season-filter__season {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #ffffff;
  color: #555555;
  font-weight: 500;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.page-season .season-filter__season:hover {
  border-color: #f3a303;
  color: #f3a303;
}

.page-season .season-filter__season.is-selected {
  background-color: #f3a303;
  border-color: #f3a303;
  color: #ffffff;
  font-weight: 600;
}

.page-season .season-filter__genre-columns {
  -moz-column-count: 4;
       column-count: 4;
  -moz-column-gap: 24px;
       column-gap: 24px;
}

.page-season .season-filter__option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: #555555;
}

.page-season .season-filter__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-season .season-filter__option-box {
  width: 20px;
  height: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.page-season .season-filter__option-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.page-season .season-filter__option input:checked + .season-filter__option-box {
  background-color: #f3a303;
  border-color: #f3a303;
}

.page-season .season-filter__option input:checked + .season-filter__option-box::after {
  content: "";
  width: 6px;
  height: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.page-season .season-filter__option input:checked ~ .season-filter__option-label {
  color: #f3a303;
  font-weight: 600;
}

.page-season .season-filter__pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-season .season-filter__pill {
  position: relative;
  display: inline-flex;
  font-size: 14px;
}

.page-season .season-filter__pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.page-season .season-filter__pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  color: #555555;
  font-weight: 500;
  transition: all 0.2s ease;
  pointer-events: none;
}

.page-season .season-filter__pill input:checked + span {
  background-color: #f3a303;
  border-color: #f3a303;
  color: #ffffff;
  font-weight: 600;
}

.page-season .season-filter__modal-content--sort {
  padding: 16px;
}

.page-season .season-filter__sort-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.page-season .season-filter__sort-option {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.page-season .season-filter__sort-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-season .season-filter__sort-card {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #ffffff;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-season .season-filter__sort-label {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.page-season .season-filter__sort-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background-color: #ffffff;
  position: relative;
  transition: border-color 0.2s ease;
}

.page-season .season-filter__sort-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background-color: #f3a303;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.page-season .season-filter .season-filter__sort-option:hover .season-filter__sort-card,
.page-season .season-filter .season-filter__sort-option input:focus-visible + .season-filter__sort-card {
  border-color: rgba(243, 163, 3, 0.55);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card {
  background-color: #fff9ee;
  border-color: #f3a303;
}

.page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-label {
  color: #111827;
  font-weight: 800;
}

.page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-mark {
  border-color: #f3a303;
}

.page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-mark::after {
  transform: scale(1);
}

.page-season .season-filter__reset {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #aaaaaa;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-size: 13px;
  font-weight: 500;
}

.page-season .season-filter__reset svg {
  width: 16px;
  height: 16px;
}

.page-season .season-filter__reset:hover {
  color: #e74c3c;
  background-color: #fdf2f2;
}

.page-season .season-filter__later {
  background-color: #e3f2fd;
  color: #1565c0;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.page-season .season-filter__later:hover {
  background-color: #dbeffd;
  color: #0f4fa8;
}

@media (max-width: 1024px) {
  .page-season .season-filter__bar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-season .season-filter__actions {
    width: 100%;
  }

  .page-season .season-filter__trigger {
    width: 100%;
    justify-content: space-between;
  }

  .page-season .season-filter__genre-columns {
    -moz-column-count: 3;
         column-count: 3;
  }
}

@media (max-width: 768px) {
  .page-season .season-filter__header {
    margin-bottom: 16px;
  }

  .page-season .season-filter__title {
    font-size: 24px;
  }

  .page-season .season-filter__modal-content {
    padding: 18px;
  }

  .page-season .season-filter__years {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .page-season .season-filter__genre-columns {
    -moz-column-count: 2;
         column-count: 2;
  }
}

@media (max-width: 640px) {
  .page-season .season-filter__title {
    font-size: 22px;
  }

  .page-season .season-filter__bar {
    padding: 14px;
  }

  .page-season .season-filter__years {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .page-season .season-filter__genre-columns {
    -moz-column-count: 1;
         column-count: 1;
  }

  .page-season .season-filter__season-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .page-season .season-filter__sort-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-season .season-filter {
  font-family: "Vazirmatn", sans-serif;
  color: #1f2937;
}

.page-season .season-filter__header {
  justify-content: flex-start;
  margin-bottom: 16px;
  padding-inline-start: 4px;
  text-align: right;
}

.page-season .season-filter__title {
  color: #1f2937;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

.page-season .season-filter__bar {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  margin-bottom: 24px;
  padding: 12px;
}

.page-season .season-filter__bar--mobile {
  display: none;
}

.page-season .season-filter__actions {
  gap: 10px;
}

.page-season .season-filter__trigger {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #374151;
  font-size: 14px;
  min-height: 42px;
  padding: 10px 16px;
}

.page-season .season-filter__trigger.is-active,
.page-season .season-filter__trigger.is-active:hover {
  background: #f3a303;
  border-color: #f3a303;
  color: #ffffff;
}

.page-season .season-filter__trigger:hover {
  background: #f3f4f6;
}

.page-season .season-filter__modal {
  border-radius: 20px;
  max-height: 90vh;
  width: min(92vw, 750px);
}

.page-season .season-filter__overlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.page-season .season-filter__modal-header {
  border-bottom-color: #f3f4f6;
  justify-content: center;
  padding: 20px;
  position: relative;
}

.page-season .season-filter__modal-title {
  color: #111827;
  font-size: 18px;
  line-height: 1.5;
}

.page-season .season-filter__modal-close {
  align-items: center;
  background: #f9fafb;
  border-radius: 999px;
  color: #9ca3af;
  display: inline-flex;
  font-size: 24px;
  height: 36px;
  justify-content: center;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
}

.page-season .season-filter__modal-content {
  padding: 24px;
}

.page-season .season-filter__modal-footer {
  border-top-color: #f3f4f6;
  justify-content: space-between;
  padding: 20px;
}

.page-season .season-filter__apply {
  background: #f3a303;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(243, 163, 3, 0.22);
  min-width: 120px;
  padding: 10px 40px;
}

.page-season .season-filter__later {
  background: #e8f3fb;
  border-radius: 12px;
  color: #1976d2;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 24px;
}

.page-season .season-filter__year {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 16px;
  padding: 0;
}

.page-season .season-filter__year-title {
  align-items: center;
  background: transparent;
  color: #111827;
  display: flex;
  font-size: 18px;
  gap: 12px;
  justify-content: flex-start;
  padding: 0;
  text-align: right;
}

.page-season .season-filter__year-title::after {
  background: #f3f4f6;
  content: "";
  flex: 1;
  height: 1px;
}

.page-season .season-filter__season-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-season .season-filter__season,
.page-season .season-filter__pill span {
  border-color: #e5e7eb;
  border-radius: 12px;
  color: #374151;
  font-size: 14px;
  padding: 11px 14px;
}

.page-season .season-filter__sort-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-season .season-filter__sort-card {
  border-color: #e5e7eb;
  border-radius: 12px;
  min-height: 52px;
  padding: 14px 16px;
}

.page-season .season-filter__sort-option input:checked + .page-season .season-filter__sort-card {
  background: #fff9ee;
  border-color: #f3a303;
}

.page-season .season-filter__mobile-trigger {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: #1f2937;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  padding: 14px;
  width: 100%;
}

.page-season .season-filter__mobile-trigger-content,
.page-season .season-filter__mobile-trigger-icon {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.page-season .season-filter__mobile-trigger-icon {
  background: rgba(243, 163, 3, 0.1);
  border-radius: 8px;
  color: #f3a303;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.page-season .season-filter__mobile-trigger-icon svg {
  height: 20px;
  width: 20px;
}

.page-season .season-filter__mobile-section {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 20px;
}

.page-season .season-filter__mobile-section + .page-season .season-filter__mobile-section {
  padding-top: 20px;
}

.page-season .season-filter__mobile-section h4 {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
}

@media (max-width: 768px) {
  .page-season .season-filter__title {
    font-size: 24px;
  }

  .page-season .season-filter__bar--desktop {
    display: none;
  }

  .page-season .season-filter__bar--mobile {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    padding: 0;
  }

  .page-season .season-filter__dropdown--mobile {
    align-items: flex-end;
    padding: 0;
  }

  .page-season .season-filter__modal--mobile-all {
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    width: 100%;
  }

  .page-season .season-filter__modal-content--all {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px;
  }

  .page-season .season-filter__genre-columns {
    -moz-column-count: 2;
         column-count: 2;
  }

  .page-season .season-filter__sort-options,
  .page-season .season-filter__season-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-season .season-filter__pill-group {
    gap: 8px;
  }

  .page-season .season-filter__pill span {
    font-size: 13px;
    padding: 8px 14px;
  }
}

.page-season .season-filter {
  direction: rtl;
}

.page-season .season-filter__header {
  margin: 4px 0 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background: linear-gradient(115deg, rgba(243, 163, 3, 0.13), rgba(243, 163, 3, 0.025) 64%, transparent);
  border: 1px solid rgba(243, 163, 3, 0.18);
}

.page-season .season-filter__title {
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.5px;
}

.page-season .season-filter__bar--desktop {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.045);
}

.page-season .season-filter__trigger {
  border: 1px solid #e7e8ed;
  background: #f8fafc;
  border-radius: 12px;
  gap: 10px;
  min-height: 46px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.page-season .season-filter__trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 163, 3, 0.55);
  background: #fffaf0;
}

.page-season .season-filter__trigger:focus-visible {
  outline: 3px solid rgba(243, 163, 3, 0.42);
  outline-offset: 2px;
}

.page-season .season-filter__trigger.is-active {
  background: #fff3d7;
  border-color: #f5c46f;
  color: #885402;
}

.page-season .season-filter__trigger.is-active .page-season .season-filter__trigger-icon {
  color: #b77608;
}

.page-season .season-filter__trigger-icon {
  flex-shrink: 0;
}

.page-season .season-filter__modal {
  border: 1px solid #eef0f5;
  box-shadow: 0 25px 80px rgba(7, 18, 37, 0.18);
}

.page-season .season-filter__year {
  padding: 15px;
  border-radius: 16px;
  border: 1px solid #e9ebf0;
  background: linear-gradient(180deg, #fafbfc, #fff);
  gap: 12px;
}

.page-season .season-filter__years {
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}

.page-season .season-filter__year-title {
  font-size: 16px;
  font-weight: 800;
}

.page-season .season-filter__season-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.page-season .season-filter__season {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 80px;
  border: 1px solid #e6e9ee;
  border-radius: 14px;
  padding: 10px 8px;
  background: #fff;
  color: #475569;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-season .season-filter__season:hover {
  background: #fff8e9;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

.page-season .season-filter__season:focus-visible {
  outline: 3px solid rgba(243, 163, 3, 0.42);
  outline-offset: 2px;
}

.page-season .season-filter__season.is-selected {
  background: linear-gradient(135deg, #ffd775, #f4a90b);
  border-color: #f4b42b;
  color: #402806;
  box-shadow: 0 7px 15px rgba(243, 163, 3, 0.2);
}

.page-season .season-filter__season-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
}

.page-season .season-filter__season-icon svg {
  width: 100%;
  height: 100%;
}

.page-season .season-filter__sort-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-season .season-filter__sort-card {
  justify-content: flex-start;
  gap: 12px;
  padding: 13px;
  min-height: 62px;
}

.page-season .season-filter__sort-icon {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 10px;
  background: #fff3d9;
  color: #be7b05;
}

.page-season .season-filter__sort-icon svg {
  width: 19px;
  height: 19px;
}

.page-season .season-filter__sort-label {
  flex: 1;
  text-align: right;
}

.page-season .season-filter__sort-option input:checked + .page-season .season-filter__sort-card .page-season .season-filter__sort-icon {
  background: #f3a303;
  color: #fff;
}

.page-season .season-filter__sort-option input:focus-visible + .page-season .season-filter__sort-card {
  outline: 3px solid rgba(243, 163, 3, 0.35);
  outline-offset: 2px;
}

.page-season .season-filter__later {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 13px;
  border: 1px solid #f1d5a2;
  border-radius: 14px;
  background: linear-gradient(110deg, #fff5e3, #fffaf3);
  color: #825205;
  box-shadow: 0 5px 18px rgba(148, 91, 7, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-season .season-filter__later:hover {
  color: #6a4103;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(148, 91, 7, 0.12);
}

.page-season .season-filter__later:focus-visible {
  outline: 3px solid rgba(243, 163, 3, 0.4);
  outline-offset: 2px;
}

.page-season .season-filter__later.is-selected {
  border-color: #edac28;
  background: #ffedbf;
}

.page-season .season-filter__later-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffe5ad;
  flex-shrink: 0;
}

.page-season .season-filter__later-icon svg {
  width: 22px;
  height: 22px;
}

.page-season .season-filter__later-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.5;
}

.page-season .season-filter__later-copy strong {
  font-size: 13px;
}

.page-season .season-filter__later-copy small {
  font-size: 10px;
  opacity: 0.8;
}

.page-season .season-filter__later-arrow {
  margin-inline-start: auto;
  font-size: 19px;
}

.page-season .season-filter__mobile-count {
  padding: 2px 7px;
  border-radius: 8px;
  background: #ffedc0;
  color: #7a4e04;
  font-size: 11px;
}

.page-season .season-filter__later--mobile {
  display: flex;
  margin-top: 14px;
  width: 100%;
}

.page-season .season-filter__mobile-section .page-season .season-filter__years {
  max-height: 280px;
  overflow: auto;
}

@media (max-width: 768px) {
  .page-season .season-filter__header {
    padding: 15px;
  }

  .page-season .season-filter__bar--mobile {
    display: block;
  }

  .page-season .season-filter__modal--mobile-all {
    max-height: 92dvh;
  }

  .page-season .season-filter__years {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .page-season .season-filter__year {
    padding: 12px;
  }

  .page-season .season-filter__season-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .page-season .season-filter__season {
    min-height: 65px;
    font-size: 11px;
    padding: 7px 2px;
    gap: 3px;
  }

  .page-season .season-filter__season-icon {
    width: 23px;
    height: 23px;
  }

  .page-season .season-filter__sort-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .page-season .season-filter__sort-card {
    min-height: 60px;
    gap: 6px;
    padding: 8px;
  }

  .page-season .season-filter__sort-icon {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  .page-season .season-filter__sort-icon svg {
    width: 16px;
    height: 16px;
  }

  .page-season .season-filter__sort-label {
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .page-season .season-filter__sort-options {
    grid-template-columns: 1fr;
  }
}

.box-themes .item {
  box-shadow: 0 0 9px 3px rgba(121, 102, 153, 0.1490196078);
  margin-bottom: 20px;
  padding: 15px;
  border-right: 4px solid #f2a303;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
}

.box-themes .item .people-link {
  color: #393939;
  transition: 0.3s all;
}

.box-themes .item .people-link:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.box-themes .item .type {
  color: #1c1823;
  font-weight: 700;
}

.box-themes .item .title {
  color: #009688;
}

.box-themes .item .js-download {
  background-color: #e6e1f0;
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: #1c1823;
  display: inline-block;
  transition: 0.3s all;
}

.box-themes .item .js-download:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.box-themes .item .episodes {
  color: #000;
  display: flex;
}

.box-themes .item .episodes svg {
  color: #f2a303;
  margin-left: 5px;
}

.box-themes .item .uk-grid:nth-child(2) {
  margin-top: 15px;
}

.dark .box-themes .item {
  background-color: #333;
  box-shadow: none;
}

.dark .box-themes .item .people-link {
  color: #ededed;
}

.dark .box-themes .item .type {
  color: #ededed;
}

.dark .box-themes .item .title {
  color: #00d8c4;
}

.dark .box-themes .item .episodes {
  color: #ededed;
}

.theme-page {
  position: relative;
  padding: 80px 0 90px;
}

.theme-hero {
  position: absolute;
  inset: 0;
  height: 260px;
  background: radial-gradient(circle at 30% 40%, rgba(255, 194, 102, 0.3), transparent 45%), radial-gradient(circle at 75% 35%, rgba(255, 138, 5, 0.22), transparent 45%), linear-gradient(135deg, #fff7e0 0%, #f6f8ff 60%, #ecf2ff 100%);
  overflow: hidden;
  z-index: -1;
}

.theme-hero__overlay {
  width: 140%;
  height: 220px;
  background: radial-gradient(circle at 30% 50%, rgba(255, 194, 102, 0.28), transparent 35%), radial-gradient(circle at 80% 30%, rgba(255, 138, 5, 0.2), transparent 40%);
  transform: translateX(-10%);
}

.anime-theme {
  position: relative;
  z-index: 1;
}

.anime-theme .theme-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(19, 32, 67, 0.08);
  padding: 32px;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

@media (max-width: 960px) {
  .anime-theme .theme-card {
    margin-top: 0;
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .anime-theme .theme-card {
    padding: 20px;
  }
}

.anime-theme .theme-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 24px;
}

.anime-theme .theme-card__image {
  width: 100%;
  display: flex;
  justify-content: center;
}

.anime-theme .theme-card__image img {
  width: 100%;
  max-width: 360px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  -o-object-fit: cover;
     object-fit: cover;
}

.anime-theme .theme-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}

.anime-theme .theme-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.anime-theme .theme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ffbb32, #ff8a05);
  color: #1b1b1b;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.2px;
}

.anime-theme .theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f6f7fb;
  border: 1px solid #e7eaf3;
  border-radius: 999px;
  color: #3b3f52;
  font-weight: 600;
}

.anime-theme .theme-title {
  font-size: 28px;
  font-weight: 800;
  color: #1d2333;
  line-height: 1.4;
  margin: 8px 0 4px;
}

@media (max-width: 640px) {
  .anime-theme .theme-title {
    font-size: 22px;
  }
}

.anime-theme .theme-subtitle {
  color: #f2a203;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.anime-theme .theme-subtitle:hover {
  opacity: 0.8;
}

.anime-theme .theme-description {
  color: #4a4f63;
  line-height: 1.8;
  margin: 0;
}

.anime-theme .theme-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-direction: row-reverse;
}

.anime-theme .theme-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ffb02d, #ff7a00);
  color: #1d2333;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.anime-theme .theme-primary-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.anime-theme .theme-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 176, 45, 0.4), rgba(59, 63, 82, 0.1));
  margin: 24px 0;
}

.anime-theme .theme-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.anime-theme .theme-info-block {
  background: #f9fafc;
  border: 1px solid #edf0f7;
  border-radius: 14px;
  padding: 18px;
}

.anime-theme .theme-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.anime-theme .theme-info-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1d2333;
}

.anime-theme .theme-info-sub {
  color: #8b90a5;
  font-size: 13px;
  font-weight: 600;
}

.anime-theme .theme-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.anime-theme .theme-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e7eaf3;
  border-radius: 12px;
  color: #30354a;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.anime-theme .theme-chip:hover {
  border-color: #ffb02d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.anime-theme .theme-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.anime-theme .theme-meta-item {
  flex: 1;
  min-width: 140px;
  background: #ffffff;
  border: 1px dashed #e0e4f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.anime-theme .theme-meta-item .label {
  display: block;
  color: #8b90a5;
  font-size: 13px;
  margin-bottom: 4px;
}

.anime-theme .theme-meta-item .value {
  color: #1d2333;
  font-weight: 800;
}

.anime-theme .theme-audio {
  margin-top: 24px;
  background: #f9fafc;
  color: #1d2333;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #edf0f7;
  box-shadow: 0 12px 28px rgba(19, 32, 67, 0.06);
}

.anime-theme .theme-audio__player {
  display: flex;
  align-items: center;
  gap: 16px;
}

.anime-theme .theme-audio__element {
  width: 100%;
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e7eaf3;
  padding: 6px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.anime-theme .theme-audio__element::-webkit-media-controls-panel {
  border-radius: 12px;
  background-color: #f7f8fb;
}

.anime-theme .theme-audio__element::-webkit-media-controls-enclosure {
  border-radius: 12px;
}

@media (max-width: 640px) {
  .anime-theme .theme-audio__player {
    flex-direction: column;
    align-items: stretch;
  }

  .anime-theme .theme-primary-btn {
    width: 100%;
    text-align: center;
  }
}

.anime-theme .theme-alert {
  background: #fff2d6;
  border: 1px solid #ffd89c;
  color: #7a4a00;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.anime-theme .theme-alert__badge {
  background: #ffb02d;
  color: #1d2333;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
}

.anime-theme .theme-alert__text {
  margin: 0;
}

.anime-theme .link-anime {
  font-weight: bold;
  color: #f2a203;
  transition: 0.3s all;
}

.anime-theme .link-anime:hover {
  opacity: 0.5;
  transition: 0.3s all;
  color: #f2a203;
}

.dark .theme-page {
  background: radial-gradient(circle at 20% 30%, rgba(255, 176, 45, 0.05), transparent 32%), radial-gradient(circle at 85% 40%, rgba(255, 122, 0, 0.06), transparent 35%), #050a16;
}

.dark .theme-hero {
  background: radial-gradient(circle at 20% 40%, rgba(255, 176, 45, 0.2), transparent 35%), radial-gradient(circle at 70% 30%, rgba(255, 122, 0, 0.2), transparent 40%), #0b1221;
}

.dark .anime-theme .theme-card {
  background: linear-gradient(150deg, rgba(15, 23, 42, 0.96), rgba(8, 47, 73, 0.92));
  border: 1px solid #1f2937;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.dark .anime-theme .theme-card__image img {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
}

.dark .anime-theme .theme-card__content {
  color: #e2e8f0;
}

.dark .anime-theme .theme-title {
  color: #f8fafc;
}

.dark .anime-theme .theme-description {
  color: #cbd5e1;
}

.dark .anime-theme .theme-pill {
  background: #0b1221;
  border-color: #1f2937;
  color: #e2e8f0;
}

.dark .anime-theme .theme-info-block {
  background: #0b1221;
  border-color: #1f2937;
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.35);
}

.dark .anime-theme .theme-chip {
  background: #0f172a;
  border-color: #1f2937;
  color: #e2e8f0;
}

.dark .anime-theme .theme-chip:hover {
  border-color: #ffb02d;
}

.dark .anime-theme .theme-divider {
  background: linear-gradient(90deg, rgba(255, 176, 45, 0.25), rgba(15, 23, 42, 0.1));
}

.dark .anime-theme .theme-info-header h4 {
  color: #f8fafc;
}

.dark .anime-theme .theme-info-sub,
.dark .anime-theme .theme-meta-item .label {
  color: #cbd5e1;
}

.dark .anime-theme .theme-meta-item {
  background: #0f172a;
  border-color: #1f2937;
}

.dark .anime-theme .theme-meta-item .value {
  color: #f8fafc;
}

.dark .anime-theme .theme-audio {
  background: #0f172a;
  border-color: #1f2937;
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dark .anime-theme .theme-audio__title {
  color: #f8fafc;
}

.dark .anime-theme .theme-audio__subtitle {
  color: #cbd5e1;
}

.dark .anime-theme audio {
  background: #0f172a;
  border-color: #1f2937;
}

.dark .anime-theme audio::-webkit-media-controls-panel {
  background-color: #0b1221;
}

.dark .anime-theme .theme-alert {
  background: #332005;
  border-color: #6b3d00;
  color: #ffdba5;
}

.dark .anime-theme::-webkit-media-controls-panel {
  background-color: #a7a7a7;
}

:root {
  --character-primary-color: #f3a303;
  --character-primary-shadow: rgba(243, 163, 3, 0.2);
  --character-surface: #f4f5f7;
  --character-card-bg: #ffffff;
  --character-card-border: #e9ecef;
  --character-text: #1f2933;
  --character-subtext: #6b7280;
}

.dark {
  --character-surface: #0f172a;
  --character-card-bg: #1e293b;
  --character-card-border: rgba(148, 163, 184, 0.2);
  --character-text: #e2e8f0;
  --character-subtext: #94a3b8;
}

.box-character-index {
  border-radius: 20px;
  padding: 32px 28px;
}

.box-character-index .title {
  margin-bottom: 24px;
}

.box-character-index .body {
  padding: 0;
}

.box-character-index .character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.box-character-index .character-card {
  display: flex;
  flex-direction: column;
  background-color: var(--character-card-bg);
  border: 1px solid var(--character-card-border);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 100%;
}

.box-character-index .character-card:hover {
  transform: translateY(-8px);
  border-color: var(--character-primary-color);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}

.box-character-index .character-card:hover .card-image {
  transform: scale(1.05);
}

.box-character-index .character-card:hover .character-name {
  color: var(--character-primary-color);
}

.box-character-index .character-card:hover .view-profile-btn {
  opacity: 1;
  transform: translateY(0);
}

.box-character-index .card-image-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.box-character-index .card-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.45) 100%);
  pointer-events: none;
}

.box-character-index .card-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  transition: transform 0.35s ease;
}

.box-character-index .card-rank {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.box-character-index .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px 20px;
  gap: 12px;
}

.box-character-index .character-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--character-text);
  margin: 0;
  transition: color 0.3s ease;
}

.box-character-index .character-role {
  font-size: 14px;
  color: var(--character-subtext);
  margin: 0;
}

.box-character-index .character-followers {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--character-subtext);
  margin: 0;
}

.box-character-index .character-followers .label {
  font-weight: 500;
}

.box-character-index .character-followers .value {
  font-weight: 800;
  color: var(--character-text);
}

.box-character-index .view-profile-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--character-primary-color);
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 30px var(--character-primary-shadow);
  transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}

.box-character-index .character-pagination {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 1200px) {
  .box-character-index {
    padding: 28px 20px;
  }

  .box-character-index .character-grid {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .box-character-index {
    padding: 24px 16px;
  }

  .box-character-index .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .box-character-index .card-body {
    padding: 20px 16px 16px;
  }

  .box-character-index .view-profile-btn {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .box-character-index .character-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.character-section,
.staff-section {
  position: relative;
}

.character-section .section-content,
.staff-section .section-content {
  margin-top: 1.5rem;
}

.character-section .empty-state,
.staff-section .empty-state {
  background: rgba(243, 163, 3, 0.1);
  border: 1px solid rgba(243, 163, 3, 0.3);
  color: #f3a303;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 500;
}

.character-section .character-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.character-section .character-card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: transparent;
  border: 1px solid #eef1f4;
  border-radius: 16px;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  direction: rtl;
}

.character-section .character-card::before {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-image: linear-gradient(#d1d7e0 60%, rgba(209, 215, 224, 0) 40%);
  background-size: 2px 8px;
  transition: background-image 0.3s ease;
}

.character-section .character-card:hover {
  transform: translateY(-6px);
  box-shadow: none;
  border-color: rgba(243, 163, 3, 0.45);
}

.character-section .character-card:hover::before {
  background-image: linear-gradient(#f3a303 60%, rgba(243, 163, 3, 0) 40%);
}

.character-section .character-card__block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  flex-wrap: nowrap;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.character-section .character-card__block--character {
  flex-direction: row-reverse;
}

.character-section .character-card__block--people {
  flex-direction: row;
  direction: ltr;
}

.character-section .character-card__block:hover {
  background-color: rgba(243, 163, 3, 0.08);
}

.character-section .character-card__block:hover .character-card__name {
  color: #f3a303;
}

.character-section .character-card__block:hover .character-card__avatar {
  transform: scale(1.08);
}

.character-section .character-card__block--placeholder {
  justify-content: center;
  color: #7b8593;
  padding: 0.5rem 0.65rem;
  cursor: default;
  background-color: transparent;
  pointer-events: none;
}

.character-section .character-card__block--placeholder:hover {
  background-color: transparent;
}

.character-section .character-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  align-items: flex-start;
}

.character-section .character-card__details--character {
  text-align: right;
  align-items: flex-end;
}

.character-section .character-card__details--people {
  text-align: left;
  align-items: flex-start;
  direction: ltr;
}

.character-section .character-card__details--placeholder {
  text-align: center;
  align-items: center;
}

.character-section .character-card__name {
  font-family: "Inter", "Vazirmatn", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f2933;
  margin: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

.character-section--voice-actors .character-card__name {
  font-size: 0.86rem;
}

.character-section--voice-actors .character-card__role {
  font-size: 0.74rem;
}

.character-section .character-card__name--placeholder,
.character-section .character-card:hover .character-card__name--placeholder {
  color: inherit;
}

.character-section .character-card__role {
  font-size: 0.78rem;
  font-weight: 500;
  color: #606770;
  margin: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

.character-section .character-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  transition: transform 0.3s ease;
}

.character-section .pagination-wrapper,
.staff-section .pagination-wrapper {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.staff-section .staff-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.staff-section .staff-card {
  background: transparent;
  border: 1px solid #eef1f4;
  border-radius: 14px;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.staff-section .staff-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border-color: rgba(243, 163, 3, 0.4);
}

.staff-section .staff-card__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  color: inherit;
}

.staff-section .staff-card__image {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.staff-section .staff-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.staff-section .staff-card__name {
  font-family: "Inter", "Vazirmatn", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f2933;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.staff-section .staff-card__positions {
  font-size: 0.75rem;
  color: #606770;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

@media (max-width: 900px) {
  .character-section .character-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .staff-section .staff-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .staff-section .staff-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .character-section .character-card {
    padding: 0.75rem 0.85rem;
    gap: 0.75rem;
  }

  .character-section .character-card__block {
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
  }

  .character-section .character-card::before {
    width: 1px;
  }

  .character-section .character-card__name {
    font-size: 0.86rem;
    max-width: 110px;
  }

  .character-section .character-card__role {
    font-size: 0.72rem;
  }

  .character-section .character-card__avatar {
    width: 42px;
    height: 42px;
  }

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

  .staff-section .staff-card__link {
    padding: 0.75rem 0.8rem;
  }
}

@media (max-width: 540px) {
  .character-section .character-card {
    padding: 0.65rem 0.75rem;
    gap: 0.6rem;
  }

  .character-section .character-card__block {
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
  }

  .character-section .character-card__name {
    font-size: 0.8rem;
    max-width: 95px;
  }

  .character-section .character-card__role {
    font-size: 0.68rem;
  }

  .character-section .character-card__avatar {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 420px) {
  .character-section .character-card {
    padding: 0.55rem 0.65rem;
    gap: 0.5rem;
  }

  .character-section .character-card__block {
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
  }

  .character-section .character-card__name {
    font-size: 0.76rem;
    max-width: 82px;
  }

  .character-section .character-card__role {
    font-size: 0.64rem;
  }

  .character-section .character-card__avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

@media (max-width: 360px) {
  .character-section .character-card {
    padding: 0.5rem 0.6rem;
    gap: 0.45rem;
  }

  .character-section .character-card__block {
    gap: 0.32rem;
    padding: 0.3rem 0.38rem;
  }

  .character-section .character-card__name {
    font-size: 0.72rem;
    max-width: 74px;
  }

  .character-section .character-card__role {
    font-size: 0.6rem;
  }

  .character-section .character-card__avatar {
    width: 30px;
    height: 30px;
  }
}

body.dark .character-section .character-card,
body.dark .staff-section .staff-card {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: none;
}

body.dark .character-section .character-card::before {
  background-image: none;
}

body.dark .character-section .character-card:hover {
  border-color: rgba(248, 195, 95, 0.5);
}

body.dark .character-section .character-card:hover::before {
  background-image: none;
}

body.dark .character-section .character-card__name,
body.dark .staff-section .staff-card__name {
  color: #f9fafb;
}

body.dark .character-section .character-card__role,
body.dark .staff-section .staff-card__positions {
  color: #cbd5f5;
}

body.dark .character-section .character-card__block:hover {
  background-color: rgba(248, 195, 95, 0.12);
}

body.dark .character-section .character-card__block--placeholder {
  color: #d1d5db;
}

body.dark .character-section .empty-state,
body.dark .staff-section .empty-state {
  background: transparent;
  border-color: rgba(248, 195, 95, 0.3);
  color: #f8c35f;
}

.synopsis-text--extended[data-collapsed=true] {
  display: none;
}

.synopsis-text {
  font-size: 0.98rem;
  line-height: 1.9;
}

.anime-related-card {
  margin-top: 24px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  direction: rtl;
  color: #0f172a;
}

.anime-related-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 12px;
}

.anime-related-card__heading {
  text-align: right;
}

.anime-related-card__eyebrow {
  margin: 0;
  color: #6b7280;
  font-weight: 700;
  font-size: 0.9rem;
}

.anime-related-card__title {
  margin: 6px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.anime-related-card__archive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #f3a303;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.anime-related-card__archive:hover,
.anime-related-card__archive:focus-visible {
  background: #d98e02;
  transform: translateY(-1px);
  outline: 0;
}

.anime-related-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anime-related-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  border-right: 6px solid #f3a303;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.anime-related-card__meta {
  text-align: right;
  min-width: 120px;
}

.anime-related-card__badge {
  margin: 0;
  color: #374151;
  font-weight: 800;
  font-size: 0.95rem;
}

.anime-related-card__count {
  margin: 6px 0 0;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.85rem;
}

.anime-related-card__link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 800;
}

.anime-related-card__name {
  font-weight: 800;
  font-size: 0.95rem;
}

.dark .anime-related-card,
body.dark .anime-related-card {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.95));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: none;
  color: #e5e7eb;
}

.dark .anime-related-card__header,
body.dark .anime-related-card__header {
  border-color: rgba(148, 163, 184, 0.25);
}

.dark .anime-related-card__title,
body.dark .anime-related-card__title {
  color: #f9fafb;
}

.dark .anime-related-card__eyebrow,
body.dark .anime-related-card__eyebrow {
  color: #cbd5e1;
}

.dark .anime-related-card__archive,
body.dark .anime-related-card__archive {
  box-shadow: none;
}

.dark .anime-related-card__list,
body.dark .anime-related-card__list {
  gap: 14px;
}

.dark .anime-related-card__item,
body.dark .anime-related-card__item {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(17, 24, 39, 0.9));
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}

.dark .anime-related-card__badge,
body.dark .anime-related-card__badge {
  color: #e5e7eb;
}

.dark .anime-related-card__count,
body.dark .anime-related-card__count {
  color: #cbd5e1;
}

.dark .anime-related-card__link,
body.dark .anime-related-card__link {
  color: #f9fafb;
}

@media (max-width: 960px) {
  .anime-related-card {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .anime-related-card {
    padding: 18px;
  }

  .anime-related-card__header {
    align-items: flex-start;
  }

  .anime-related-card__item {
    align-items: flex-start;
    flex-direction: column;
  }

  .anime-related-card__link {
    width: 100%;
  }
}

.anime-detail-page {
  --anime-accent: #f3a303;
  --anime-accent-hover: #e09403;
  --anime-card-bg: #ffffff;
  --anime-border-color: rgba(15, 23, 42, 0.1);
  --anime-text-primary: #1f2933;
  --anime-text-secondary: #6c7680;
  --anime-muted-bg: #f8fafc;
  --anime-rating-bg: rgba(243, 163, 3, 0.12);
  --anime-rating-text: var(--anime-accent);
  --anime-title-font-size: clamp(1.2rem, 2.1vw, 1.4rem);
  --anime-subtitle-font-size: 1rem;
}

/* Release information is deliberately a sibling of the poster: schedule,
 * update and quality must remain visible even when the poster has no overlay. */

.anime-detail-page .anime-release-summary {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.anime-detail-page .anime-release-summary .anime-poster-timer {
  position: static;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  transform: none;
  border: 1px solid var(--anime-amber-200, #fde68a);
  border-radius: 16px;
  background: var(--anime-amber-50, #fffbeb);
  color: #78350f;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(120, 53, 15, 0.07);
}

.anime-detail-page .anime-release-summary .anime-poster-timer,
.anime-detail-page .anime-release-summary .anime-poster-timer * {
  color: #78350f;
  text-shadow: none;
}

.anime-detail-page .anime-release-summary__metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.anime-detail-page .anime-release-summary .anime-sidebar-update {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--anime-stone-200, #e7e5e4);
  border-radius: 14px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-release-summary .anime-sidebar-update__icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
}

.anime-detail-page .anime-release-summary .anime-sidebar-update > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.anime-detail-page .anime-release-summary .anime-sidebar-update strong,
.anime-detail-page .anime-release-summary .anime-sidebar-update__quality {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

body.dark .anime-detail-page .anime-release-summary .anime-poster-timer {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.3);
}

body.dark .anime-detail-page .anime-release-summary .anime-poster-timer,
body.dark .anime-detail-page .anime-release-summary .anime-poster-timer * {
  color: #fde68a;
}

body.dark .anime-detail-page .anime-release-summary .anime-sidebar-update {
  border-color: rgba(214, 211, 209, 0.16);
  background: #292524;
}

@media (max-width: 359px) {
  .anime-detail-page .anime-release-summary__metadata {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .anime-detail-page .anime-release-summary,
  .anime-detail-page .anime-release-summary__metadata,
  .anime-detail-page .anime-release-summary .anime-sidebar-update,
  .anime-detail-page .anime-release-summary .anime-sidebar-update > div {
    min-width: 0;
    max-width: 100%;
  }

  .anime-detail-page .anime-release-summary .anime-poster-timer {
    padding: 9px 7px;
    border-radius: 14px;
  }

  .anime-detail-page .anime-release-summary .anime-sidebar-update {
    min-height: 68px;
    padding: 9px;
  }
}

body.dark .anime-detail-page {
  --anime-card-bg: #111827;
  --anime-border-color: rgba(148, 163, 184, 0.18);
  --anime-text-primary: #f3f4f6;
  --anime-text-secondary: #9ca3af;
  --anime-muted-bg: rgba(30, 41, 59, 0.75);
  --anime-rating-bg: rgba(243, 163, 3, 0.25);
  --anime-rating-text: #fee5af;
}

.anime-detail-page.anime-single {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 0;
  padding: 0;
}

body.dark .anime-detail-page.anime-single {
  background: transparent;
  box-shadow: none;
}

.anime-detail-page {
  color: var(--anime-text-primary);
}

.anime-detail-page .anime-page-header {
  margin-bottom: 32px;
}

.anime-detail-page .anime-page-header h1 {
  margin: 0;
}

.anime-detail-page .anime-page-title {
  display: inline-block;
  font-size: var(--anime-title-font-size);
  font-weight: 800;
  color: var(--anime-text-primary);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.anime-page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.anime-page-subtitle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid #d88e00;
  border-radius: 999px;
  color: #d88e00;
  background-color: transparent;
  line-height: 1.2;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: default;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.anime-page-subtitle--stream {
  border-color: #0ea5e9;
  color: #0ea5e9;
  background-color: rgba(14, 165, 233, 0.08);
}

.anime-page-subtitle:hover {
  background-color: #d88e00;
  color: #ffffff;
}

.anime-page-subtitle--stream:hover {
  background-color: #0ea5e9;
  color: #ffffff;
}

body.dark .anime-page-subtitle {
  border-color: #fbbf24;
  color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.12);
}

body.dark .anime-page-subtitle:hover {
  background-color: #fbbf24;
  color: #111827;
}

body.dark .anime-page-subtitle--stream {
  border-color: #38bdf8;
  color: #38bdf8;
  background-color: rgba(56, 189, 248, 0.18);
}

body.dark .anime-page-subtitle--stream:hover {
  color: #0f172a;
}

.anime-detail-card {
  background: var(--anime-card-bg);
  border: 1px solid var(--anime-border-color);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  padding: 28px;
  margin-bottom: 28px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

body.dark .anime-detail-card,
body.dark .anime-poster-card {
  box-shadow: none;
}

.anime-detail-sidebar {
  position: relative;
}

.anime-poster-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  margin-bottom: 26px;
}

.anime-poster-card img {
  width: 100%;
  display: block;
}

.anime-poster-timer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fffbeb;
  color: #78350f;
  text-align: center;
  text-shadow: none;
}

.anime-poster-timer .anime-countdown-title {
  font-size: 0.82rem;
  margin-bottom: 6px;
  opacity: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.65);
  font-weight: 700;
}

.anime-poster-timer .anime-countdown-week {
  font-size: 0.74rem;
  margin-bottom: 6px;
  opacity: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.65);
  font-weight: 700;
}

.anime-poster-timer .uk-flex {
  justify-content: center;
  gap: 10px;
}

.anime-poster-timer .uk-countdown-days,
.anime-poster-timer .uk-countdown-hours,
.anime-poster-timer .uk-countdown-minutes,
.anime-poster-timer .uk-countdown-seconds {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 12px rgba(15, 23, 42, 0.75);
}

.anime-poster-timer .uk-countdown-label {
  display: block;
  margin-top: 3px;
  font-size: 0.64rem;
  opacity: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.65);
}

.anime-poster-timer > span {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.65);
}

.anime-info-cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.anime-info-card .uk-card-title,
.anime-detail-card .anime-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--anime-text-primary);
  margin: 0 0 18px;
}

.anime-description-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.anime-description-row {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 4px 10px;
  font-size: 0.82rem;
  align-items: center;
}

.anime-description-row .term {
  color: var(--anime-text-secondary);
  font-weight: 400;
  white-space: nowrap;
  font-size: 0.76rem;
  line-height: 1.7;
}

.anime-description-row .desc {
  color: var(--anime-text-primary);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.7;
  word-break: break-word;
  max-width: 100%;
}

.anime-description-row .desc.desc--rating {
  font-size: 0.82rem;
}

.anime-description-row .desc.desc--links {
  display: block;
  font-size: 0.82rem;
  line-height: 1.7;
}

.anime-description-row .desc.desc--links a {
  display: inline;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--anime-accent);
  font-weight: 400;
  text-shadow: none;
  box-shadow: none;
  transition: color 0.2s ease;
}

.anime-description-row .desc.desc--links a:hover {
  color: #b97500;
}

.anime-description-row .anime-list-separator {
  color: var(--anime-text-secondary);
  margin: 0 2px;
}

.anime-description-row .desc.desc--links .anime-list-separator {
  display: inline;
}

.anime-description-row .desc.desc--rating {
  display: block;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--anime-text-primary);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.9;
  box-shadow: none;
  max-width: 100%;
  word-break: break-word;
  text-align: right;
}

.anime-detail-main {
  width: 100%;
}

.anime-scores-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.anime-scores-card .anime-card-title {
  font-size: 1.05rem;
  margin-bottom: 0;
}

.anime-scores-card .anime-scores-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.anime-scores-card .rating-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--anime-border-color);
  background: transparent;
}

.anime-scores-card .rating-item:nth-child(2) {
  align-items: flex-start;
  text-align: left;
}

.anime-scores-card .rating-item .source-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--anime-text-primary);
  align-self: center;
  text-align: center;
}

.anime-scores-card .rating-item .source-name--aniplus {
  color: #f3a303;
}

.anime-scores-card .rating-item .source-name--myanimelist {
  color: #1c439b;
}

.dark .anime-scores-card .rating-item .source-name--aniplus {
  color: #f3a303;
}

.dark .anime-scores-card .rating-item .source-name--myanimelist {
  color: #9bb9ff;
}

.anime-scores-card .rating-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  align-self: center;
  gap: 6px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  width: 100%;
  text-align: center;
}

.anime-scores-card .rating-score .value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--anime-text-primary);
  line-height: 1;
}

.anime-scores-card .rating-score .base {
  font-size: 0.75rem;
  color: var(--anime-text-secondary);
}

.anime-scores-card .rating-count {
  font-size: 0.78rem;
  color: var(--anime-text-secondary);
  text-align: center;
  width: 100%;
  align-self: center;
}

.anime-scores-card .anime-add-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--anime-accent);
  color: var(--anime-accent);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.anime-scores-card .anime-add-button:hover {
  background: var(--anime-accent);
  color: #fff;
  box-shadow: 0 12px 24px rgba(243, 163, 3, 0.22);
  transform: translateY(-1px);
}

.anime-scores-card .anime-add-button.status-selected {
  background: var(--anime-accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(243, 163, 3, 0.28);
}

.anime-scores-card .anime-add-button.status-selected:hover {
  background: var(--anime-accent-hover);
}

.anime-list-panel {
  margin-top: 18px;
}

.anime-list-panel__summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
  width: 100%;
}

.anime-list-panel__summary::-webkit-details-marker,
.anime-list-panel__summary::marker {
  display: none;
}

.anime-list-panel[open] .anime-list-panel__summary {
  background: var(--anime-accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(243, 163, 3, 0.28);
}

/* The list overlay is defined once near the end of this file. Keeping it
 * out of the tracker card prevents transformed or clipped ancestors from
 * changing its fixed viewport positioning. */

.anime-list-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.anime-list-panel__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex: 0 0 auto;
}

.anime-list-panel__close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

.anime-list-panel__header h4 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #263238;
}

.anime-list-panel__header p {
  margin: 0;
  font-size: 0.8rem;
  color: #78909c;
  line-height: 1.65;
}

.anime-list-panel__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.anime-list-panel__form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anime-list-panel__form .group-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #455a64;
}

.anime-list-panel__form .episode-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.anime-list-panel__form .episode-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anime-list-panel__form .episode-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #607d8b;
}

.anime-list-panel__form .input-with-total {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #d3dbe3;
  border-radius: 8px;
  background-color: #f6f8fb;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.anime-list-panel__form .progress-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 600;
  color: #263238;
  padding: 0;
}

.anime-list-panel__form .progress-input::-moz-placeholder {
  color: #90a4ae;
}

.anime-list-panel__form .progress-input::placeholder {
  color: #90a4ae;
}

.anime-list-panel__form .progress-input:focus {
  outline: none;
  border: none;
}

.anime-list-panel__form .input-with-total:focus-within {
  border-color: #f39c12;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.18);
  background-color: #ffffff;
}

.anime-list-panel__form .progress-input::-webkit-outer-spin-button,
.anime-list-panel__form .progress-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.anime-list-panel__form .progress-input[type=number] {
  -moz-appearance: textfield;
}

.anime-list-panel__form .total-episodes {
  position: absolute;
  inset-inline-end: 11px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #90a4ae;
  pointer-events: none;
  font-weight: 600;
}

.anime-list-panel__form .select-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.anime-list-panel__form .select-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anime-list-panel__form .select-fields-grid > .select-field:only-child {
  grid-column: 1/-1;
}

.anime-list-panel__select {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #d3dbe3;
  background-color: #f6f8fb;
  font-size: 0.88rem;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 600;
  color: #263238;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  line-height: 1.4;
}

.anime-list-panel__select:focus {
  outline: none;
  border-color: #f39c12;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.18);
  background-color: #ffffff;
}

.anime-list-panel__feedback {
  display: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  margin: -4px 0 4px;
}

.anime-list-panel__feedback:not([hidden]) {
  display: block;
}

.anime-list-panel__feedback[data-state=success] {
  background: rgba(34, 197, 94, 0.12);
  color: #0f5132;
  border-color: rgba(34, 197, 94, 0.24);
}

.anime-list-panel__feedback[data-state=info] {
  background: rgba(59, 130, 246, 0.12);
  color: #1e3a8a;
  border-color: rgba(59, 130, 246, 0.18);
}

.anime-list-panel__feedback[data-state=error] {
  background: rgba(239, 68, 68, 0.12);
  color: #7f1d1d;
  border-color: rgba(239, 68, 68, 0.24);
}

@media (max-width: 560px) {
  .anime-list-panel__form .episode-fields-grid,
  .anime-list-panel__form .select-fields-grid {
    grid-template-columns: 1fr;
  }

  .anime-list-panel__header {
    padding-bottom: 10px;
  }

  .anime-list-panel__header h4 {
    font-size: 1.05rem;
  }

  .anime-list-panel__header p {
    font-size: 0.74rem;
  }

  .anime-list-panel__close {
    width: 32px;
    height: 32px;
  }

  .anime-list-panel__form {
    gap: 11px;
  }

  .anime-list-panel__form .episode-field,
  .anime-list-panel__form .select-field {
    gap: 4px;
  }

  .anime-list-panel__form .input-with-total,
  .anime-list-panel__select {
    padding-block: 8px;
  }
}

.modal-footer-actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
}

.save-button {
  flex: 0 0 auto;
  min-width: 0;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(45deg, #f39c12, #e67e22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: "Vazirmatn", sans-serif;
  box-shadow: 0 10px 22px rgba(230, 126, 34, 0.2);
}

.save-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(243, 156, 18, 0.28);
}

.save-button[disabled],
.save-button[disabled]:hover {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
  transform: none;
}

.save-button.remove-button {
  background: linear-gradient(45deg, #f87171, #ef4444);
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18);
}

.save-button.remove-button:hover {
  box-shadow: 0 12px 26px rgba(239, 68, 68, 0.24);
}

@media (max-width: 420px) {
  .modal-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .save-button {
    width: 100%;
    flex: 1 1 auto;
  }
}

.anime-alert-banner {
  background: var(--anime-card-bg);
  border: 1px solid var(--anime-border-color);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.anime-alert-banner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--anime-accent);
}

.anime-alert-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--anime-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1 1 auto;
}

.anime-alert-info {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.anime-alert-info .label {
  color: var(--anime-text-secondary);
  font-weight: 500;
}

.anime-alert-info .value {
  color: var(--anime-text-primary);
  font-weight: 700;
}

.anime-alert-quality {
  margin-inline-start: auto;
  background: rgba(243, 163, 3, 0.08);
  color: #f3a303;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: help;
}

.anime-alert-quality:hover {
  background: rgba(243, 163, 3, 0.16);
  transform: translateY(-1px);
}

body.dark .anime-alert-quality {
  background: rgba(243, 163, 3, 0.08);
  color: #f3a303;
}

body.dark .anime-alert-quality:hover {
  background: rgba(243, 163, 3, 0.18);
}

@media (max-width: 600px) {
  .anime-alert-text {
    font-size: 0.85rem;
  }

  .anime-alert-quality {
    font-size: 0.85rem;
    padding: 3px 12px;
    min-width: 56px;
  }
}

.anime-synopsis-card {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.anime-synopsis-card .synopsis-content {
  max-width: 720px;
  margin-inline: auto;
}

.anime-synopsis-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--anime-text-primary);
}

.anime-synopsis-card .synopsis-text {
  line-height: 2.1;
  font-size: 0.98rem;
  color: var(--anime-text-primary);
  text-align: justify;
}

.anime-synopsis-card .synopsis-text--extended {
  margin-top: 24px;
}

.anime-synopsis-card .synopsis-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  gap: 8px;
  margin: 18px auto 0;
  padding: 4px 0;
  border: none;
  background: none;
  color: #f3a303;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}

.anime-synopsis-card .synopsis-toggle-button:hover,
.anime-synopsis-card .synopsis-toggle-button:focus {
  color: #d97706;
}

.anime-synopsis-card .synopsis-toggle-button:focus-visible {
  outline: 2px solid rgba(243, 163, 3, 0.35);
  outline-offset: 2px;
}

.anime-synopsis-card .synopsis-toggle-button .synopsis-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.anime-synopsis-card .synopsis-toggle-button.is-active .synopsis-toggle-icon {
  transform: rotate(180deg);
}

.anime-synopsis-card .translate .uk-grid {
  margin-top: 24px;
}

.anime-tabs-card {
  --anime-tab-primary: #f3a303;
  --anime-tab-text: #78716c;
  --anime-tab-text-active: #ffffff;
  --anime-tab-container-bg: #ffffff;
  --anime-tab-border: rgba(120, 113, 108, 0.16);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.dark .anime-tabs-card {
  --anime-tab-text: #cbd5e1;
  --anime-tab-text-active: #ffffff;
  --anime-tab-container-bg: transparent;
  --anime-tab-border: rgba(148, 163, 184, 0.35);
}

.anime-detail-card.anime-tabs-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.anime-tabs-card .box-title-bg {
  display: none;
}

.anime-tabs-card .tabs-wrapper {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.anime-tabs-card .tabs-nav-container {
  position: relative;
  overflow: hidden;
  padding: 4px;
  background-color: var(--anime-tab-container-bg);
  border: 1px solid var(--anime-tab-border);
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.05);
}

.anime-tabs-card .tabs-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  justify-content: flex-start;
  gap: 4px;
}

.anime-tabs-card .tabs-nav .slider {
  display: none;
  left: 0;
  height: 3px;
  background-color: var(--anime-tab-primary);
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 0;
}

.anime-tabs-card .tab-item {
  position: relative;
  flex: 1 1 0;
}

.anime-tabs-card .tab-link {
  display: flex;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--anime-tab-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.anime-tabs-card .tab-link:hover {
  color: #1c1917;
  background-color: #f5f5f4;
}

.anime-tabs-card .tab-link:focus-visible {
  outline: 2px solid var(--anime-tab-primary);
  outline-offset: -2px;
}

.anime-tabs-card .tab-link.active {
  color: var(--anime-tab-text-active);
  background-color: #1c1917;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.18);
}

.anime-tabs-card .tab-icon {
  font-size: 16px;
}

.anime-tabs-card .tab-label {
  line-height: 1;
}

.anime-tabs-card .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 22px;
  border-radius: 999px;
  background-color: rgba(28, 25, 23, 0.12);
  color: #57534e;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.anime-tabs-card .tab-link.active .tab-count {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fef3c7;
}

.anime-tabs-card .tab-item.has-submenu > .tab-link::after {
  content: "\F078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  margin-right: 7px;
  transition: transform 0.3s ease;
}

.anime-tabs-card .tab-item.has-submenu.submenu-open > .tab-link::after {
  transform: rotate(180deg);
}

.anime-tabs-card .submenu {
  position: absolute;
  top: calc(100% + 5px);
  right: 50%;
  transform: translateX(50%) translateY(10px);
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 8px;
  margin: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  min-width: 180px;
}

.anime-tabs-card .tab-item.has-submenu.submenu-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

body.dark .anime-tabs-card .submenu {
  background-color: #111827;
}

.anime-tabs-card .submenu li {
  list-style: none;
}

.anime-tabs-card .submenu a {
  display: block;
  padding: 10px 15px;
  color: var(--anime-tab-text);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.anime-tabs-card .submenu a:hover {
  background-color: #f5f5f5;
  color: var(--anime-tab-text-active);
}

body.dark .anime-tabs-card .submenu a:hover {
  background-color: rgba(148, 163, 184, 0.18);
}

.anime-tabs-card .submenu a.active {
  background-color: var(--anime-tab-primary);
  color: #fff;
}

.anime-tabs-card .tab-content {
  min-height: 400px;
  margin-top: 16px;
  padding: 16px;
  background-color: var(--anime-tab-container-bg);
  border: 1px solid var(--anime-tab-border);
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.05);
}

body.dark .anime-tabs-card .tabs-nav-container,
body.dark .anime-tabs-card .tab-content {
  box-shadow: none;
}

.anime-tab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 32px 16px;
  color: #78716c;
  text-align: center;
}

.anime-tab-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  color: #a8a29e;
  font-size: 27px;
  background-color: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
}

.anime-tab-empty-state h2 {
  margin: 0 0 4px;
  color: #292524;
  font-size: 14px;
  font-weight: 700;
}

.anime-tab-empty-state p {
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

body.dark .anime-tab-empty-state h2 {
  color: #f5f5f4;
}

body.dark .anime-tab-empty-state__icon {
  color: #a8a29e;
  background-color: rgba(120, 113, 108, 0.15);
  border-color: rgba(168, 162, 158, 0.2);
}

.anime-tabs-card .related-items {
  padding: 0;
}

.anime-tabs-card .related-tabs-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background-color: rgba(226, 232, 240, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
  margin: 0;
}

body.dark .anime-tabs-card .related-tabs-toggle {
  background-color: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.anime-tabs-card .related-pane-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
  width: 100%;
}

.anime-tabs-card .related-pane-header .related-tabs-toggle {
  margin-left: auto;
}

.anime-tabs-card .related-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: #f3a303;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.anime-tabs-card .related-view-all-btn:hover,
.anime-tabs-card .related-view-all-btn:focus-visible {
  background-color: #f59e0b;
  box-shadow: 0 6px 12px -2px rgba(243, 163, 3, 0.45);
  transform: translateY(-1px);
}

.anime-tabs-card .related-view-all-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(243, 163, 3, 0.35), 0 6px 12px -2px rgba(243, 163, 3, 0.45);
}

.anime-tabs-card .related-view-all-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.3);
}

.anime-tabs-card .related-view-all-btn.is-hidden {
  display: none;
}

.anime-tabs-card .related-view-all-btn .related-view-all-icon {
  font-size: 0.85rem;
}

.anime-tabs-card .related-view-all-btn--desktop-left {
  width: 100%;
}

@media (min-width: 1024px) {
  .anime-tabs-card .related-view-all-btn--desktop-left {
    width: auto;
    margin-right: auto;
    margin-left: 0;
    order: -1;
    align-self: flex-start;
  }

  .anime-tabs-card .related-pane-header {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .anime-tabs-card .related-pane-header.related-pane-header--single {
    justify-content: flex-start;
  }
}

body.dark .anime-tabs-card .related-pane-header {
  gap: 14px;
}

body.dark .anime-tabs-card .related-view-all-btn {
  background-color: #f3a303;
  color: #0f172a;
  box-shadow: 0 18px 36px rgba(249, 115, 22, 0.35);
}

body.dark .anime-tabs-card .related-view-all-btn:hover,
body.dark .anime-tabs-card .related-view-all-btn:focus-visible {
  background-color: #f59e0b;
  box-shadow: 0 22px 44px rgba(249, 115, 22, 0.4);
}

body.dark .anime-tabs-card .related-view-all-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(243, 163, 3, 0.45), 0 22px 44px rgba(249, 115, 22, 0.4);
}

.anime-tabs-card .related-toggle-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  color: #4b5563;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  line-height: 1;
}

.anime-tabs-card .related-toggle-btn:hover,
.anime-tabs-card .related-toggle-btn:focus-visible {
  background-color: #e2e8f0;
  color: #1f2937;
}

body.dark .anime-tabs-card .related-toggle-btn {
  color: rgba(226, 232, 240, 0.85);
}

body.dark .anime-tabs-card .related-toggle-btn:hover,
body.dark .anime-tabs-card .related-toggle-btn:focus-visible {
  background-color: rgba(148, 163, 184, 0.2);
  color: #f8fafc;
}

.anime-tabs-card .related-toggle-btn.active {
  background-color: #f3a303;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

body.dark .anime-tabs-card .related-toggle-btn.active {
  color: #0f172a;
  box-shadow: 0 18px 36px rgba(249, 115, 22, 0.3);
}

.anime-info-pane {
  padding-top: 8px;
}

.anime-info-pane .uk-grid {
  align-items: flex-start;
}

.anime-tabs-card .tab-pane,
.anime-tabs-card .sub-content-pane {
  display: none;
}

.anime-tabs-card .tab-pane.active,
.anime-tabs-card .sub-content-pane.active {
  display: block;
}

@media (max-width: 768px) {
  .anime-tabs-card .tab-link {
    padding: 9px 12px;
    font-size: 14px;
  }

  .anime-tabs-card .tab-icon {
    font-size: 14px;
  }
}

@media (max-width: 639px) {
  .anime-tabs-card .tabs-nav {
    justify-content: flex-start;
    gap: 8px;
  }

  .anime-tabs-card .tab-item {
    flex: 0 0 auto;
  }

  .anime-tabs-card .tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .anime-tabs-card .tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .anime-tabs-card .tab-link {
    padding: 9px 12px;
    gap: 8px;
  }

  .anime-tabs-card .tabs-nav-container {
    overflow-x: auto;
  }

  .anime-tabs-card .tab-content {
    min-height: 320px;
    padding: 14px;
    border-radius: 16px;
  }

  .anime-tabs-card .related-pane-header {
    flex-direction: column;
    align-items: stretch;
  }

  .anime-tabs-card .related-pane-header--single {
    align-items: stretch;
    justify-content: center;
  }

  .anime-tabs-card .related-pane-header .related-tabs-toggle {
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px;
    margin-left: 0;
  }

  .anime-tabs-card .related-view-all-btn {
    width: 100%;
  }

  .anime-tabs-card .related-tabs-toggle {
    width: 100%;
    justify-content: center;
    padding: 8px;
  }

  .anime-tabs-card .related-toggle-btn {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
  }

  .anime-tabs-card .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    display: none;
    border: 1px solid var(--anime-tab-border);
  }

  .anime-tabs-card .tab-item.has-submenu.submenu-open > .submenu {
    display: block;
  }

  .anime-tabs-card .submenu a {
    padding: 10px 12px;
  }

  .anime-tabs-card .slider-horizontal > .post-anime {
    --anime-card-width: calc((100% - var(--slider-gap)) / 2);
    min-width: 160px;
  }
}

.download-modern {
  --download-primary: #f39c12;
  --download-primary-dark: #e67e22;
  --download-accent: #c81e3a;
  --download-accent-hover: #a1152d;
  --download-surface: #ffffff;
  --download-border: #e2e8f0;
  --download-background: #f8fafc;
  --download-text: #0f172a;
  --download-muted: #475569;
  --download-hover: #f1f5f9;
  color: var(--download-text);
  margin-top: 32px;
}

.download-modern ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.download-modern ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.download-modern ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.download-modern ::-webkit-scrollbar-thumb:hover {
  background: #f39c12;
}

body.dark .download-modern {
  --download-surface: rgba(15, 23, 42, 0.95);
  --download-border: rgba(71, 85, 105, 0.55);
  --download-background: rgba(17, 24, 39, 0.65);
  --download-text: #f8fafc;
  --download-muted: rgba(203, 213, 225, 0.85);
  --download-hover: rgba(30, 41, 59, 0.78);
}

.download-modern .text-light-primary {
  color: var(--download-text);
}

.download-modern .text-light-secondary {
  color: var(--download-muted);
}

.download-modern .bg-light-surface {
  background-color: var(--download-surface);
}

.download-modern .bg-light-hover {
  background-color: var(--download-hover);
}

.download-modern .border-light-border {
  border-color: var(--download-border);
}

.download-modern .border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--download-border);
}

.download-modern .bg-primary {
  background-color: var(--download-primary);
}

.download-modern .bg-primary-dark {
  background-color: var(--download-primary-dark);
}

.download-modern .bg-primary\/10 {
  background-color: rgba(243, 156, 18, 0.16);
}

.download-modern .bg-accent\/10 {
  background-color: rgba(200, 30, 58, 0.12);
}

.download-modern .bg-light-primary {
  background-color: var(--download-text);
}

.download-modern .text-light-surface {
  color: var(--download-surface);
}

.download-modern .text-primary {
  color: var(--download-primary);
}

.download-modern .text-accent {
  color: var(--download-accent);
}

.download-modern .w-full {
  width: 100%;
}

.download-modern .max-w-md {
  max-width: 28rem;
}

.download-modern .rounded-full {
  border-radius: 999px;
}

.download-modern .rounded-xl {
  border-radius: 0.75rem;
}

.download-modern .rounded-2xl {
  border-radius: 1rem;
}

.download-modern .rounded-lg {
  border-radius: 0.75rem;
}

.download-modern .h-9 {
  height: 2.25rem;
}

.download-modern .w-9 {
  width: 2.25rem;
}

.download-modern .w-5 {
  width: 1.25rem;
}

.download-modern .h-5 {
  height: 1.25rem;
}

.download-modern .w-4 {
  width: 1rem;
}

.download-modern .h-4 {
  height: 1rem;
}

.download-modern .p-2\.5 {
  padding: 0.625rem;
}

.download-modern .p-3 {
  padding: 0.75rem;
}

.download-modern .p-4 {
  padding: 1rem;
}

.download-modern .p-6 {
  padding: 1.5rem;
}

.download-modern .px-3 {
  padding-inline: 0.75rem;
}

.download-modern .px-4 {
  padding-inline: 1rem;
}

.download-modern .pr-10 {
  padding-right: 2.5rem;
}

.download-modern .pl-4 {
  padding-left: 1rem;
}

.download-modern .py-2 {
  padding-block: 0.5rem;
}

.download-modern .py-2\.5 {
  padding-block: 0.625rem;
}

.download-modern .py-1\.5 {
  padding-block: 0.375rem;
}

.download-modern .pt-2 {
  padding-top: 0.5rem;
}

.download-modern .pt-2\.5 {
  padding-top: 0.625rem;
}

.download-modern .gap-1 {
  gap: 0.25rem;
}

.download-modern .gap-2 {
  gap: 0.5rem;
}

.download-modern .gap-3 {
  gap: 0.75rem;
}

.download-modern .gap-4 {
  gap: 1rem;
}

.download-modern .gap-1\.5 {
  gap: 0.375rem;
}

.download-modern .space-y-3 > * + * {
  margin-top: 0.75rem;
}

.download-modern .space-y-4 > * + * {
  margin-top: 1rem;
}

.download-modern .space-y-5 > * + * {
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .download-modern .sm\:p-4 {
    padding: 1rem;
  }

  .download-modern .sm\:gap-4 {
    gap: 1rem;
  }

  .download-modern .sm\:space-y-6 > * + * {
    margin-top: 1.5rem;
  }

  .download-modern .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .download-modern .md\:flex {
    display: flex !important;
  }

  .download-modern .md\:hidden {
    display: none !important;
  }

  .download-modern .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .download-modern .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .download-modern .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.download-modern .grid {
  display: grid;
}

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

.download-modern .flex {
  display: flex;
}

.download-modern .flex-row {
  flex-direction: row;
}

.download-modern .flex-1 {
  flex: 1 1 0%;
}

.download-modern .items-center {
  align-items: center;
}

.download-modern .items-start {
  align-items: flex-start;
}

.download-modern .justify-between {
  justify-content: space-between;
}

.download-modern .justify-center {
  justify-content: center;
}

.download-modern .flex-wrap {
  flex-wrap: wrap;
}

.download-modern .relative {
  position: relative;
}

.download-modern .absolute {
  position: absolute;
}

.download-modern .fixed {
  position: fixed;
}

.download-modern .inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.download-modern .z-50 {
  z-index: 50;
}

.download-modern .right-3 {
  right: 0.75rem;
}

.download-modern .top-1\/2 {
  top: 50%;
}

.download-modern .left-1\/2 {
  left: 50%;
}

.download-modern .-translate-y-1\/2 {
  transform: translateY(-50%);
}

.download-modern .-translate-x-1\/2 {
  transform: translateX(-50%);
}

.download-modern .transition-colors {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.download-modern .transition-shadow {
  transition: box-shadow 0.2s ease;
}

.download-modern .transition-all {
  transition: all 0.2s ease;
}

.download-modern .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
}

.download-modern .hover\:bg-light-hover:hover {
  background-color: var(--download-hover);
}

.download-modern .hover\:bg-primary-dark:hover {
  background-color: var(--download-primary-dark);
}

.download-modern .hover\:text-primary:hover {
  color: var(--download-primary);
}

.download-modern .hover\:text-light-primary:hover {
  color: var(--download-text);
}

.download-modern .font-semibold {
  font-weight: 600;
}

.download-modern .font-bold {
  font-weight: 700;
}

.download-modern .text-sm {
  font-size: 0.875rem;
}

.download-modern .text-xs {
  font-size: 0.75rem;
}

.download-modern .text-center {
  text-align: center;
}

.download-modern .focus\:outline-none:focus {
  outline: none;
}

.download-modern .focus\:ring-1:focus {
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.35);
  border-color: rgba(243, 156, 18, 0.55);
}

.download-modern .focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.25);
  border-color: rgba(243, 156, 18, 0.55);
}

.download-modern .focus\:ring-primary:focus {
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.45);
  border-color: rgba(243, 156, 18, 0.65);
}

.download-modern .focus\:ring-primary\/50:focus {
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.25);
  border-color: rgba(243, 156, 18, 0.6);
}

.download-modern .bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.download-modern .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
}

.download-modern .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
}

.download-modern__surface {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}

@media (min-width: 640px) {
  .download-modern__surface {
    gap: 24px;
  }
}

.download-modern__content {
  margin-top: 0;
}

.download-modern .tab-content {
  display: none;
}

.download-modern .tab-content.active {
  display: block;
}

.download-modern__surface {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .download-modern__surface {
    gap: 24px;
  }
}

.download-modern__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.download-modern__search {
  position: relative;
  flex: 1 1 220px;
}

.download-modern__search-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--download-muted);
}

.download-modern__search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  padding: 10px 16px;
  padding-right: 42px;
  font-size: 0.875rem;
  background-color: var(--download-surface);
  color: var(--download-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__search-input:focus {
  outline: none;
  border-color: rgba(243, 156, 18, 0.45);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15);
}

.download-modern__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-modern__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  background: var(--download-surface);
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.download-modern__icon-btn:hover {
  background: var(--download-hover);
  color: var(--download-primary);
  border-color: rgba(243, 156, 18, 0.45);
}

.download-modern__filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-modern__filters-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .download-modern__filters-mobile {
    display: none;
  }
}

.download-modern__filters-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  background: var(--download-hover);
  padding: 4px;
  border-radius: 999px;
}

.download-modern__filters-tab {
  padding: 8px 0;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__filters-tab.is-active {
  background: var(--download-surface);
  color: var(--download-primary);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.download-modern__filters-panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.download-modern__pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  background: var(--download-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--download-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.download-modern__pill.is-active {
  background: var(--download-primary);
  border-color: var(--download-primary);
  color: #fff;
  box-shadow: 0 14px 28px rgba(243, 156, 18, 0.24);
}

.download-modern__filters-desktop {
  display: none;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .download-modern__filters-desktop {
    display: flex;
    flex-wrap: wrap;
  }
}

.download-modern__filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.download-modern__filters-icon {
  width: 18px;
  height: 18px;
  color: var(--download-muted);
}

.download-modern__filters-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--download-hover);
  padding: 4px;
  border-radius: 999px;
}

.download-modern__link {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__link.is-active {
  background: var(--download-surface);
  color: var(--download-primary);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.download-modern__link:hover {
  color: var(--download-text);
}

.download-tab__mobile-trigger {
  display: none;
  width: 100%;
  border: 0;
  background: var(--download-surface);
  border-radius: 20px;
  padding: 16px 18px;
  text-align: right;
  color: var(--download-text);
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.download-tab__mobile-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.download-tab__mobile-trigger.is-active {
  color: var(--download-accent);
}

body.dark .download-tab__mobile-trigger {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.6);
}

.download-series-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-series-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.download-series-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--download-hover);
  color: var(--download-text);
  font-weight: 600;
  font-size: 0.85rem;
}

.download-series-panel__badge--season {
  background: rgba(243, 156, 18, 0.16);
  color: var(--download-primary);
}

body.dark .download-series-panel__badge {
  background: rgba(30, 41, 59, 0.72);
  color: #f9fafb;
}

body.dark .download-series-panel__badge--season {
  background: rgba(243, 156, 18, 0.24);
  color: #ffd166;
}

.download-series-panel__toolbar {
  display: flex;
  justify-content: flex-end;
}

.download-series-panel__toolbar-placeholder {
  display: none !important;
}

.download-series-panel__empty {
  background: var(--download-hover);
  border: 1px dashed var(--download-border);
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  color: var(--download-muted);
  font-weight: 600;
}

.download-series-panel__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .download-series-panel__grid {
    gap: 16px;
  }
}

@media (min-width: 768px) {
  .download-series-panel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .download-series-panel__grid,
  .download-series-panel__grid--single {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.download-series-panel__grid--single {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .download-series-panel__grid--single {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.download-modern__modal-enter-active,
.download-modern__modal-leave-active {
  transition: opacity 0.15s ease;
}

.download-modern__modal-enter,
.download-modern__modal-leave-to {
  opacity: 0;
}

.download-modern__modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-modern__modal-card {
  background: var(--download-surface);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  width: 100%;
  max-width: 420px;
}

.download-modern__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.download-modern__modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--download-text);
  margin: 0;
}

.download-modern__modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.download-modern__modal-close:hover {
  background: var(--download-hover);
  color: var(--download-primary);
}

.download-modern__modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-modern__modal-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  color: var(--download-text);
}

.download-modern__modal-action {
  border-radius: 14px;
  background: var(--download-hover);
  border: 0;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: right;
  color: var(--download-text);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.download-modern__modal-action:hover {
  color: var(--download-primary);
}

.download-modern__modal-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-modern__modal-range-inputs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.download-modern__modal-range-inputs input {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--download-border);
  background: var(--download-hover);
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--download-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__modal-range-inputs input:focus {
  outline: none;
  border-color: rgba(243, 156, 18, 0.6);
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
}

@media (max-width: 480px) {
  .download-modern__modal-range-inputs {
    gap: 8px;
  }

  .download-modern__modal-range-inputs input {
    flex-basis: calc(50% - 4px);
  }
}

.download-modern__modal-footer {
  display: flex;
  gap: 12px;
}

.download-modern__modal-primary,
.download-modern__modal-secondary {
  flex: 1;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.download-modern__modal-primary {
  background: var(--download-primary);
  color: #fff;
}

.download-modern__modal-primary:hover {
  background: var(--download-primary-dark);
}

.download-modern__modal-secondary {
  background: var(--download-hover);
  color: var(--download-text);
}

.download-modern__modal-secondary:hover {
  background: rgba(226, 232, 240, 0.8);
}

.download-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--download-surface);
  border-radius: 12px;
  border: 1px solid var(--download-border);
  padding: 12px;
  font-size: 0.875rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 640px) {
  .download-card {
    padding: 16px;
  }
}

.download-card:hover {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  border-color: rgba(243, 156, 18, 0.4);
}

body.dark .download-card {
  background: transparent;
  border-color: rgba(71, 85, 105, 0.55);
}

body.dark .download-card:hover {
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.52);
  border-color: rgba(243, 156, 18, 0.42);
}

.download-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}

.download-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--download-text);
  flex-wrap: wrap;
  max-width: 100%;
  word-break: break-word;
}

.download-card__title .label {
  color: var(--download-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.download-card__title .value {
  font-size: 0.9375rem;
}

.download-card__badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.download-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.download-card__badge--new {
  background: rgba(200, 30, 58, 0.12);
  color: #c81e3a;
}

.download-card__badge--free {
  background: rgba(243, 156, 18, 0.16);
  color: var(--download-primary);
}

body.dark .download-card__badge--free {
  color: #fbd38d;
  background: rgba(243, 156, 18, 0.22);
}

.download-card__badge--telegram {
  background: rgba(34, 158, 217, 0.12);
  color: #229ed9;
}

body.dark .download-card__badge--telegram {
  background: rgba(34, 158, 217, 0.24);
  color: #7ad0f5;
}

.download-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.download-card__download {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border-radius: 999px;
  background: var(--download-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.download-card__download:hover {
  background: var(--download-primary-dark);
}

.download-card__download--disabled {
  background: var(--download-hover);
  color: var(--download-muted);
  cursor: not-allowed;
}

.download-card__download--disabled:hover {
  background: var(--download-hover);
  color: var(--download-muted);
}

.download-card__download--telegram {
  background: #229ed9;
}

.download-card__download--telegram:hover {
  background: #000;
}

.download-card__download[aria-disabled=true] {
  pointer-events: none;
  background: var(--download-hover);
  color: var(--download-muted);
}

.download-card__download-icon {
  width: 16px;
  height: 16px;
}

.download-card__play-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--download-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--download-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.download-card__play-btn svg {
  width: 16px;
  height: 16px;
}

.download-card__play-btn:hover {
  color: var(--download-primary);
}

body.dark .download-card__play-btn {
  background: rgba(30, 41, 59, 0.72);
  color: var(--download-muted);
}

.download-card__helper-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px dashed var(--download-border, rgba(148, 163, 184, 0.6));
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--download-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.download-card__helper-btn svg {
  width: 15px;
  height: 15px;
}

.download-card__helper-btn:hover {
  border-color: var(--download-primary, #f3a303);
  color: var(--download-primary, #f3a303);
  background: rgba(243, 163, 3, 0.08);
}

body.dark .download-card__helper-btn {
  border-color: rgba(148, 163, 184, 0.5);
  color: rgba(226, 232, 240, 0.8);
}

.download-card__unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 999px;
  background: var(--download-hover);
  color: var(--download-muted);
  font-size: 0.75rem;
}

.copy-links__range-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .copy-links__range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.download-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--download-muted);
}

.download-card__info--telegram {
  color: var(--download-muted);
}

.download-card__info b {
  color: var(--download-text);
}

.download-card__telegram-icon {
  width: 18px;
  height: 18px;
  color: #229ed9;
}

body.dark .download-card__telegram-icon {
  color: #7ad0f5;
}

.download-card__split {
  width: 100%;
  height: 1px;
  background: var(--download-border);
}

body.dark .download-card__split {
  background: rgba(71, 85, 105, 0.45);
}

.download-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--download-hover);
  color: var(--download-text);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.download-card__cta:hover {
  background: rgba(243, 156, 18, 0.12);
  color: var(--download-primary);
}

.download-card__cta svg {
  width: 16px;
  height: 16px;
}

.download-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.download-series-panel__paginator {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

@media (max-width: 960px) {
  .download-tab__mobile-trigger {
    display: flex;
  }
}

@media (max-width: 768px) {
  .download-series-panel__grid {
    gap: 12px;
  }
}

@media (max-width: 639px) {
  .download-card {
    padding: 12px;
    border-radius: 12px;
    gap: 12px;
  }

  .download-series-panel__meta {
    justify-content: center;
  }
}

.anime-bottom-tags {
  padding: 16px 18px;
  border: 1px solid #f0eeeb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-bottom-tags .tags-header {
  margin-bottom: 12px;
}

.anime-bottom-tags .tags-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
  color: var(--anime-text-primary);
}

.anime-bottom-tags .tags-title::before {
  content: "\F02B";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  font-family: "Font Awesome 6 Free";
  font-size: 0.72rem;
  font-weight: 900;
}

.anime-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@keyframes animeTagFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anime-chip-list > * {
  opacity: 0;
  transform: translateY(12px);
  animation: animeTagFadeIn 0.5s ease forwards;
}

.anime-chip-list > *:nth-child(1) {
  animation-delay: 0.08s;
}

.anime-chip-list > *:nth-child(2) {
  animation-delay: 0.12s;
}

.anime-chip-list > *:nth-child(3) {
  animation-delay: 0.16s;
}

.anime-chip-list > *:nth-child(4) {
  animation-delay: 0.2s;
}

.anime-chip-list > *:nth-child(5) {
  animation-delay: 0.24s;
}

.anime-chip-list > *:nth-child(n+6) {
  animation-delay: 0.28s;
}

.anime-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #44403c;
  background: #fff;
  border: 1px solid #e7e5e4;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.anime-chip::before {
  content: "#";
  color: #f59e0b;
  font-weight: 900;
}

.anime-chip:hover {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
  transform: none;
}

body.dark .anime-bottom-tags {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.55), 0 4px 12px rgba(15, 23, 42, 0.35);
}

body.dark .anime-bottom-tags .tags-title::before {
  background: linear-gradient(to left, rgba(243, 163, 3, 0.9), transparent);
}

body.dark .anime-chip {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--anime-text-secondary);
}

body.dark .anime-chip:hover {
  border-color: rgba(243, 163, 3, 0.18);
  background-color: rgba(243, 163, 3, 0.12);
}

/* Episode download items use the shared chip class, but are not tag chips. */

.anime-bottom-downloads .anime-chip {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--anime-text-secondary);
  background-color: transparent;
  border-color: var(--anime-border-color);
  box-shadow: none;
}

.anime-bottom-downloads .anime-chip::before {
  content: none;
}

.anime-bottom-downloads .anime-chip:hover {
  background-color: rgba(243, 163, 3, 0.08);
  border-color: rgba(243, 163, 3, 0.08);
  color: var(--anime-accent);
}

.anime-related-card {
  margin-top: 24px;
  padding: 16px 18px 18px;
  border: 1px solid #f0eeeb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-related-card__header {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f5f5f4;
}

.anime-related-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #1c1917;
  font-size: 0.86rem;
  font-weight: 800;
}

.anime-related-card__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.75rem;
}

.anime-related-card__section + .anime-related-card__section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f5f5f4;
}

.anime-related-card__section-title {
  margin: 0 0 10px;
  color: #78716c;
  font-size: 0.73rem;
  font-weight: 700;
}

.anime-related-card .related-items__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Related and similar titles share one quiet card.  The switcher keeps the
 * two recommendation sources discoverable without placing two long grids one
 * after the other. */

.anime-detail-page .anime-related-card {
  padding: 0;
  overflow: hidden;
}

.anime-detail-page .anime-related-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  margin: 0;
  border-bottom: 1px solid #f0eeeb;
  background: linear-gradient(180deg, #fffdfa, #fff);
}

.anime-detail-page .anime-related-card__heading {
  min-width: 0;
}

.anime-detail-page .anime-related-card__title {
  display: flex;
}

.anime-detail-page .anime-related-card__description {
  margin: 7px 0 0;
  color: #78716c;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.8;
}

.anime-detail-page .anime-related-card .related-tabs-toggle {
  flex: 0 0 auto;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border-color: #e7e5e4;
  background: #f5f5f4;
  box-shadow: inset 0 1px 1px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-related-card .related-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  color: #78716c;
  font-size: 0.68rem;
  white-space: nowrap;
}

.anime-detail-page .anime-related-card .related-toggle-btn:hover,
.anime-detail-page .anime-related-card .related-toggle-btn:focus-visible {
  background: #e7e5e4;
  color: #44403c;
}

.anime-detail-page .anime-related-card .related-toggle-btn.active {
  background: #fff;
  color: #92400e;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.12);
}

.anime-detail-page .anime-related-card__pane {
  padding: 16px 18px 18px;
}

body.dark .anime-detail-page .anime-related-card__header {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #172033, #111827);
}

body.dark .anime-detail-page .anime-related-card__description {
  color: #a8b5c7;
}

body.dark .anime-detail-page .anime-related-card .related-tabs-toggle {
  border-color: rgba(148, 163, 184, 0.18);
  background: #0f172a;
  box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.35);
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn {
  color: #a8b5c7;
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn:hover,
body.dark .anime-detail-page .anime-related-card .related-toggle-btn:focus-visible {
  background: #1e293b;
  color: #f8fafc;
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn.active {
  background: #26364c;
  color: #bfdbfe;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.4);
}

body.dark .anime-related-card {
  border-color: rgba(148, 163, 184, 0.18);
  background: #111827;
  box-shadow: none;
}

body.dark .anime-related-card__header,
body.dark .anime-related-card__section + .anime-related-card__section {
  border-color: rgba(148, 163, 184, 0.18);
}

body.dark .anime-related-card__title {
  color: #f3f4f6;
}

body.dark .anime-related-card__section-title {
  color: #9ca3af;
}

@media (max-width: 960px) {
  .anime-related-card .related-items__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .anime-bottom-tags,
  .anime-related-card {
    padding: 14px;
  }

  .anime-related-card .related-items__list {
    grid-template-columns: 1fr;
  }

  .anime-detail-page .anime-related-card__header {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .anime-detail-page .anime-related-card .related-tabs-toggle {
    width: 100%;
  }

  .anime-detail-page .anime-related-card .related-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 8px;
    font-size: 0.63rem;
  }

  .anime-detail-page .anime-related-card__pane {
    padding: 14px;
  }
}

.anime-bottom-downloads {
  padding: 35px 40px;
  border-radius: 18px;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  margin-top: 24px;
}

.anime-bottom-downloads .tags-header {
  margin-bottom: 28px;
}

.anime-bottom-downloads .tags-title {
  font-size: 1.22rem;
  font-weight: 700;
  margin: 0;
  color: var(--anime-text-primary);
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}

.anime-bottom-downloads .tags-title::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to left, var(--anime-accent), transparent);
}

.anime-bottom-downloads .episode-downloads__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anime-bottom-downloads .episode-downloads__subtitle {
  font-size: 0.78rem;
  color: var(--anime-text-secondary);
}

.anime-bottom-downloads .episode-downloads__toggle {
  margin-top: 18px;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  background-color: rgba(243, 163, 3, 0.12);
  color: var(--anime-accent);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

body.dark .anime-bottom-downloads .tags-title::after {
  background: linear-gradient(to left, rgba(243, 163, 3, 0.9), transparent);
}

.anime-bottom-downloads .episode-downloads__toggle:hover {
  background-color: rgba(243, 163, 3, 0.2);
  transform: translateY(-1px);
}

.anime-bottom-downloads .episode-downloads__toggle.is-disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

body.dark .anime-bottom-downloads {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.55), 0 4px 12px rgba(15, 23, 42, 0.35);
}

body.dark .anime-bottom-downloads .episode-downloads__toggle {
  background-color: rgba(243, 163, 3, 0.28);
  color: #1f2937;
}

body.dark .anime-bottom-downloads .episode-downloads__toggle:hover {
  background-color: rgba(243, 163, 3, 0.35);
}

@media (max-width: 767px) {
  .anime-bottom-downloads {
    padding: 26px 24px;
  }

  .anime-chip {
    font-size: 0.74rem;
    padding: 6px 14px;
  }
}

@media (max-width: 767px) {
  .anime-bottom-tags {
    padding: 14px;
  }

  .anime-bottom-tags .tags-title {
    font-size: 0.82rem;
  }
}

.anime-description-row .desc a {
  color: #d08b00;
  font-weight: 400;
  transition: color 0.2s ease;
}

.anime-description-row .desc a:hover {
  color: #b97500;
}

body.dark .anime-description-row .desc a {
  color: #f3c46b;
}

body.dark .anime-description-row .desc a:hover {
  color: #ffd178;
}

body.dark .anime-description-row .desc.desc--links a {
  color: #f8d079;
}

body.dark .anime-description-row .desc.desc--links a:hover {
  color: #ffd178;
}

body.dark .anime-scores-card .rating-item {
  border-color: rgba(148, 163, 184, 0.28);
}

body.dark .anime-scores-card .anime-add-button {
  border-color: rgba(243, 163, 3, 0.55);
  color: #fcd34d;
}

body.dark .anime-scores-card .anime-add-button:hover,
body.dark .anime-scores-card .anime-add-button.status-selected {
  background: var(--anime-accent);
  color: #0f172a;
}

body.dark .anime-list-panel__header {
  border-bottom-color: rgba(148, 163, 184, 0.24);
}

body.dark .anime-list-panel__close {
  background: rgba(30, 41, 59, 0.95);
  color: #cbd5e1;
}

body.dark .anime-list-panel__close:hover {
  background: rgba(127, 29, 29, 0.7);
  color: #fecaca;
}

body.dark .anime-list-panel__header h4 {
  color: #f8fafc;
}

body.dark .anime-list-panel__header p {
  color: #cbd5f5;
}

body.dark .anime-list-panel__form .group-label {
  color: #e2e8f0;
}

body.dark .anime-list-panel__form .episode-field-label {
  color: #cbd5f5;
}

body.dark .anime-list-panel__form .input-with-total {
  background-color: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.32);
  color: #f8fafc;
}

body.dark .anime-list-panel__form .input-with-total:focus-within {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.24);
  background-color: rgba(30, 41, 59, 0.95);
}

body.dark .anime-list-panel__form .progress-input {
  color: #f8fafc;
}

body.dark .anime-list-panel__form .progress-input::-moz-placeholder {
  color: #94a3b8;
}

body.dark .anime-list-panel__form .progress-input::placeholder {
  color: #94a3b8;
}

body.dark .anime-list-panel__form .total-episodes {
  color: #a8b3c6;
}

body.dark .anime-list-panel__select {
  background-color: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.32);
  color: #f8fafc;
}

body.dark .anime-list-panel__select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.24);
  background-color: rgba(30, 41, 59, 0.95);
}

body.dark .anime-list-panel__feedback {
  border-color: rgba(148, 163, 184, 0.28);
}

body.dark .anime-list-panel__feedback[data-state=success] {
  background: rgba(22, 163, 74, 0.22);
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, 0.32);
}

body.dark .anime-list-panel__feedback[data-state=info] {
  background: rgba(37, 99, 235, 0.22);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.28);
}

body.dark .anime-list-panel__feedback[data-state=error] {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
  border-color: rgba(252, 165, 165, 0.28);
}

body.dark .save-button {
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 16px 36px rgba(251, 191, 36, 0.3);
}

body.dark .save-button:hover {
  box-shadow: 0 20px 44px rgba(251, 191, 36, 0.36);
}

body.dark .save-button[disabled],
body.dark .save-button[disabled]:hover {
  box-shadow: none;
}

body.dark .save-button.remove-button {
  background: linear-gradient(45deg, #f87171, #ef4444);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(248, 113, 113, 0.3);
}

body.dark .save-button.remove-button:hover {
  box-shadow: 0 20px 42px rgba(239, 68, 68, 0.36);
}

.anime-description-row .desc .anime-list-separator {
  display: none;
}

.anime-description-row .desc a:not(:last-of-type)::after {
  content: "\60C";
  margin-inline-end: 4px;
}

.anime-description-row .desc.desc--links a:not(:last-of-type)::after {
  content: none;
}

@media (max-width: 639px) {
  .anime-description-row {
    grid-template-columns: minmax(96px, max-content) 1fr;
    gap: 4px 8px;
  }

  .anime-description-row .term {
    white-space: nowrap;
    font-size: 0.74rem;
  }

  .anime-description-row .desc {
    font-size: 0.8rem;
    line-height: 1.6;
  }
}

@media (max-width: 959px) {
  .anime-scores-card .anime-scores-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .anime-scores-card .rating-item {
    padding: 16px 14px;
  }

  .anime-detail-card {
    padding: 22px;
  }
}

@media (max-width: 480px) {
  .anime-scores-card .anime-scores-grid {
    gap: 10px;
  }

  .anime-scores-card .rating-score .value {
    font-size: 1.4rem;
  }

  .anime-scores-card .rating-count {
    font-size: 0.72rem;
  }
}

/* Detail-page shell: mirrors the compact, warm Material layout in PSD. */

.anime-detail-page {
  --anime-accent: #f59e0b;
  --anime-accent-hover: #d97706;
  --anime-card-bg: #fff;
  --anime-border-color: rgba(120, 113, 108, .18);
  --anime-text-primary: #1c1917;
  --anime-text-secondary: #78716c;
  --anime-muted-bg: #fafaf9;
  max-width: 1152px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  background: #faf9f6;
  font-family: Vazirmatn, Vazir, sans-serif;
}

.anime-detail-page .anime-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 18px;
  background: var(--anime-card-bg);
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.05);
  justify-content: space-between;
}

.anime-detail-page .anime-page-header::before {
  content: "\F008";
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.anime-detail-page .anime-page-title {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  color: #1c1917;
  font-size: clamp(0.78rem, 1.7vw, 1rem);
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A long anime name must stay inside the page header instead of widening it. */

.anime-detail-page .anime-page-title-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.anime-detail-page .anime-page-badges {
  margin: 0 0 0 auto;
  gap: 6px;
}

.anime-detail-page .anime-page-subtitle {
  padding: 4px 9px;
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.68rem;
}

.anime-detail-page .anime-page-subtitle--stream {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.anime-detail-page .anime-poster-card {
  display: flow-root;
  overflow: visible;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(231, 229, 228, 0.75);
  border-radius: 24px;
  background: var(--anime-card-bg);
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.08);
}

.anime-detail-page .anime-poster-timer {
  position: static;
  width: auto;
  margin: 12px;
  transform: none;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  color: #78350f;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .anime-countdown-title,
.anime-detail-page .anime-poster-timer .anime-countdown-week,
.anime-detail-page .anime-poster-timer .uk-countdown-days,
.anime-detail-page .anime-poster-timer .uk-countdown-hours,
.anime-detail-page .anime-poster-timer .uk-countdown-minutes,
.anime-detail-page .anime-poster-timer .uk-countdown-seconds,
.anime-detail-page .anime-poster-timer .uk-countdown-label,
.anime-detail-page .anime-poster-timer > span {
  color: inherit;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .uk-countdown-days,
.anime-detail-page .anime-poster-timer .uk-countdown-hours,
.anime-detail-page .anime-poster-timer .uk-countdown-minutes,
.anime-detail-page .anime-poster-timer .uk-countdown-seconds {
  font-size: 1rem;
}

body.dark .anime-detail-page {
  --anime-card-bg: #1c1917;
  --anime-border-color: rgba(214, 211, 209, .15);
  --anime-text-primary: #fafaf9;
  --anime-text-secondary: #a8a29e;
  --anime-muted-bg: #292524;
}

body.dark .anime-detail-page .anime-page-header {
  border-color: rgba(214, 211, 209, 0.15);
  background: #1c1917;
}

body.dark .anime-detail-page .anime-page-title {
  color: #fafaf9;
}

@media (max-width: 639px) {
  .anime-detail-page {
    padding: 12px 12px 48px;
  }

  .anime-detail-page .anime-page-header {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .anime-detail-page .anime-page-heading__icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .anime-detail-page .anime-page-badges {
    display: none;
  }

  .anime-detail-page .anime-detail-card {
    border-radius: 16px;
  }
}

/* Information tab only: warm RTL dashboard based on the supplied reference layout. */

.anime-detail-page .anime-info-pane {
  padding-top: 12px;
}

.anime-detail-page .anime-info-pane .anime-info-layout {
  margin-top: 0;
}

.anime-detail-page .anime-info-pane .anime-detail-sidebar,
.anime-detail-page .anime-info-pane .anime-info-main {
  min-width: 0;
}

.anime-detail-page .anime-info-pane .anime-poster-card {
  display: flow-root;
  overflow: visible;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(231, 229, 228, 0.75);
  border-radius: 24px;
  background: var(--anime-card-bg);
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.08);
}

.anime-detail-page .anime-info-pane .anime-poster-card img {
  aspect-ratio: 2/2.82;
  -o-object-fit: cover;
     object-fit: cover;
}

.anime-detail-page .anime-info-pane .anime-poster-timer {
  margin: 10px;
  padding: 10px 12px;
  border-color: #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  color: #78350f;
  text-align: center;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 211, 209, 0.8);
  border-radius: 14px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
  color: var(--anime-text-primary);
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__icon,
.anime-detail-page .anime-info-pane .anime-info-section-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #fef3c7;
  color: #b45309;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
  width: 30px;
  height: 30px;
  font-size: 0.76rem;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__label,
.anime-detail-page .anime-info-pane .anime-quick-facts__label {
  color: var(--anime-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update strong {
  color: var(--anime-text-primary);
  font-size: 0.75rem;
  font-weight: 800;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__quality {
  margin-inline-start: auto;
  padding: 4px 8px;
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-scores-card,
.anime-detail-page .anime-info-pane .anime-info-card {
  margin-bottom: 12px;
  padding: 14px;
  border-color: rgba(214, 211, 209, 0.8);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-detail-page .anime-info-pane .anime-info-cards {
  gap: 12px;
}

.anime-detail-page .anime-info-pane .anime-info-card .anime-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--anime-text-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.anime-detail-page .anime-info-pane .anime-info-card .anime-card-title i {
  color: #b45309;
  font-size: 0.85rem;
}

.anime-detail-page .anime-info-pane .anime-description-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 12px;
  background: rgba(250, 250, 249, 0.72);
}

.anime-detail-page .anime-info-pane .anime-description-row {
  grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.85);
  align-items: start;
}

.anime-detail-page .anime-info-pane .anime-description-row:last-child {
  border-bottom: 0;
}

.anime-detail-page .anime-info-pane .anime-description-row .term {
  font-size: 0.67rem;
  font-weight: 700;
}

.anime-detail-page .anime-info-pane .anime-description-row .desc {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.85;
}

.anime-detail-page .anime-info-pane .anime-description-row .desc a {
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-description-row .desc a:hover {
  color: #b45309;
}

.anime-detail-page .anime-info-pane .anime-other-names-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(214, 211, 209, 0.9);
  border-radius: 9px;
  background: #fff;
  color: #44403c;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.anime-detail-page .anime-info-pane .anime-other-names-trigger:hover {
  background: #fffbeb;
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-synopsis-card {
  max-width: none;
  margin: 0 0 14px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* The selected tab owns the mobile card surface.  These are deliberate inner
 * sections, so they never inherit the reusable anime-detail-card treatment. */

.anime-detail-page .anime-info-pane .anime-info-section {
  background: transparent;
  box-shadow: none;
}

.anime-detail-page .anime-info-pane .anime-synopsis-card .synopsis-content {
  max-width: none;
}

.anime-detail-page .anime-info-pane .anime-info-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.anime-detail-page .anime-info-pane .anime-info-section-heading__icon {
  width: 27px;
  height: 27px;
  font-size: 0.75rem;
}

.anime-detail-page .anime-info-pane .anime-info-section-heading h2,
.anime-detail-page .anime-info-pane .anime-info-section-heading h3 {
  margin: 0;
  color: var(--anime-text-primary);
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.5;
}

.anime-detail-page .anime-info-pane .anime-synopsis-card .synopsis-text {
  color: var(--anime-text-secondary);
  font-size: 0.78rem;
  line-height: 2.05;
}

.anime-detail-page .anime-info-pane .anime-synopsis-card .synopsis-toggle-button {
  margin: 10px 0 0;
  padding: 5px 9px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.7rem;
}

.anime-detail-page .anime-info-pane .anime-info-overview {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.anime-detail-page .anime-info-pane .anime-info-overview__section {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.9);
}

.anime-detail-page .anime-info-pane .anime-info-overview__section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.anime-detail-page .anime-info-pane .anime-genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 1px;
}

.anime-detail-page .anime-info-pane .anime-genre-chips a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(214, 211, 209, 0.9);
  border-radius: 999px;
  background: rgba(250, 250, 249, 0.9);
  color: #292524;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.anime-detail-page .anime-info-pane .anime-genre-chips a > i {
  color: #d97706;
  font-size: 0.86rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.anime-detail-page .anime-info-pane .anime-genre-chips a:hover {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-genre-chips a:hover > i {
  color: #b45309;
  transform: scale(1.1);
}

.anime-detail-page .anime-info-pane .anime-genre-chips a:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.anime-detail-page .anime-info-pane .anime-info-empty {
  color: var(--anime-text-secondary);
  font-size: 0.72rem;
}

.anime-detail-page .anime-info-pane .anime-production-list {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 14px;
  background: rgba(250, 250, 249, 0.72);
}

.anime-detail-page .anime-info-pane .anime-production-list > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.85);
}

.anime-detail-page .anime-info-pane .anime-production-list > div:last-child {
  border-bottom: 0;
}

.anime-detail-page .anime-info-pane .anime-production-list dt {
  color: var(--anime-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
}

.anime-detail-page .anime-info-pane .anime-production-list dd {
  margin: 0;
  color: var(--anime-text-primary);
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.8;
}

.anime-detail-page .anime-info-pane .anime-production-list a,
.anime-detail-page .anime-info-pane .anime-quick-facts a {
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-production-list a:hover,
.anime-detail-page .anime-info-pane .anime-quick-facts a:hover {
  color: #b45309;
}

.anime-detail-page .anime-info-pane .anime-quick-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.anime-detail-page .anime-info-pane .anime-quick-facts > div {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(214, 211, 209, 0.8);
  border-radius: 14px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-info-pane .anime-quick-facts a,
.anime-detail-page .anime-info-pane .anime-quick-facts strong {
  overflow: hidden;
  color: var(--anime-text-primary);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.65;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark .anime-detail-page .anime-info-pane .anime-poster-timer,
body.dark .anime-detail-page .anime-info-pane .anime-sidebar-update__quality,
body.dark .anime-detail-page .anime-info-pane .anime-synopsis-card .synopsis-toggle-button {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(120, 53, 15, 0.3);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-info-pane .anime-sidebar-update,
body.dark .anime-detail-page .anime-info-pane .anime-description-list,
body.dark .anime-detail-page .anime-info-pane .anime-production-list,
body.dark .anime-detail-page .anime-info-pane .anime-quick-facts > div {
  border-color: rgba(214, 211, 209, 0.15);
  background: rgba(41, 37, 36, 0.72);
}

body.dark .anime-detail-page .anime-info-pane .anime-description-row,
body.dark .anime-detail-page .anime-info-pane .anime-production-list > div,
body.dark .anime-detail-page .anime-info-pane .anime-info-overview__section,
body.dark .anime-detail-page .anime-info-pane .anime-synopsis-card {
  border-color: rgba(214, 211, 209, 0.12);
}

body.dark .anime-detail-page .anime-info-pane .anime-other-names-trigger,
body.dark .anime-detail-page .anime-info-pane .anime-genre-chips a {
  border-color: rgba(214, 211, 209, 0.18);
  background: #292524;
  color: #e7e5e4;
}

body.dark .anime-detail-page .anime-info-pane .anime-genre-chips a > i {
  color: #fbbf24;
}

body.dark .anime-detail-page .anime-info-pane .anime-genre-chips a:hover > i {
  color: #fde68a;
}

body.dark .anime-detail-page .anime-info-pane .anime-genre-chips a:hover,
body.dark .anime-detail-page .anime-info-pane .anime-other-names-trigger:hover {
  background: rgba(120, 53, 15, 0.32);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-info-pane .anime-info-section-heading__icon {
  background: rgba(120, 53, 15, 0.34);
  color: #fcd34d;
}

body.dark .anime-detail-page .anime-info-pane .anime-description-row .desc a,
body.dark .anime-detail-page .anime-info-pane .anime-production-list a,
body.dark .anime-detail-page .anime-info-pane .anime-quick-facts a {
  color: #fcd34d;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane {
    padding-top: 8px;
  }

  .anime-detail-page .anime-info-pane .anime-scores-card,
  .anime-detail-page .anime-info-pane .anime-info-card {
    padding: 12px;
  }

  .anime-detail-page .anime-info-pane .anime-quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anime-detail-page .anime-info-pane .anime-genre-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 1px 1px 5px;
    scrollbar-width: none;
  }

  .anime-detail-page .anime-info-pane .anime-genre-chips::-webkit-scrollbar {
    display: none;
  }

  .anime-detail-page .anime-info-pane .anime-genre-chips {
    gap: 5px;
  }

  .anime-detail-page .anime-info-pane .anime-genre-chips a {
    height: 30px;
    padding: 0 9px;
    font-size: 0.64rem;
  }

  .anime-detail-page .anime-info-pane .anime-production-list > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Final single-page composition: keep the Laravel data components intact while
 * presenting them as the warm, compact two-column reference layout. */

.anime-detail-page .anime-page-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.anime-detail-page .anime-page-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fef3c7;
  color: #d97706;
  font-size: 0.85rem;
}

.anime-detail-page .anime-info-pane .anime-info-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr);
  gap: 24px;
  margin-inline: 0;
}

.anime-detail-page .anime-info-pane .anime-info-layout > * {
  width: auto;
  padding-inline: 0;
}

.anime-detail-page .anime-info-pane .anime-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anime-detail-page .anime-info-pane .anime-poster-card,
.anime-detail-page .anime-info-pane .anime-scores-card,
.anime-detail-page .anime-info-pane .anime-info-card {
  margin-bottom: 0;
}

.anime-detail-page .anime-info-pane .anime-poster-card {
  padding: 10px;
  border-radius: 24px;
}

.anime-detail-page .anime-info-pane .anime-poster-card img {
  border-radius: 16px;
}

.anime-detail-page .anime-info-pane .anime-poster-timer {
  margin: 10px 0 0;
}

.anime-detail-page .anime-info-pane .anime-sidebar-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update {
  min-height: 68px;
  margin: 0;
  padding: 10px;
  border-radius: 14px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update--quality .anime-sidebar-update__icon {
  background: #f5f5f4;
  color: #57534e;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__quality {
  display: block;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1c1917;
  font-size: 0.75rem;
}

.anime-detail-page .anime-info-pane .anime-scores-card {
  padding: 12px;
  border-radius: 18px;
}

.anime-detail-page .anime-info-pane .anime-scores-card .anime-scores-grid {
  gap: 8px;
}

.anime-detail-page .anime-info-pane .anime-scores-card .rating-item {
  gap: 5px;
  padding: 10px;
  border-color: #fde68a;
  border-radius: 12px;
  background: #fffbeb;
}

.anime-detail-page .anime-info-pane .anime-scores-card .rating-item:nth-child(2) {
  border-color: #e7e5e4;
  background: #fafaf9;
}

.anime-detail-page .anime-info-pane .anime-scores-card .rating-score .value {
  font-size: 1.25rem;
}

.anime-detail-page .anime-tabs-card .tabs-nav-container {
  padding: 6px;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-detail-page .anime-tabs-card .tabs-nav {
  gap: 4px;
}

.anime-detail-page .anime-tabs-card .tabs-nav .slider {
  bottom: 2px;
}

.anime-detail-page .anime-tabs-card .tab-link {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 0.78rem;
}

.anime-detail-page .anime-tabs-card .tab-link.active {
  background: #fffbeb;
  color: #92400e;
}

.anime-detail-page .anime-tabs-card .tab-content {
  margin-top: 18px;
}

.anime-mobile-tab-selector,
.anime-mobile-tabs-modal {
  display: none;
}

/* Phone-only anime section picker. The desktop tab bar stays hidden here so it
 * cannot reintroduce horizontal scrolling below this component. */

@media (max-width: 639px) {
  .anime-detail-page .anime-mobile-tab-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #e7e5e4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
  }

  .anime-detail-page .anime-mobile-tab-selector__trigger {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: #1c1917;
    color: #fff;
    font: inherit;
    text-align: right;
    cursor: pointer;
  }

  .anime-detail-page .anime-mobile-tab-selector__current {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .anime-detail-page .anime-mobile-tab-selector__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    color: #fbbf24;
  }

  .anime-detail-page .anime-mobile-tab-selector__current > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .anime-detail-page .anime-mobile-tab-selector__current small {
    color: #d6d3d1;
    font-size: 0.62rem;
    font-weight: 500;
  }

  .anime-detail-page .anime-mobile-tab-selector__current strong {
    margin-right: 4px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
  }

  .anime-detail-page .anime-mobile-tab-selector__change {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fcd34d;
    font-size: 0.64rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .anime-detail-page .anime-mobile-tab-selector__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e7e5e4;
    border-radius: 10px;
    background: #fafaf9;
    color: #44403c;
    font: inherit;
    cursor: pointer;
  }

  .anime-detail-page .anime-mobile-tab-selector__trigger:focus-visible,
  .anime-detail-page .anime-mobile-tab-selector__all:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.42);
    outline-offset: 2px;
  }

  .anime-detail-page .anime-tabs-card .tabs-nav-container,
  .anime-detail-page .anime-tabs-card .tabs-nav {
    display: none !important;
  }

  .anime-mobile-tabs-modal[hidden] {
    display: none;
  }

  .anime-mobile-tabs-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    background: rgba(28, 25, 23, 0.46);
    overscroll-behavior: contain;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__dialog {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: #fff;
    animation: animeDetailSheetIn 0.22s ease-out;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__handle {
    display: block;
    width: 46px;
    height: 5px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: #d6d3d1;
    flex: 0 0 auto;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__header {
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 10px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
    background: #fff;
    border-bottom: 1px solid #f0eeeb;
  }

  .anime-mobile-tabs-modal__heading {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
  }

  .anime-mobile-tabs-modal__heading > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff7e6;
    color: #d97706;
    font-size: 0.95rem;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__header h4 {
    font-size: 0.94rem;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__header p {
    margin-top: 3px;
    font-size: 0.7rem;
  }

  .anime-mobile-tabs-modal .anime-detail-modal__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e7e5e4;
    background: #fafaf9;
    color: #78716c;
    font-size: 1.1rem;
  }

  .anime-mobile-tabs-modal__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .anime-mobile-tabs-modal__list {
    display: grid;
    min-width: 0;
    max-width: 100%;
    gap: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  .anime-mobile-tabs-modal__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 58px;
    gap: 11px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #e7e5e4;
    border-radius: 15px;
    background: #fff;
    color: #44403c;
    font: 700 0.8rem "Vazirmatn", sans-serif;
    text-align: right;
    cursor: pointer;
  }

  .anime-mobile-tabs-modal__item-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .anime-mobile-tabs-modal__item b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f0eeeb;
    color: #57534e;
    font-size: 0.61rem;
    vertical-align: middle;
  }

  .anime-mobile-tabs-modal__item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #e7e5e4;
    border-radius: 10px;
    background: #fafaf9;
    color: #78716c;
  }

  .anime-mobile-tabs-modal__state {
    flex: 0 0 auto;
    color: #a8a29e;
    font-size: 0.8rem;
  }

  .anime-mobile-tabs-modal__item.is-active {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #78350f;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.05);
  }

  .anime-mobile-tabs-modal__item.is-active .anime-mobile-tabs-modal__item-icon {
    border-color: #fde68a;
    background: #fff7e6;
    color: #d97706;
  }

  .anime-mobile-tabs-modal__item.is-active .anime-mobile-tabs-modal__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 0.68rem;
  }

  .anime-mobile-tabs-modal__item:focus-visible,
  .anime-mobile-tabs-modal .anime-detail-modal__close:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.45);
    outline-offset: 2px;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector {
    border-color: rgba(214, 211, 209, 0.2);
    background: #1c1917;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__all {
    border-color: rgba(214, 211, 209, 0.2);
    background: #292524;
    color: #e7e5e4;
  }

  body.dark .anime-mobile-tabs-modal {
    background: rgba(0, 0, 0, 0.62);
  }

  body.dark .anime-mobile-tabs-modal .anime-detail-modal__dialog,
  body.dark .anime-mobile-tabs-modal .anime-detail-modal__header {
    background: #1c1917;
    border-color: #44403c;
  }

  body.dark .anime-mobile-tabs-modal .anime-detail-modal__header h4 {
    color: #fafaf9;
  }

  body.dark .anime-mobile-tabs-modal .anime-detail-modal__header p {
    color: #d6d3d1;
  }

  body.dark .anime-mobile-tabs-modal .anime-detail-modal__close {
    border-color: #44403c;
    background: #292524;
    color: #d6d3d1;
  }

  body.dark .anime-mobile-tabs-modal__heading > span {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
  }

  body.dark .anime-mobile-tabs-modal__item {
    border-color: #44403c;
    background: #292524;
    color: #e7e5e4;
  }

  body.dark .anime-mobile-tabs-modal__item-icon {
    border-color: #44403c;
    background: #1c1917;
    color: #d6d3d1;
  }

  body.dark .anime-mobile-tabs-modal__item b {
    background: #44403c;
    color: #f5f5f4;
  }

  body.dark .anime-mobile-tabs-modal__item.is-active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    color: #fde68a;
  }

  body.dark .anime-mobile-tabs-modal__item.is-active .anime-mobile-tabs-modal__item-icon {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
  }
}

.anime-detail-page .download-card {
  border-color: #e7e5e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.05);
}

.anime-detail-page .download-card__download {
  border-radius: 10px;
  background: #f59e0b;
}

.anime-detail-page .download-card__download:hover {
  background: #d97706;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .anime-detail-page .anime-info-pane .anime-info-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .anime-detail-page .anime-info-pane .anime-detail-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    align-items: start;
  }

  .anime-detail-page .anime-info-pane .anime-poster-card {
    grid-row: span 3;
  }
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-info-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .anime-detail-page .anime-info-pane .anime-detail-sidebar {
    display: flex;
  }

  .anime-detail-page .anime-info-pane .anime-poster-card {
    width: min(100%, 290px);
    margin-inline: auto;
    padding: 10px;
    border-radius: 18px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-status {
    gap: 8px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update {
    padding: 9px;
  }

  .anime-detail-page .anime-tabs-card .tabs-nav-container,
  .anime-detail-page .anime-tabs-card .tabs-nav {
    display: none !important;
  }
}

/* Shared detail-page modal shell: desktop dialog and mobile bottom sheet. */

.anime-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(12, 10, 9, 0.64);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.anime-detail-modal[hidden] {
  display: none;
}

.anime-detail-modal__dialog {
  width: min(100%, 560px);
  max-height: min(85vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e7e5e4;
  border-radius: 24px;
  background: #fff;
  color: #1c1917;
  box-shadow: 0 28px 70px rgba(12, 10, 9, 0.32);
  animation: animeDetailDialogIn 0.2s ease-out;
}

.anime-detail-modal__handle {
  display: none;
}

.anime-detail-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(250, 250, 249, 0.92);
  border-bottom: 1px solid #f0eeeb;
}

.anime-detail-modal__header h4 {
  margin: 0;
  color: #1c1917;
  font-size: 1rem;
  font-weight: 800;
}

.anime-detail-modal__header p {
  margin: 4px 0 0;
  color: #78716c;
  font-size: 0.76rem;
  line-height: 1.6;
}

.anime-detail-modal__body {
  overflow-y: auto;
  padding: 20px;
  font-size: 0.9rem;
  line-height: 1.8;
}

.anime-detail-modal__close,
.anime-list-panel__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f5f5f4;
  color: #78716c;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.anime-detail-modal__close:hover,
.anime-list-panel__close:hover {
  background: #e7e5e4;
  color: #1c1917;
  transform: none;
}

.anime-detail-modal__close:focus-visible,
.anime-list-panel__close:focus-visible,
.anime-other-names-trigger:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.42);
  outline-offset: 2px;
}

.anime-other-names-list {
  display: grid;
  gap: 10px;
  color: #44403c;
}

.anime-other-names-list > div {
  padding: 10px 12px;
  border: 1px solid #f0eeeb;
  border-radius: 12px;
  background: #fafaf9;
}

body.anime-detail-modal-open {
  overflow: hidden;
}

@keyframes animeDetailDialogIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* The list panel uses the same stone/amber modal language. */

.anime-list-panel__header {
  padding: 16px 20px;
  background: rgba(250, 250, 249, 0.92);
  border-bottom-color: #f0eeeb;
}

.anime-list-panel__header h4 {
  color: #1c1917;
  font-size: 1rem;
}

.anime-list-panel__header p {
  color: #78716c;
}

.anime-list-panel__form .input-with-total,
.anime-list-panel__select {
  border-color: #d6d3d1;
  background: #fafaf9;
  color: #292524;
  border-radius: 12px;
}

.anime-list-panel__form .group-label,
.anime-list-panel__form .episode-field-label {
  color: #44403c;
  font-weight: 700;
}

.anime-list-panel__form .input-with-total:focus-within,
.anime-list-panel__select:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  background: #fff;
}

.modal-footer-actions {
  padding-top: 4px;
}

.save-button {
  border-radius: 12px;
  background: #f59e0b;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.25);
}

.save-button:hover {
  background: #d97706;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.3);
}

.save-button:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.42);
  outline-offset: 2px;
}

.save-button.remove-button {
  background: #44403c;
  box-shadow: 0 8px 18px rgba(68, 64, 60, 0.2);
}

.save-button.remove-button:hover {
  background: #292524;
  box-shadow: 0 12px 24px rgba(68, 64, 60, 0.28);
}

@media (max-width: 560px) {
  .anime-detail-modal {
    align-items: flex-end;
    padding: 0;
  }

  .anime-detail-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    animation: animeDetailSheetIn 0.22s ease-out;
  }

  .anime-detail-modal__handle {
    display: block;
    width: 48px;
    height: 6px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: #d6d3d1;
    flex: 0 0 auto;
  }

  .anime-detail-modal__header {
    padding: 12px 16px;
  }

  .anime-detail-modal__body {
    padding: 16px;
  }

@keyframes animeDetailSheetIn {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
}
}

.anime-other-names-trigger {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Technical Specifications: compact Android-style metrics and grouped details. */

.anime-detail-page .anime-info-pane .anime-technical-specs {
  margin-top: 18px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__heading-icon,
.anime-detail-page .anime-info-pane .anime-technical-specs__item-icon,
.anime-detail-page .anime-info-pane .anime-quick-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__heading-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-size: 0.75rem;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__heading h3 {
  margin: 0;
  color: var(--anime-text-primary);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.5;
}

.anime-detail-page .anime-info-pane .anime-quick-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.anime-detail-page .anime-info-pane .anime-quick-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(231, 229, 228, 0.8);
  border-radius: 16px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.anime-detail-page .anime-info-pane .anime-quick-metric__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 0.9rem;
}

.anime-detail-page .anime-info-pane .anime-quick-metric--status .anime-quick-metric__icon {
  background: #ecfdf5;
  color: #059669;
}

.anime-detail-page .anime-info-pane .anime-quick-metric--type .anime-quick-metric__icon {
  background: #f5f5f4;
  color: #57534e;
}

.anime-detail-page .anime-info-pane .anime-quick-metric--episodes .anime-quick-metric__icon,
.anime-detail-page .anime-info-pane .anime-quick-metric--rating .anime-quick-metric__icon {
  background: #fffbeb;
  color: #b45309;
}

.anime-detail-page .anime-info-pane .anime-quick-metric__content {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.anime-detail-page .anime-info-pane .anime-quick-metric__label {
  color: #a8a29e;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.5;
}

.anime-detail-page .anime-info-pane .anime-quick-metric a,
.anime-detail-page .anime-info-pane .anime-quick-metric strong {
  overflow: hidden;
  color: var(--anime-text-primary);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.65;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-quick-metric--status a {
  color: #047857;
}

.anime-detail-page .anime-info-pane .anime-quick-metric--rating strong {
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__list {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(231, 229, 228, 0.8);
  border-radius: 16px;
  background: rgba(250, 250, 249, 0.72);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.65);
  transition: background-color 0.2s ease;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item:last-child {
  border-bottom: 0;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item:hover {
  background: rgba(245, 245, 244, 0.7);
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dt {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
  color: #57534e;
  font-size: 0.7rem;
  font-weight: 800;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f5f5f4;
  color: #78716c;
  font-size: 0.72rem;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dd {
  min-width: 0;
  margin: 0;
  color: var(--anime-text-primary);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.75;
  text-align: left;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dd a {
  color: #92400e;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dd a:hover {
  color: #b45309;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__secondary {
  color: var(--anime-text-secondary);
  font-size: 0.67rem;
  font-weight: 700;
}

/* Producers and official-site actions follow the expandable Android list treatment
 * in the approved PSD without requiring any JavaScript state. */

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers {
  align-items: flex-start;
  flex-wrap: wrap;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dt {
  padding-top: 1px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dd {
  flex: 1 1 auto;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers:has(.anime-producers[open]) > dd {
  flex-basis: 100%;
}

.anime-detail-page .anime-info-pane .anime-producers {
  width: 100%;
}

.anime-detail-page .anime-info-pane .anime-producers summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.anime-detail-page .anime-info-pane .anime-producers summary::-webkit-details-marker {
  display: none;
}

.anime-detail-page .anime-info-pane .anime-producers__preview {
  overflow: hidden;
  color: var(--anime-text-primary);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-producers__toggle,
.anime-detail-page .anime-info-pane .anime-official-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.3;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.anime-detail-page .anime-info-pane .anime-producers__toggle {
  flex: 0 0 auto;
}

.anime-detail-page .anime-info-pane .anime-producers__toggle-close {
  display: none;
}

.anime-detail-page .anime-info-pane .anime-producers[open] .anime-producers__toggle-open {
  display: none;
}

.anime-detail-page .anime-info-pane .anime-producers[open] .anime-producers__toggle-close {
  display: inline;
}

.anime-detail-page .anime-info-pane .anime-producers[open] .anime-producers__toggle i {
  transform: rotate(180deg);
}

.anime-detail-page .anime-info-pane .anime-producers__toggle i {
  font-size: 0.62rem;
  transition: transform 0.2s ease;
}

.anime-detail-page .anime-info-pane .anime-producers__drawer {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(231, 229, 228, 0.65);
}

.anime-detail-page .anime-info-pane .anime-producers__drawer-label {
  display: block;
  margin-bottom: 8px;
  color: #a8a29e;
  font-size: 0.61rem;
  font-weight: 800;
  text-align: right;
}

.anime-detail-page .anime-info-pane .anime-producers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.anime-detail-page .anime-info-pane .anime-producers__card {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(231, 229, 228, 0.8);
  border-radius: 10px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-info-pane .anime-producers__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f5f5f4;
  color: #78716c;
  font-size: 0.65rem;
}

.anime-detail-page .anime-info-pane .anime-producers__card-name {
  overflow: hidden;
  color: var(--anime-text-primary);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-producers__toggle:hover,
.anime-detail-page .anime-info-pane .anime-official-site:hover {
  background: #fef3c7;
  color: #78350f;
  transform: translateY(-1px);
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--official-site dd {
  display: flex;
  align-items: center;
}

.anime-detail-page .anime-info-pane .anime-official-site {
  max-width: 100%;
  text-decoration: none;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__toggle,
body.dark .anime-detail-page .anime-info-pane .anime-official-site {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(120, 53, 15, 0.32);
  color: #fcd34d;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__drawer {
  border-color: rgba(214, 211, 209, 0.12);
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__drawer-label {
  color: #a8a29e;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__card {
  border-color: rgba(214, 211, 209, 0.15);
  background: #292524;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__card-icon {
  background: #44403c;
  color: #d6d3d1;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__card-name {
  color: #f5f5f4;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__toggle:hover,
body.dark .anime-detail-page .anime-info-pane .anime-official-site:hover {
  background: rgba(146, 64, 14, 0.48);
  color: #fef3c7;
}

body.dark .anime-detail-page .anime-info-pane .anime-quick-metric,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__list {
  border-color: rgba(214, 211, 209, 0.15);
  background: rgba(41, 37, 36, 0.72);
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item {
  border-color: rgba(214, 211, 209, 0.12);
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item:hover {
  background: rgba(68, 64, 60, 0.45);
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item-icon,
body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--type .anime-quick-metric__icon {
  background: #292524;
  color: #d6d3d1;
}

body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--status .anime-quick-metric__icon {
  background: rgba(6, 78, 59, 0.42);
  color: #6ee7b7;
}

body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--episodes .anime-quick-metric__icon,
body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--rating .anime-quick-metric__icon,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__heading-icon {
  background: rgba(120, 53, 15, 0.32);
  color: #fcd34d;
}

body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--status a {
  color: #6ee7b7;
}

body.dark .anime-detail-page .anime-info-pane .anime-quick-metric--rating strong,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item dd a {
  color: #fcd34d;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-quick-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .anime-detail-page .anime-info-pane .anime-quick-metric {
    min-height: 56px;
    padding: 9px;
    gap: 8px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dd {
    padding-inline-start: 38px;
    text-align: right;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dd {
    padding-inline-start: 38px;
  }

  .anime-detail-page .anime-info-pane .anime-producers summary {
    align-items: flex-end;
    flex-direction: column;
  }

  .anime-detail-page .anime-info-pane .anime-producers__preview {
    max-width: 100%;
    text-align: right;
  }

  .anime-detail-page .anime-info-pane .anime-producers__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile information-tab hierarchy: one outer card, with padded sections and
 * quiet dividers instead of another stack of card borders and shadows. */

@media (max-width: 639px) {
  .anime-detail-page .anime-tabs-card .anime-tabs-card__content .anime-info-pane {
    padding-top: 0;
  }

  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section {
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(231, 229, 228, 0.9);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section + .anime-info-section {
    padding-top: 16px;
  }

  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-cards {
    gap: 0;
    margin: 0;
    padding-top: 16px;
  }

  .anime-detail-page .anime-tabs-card .anime-info-section--technical {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__list {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item {
    padding-inline: 0;
  }

  body.dark .anime-detail-page .anime-tabs-card .anime-tabs-card__content {
    border-color: rgba(214, 211, 209, 0.16);
    background: #1c1917;
    box-shadow: none;
  }

  body.dark .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section {
    border-color: rgba(214, 211, 209, 0.12);
  }
}

.anime-detail-page .anime-poster-timer {
  position: static;
  box-sizing: border-box;
  clear: both;
  width: 100%;
  min-width: 0;
  margin: 10px 0;
  padding: 10px;
  transform: none;
  border: 1px solid #fde1a3;
  border-radius: 18px;
  background: #fffbeb;
  color: #78350f;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
}

.anime-detail-page .anime-poster-timer,
.anime-detail-page .anime-poster-timer * {
  color: #78350f;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .anime-countdown-title {
  margin-bottom: 3px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.45;
}

.anime-detail-page .anime-poster-timer .anime-countdown-week {
  margin-bottom: 6px;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.4;
}

.anime-detail-page .anime-poster-timer .countdown-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.anime-detail-page .anime-poster-timer .countdown-unit {
  min-width: 0;
  padding: 4px 1px;
  border-inline-start: 1px solid rgba(180, 83, 9, 0.15);
}

.anime-detail-page .anime-poster-timer .countdown-unit:first-child {
  border-inline-start: 0;
}

.anime-detail-page .anime-poster-timer .uk-countdown-days,
.anime-detail-page .anime-poster-timer .uk-countdown-hours,
.anime-detail-page .anime-poster-timer .uk-countdown-minutes,
.anime-detail-page .anime-poster-timer .uk-countdown-seconds {
  display: block;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
}

.anime-detail-page .anime-poster-timer .uk-countdown-label {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-poster-timer {
    padding: 9px 7px;
    border-radius: 14px;
  }

  .anime-detail-page .anime-poster-timer .anime-countdown-title {
    font-size: 0.73rem;
  }

  .anime-detail-page .anime-poster-timer .anime-countdown-week {
    font-size: 0.63rem;
  }

  .anime-detail-page .anime-poster-timer .countdown-timer {
    gap: 2px;
  }

  .anime-detail-page .anime-poster-timer .uk-countdown-days,
  .anime-detail-page .anime-poster-timer .uk-countdown-hours,
  .anime-detail-page .anime-poster-timer .uk-countdown-minutes,
  .anime-detail-page .anime-poster-timer .uk-countdown-seconds {
    font-size: 0.9rem;
  }

  .anime-detail-page .anime-poster-timer .uk-countdown-label {
    font-size: 0.54rem;
  }
}

.anime-detail-page .anime-sidebar-update {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 16px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.anime-detail-page .anime-sidebar-update__icon {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-inline-end: 9px;
  place-items: center;
  border-radius: 11px;
  background: #fef3c7;
  color: #b45309;
}

.anime-detail-page .anime-sidebar-update > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.anime-detail-page .anime-sidebar-update__label {
  display: block;
  margin: 0;
  color: var(--anime-text-secondary);
  font-size: 0.67rem;
  font-weight: 700;
}

.anime-detail-page .anime-sidebar-update strong {
  display: block;
  overflow: hidden;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-sidebar-update--quality .anime-sidebar-update__icon {
  background: #f5f5f4;
  color: #57534e;
}

.anime-detail-page .anime-sidebar-update--quality strong {
  color: var(--anime-text-primary);
}

.anime-detail-page .anime-scores-card {
  padding: 14px;
  border-radius: 18px;
}

.anime-detail-page .anime-tracker-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.75);
}

.anime-detail-page .anime-tracker-heading > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #f5f5f4;
  color: #78716c;
}

.anime-detail-page .anime-tracker-heading h3,
.anime-detail-page .anime-tracker-heading p {
  margin: 0;
}

.anime-detail-page .anime-tracker-heading h3 {
  font-size: 0.78rem;
}

.anime-detail-page .anime-tracker-heading p {
  color: var(--anime-text-secondary);
  font-size: 0.61rem;
}

.anime-detail-page .anime-scores-card .anime-scores-grid {
  gap: 8px;
}

.anime-detail-page .anime-scores-card .rating-item {
  border-radius: 14px;
  background: #fafaf9;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.anime-detail-page .anime-scores-card .rating-item:nth-child(2) {
  border-color: #dbeafe;
}

.anime-detail-page button:focus-visible,
.anime-detail-page a:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.55);
  outline-offset: 3px;
}

/* Sidebar blocks follow the supplied PSD: release details, tracker, then the
 * compact alternative-titles action.  Keep all existing form behavior intact. */

.anime-detail-page .anime-info-pane .anime-scores-card {
  display: flex;
  flex-direction: column;
}

.anime-detail-page .anime-tracker-heading {
  order: 1;
}

.anime-detail-page .anime-scores-card .anime-list-panel {
  order: 2;
}

.anime-detail-page .anime-scores-card .anime-scores-grid {
  order: 3;
  margin-top: 12px;
}

.anime-detail-page .anime-tracker-heading__count {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin-inline-start: auto;
  padding: 4px 8px;
  border-radius: 999px !important;
  background: #f5f5f4 !important;
  color: #a8a29e !important;
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-sidebar-status {
  margin-top: 10px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update {
  flex-direction: row;
  justify-content: flex-start;
  min-height: 76px;
  padding: 12px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
  order: 2;
  margin-inline-start: auto;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update > div {
  order: 1;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update strong {
  font-size: 0.84rem;
}

.anime-detail-page .anime-info-pane .anime-info-card--names {
  padding: 13px 14px;
  background: #fafaf9;
}

.anime-detail-page .anime-info-pane .anime-info-card--names .anime-card-title {
  justify-content: flex-start;
  margin-bottom: 10px;
  font-size: 0.72rem;
}

.anime-detail-page .anime-info-pane .anime-info-card--names .anime-other-names-trigger {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.7rem;
}

.anime-detail-page .anime-other-names-list {
  direction: rtl;
}

.anime-detail-page .anime-other-names-list > div {
  padding: 10px 0;
  border-bottom: 1px solid #e7e5e4;
  line-height: 1.9;
}

.anime-detail-page .anime-other-names-list > div:last-child {
  border-bottom: 0;
}

.anime-detail-page .anime-other-names-list strong {
  color: #78716c;
  font-size: 0.73rem;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-tracker-heading p {
    display: none;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update {
    min-height: 68px;
    padding: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
    width: 28px;
    height: 28px;
  }
}

body.dark .anime-detail-page .anime-page-header,
body.dark .anime-detail-page .anime-poster-card,
body.dark .anime-detail-page .anime-sidebar-update,
body.dark .anime-detail-page .anime-scores-card {
  border-color: rgba(214, 211, 209, 0.16);
  background: #1c1917;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-poster-timer {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(120, 53, 15, 0.25);
}

body.dark .anime-detail-page .anime-poster-timer,
body.dark .anime-detail-page .anime-poster-timer * {
  color: #fde68a;
}

body.dark .anime-detail-page .anime-scores-card .rating-item {
  background: #292524;
}

@media (max-width: 359px) {
  .anime-detail-page .anime-info-pane .anime-sidebar-status {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep every information-panel surface inside the selected tab on phones.
 * Long titles and metadata must wrap instead of widening their card. */

.anime-detail-page .anime-info-pane .anime-info-section,
.anime-detail-page .anime-info-pane .anime-info-card,
.anime-detail-page .anime-info-pane .anime-scores-card,
.anime-detail-page .anime-related-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.anime-detail-page .anime-info-pane .anime-synopsis-card,
.anime-detail-page .anime-info-pane .anime-info-overview,
.anime-detail-page .anime-info-pane .anime-technical-specs {
  padding: 14px;
  border: 1px solid rgba(214, 211, 209, 0.8);
  border-radius: 16px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-detail-page .anime-info-pane .anime-technical-specs {
  margin-top: 0;
}

.anime-detail-page .anime-info-pane .anime-description-row .desc,
.anime-detail-page .anime-info-pane .anime-technical-specs__item dd,
.anime-detail-page .anime-related-card .anime-title {
  overflow-wrap: anywhere;
}

body.dark .anime-detail-page .anime-info-pane .anime-synopsis-card,
body.dark .anime-detail-page .anime-info-pane .anime-info-overview,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs {
  border-color: rgba(214, 211, 209, 0.16);
  background: #1c1917;
  box-shadow: none;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-tabs-card .anime-tabs-card__content {
    min-width: 0;
    overflow: hidden;
  }

  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section,
  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section + .anime-info-section,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical {
    padding: 12px;
    border: 1px solid rgba(214, 211, 209, 0.8);
    border-radius: 14px;
    background: var(--anime-card-bg);
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
  }

  .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section + .anime-info-section {
    margin-top: 12px;
  }

  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__list {
    border: 1px solid rgba(231, 229, 228, 0.8);
    border-radius: 12px;
    background: rgba(250, 250, 249, 0.72);
  }

  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item {
    padding-inline: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-detail-sidebar > .anime-info-card,
  .anime-detail-page .anime-info-pane .anime-detail-sidebar > .anime-scores-card,
  .anime-detail-page .anime-related-card {
    width: 100%;
    margin-inline: 0;
  }

  body.dark .anime-detail-page .anime-tabs-card .anime-info-main > .anime-info-section,
  body.dark .anime-detail-page .anime-tabs-card .anime-info-section--technical {
    border-color: rgba(214, 211, 209, 0.16);
    background: #1c1917;
    box-shadow: none;
  }

  body.dark .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__list {
    border-color: rgba(214, 211, 209, 0.15);
    background: rgba(41, 37, 36, 0.72);
  }
}

/* Compact, horizontally scrollable relation rail prevents long franchises from crowding the information tab. */

.anime-detail-page .anime-info-pane .anime-poster-timer {
  margin: 10px 0;
}

.anime-detail-page .anime-info-pane .anime-description-row--other-names {
  border-bottom: 0;
}

.anime-detail-page .anime-relation-rail {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(214, 211, 209, 0.8);
  border-radius: 16px;
  background: var(--anime-card-bg);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.anime-detail-page .anime-relation-rail__header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-bottom: 11px;
}

.anime-detail-page .anime-relation-rail__icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.75rem;
}

.anime-detail-page .anime-relation-rail__header > div {
  min-width: 0;
}

.anime-detail-page .anime-relation-rail__header p,
.anime-detail-page .anime-relation-rail__header h2 {
  margin: 0;
}

.anime-detail-page .anime-relation-rail__header p {
  color: var(--anime-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
}

.anime-detail-page .anime-relation-rail__header h2 {
  overflow: hidden;
  color: var(--anime-text-primary);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-relation-rail__total {
  margin-inline-start: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f5f5f4;
  color: #57534e;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.anime-detail-page .anime-relation-rail__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 3px;
  scrollbar-color: #d6d3d1 transparent;
  scrollbar-width: thin;
}

.anime-detail-page .anime-relation-rail__list {
  display: flex;
  gap: 8px;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anime-detail-page .anime-relation-rail__item {
  display: grid;
  grid-template-columns: auto minmax(128px, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 280px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: 11px;
  background: rgba(250, 250, 249, 0.72);
}

.anime-detail-page .anime-relation-rail__badge {
  padding: 3px 6px;
  border-radius: 6px;
  background: #fff7df;
  color: #92400e;
  font-size: 0.61rem;
  font-weight: 800;
  white-space: nowrap;
}

.anime-detail-page .anime-relation-rail__link {
  overflow: hidden;
  color: var(--anime-text-primary);
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-relation-rail__link:hover {
  color: #b45309;
}

.anime-detail-page .anime-relation-rail__link--unavailable {
  color: var(--anime-text-secondary);
}

body.dark .anime-detail-page .anime-relation-rail {
  border-color: rgba(214, 211, 209, 0.16);
  background: #1c1917;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-relation-rail__item {
  border-color: rgba(214, 211, 209, 0.14);
  background: #292524;
}

body.dark .anime-detail-page .anime-relation-rail__total {
  background: #292524;
  color: #d6d3d1;
}

body.dark .anime-detail-page .anime-relation-rail__badge {
  background: rgba(120, 53, 15, 0.32);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-relation-rail__link:hover {
  color: #fcd34d;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-relation-rail {
    padding: 12px;
  }

  .anime-detail-page .anime-relation-rail__item {
    max-width: 230px;
  }
}

/* Anime tracker: mirrors the supplied PSD's compact management states without
 * changing the server-side list form or its modal behavior. */

.anime-detail-page .anime-scores-card .anime-tracker-active {
  order: 2;
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.anime-detail-page .anime-scores-card .anime-tracker-active + .anime-list-panel {
  order: 3;
  margin-top: 0;
}

.anime-detail-page .anime-scores-card .anime-tracker-active ~ .anime-scores-grid {
  order: 4;
}

.anime-tracker-active__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.anime-tracker-status,
.anime-tracker-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 900;
  color: #1c1917;
}

.anime-tracker-status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6ee7c4;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.anime-tracker-rating {
  padding: 5px 9px;
  border-radius: 9px;
  background: #f5f5f4;
  color: #57534e;
  font-size: 0.66rem;
}

.anime-tracker-rating i {
  color: #f59e0b;
}

.anime-tracker-progress {
  padding: 10px;
  border: 1px solid #e7e5e4;
  border-radius: 15px;
  background: #fafaf9;
}

.anime-tracker-progress__tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e7e5e4;
}

.anime-tracker-progress__tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid #e7e5e4;
  border-radius: 9px;
  background: #fff;
  color: #78716c;
  font-size: 0.61rem;
  font-weight: 800;
}

.anime-tracker-progress__tab.is-active {
  border-color: #1c1917;
  background: #1c1917;
  color: #fff;
}

.anime-tracker-progress__tabs > b {
  margin-inline-start: auto;
  color: #1c1917;
  font-size: 0.72rem;
  white-space: nowrap;
}

.anime-tracker-progress__tabs small {
  color: #a8a29e;
  font-size: 0.58rem;
  font-weight: 700;
}

.anime-tracker-progress__bar {
  height: 7px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e5e4;
}

.anime-tracker-progress__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #10b981;
}

.anime-tracker-progress__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a8a29e;
  font-size: 0.62rem;
  font-weight: 700;
}

.anime-tracker-progress__footer > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #292524;
}

.anime-tracker-progress__footer button {
  width: 28px;
  height: 28px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  color: #57534e;
  font: 900 0.9rem inherit;
}

.anime-tracker-progress__footer button:disabled {
  opacity: 1;
  cursor: default;
}

.anime-tracker-progress__footer b {
  min-width: 14px;
  text-align: center;
  font-size: 0.77rem;
}

.anime-tracker-progress__download {
  display: block;
  margin-top: 8px;
  color: #a8a29e;
  font-size: 0.58rem;
  text-align: left;
}

@media (max-width: 390px) {
  .anime-tracker-progress__tabs {
    flex-wrap: wrap;
  }

  .anime-tracker-progress__tabs > b {
    margin-inline-start: 0;
  }

  .anime-tracker-progress__tab {
    font-size: 0.57rem;
  }
}

body.dark .anime-tracker-status {
  color: #f5f5f4;
}

body.dark .anime-tracker-rating,
body.dark .anime-tracker-progress {
  background: #292524;
  border-color: rgba(214, 211, 209, 0.16);
  color: #d6d3d1;
}

body.dark .anime-tracker-progress__tabs {
  border-color: rgba(214, 211, 209, 0.16);
}

body.dark .anime-tracker-progress__tab,
body.dark .anime-tracker-progress__footer button {
  background: #1c1917;
  border-color: rgba(214, 211, 209, 0.16);
  color: #d6d3d1;
}

body.dark .anime-tracker-progress__tab.is-active {
  background: #f5f5f4;
  color: #1c1917;
}

body.dark .anime-tracker-progress__tabs > b,
body.dark .anime-tracker-progress__footer > div {
  color: #f5f5f4;
}

/* PSD anime-detail sidebar: locally scoped tokens and surfaces. */

.anime-detail-page {
  --anime-stone-50: #fafaf9;
  --anime-stone-100: #f5f5f4;
  --anime-stone-200: #e7e5e4;
  --anime-stone-400: #a8a29e;
  --anime-stone-500: #78716c;
  --anime-stone-800: #292524;
  --anime-stone-900: #1c1917;
  --anime-amber-50: #fffbeb;
  --anime-amber-200: #fde68a;
  --anime-amber-500: #f59e0b;
  --anime-emerald-50: #ecfdf5;
  --anime-emerald-200: #a7f3d0;
  --anime-emerald-600: #059669;
  --anime-sky-200: #bae6fd;
  --anime-sky-500: #0ea5e9;
}

.anime-detail-page .anime-info-pane .anime-poster-card {
  overflow: visible;
  padding: 14px;
  border: 1px solid var(--anime-stone-200);
  border-radius: 24px;
  background: var(--anime-card-bg);
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.08);
}

.anime-detail-page .anime-poster-card__image {
  overflow: hidden;
  border-radius: 16px;
  background: var(--anime-stone-100);
  aspect-ratio: 3/4;
}

.anime-detail-page .anime-poster-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.anime-detail-page .anime-poster-timer {
  position: static;
  width: auto;
  margin: 12px 0 10px;
  padding: 12px;
  transform: none;
  border: 1px solid var(--anime-amber-200);
  border-radius: 16px;
  background: var(--anime-amber-50);
  color: #78350f;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(120, 53, 15, 0.07);
}

.anime-detail-page .anime-poster-timer,
.anime-detail-page .anime-poster-timer * {
  color: #78350f;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .uk-flex {
  gap: 7px;
}

.anime-detail-page .anime-poster-timer .uk-countdown-days,
.anime-detail-page .anime-poster-timer .uk-countdown-hours,
.anime-detail-page .anime-poster-timer .uk-countdown-minutes,
.anime-detail-page .anime-poster-timer .uk-countdown-seconds {
  font-size: 1rem;
}

.anime-detail-page .anime-sidebar-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update {
  min-height: 78px;
  padding: 10px;
  border-color: var(--anime-stone-200);
  border-radius: 14px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
  order: 0;
  margin: 0 0 0 8px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update > div {
  order: 0;
}

.anime-detail-page .anime-sidebar-update strong {
  color: var(--anime-emerald-600);
}

.anime-detail-page .anime-sidebar-update--quality strong {
  color: var(--anime-stone-900);
}

.anime-detail-page .anime-scores-card {
  padding: 14px;
  border-color: var(--anime-stone-200);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.07);
}

.anime-detail-page .anime-tracker-heading__count {
  margin-inline-start: auto;
}

.anime-detail-page .anime-tracker-progress__tab {
  cursor: pointer;
}

.anime-detail-page .anime-tracker-progress__footer button:not(:disabled) {
  cursor: pointer;
}

.anime-detail-page .anime-tracker-progress__footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.anime-tracker-save-status {
  min-height: 1.1em;
  margin: 7px 0 0;
  color: var(--anime-emerald-600);
  font-size: 0.62rem;
}

.anime-detail-page .anime-scores-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.anime-detail-page .rating-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--anime-amber-200);
  border-radius: 14px;
  background: var(--anime-stone-50);
}

.anime-detail-page .rating-item--mal {
  border-color: var(--anime-sky-200);
}

.anime-detail-page .rating-item header,
.anime-detail-page .rating-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.anime-detail-page .rating-item header b {
  margin-inline-end: auto;
  color: var(--anime-stone-900);
  font-size: 0.7rem;
}

.anime-detail-page .rating-item header > i {
  color: var(--anime-amber-500);
  font-size: 0.75rem;
}

.anime-detail-page .rating-item--mal header > i {
  color: var(--anime-sky-500);
}

.anime-detail-page .rating-item__source {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border-radius: 5px;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.56rem;
  font-weight: 900;
}

.anime-detail-page .rating-item--mal .rating-item__source {
  background: #e0f2fe;
  color: #0369a1;
}

.anime-detail-page .rating-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.anime-detail-page .rating-score strong {
  color: var(--anime-stone-900);
  font-size: 1rem;
}

.anime-detail-page .rating-score span,
.anime-detail-page .rating-item footer {
  color: var(--anime-stone-400);
  font-size: 0.58rem;
}

.anime-detail-page .rating-score em {
  margin-inline-start: auto;
  padding: 2px 4px;
  border: 1px solid var(--anime-amber-200);
  border-radius: 5px;
  color: #92400e;
  background: var(--anime-amber-50);
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 800;
}

.anime-detail-page .rating-item--mal .rating-score em {
  border-color: var(--anime-sky-200);
  color: #0369a1;
  background: #f0f9ff;
}

.anime-detail-page .rating-item__track {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--anime-stone-200);
}

.anime-detail-page .rating-item__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--anime-amber-500);
}

.anime-detail-page .rating-item--mal .rating-item__track i {
  background: var(--anime-sky-500);
}

body.dark .anime-detail-page .anime-info-pane .anime-poster-card,
body.dark .anime-detail-page .anime-scores-card {
  border-color: rgba(214, 211, 209, 0.16);
  background: #1c1917;
}

body.dark .anime-detail-page .anime-poster-timer {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.3);
}

body.dark .anime-detail-page .anime-poster-timer,
body.dark .anime-detail-page .anime-poster-timer * {
  color: #fde68a;
}

body.dark .anime-detail-page .anime-sidebar-update,
body.dark .anime-detail-page .rating-item {
  border-color: rgba(214, 211, 209, 0.16);
  background: #292524;
}

body.dark .anime-detail-page .anime-sidebar-update--quality strong,
body.dark .anime-detail-page .rating-item header b,
body.dark .anime-detail-page .rating-score strong {
  color: #f5f5f4;
}

body.dark .anime-detail-page .rating-item__track {
  background: #44403c;
}

@media (max-width: 359px) {
  .anime-detail-page .anime-sidebar-status,
  .anime-detail-page .anime-scores-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-poster-card {
    padding: 12px;
    border-radius: 18px;
  }

  .anime-detail-page .anime-tracker-heading p {
    display: none;
  }
}

.anime-detail-page .anime-info-card--names {
  border-color: var(--anime-stone-200);
  border-radius: 18px;
  background: var(--anime-stone-50);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.anime-detail-page .anime-info-card--names .anime-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
}

.anime-detail-page .anime-other-names-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--anime-amber-50);
  color: #b45309;
}

.anime-detail-page .anime-other-names-trigger {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--anime-stone-200);
  border-radius: 12px;
  background: var(--anime-card-bg);
  color: var(--anime-stone-800);
  font-weight: 800;
  text-decoration: none;
}

.anime-detail-page .anime-other-names-trigger::after {
  content: "\F104";
  margin-inline-start: auto;
  font: 900 0.75rem/1 "Font Awesome 6 Free";
}

body.dark .anime-detail-page .anime-info-card--names,
body.dark .anime-detail-page .anime-other-names-trigger {
  border-color: rgba(214, 211, 209, 0.16);
  background: #292524;
  color: #f5f5f4;
}

/* List management: a single RTL dialog system with a compact PSD-style trigger. */

.anime-detail-page .anime-scores-card .anime-list-panel {
  order: 2;
  width: 100%;
  margin-top: 0;
}

.anime-detail-page .anime-scores-card .anime-list-panel__summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "icon title arrow" "icon help arrow";
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 2px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid #1c1917;
  border-radius: 14px;
  background: #1c1917;
  color: #fff;
  box-shadow: 0 3px 8px rgba(28, 25, 23, 0.14);
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.anime-detail-page .anime-list-panel__summary-icon {
  grid-area: icon;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.11);
  color: #fcd34d;
  font-size: 0.92rem;
}

.anime-detail-page .anime-list-panel__summary-text {
  grid-area: title;
  overflow: hidden;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-list-panel__summary-help {
  grid-area: help;
  overflow: hidden;
  color: #d6d3d1;
  font-size: 0.61rem;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-list-panel__arrow {
  grid-area: arrow;
  color: #d6d3d1;
  font-size: 0.74rem;
  transition: transform 0.18s ease;
}

.anime-detail-page .anime-list-panel__summary:hover {
  border-color: #292524;
  background: #292524;
  color: #fff;
  box-shadow: 0 7px 16px rgba(28, 25, 23, 0.22);
  transform: translateY(-1px);
}

.anime-detail-page .anime-list-panel__summary:hover .anime-list-panel__arrow {
  transform: translateX(-2px);
}

.anime-detail-page .anime-list-panel__summary:active {
  transform: scale(0.985);
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.18);
}

.anime-detail-page .anime-list-panel__summary.status-selected {
  border-color: #d6d3d1;
  background: #fff;
  color: #292524;
  box-shadow: none;
}

.anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__summary-icon {
  background: #f5f5f4;
  color: #78716c;
}

.anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__summary-help,
.anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__arrow {
  color: #78716c;
}

.anime-detail-page .anime-list-panel__summary.status-selected:hover {
  border-color: #a8a29e;
  background: #fafaf9;
  color: #1c1917;
}

body.dark .anime-detail-page .anime-list-panel__summary.status-selected {
  border-color: #57534e;
  background: #292524;
  color: #f5f5f4;
}

body.dark .anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__summary-icon {
  background: #44403c;
  color: #fcd34d;
}

body.dark .anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__summary-help,
body.dark .anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__arrow {
  color: #d6d3d1;
}

body.dark .anime-detail-page .anime-list-panel__summary.status-selected:hover {
  border-color: #78716c;
  background: #44403c;
  color: #fff;
}

.anime-list-panel__overlay[hidden] {
  display: none;
}

.anime-list-panel__overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  direction: rtl;
}

.anime-list-panel__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(28, 25, 23, 0.65);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.anime-list-panel__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(94vw, 560px);
  max-height: min(100dvh - 32px, 720px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  border-radius: 24px;
  background: #fff;
  color: #1c1917;
  box-shadow: 0 28px 70px rgba(28, 25, 23, 0.32);
  font-family: "Vazirmatn", sans-serif;
  animation: animeListModalIn 0.2s ease-out;
}

@keyframes animeListModalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.anime-list-panel__handle {
  display: none;
}

.anime-list-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid #f0eeeb;
  background: rgba(250, 250, 249, 0.92);
}

.anime-list-panel__title-group,
.anime-list-panel__heading-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.anime-list-panel__poster {
  width: 48px;
  height: 64px;
  flex: 0 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.12);
}

.anime-list-panel__heading-row {
  gap: 6px;
}

.anime-list-panel__header h4 {
  margin: 0;
  color: #1c1917;
  font-size: 0.95rem;
  font-weight: 900;
}

.anime-list-panel__header p {
  overflow: hidden;
  margin: 3px 0 0;
  color: #78716c;
  font-size: 0.72rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-list-panel__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.anime-list-panel__close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #f5f5f4;
  color: #78716c;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: 0.18s ease;
}

.anime-list-panel__close:hover {
  background: #e7e5e4;
  color: #1c1917;
}

.anime-list-panel__form {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.anime-list-panel__scrollable {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}

.anime-list-panel__section h5,
.anime-list-panel__rating-heading h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #292524;
  font-size: 0.78rem;
  font-weight: 900;
}

.anime-list-panel__section h5 i {
  color: #d97706;
}

.anime-list-panel__status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.anime-list-panel__status-card {
  min-height: 48px;
  padding: 10px;
  border: 1px solid #e7e5e4;
  border-radius: 14px;
  background: #fafaf9;
  color: #44403c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: 800 0.72rem "Vazirmatn", sans-serif;
  text-align: right;
  transition: 0.16s ease;
}

.anime-list-panel__status-card > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.anime-list-panel__status-card:hover {
  border-color: #a8a29e;
  background: #f5f5f4;
}

.anime-list-panel__status-card .anime-list-panel__check {
  opacity: 0;
}

.anime-list-panel__status-card.is-selected {
  border-width: 2px;
  box-shadow: 0 2px 5px rgba(28, 25, 23, 0.08);
}

.anime-list-panel__status-card.is-selected .anime-list-panel__check {
  opacity: 1;
}

.anime-list-panel__status-card.is-wide {
  grid-column: 1/-1;
}

.anime-list-panel__status-card--emerald.is-selected {
  border-color: #10b981;
  background: #ecfdf5;
  color: #064e3b;
}

.anime-list-panel__status-card--emerald.is-selected i {
  color: #059669;
}

.anime-list-panel__status-card--blue.is-selected {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e3a8a;
}

.anime-list-panel__status-card--blue.is-selected i {
  color: #2563eb;
}

.anime-list-panel__status-card--amber.is-selected {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #78350f;
}

.anime-list-panel__status-card--amber.is-selected i {
  color: #d97706;
}

.anime-list-panel__status-card--rose.is-selected {
  border-color: #fb7185;
  background: #fff1f2;
  color: #881337;
}

.anime-list-panel__status-card--rose.is-selected i {
  color: #f43f5e;
}

.anime-list-panel__status-card--violet.is-selected {
  border-color: #8b5cf6;
  background: #f5f3ff;
  color: #4c1d95;
}

.anime-list-panel__status-card--violet.is-selected i {
  color: #7c3aed;
}

.anime-list-panel__progress {
  padding: 14px;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  background: #fafaf9;
}

.anime-list-panel__progress-top,
.anime-list-panel__progress-copy,
.anime-list-panel__rating-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.anime-list-panel__tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background: #fff;
}

.anime-list-panel__tabs button {
  min-height: 30px;
  padding: 4px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #57534e;
  cursor: pointer;
  font: 700 0.67rem "Vazirmatn", sans-serif;
}

.anime-list-panel__tabs button.is-active {
  background: #1c1917;
  color: #fff;
}

.anime-list-panel__progress-top > b {
  padding: 5px 8px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  font-size: 0.67rem;
  white-space: nowrap;
}

.anime-list-panel__progress-copy {
  margin: 13px 0 8px;
  color: #57534e;
  font-size: 0.7rem;
  font-weight: 700;
}

.anime-list-panel__progress-copy strong {
  color: #047857;
  font-size: 0.76rem;
}

.anime-list-panel__progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e5e4;
}

.anime-list-panel__progress-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #059669;
  transition: width 0.16s ease;
}

.anime-list-panel__stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.anime-list-panel__stepper button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background: #fff;
  color: #44403c;
  cursor: pointer;
}

.anime-list-panel__stepper button:hover {
  background: #f5f5f4;
}

.anime-list-panel__stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.anime-list-panel__stepper input {
  width: 100%;
  accent-color: #059669;
  cursor: pointer;
}

.anime-list-panel__presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #a8a29e;
  font-size: 0.62rem;
}

.anime-list-panel__presets button {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  color: #57534e;
  cursor: pointer;
  font: 700 0.64rem "Vazirmatn", sans-serif;
}

.anime-list-panel__presets button:hover {
  background: #f5f5f4;
}

.anime-list-panel__rating-heading > button {
  border: 0;
  background: none;
  color: #a8a29e;
  cursor: pointer;
  font: 700 0.67rem "Vazirmatn", sans-serif;
}

.anime-list-panel__rating-heading > button:hover {
  color: #e11d48;
}

.anime-list-panel__rating-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.anime-list-panel__rating-grid button {
  min-height: 38px;
  border: 1px solid #e7e5e4;
  border-radius: 11px;
  background: #fafaf9;
  color: #44403c;
  cursor: pointer;
  font-weight: 800;
}

.anime-list-panel__rating-grid button:hover {
  background: #f5f5f4;
}

.anime-list-panel__rating-grid button.is-lower {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.anime-list-panel__rating-grid button.is-selected {
  border-color: #d97706;
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.28);
}

.anime-list-panel__rating-feedback {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: #fafaf9;
  color: #a8a29e;
  font-size: 0.64rem;
}

.anime-list-panel__rating-feedback strong {
  color: #92400e;
}

.anime-list-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-top: 1px solid #e7e5e4;
  background: #fff;
}

.anime-list-panel__footer > div {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}

.anime-list-panel__footer button {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 13px;
  cursor: pointer;
  font: 800 0.72rem "Vazirmatn", sans-serif;
}

.anime-list-panel__remove {
  border: 1px solid #fecdd3;
  background: #fff;
  color: #e11d48;
}

.anime-list-panel__remove:hover {
  background: #fff1f2;
}

.anime-list-panel__cancel {
  border: 0;
  background: #f5f5f4;
  color: #44403c;
}

.anime-list-panel__cancel:hover {
  background: #e7e5e4;
}

.anime-list-panel__save {
  flex: 1;
  border: 0;
  background: #1c1917;
  color: #fff;
  box-shadow: 0 5px 12px rgba(28, 25, 23, 0.2);
}

.anime-list-panel__save:hover {
  background: #292524;
}

.anime-list-panel button:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.48);
  outline-offset: 2px;
}

body.dark .anime-list-panel__body,
body.dark .anime-list-panel__footer {
  border-color: #44403c;
  background: #1c1917;
  color: #f5f5f4;
}

body.dark .anime-list-panel__header {
  border-color: #44403c;
  background: #292524;
}

body.dark .anime-list-panel__header h4,
body.dark .anime-list-panel__section h5 {
  color: #fafaf9;
}

body.dark .anime-list-panel__header p,
body.dark .anime-list-panel__progress-copy {
  color: #d6d3d1;
}

body.dark .anime-list-panel__status-card,
body.dark .anime-list-panel__progress,
body.dark .anime-list-panel__rating-grid button,
body.dark .anime-list-panel__rating-feedback {
  border-color: #44403c;
  background: #292524;
  color: #e7e5e4;
}

body.dark .anime-list-panel__tabs,
body.dark .anime-list-panel__progress-top > b,
body.dark .anime-list-panel__stepper button,
body.dark .anime-list-panel__presets button {
  border-color: #44403c;
  background: #1c1917;
  color: #e7e5e4;
}

body.dark .anime-list-panel__cancel {
  background: #44403c;
  color: #f5f5f4;
}

/* Final mobile override: keep the header and the tab control inside their cards.
 * The navigation itself may scroll, but never the page or card containing it. */

@media (max-width: 639px) {
  .anime-detail-page .anime-page-header {
    align-items: flex-start;
    min-height: 0;
    height: auto;
    gap: 8px;
  }

  .anime-detail-page .anime-page-heading,
  .anime-detail-page .anime-page-title-wrap {
    min-width: 0;
  }

  .anime-detail-page .anime-page-heading {
    flex: 1 1 auto;
    align-items: flex-start;
  }

  .anime-detail-page .anime-page-title-wrap {
    flex: 1 1 auto;
  }

  .anime-detail-page .anime-page-title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
    text-overflow: ellipsis;
  }

  .anime-detail-page .anime-detail-card.anime-tabs-card {
    margin-top: 0;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #e7e5e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(28, 25, 23, 0.07);
  }

  .anime-detail-page .anime-tabs-card .tabs-nav-container,
  .anime-detail-page .anime-tabs-card .tabs-nav {
    display: none !important;
  }

  .anime-detail-page .anime-tabs-card .anime-tabs-card__content {
    margin-top: 10px;
    padding: 9px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
  }

  body.dark .anime-detail-page .anime-detail-card.anime-tabs-card {
    border-color: rgba(214, 211, 209, 0.2);
    background: #1c1917;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  }
}

@media (max-width: 560px) {
  .anime-list-panel__overlay {
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .anime-list-panel__body {
    max-height: calc(100dvh - 24px);
    border-width: 1px;
    border-radius: 20px;
  }

  .anime-list-panel__header {
    padding: 12px 14px;
  }

  .anime-list-panel__poster {
    width: 40px;
    height: 54px;
  }

  .anime-list-panel__scrollable {
    gap: 16px;
    padding: 14px;
  }

  .anime-list-panel__footer {
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  }

  .anime-list-panel__summary {
    padding: 10px;
  }
}

@media (max-width: 390px) {
  .anime-detail-page .anime-scores-card .anime-list-panel__summary.status-selected {
    grid-template-areas: "icon title arrow";
    padding-block: 10px;
  }

  .anime-detail-page .anime-list-panel__summary.status-selected .anime-list-panel__summary-help {
    display: none;
  }

  .anime-list-panel__footer .anime-list-panel__remove span {
    display: none;
  }

  .anime-list-panel__footer button {
    padding-inline: 10px;
  }
}

/* Keep the upcoming-release countdown compact on phones while retaining all time units. */

@media (max-width: 639px) {
  .anime-detail-page .anime-page-header {
    overflow: hidden;
  }

  .anime-detail-page .anime-page-heading {
    flex: 1 1 0;
    max-width: 100%;
  }

  .anime-detail-page .anime-poster-timer:has(.anime-upcoming-countdown) {
    margin-block: 8px;
    padding: 7px 8px;
  }

  .anime-detail-page .anime-upcoming-countdown {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    -moz-column-gap: 5px;
         column-gap: 5px;
    text-align: start;
  }

  .anime-detail-page .anime-upcoming-countdown .anime-countdown-title,
  .anime-detail-page .anime-upcoming-countdown .anime-countdown-week {
    grid-column: 1;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
  }

  .anime-detail-page .anime-upcoming-countdown .anime-countdown-title {
    grid-row: 1;
    font-size: 0.68rem;
  }

  .anime-detail-page .anime-upcoming-countdown .anime-countdown-week {
    grid-row: 2;
    font-size: 0.58rem;
  }

  .anime-detail-page .anime-upcoming-countdown .countdown {
    grid-column: 2;
    grid-row: 1/span 2;
    min-width: 0;
  }

  .anime-detail-page .anime-upcoming-countdown .countdown-timer {
    gap: 0;
  }

  .anime-detail-page .anime-upcoming-countdown .countdown-unit {
    padding-block: 1px;
  }

  .anime-detail-page .anime-upcoming-countdown .uk-countdown-days,
  .anime-detail-page .anime-upcoming-countdown .uk-countdown-hours,
  .anime-detail-page .anime-upcoming-countdown .uk-countdown-minutes,
  .anime-detail-page .anime-upcoming-countdown .uk-countdown-seconds {
    font-size: 0.8rem;
  }

  .anime-detail-page .anime-upcoming-countdown .uk-countdown-label {
    margin-top: 0;
    font-size: 0.48rem;
  }
}

/* Final mobile overflow guard for anime details. Intentional scrollers stay local. */

@media (max-width: 639px) {
  .anime-detail-page,
  .anime-detail-page .anime-tabs-card__content,
  .anime-detail-page .anime-tabs-card__content > *,
  .anime-detail-page .anime-info-layout,
  .anime-detail-page .anime-info-layout > *,
  .anime-detail-page .anime-detail-sidebar,
  .anime-detail-page .anime-detail-sidebar > *,
  .anime-detail-page .anime-info-main,
  .anime-detail-page .anime-info-main > *,
  .anime-detail-page .anime-detail-card,
  .anime-detail-page .anime-detail-card > * {
    min-width: 0;
    max-width: 100%;
  }

  /* This is a safety net, not the primary overflow fix: scrollable UI below
     explicitly owns its horizontal scrolling. */

  .anime-detail-page {
    overflow-x: clip;
  }

  .anime-detail-page .anime-info-layout,
  .anime-detail-page .anime-detail-sidebar,
  .anime-detail-page .anime-info-main,
  .anime-detail-page .anime-detail-card,
  .anime-detail-page .anime-tabs-card__content {
    box-sizing: border-box;
  }

  /* Long, unspaced API values must break inside their own cards. */

  .anime-detail-page .synopsis-text,
  .anime-detail-page .anime-genre-chips__label,
  .anime-detail-page .anime-relation-rail__header h2,
  .anime-detail-page .anime-relation-rail__link,
  .anime-detail-page .anime-technical-specs__item dd,
  .anime-detail-page .anime-technical-specs__item dd a,
  .anime-detail-page .anime-producers__preview,
  .anime-detail-page .anime-producers__card-name,
  .anime-detail-page .anime-other-names-list,
  .anime-detail-page .anime-other-names-list__value {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .anime-detail-page .anime-synopsis-card,
  .anime-detail-page .anime-synopsis-card .synopsis-content,
  .anime-detail-page .anime-synopsis-card .synopsis-text {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .anime-detail-page .synopsis-text :is(a, img, iframe, table, pre, code) {
    max-width: 100%;
  }

  .anime-detail-page .synopsis-text img,
  .anime-detail-page .synopsis-text iframe {
    display: block;
    width: 100%;
    height: auto;
    max-inline-size: 100%;
  }

  .anime-detail-page .synopsis-text iframe {
    aspect-ratio: 16/9;
  }

  .anime-detail-page .synopsis-text pre,
  .anime-detail-page .synopsis-text table {
    display: block;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .anime-detail-page .synopsis-text code {
    white-space: pre-wrap;
  }

  .anime-detail-page .anime-genre-chips {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding-inline-end: max(6px, env(safe-area-inset-left));
  }

  .anime-detail-page .anime-genre-chips > a {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .anime-detail-page .anime-relation-rail {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .anime-detail-page .anime-relation-rail__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    max-width: 100%;
  }

  .anime-detail-page .anime-relation-rail__header > div {
    min-width: 0;
  }

  .anime-detail-page .anime-relation-rail__header h2 {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .anime-detail-page .anime-relation-rail__total {
    grid-column: 1/-1;
    justify-self: start;
    margin: 6px 0 0;
    white-space: normal;
  }

  .anime-detail-page .anime-relation-rail__scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .anime-detail-page .anime-relation-rail__link {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .anime-detail-page .anime-poster-timer,
  .anime-detail-page .anime-sidebar-update,
  .anime-detail-page .anime-sidebar-update > div,
  .anime-detail-page .anime-sidebar-update__quality {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  .anime-detail-page .anime-poster-timer .uk-flex,
  .anime-detail-page .anime-poster-timer .countdown-timer {
    flex-wrap: wrap;
    min-width: 0;
  }

  .anime-detail-page .anime-poster-timer .countdown,
  .anime-detail-page .anime-poster-timer .countdown-unit {
    min-width: 0;
    flex: 1 1 2.4rem;
  }

  .anime-detail-page .anime-tracker-heading,
  .anime-detail-page .anime-tracker-active__summary,
  .anime-detail-page .anime-tracker-progress__tabs,
  .anime-detail-page .anime-tracker-progress__footer,
  .anime-detail-page .rating-item header,
  .anime-detail-page .rating-item footer {
    flex-wrap: wrap;
    min-width: 0;
  }

  .anime-detail-page .anime-tracker-heading > *,
  .anime-detail-page .anime-tracker-active__summary > *,
  .anime-detail-page .anime-tracker-progress__tabs > *,
  .anime-detail-page .anime-tracker-progress__footer > *,
  .anime-detail-page .rating-item header > *,
  .anime-detail-page .rating-item footer > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .anime-detail-page .anime-list-panel__summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    max-width: 100%;
  }

  .anime-detail-page .anime-list-panel__summary-text,
  .anime-detail-page .anime-list-panel__summary-help {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .anime-detail-page .anime-scores-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .anime-detail-page .anime-info-card--names .anime-card-title,
  .anime-detail-page .anime-other-names-trigger {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .anime-detail-page .anime-detail-modal__dialog {
    width: min(560px, 100%);
    max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  .anime-detail-page .anime-other-names-list > div,
  .anime-detail-page .anime-other-names-list__value {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Keep this final cascade scoped to the new sibling card, rather than the
 * historical poster overlay selectors above. */

.anime-detail-page .anime-info-pane .anime-release-summary .anime-poster-timer {
  width: 100%;
  margin: 0;
  padding: 12px;
  transform: none;
  border-radius: 16px;
}

.anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update,
.anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update__icon,
.anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update > div {
  margin: 0;
  order: initial;
}

.anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update__quality {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-release-summary .anime-poster-timer {
    padding: 9px 7px;
    border-radius: 14px;
  }
}

/* Episode cards mirror the compact download-tab composition in the PSD reference. */

.download-card--episode {
  min-height: 116px;
  justify-content: space-between;
  gap: 14px;
  border-radius: 16px;
}

.download-card--episode:hover {
  background: linear-gradient(180deg, var(--download-surface) 0%, rgba(245, 158, 11, 0.06) 100%);
  border-color: rgba(245, 158, 11, 0.9);
}

.download-card--episode .download-card__header {
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
}

.download-card__episode-marker {
  display: inline-block;
  width: 6px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f59e0b;
  transition: transform 0.2s ease;
}

.download-card--episode:hover .download-card__episode-marker {
  transform: scaleY(1.25);
}

.download-card--episode .download-card__title {
  color: var(--download-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.download-card--episode .download-card__actions {
  gap: 6px;
}

.download-card--episode .download-card__download {
  height: 36px;
  border-radius: 12px;
  background: #f59e0b;
  box-shadow: 0 2px 5px rgba(180, 83, 9, 0.16);
  font-weight: 800;
}

.download-card--episode .download-card__download:hover {
  background: #d97706;
}

.download-card--episode .download-card__play-btn {
  border: 1px solid var(--download-border);
  border-radius: 12px;
}

.download-card__download-icon {
  width: 15px;
  height: 15px;
}

body.dark .download-card--episode:hover {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(245, 158, 11, 0.1) 100%);
}

/* Premium anime section navigation — preserves the existing Blade tab behavior. */

.anime-tabs-card {
  --anime-tab-primary: #ffae20;
  --anime-tab-pill: #fff5df;
}

.anime-tabs-card .tabs-nav-container {
  border: 1px solid rgba(242, 175, 49, 0.24);
  border-radius: 21px;
  padding: 7px;
  background: linear-gradient(112deg, #fff 55%, #fffaf0);
  box-shadow: 0 15px 38px -31px rgba(156, 100, 22, 0.3);
}

.anime-tabs-card .tabs-nav {
  gap: 7px;
  isolation: isolate;
}

.anime-tabs-card .tab-item {
  z-index: 1;
}

.anime-tabs-card .tab-link {
  min-height: 59px;
  gap: 10px;
  padding: 12px 15px;
  font-size: 13px;
  color: #6e7888;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.anime-tabs-card .tab-link .tab-icon {
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  color: #ad8e54;
  width: 29px;
  height: 29px;
  background: rgba(245, 158, 11, 0.09);
  border-radius: 9px;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.25s, color 0.25s;
}

.anime-tabs-card .tab-link:hover {
  background: rgba(251, 190, 65, 0.1);
  color: #9a5b00;
  transform: translateY(-2px);
}

.anime-tabs-card .tab-link:hover .tab-icon {
  transform: translateY(-2px) rotate(-5deg);
}

.anime-tabs-card .tab-link.active {
  background: linear-gradient(128deg, #ffbc37, #f59e0b);
  color: #3f2b0c;
  border-color: rgba(226, 135, 0, 0.15);
  box-shadow: 0 11px 23px -15px rgba(213, 134, 4, 0.85);
}

.anime-tabs-card .tab-link.active .tab-icon {
  background: rgba(255, 255, 255, 0.28);
  color: #55360b;
  transform: scale(1.08);
}

.anime-tabs-card .tab-count {
  height: 22px;
  min-width: 24px;
  background: #fff1d2;
  color: #a96a04;
  font-size: 11px;
  padding: 0 7px;
}

.anime-tabs-card .tab-link.active .tab-count {
  background: rgba(255, 255, 255, 0.65);
  color: #67420b;
}

.anime-tabs-card .tab-link:focus-visible {
  outline: 2px solid #e69b1b;
  outline-offset: 2px;
}

.anime-tabs-card .tab-pane.active {
  animation: ap-anime-tab-appear 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes ap-anime-tab-appear {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.dark .anime-tabs-card .tabs-nav-container {
  background: linear-gradient(115deg, #222d3d, #2a2e34);
  border-color: #49422f;
}

body.dark .anime-tabs-card .tab-link {
  color: #bac7d5;
}

body.dark .anime-tabs-card .tab-link .tab-icon {
  color: #ebbd72;
  background: rgba(255, 185, 52, 0.1);
}

body.dark .anime-tabs-card .tab-link:hover {
  color: #ffd48e;
  background: rgba(255, 185, 52, 0.1);
}

body.dark .anime-tabs-card .tab-link.active {
  color: #35260c;
  background: linear-gradient(130deg, #ffd168, #f9ac26);
}

body.dark .anime-tabs-card .tab-link.active .tab-icon {
  color: #65440b;
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 1020px) and (min-width: 640px) {
  .anime-tabs-card .tab-link {
    padding: 10px 8px;
    font-size: 12px;
    gap: 5px;
  }

  .anime-tabs-card .tab-link .tab-icon {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }
}

@media (max-width: 639px) {
  .anime-tabs-card .tabs-nav-container {
    border-radius: 16px;
  }

  .anime-tabs-card .tab-link {
    min-height: 48px;
    padding: 9px 12px;
  }

  .anime-tabs-card .tabs-nav {
    scroll-snap-type: x proximity;
  }

  .anime-tabs-card .tab-item {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anime-tabs-card .tab-pane.active {
    animation: none;
  }

  .anime-tabs-card .tab-link,
  .anime-tabs-card .tab-link .tab-icon {
    transition: none;
    transform: none !important;
  }
}

/* Keep episode actions inside each grid cell on phones and narrow tablet cards.
   A download CTA and multiple fixed-width icon actions cannot fit on one line. */

@media (max-width: 767px) {
  .download-modern .download-series-panel__grid,
  .download-modern .download-series-panel__grid--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 359px) {
  .download-modern .download-series-panel__grid,
  .download-modern .download-series-panel__grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1279px) {
  .download-modern .download-series-panel__grid {
    width: 100%;
    min-width: 0;
  }

  .download-modern .download-series-panel__grid > .download-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .download-modern .download-series-panel__grid .download-card__header {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .download-modern .download-series-panel__grid .download-card__title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .download-modern .download-series-panel__grid .download-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    width: 100%;
    gap: 6px;
  }

  .download-modern .download-series-panel__grid .download-card__download {
    box-sizing: border-box;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 6px;
  }

  .download-modern .download-series-panel__grid .download-card__actions > :not(.download-card__download) {
    box-sizing: border-box;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    max-width: 100%;
  }
}

html.is-page-manga {
  overflow-y: hidden !important;
}

.page-manga-reader {
  overflow-y: unset !important;
}

.page-manga-reader :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
  right: 293px;
}

@media (min-width: 640px) {
  .page-manga-reader :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
    padding-right: 343px;
    right: 0;
  }
}

.page-manga-reader .space-reader {
  height: 300px;
}

.page-manga-reader .btn-error {
  display: inline-block;
  padding: 20px 18px;
  border-radius: 8px;
  background-color: #F8A008;
  color: #fff;
  transition: 0.3s;
  font-size: 15px;
  cursor: pointer;
  margin: 20px 0;
}

.page-manga-reader .btn-error:hover {
  opacity: 0.6;
}

.page-manga-reader .message {
  display: block;
  padding: 30px 0;
  text-align: center;
  font-weight: bold;
}

.page-manga-reader .loading-pizzel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3019607843);
  z-index: 9;
  padding-top: 50px;
  color: #fff;
  line-height: normal;
}

.page-manga-reader .btn-menu {
  top: 0;
  margin-right: 0;
  z-index: 4;
  opacity: 0.5;
  cursor: pointer;
  right: 0;
  padding: 31px 26px;
  position: sticky;
}

.page-manga-reader .btn-menu:hover {
  opacity: 1;
}

.page-manga-reader .box-img {
  position: relative;
}

.page-manga-reader .box-img .user-id {
  position: absolute;
  top: 38px;
  opacity: 0.6;
  z-index: 1;
  left: 0;
  right: 0;
  text-align: center;
}

.page-manga-reader .box-img canvas {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.page-manga-reader .box-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  direction: ltr;
  z-index: 1000;
}

.page-manga-reader .box-progress:after {
  content: "";
  width: var(--bar);
  display: block;
  height: 5px;
  background-color: #F8A008;
}

.page-manga-reader .manga-reader {
  height: 100%;
}

.page-manga-reader body.uk-offcanvas-container {
  touch-action: auto !important;
  overflow-y: unset !important;
}

.page-manga-reader .uk-offcanvas-overlay {
  width: auto;
}

.page-manga-reader .loadingBox {
  z-index: 1;
  color: #fff;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.45);
}

.page-manga-reader .uk-offcanvas-bar {
  min-width: 300px;
  background-color: #fff;
  color: #323232;
  padding: 15px;
}

.page-manga-reader .uk-offcanvas-bar .chapter {
  display: flex;
  gap: 5px;
  padding: 7px 5px;
  font-weight: bold;
}

.page-manga-reader .uk-offcanvas-bar .info .title {
  margin-top: 6px;
  display: inline-block;
  color: #000;
  margin-bottom: 25px;
  font-weight: bold;
}

.page-manga-reader .uk-offcanvas-bar .info .title:hover {
  opacity: 0.6;
}

.page-manga-reader .uk-offcanvas-bar .panel-top {
  margin-bottom: 5px;
}

.page-manga-reader .uk-offcanvas-bar .panel-top .uk-offcanvas-close {
  color: #323232;
  position: relative;
  top: auto;
  left: auto;
  padding: 13px;
  border-radius: 50%;
  transition: 0.3s;
}

.page-manga-reader .uk-offcanvas-bar .panel-top .uk-offcanvas-close:hover {
  background-color: #f0f1f2;
}

.page-manga-reader .uk-offcanvas-bar .panel-top .btn-pin {
  padding: 8px;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}

.page-manga-reader .uk-offcanvas-bar .panel-top .btn-pin:hover {
  background-color: #f0f1f2;
}

.page-manga-reader .box-bar {
  display: flex;
  gap: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 10px;
}

.page-manga-reader .box-bar .box-select {
  flex: 1;
  position: relative;
}

.page-manga-reader .box-bar .box-bar-btn {
  width: 35px;
}

.page-manga-reader .box-bar > * {
  background-color: #f0f1f2;
  padding: 15px 5px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.page-manga-reader .box-bar > *:hover {
  background-color: #e3e3e3;
}

.page-manga-reader .box-bar .dropdownBody {
  position: absolute;
  top: 60px;
  overflow-y: auto;
  height: 300px;
  width: 100%;
  background-color: #f0f1f2;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: -5px;
  border-radius: 5px;
  z-index: 1;
}

.page-manga-reader .box-bar .dropdownBody .item {
  padding: 5px 10px;
  border-radius: 4px;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
}

.page-manga-reader .box-bar .dropdownBody .item.active,
.page-manga-reader .box-bar .dropdownBody .item:hover {
  background-color: #F8A008 !important;
  color: #fff;
}

.page-manga-reader .box-bar .select {
  display: flex;
  width: 100%;
  align-items: center;
  margin: -15px 5px;
  margin-left: 0;
}

.page-manga-reader .box-column-2 {
  display: flex;
  flex-wrap: wrap;
  width: var(--col-size);
  margin: auto;
}

.page-manga-reader .box-column-2 .image-item {
  width: 50%;
}

.page-manga-reader .box-column-2 .image-item canvas {
  width: 100% !important;
}

.page-manga-reader .box-column-2.page-0 .image-item:first-child {
  cursor: default !important;
}

.page-manga-reader .panel * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.page-manga-reader .panel .box-btn {
  background-color: #f0f1f2;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

.page-manga-reader .panel .box-btn:hover {
  background-color: #e3e3e3;
}

.page-manga-reader .panel .box-btn.active {
  background-color: #ffe6b4 !important;
  color: #5e3f01 !important;
}

.page-manga-reader .panel .box-columns .box-btn {
  width: 50%;
  text-align: center;
  margin-bottom: 0;
  justify-content: center;
}

.page-manga-reader .img {
  margin: 0 auto;
  font-weight: bold;
  color: #f0506e;
  font-size: 20px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.page-manga-reader .img:not(.error):after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
}

.page-manga-reader .isEnableInvert .img img,
.page-manga-reader .isEnableInvert canvas {
  filter: invert(1);
}

.page-manga-reader .js-group-files {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.page-manga-reader .js-group-files .image-item .nextEs {
  PADDING: 13PX;
  TEXT-ALIGN: center;
  font-size: 18px;
  cursor: pointer;
  background-color: #ffe6b4;
  color: #5e3f01;
  transition: 0.3s;
}

.page-manga-reader .js-group-files .image-item .nextEs:hover {
  opacity: 0.6;
}

.page-manga-reader .js-group-files.isPage .image-item:first-child {
  cursor: url(/images/arrow-right.webp?c1f5d3f3f014dc08b78716d3578c8089), auto;
}

.page-manga-reader .js-group-files.isPage:not(.isEnd) .image-item:last-child {
  cursor: url(/images/arrow-left.webp?99a2c79bca72b6385d921ce0245a89d3), auto;
}

.page-manga-reader .box-bottom {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  padding: 0 11px;
}

.page-manga-reader .box-bottom > * {
  flex: 1;
}

.page-manga-reader .box-bottom .nextEs {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  background-color: #ffecd0;
  color: #FF9800;
  cursor: pointer;
  padding: 10px;
  margin-top: 100px;
  transition: 0.3s;
  border-radius: 5px;
  font-weight: bold;
}

.page-manga-reader .box-bottom .nextEs > * {
  flex: 1;
  text-align: center;
}

.page-manga-reader .box-bottom .nextEs:hover {
  opacity: 0.6;
}

.page-manga-reader.reader-dark {
  background-color: #060616;
}

.page-manga-reader.reader-dark .btn-menu {
  color: #fff;
}

.page-manga-reader.reader-dark body {
  background-color: #060616;
}

.page-manga-reader.reader-dark .box-top {
  background-color: rgba(72, 72, 72, 0.5882352941);
  color: #fff;
}

.page-manga-reader.reader-dark .box-top.uk-active {
  background-color: rgba(72, 72, 72, 0.4588235294);
}

.page-manga-reader.reader-dark .box-top .menu:hover {
  background-color: #6c6c6c;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar {
  background-color: #484848;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .info .title {
  color: #fff;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .box-btn {
  background-color: #6c6c6c;
  color: #fff;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .box-btn:hover {
  background-color: #787878;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .panel-top .btn-pin {
  color: #fff;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .panel-top .btn-pin:hover {
  background-color: #6c6c6c;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .panel-top .uk-close {
  color: #fff;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .panel-top .uk-close:hover {
  background-color: #6c6c6c;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .box-bar > * {
  background-color: #6c6c6c;
  color: #fff;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .box-bar > *:hover {
  background-color: #787878;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .dropdownBody {
  background-color: #6c6c6c;
}

.page-manga-reader.reader-dark .uk-offcanvas-bar .dropdownBody .item {
  color: #fff;
}

.page-manga-reader h1 {
  font-size: 19px;
  text-align: center;
  padding: 40px;
}

@media (min-width: 640px) {
  .page-manga-reader .modal-comment-reader [class*=uk-modal-close-] {
    top: 15px;
  }
}

.page-manga-reader .modal-comment-reader .uk-alert {
  margin: 0;
}

.page-manga-reader .modal-comment-reader .modal-title {
  font-weight: 500;
  font-size: 16px;
}

.page-manga-reader .modal-comment-reader .uk-modal-dialog {
  border-radius: 5px;
  overflow: hidden;
}

.page-manga-reader .modal-comment-reader .uk-modal-header {
  margin-bottom: 5px;
  padding-right: 15px;
}

.page-manga-reader .modal-comment-reader .uk-modal-dialog {
  width: 100%;
  background-color: #f5f5f9;
}

.page-manga-reader .modal-comment-reader .uk-modal-dialog .bg {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px;
}

.page-manga-reader .modal-comment-reader .uk-modal-dialog .box-comment {
  padding: 15px;
}

.manga-loop .uk-panel .top .right-status.status_manga_1 {
  background-color: #fa5661;
}

.manga-loop .uk-panel .top .right-status.status_manga_2 {
  background-color: #4caf50;
}

.manga-loop .uk-panel .top .right-status.status_manga_3 {
  background-color: #1e68f0;
}

.manga-loop .uk-panel .top .right-status.status_manga_4 {
  background-color: #888;
}

.manga-loop .uk-panel .back {
  border-radius: 5px !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.manga-loop .uk-panel .back .back-bottom {
  flex: 1;
  border-radius: 10px 10px 0 0 !important;
}

@font-face {
  font-family: Vazir;
  src: url(/fonts/Vazir.eot?04ac39674fe2de77c9718abaca889f7d);
  src: url(/fonts/Vazir.eot?04ac39674fe2de77c9718abaca889f7d) format("embedded-opentype"), url(/fonts/Vazir2.woff2?fe3264bd401a1c30a0093db28ce60aec) format("woff2"), url(/fonts/Vazir2.woff?d39b0f6916be4f952d7d46d90dee0277) format("woff"), url(/fonts/Vazir.ttf?2c96154baf81b69429f42b7d84a9efa9) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@keyframes schedule-hub-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

ul {
  padding: 0;
  margin: 0;
}

.flex-1 {
  flex: 1;
}

.overflow-none {
  overflow: unset !important;
}

.uk-slidenav-next {
  transform: rotate(180deg) !important;
}

.uk-slidenav-previous {
  transform: rotate(180deg) !important;
}

.uk-lightbox {
  background-color: rgba(0, 0, 0, 0.231372549);
}

.leoIcon {
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block;
  fill: currentcolor;
  line-height: 0;
}

.leoIcon [stroke*="#"] {
  stroke: currentcolor;
}

.uk-notification-message.uk-notification-message-danger {
  color: #f00 !important;
  background-color: #fff0f2;
}

.cursor-pointer {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pre-line {
  white-space: pre-line;
}

.h-10 {
  height: 10px;
}

.h-20 {
  height: 20px;
}

.h-30 {
  height: 30px;
}

.h-5 {
  height: 5px;
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
  font-family: Vazir;
}

.uk-totop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #f6a504;
  padding: 16px 13px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  z-index: 1;
  transform: translate(0, 150%);
  transition: 0.3s all;
}

.uk-totop:focus {
  color: #fff;
}

.uk-icon.uk-totop.go-to-down {
  transform: translate(0, 0);
  transition: 0.3s all;
}

.uk-alert-primary {
  background: #e2f3ff;
  color: #0073c3;
}

.uk-alert-warning {
  color: #9c4221;
  background: #fff4e5;
  border: 1px solid rgba(255, 160, 67, 0.35);
  box-shadow: 0 12px 24px rgba(255, 160, 67, 0.08);
}

.uk-button-primary {
  background-color: #f6a504 !important;
  border-radius: 5px;
  transition: 0.3s all;
}

.uk-button-primary:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.uk-button {
  text-transform: none;
}

.ap-ad-banner {
  margin: 36px auto;
  padding: 0 16px;
}

.ap-ad-banner.home-ad-banner {
  margin-top: 28px;
}

.ap-ad-banner__wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(246, 165, 4, 0.12), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 45px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 960px) {
  .ap-ad-banner__wrapper {
    padding: 18px;
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .ap-ad-banner__wrapper {
    padding: 16px;
    border-radius: 18px;
  }
}

.ap-ad-banner__label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.12);
}

.ap-ad-banner__link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65));
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ap-ad-banner__link:hover,
.ap-ad-banner__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
}

.ap-ad-banner__link--static {
  pointer-events: none;
}

.ap-ad-banner__picture {
  display: block;
  width: 100%;
  aspect-ratio: 6/1;
}

.ap-ad-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ap-ad-text {
  margin: 36px auto;
  padding: 0 16px;
}

.ap-ad-text__wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(14, 165, 233, 0.1), rgba(14, 116, 144, 0.08));
  border: 1px solid rgba(14, 116, 144, 0.16);
  box-shadow: 0 22px 45px rgba(14, 116, 144, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 768px) {
  .ap-ad-text__wrapper {
    padding: 24px;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .ap-ad-text__wrapper {
    padding: 20px;
    border-radius: 18px;
  }
}

.ap-ad-text__label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0891b2;
  background: rgba(8, 145, 178, 0.12);
}

.ap-ad-text__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}

@media (max-width: 768px) {
  .ap-ad-text__title {
    font-size: 1.2rem;
  }
}

.ap-ad-text__body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.9;
  color: #334155;
  white-space: pre-wrap;
}

.ap-ad-text__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ap-ad-text__cta::after {
  content: "\2192";
  display: inline-block;
  font-size: 1rem;
}

.ap-ad-text__cta:hover,
.ap-ad-text__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(14, 165, 233, 0.32);
}

.anime-ad-text {
  margin-top: 28px;
}

.archive-ad-banner {
  margin-top: 24px;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: #f6a504;
}

.uk-card-primary {
  background-color: #fff3db;
}

.uk-card-primary * {
  color: #f6a504 !important;
}

.loadingBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 1;
}

.loadingBox svg {
  margin: auto;
}

body {
  background-color: var(--ap-background-color);
  color: var(--ap-text-color);
  font-size: 14px;
  overflow-y: auto !important;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 639px) {
  .uk-child-width-1-1.uk-child-width-1-2\@s > * {
    width: 50%;
  }
}

h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
  font-family: Vazir;
  margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

* {
  font-family: Vazir;
  box-sizing: border-box !important;
  text-decoration: none;
}

*:hover {
  text-decoration: none !important;
  outline: none !important;
}

[leoicon=heart] .a,
[leoicon=heart] .b {
  fill: #f6a504;
}

[leoicon=heart] .a {
  stroke: rgba(0, 0, 0, 0);
  opacity: 0;
}

[leoicon=heart] .c {
  stroke: none;
}

[leoicon=heart] .d {
  fill: none;
}

[leoicon=account_heart] .a,
[leoicon=account_heart] .b {
  fill: #b2b2b2;
}

[leoicon=account_heart] .a {
  stroke: rgba(0, 0, 0, 0);
  opacity: 0;
}

[leoicon=account_heart] .c {
  stroke: none;
}

[leoicon=account_heart] .d {
  fill: none;
}

.message {
  text-align: center;
  padding: 10px 5px;
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
}

.message.success {
  background-color: rgba(50, 210, 150, 0.13);
  color: #32d296;
  border-color: rgba(50, 210, 150, 0.26);
}

.message.warning {
  background-color: rgba(250, 160, 90, 0.32);
  color: rgb(255, 132, 36);
  border-color: rgba(250, 160, 90, 0.21);
}

.message.error {
  background-color: rgba(255, 0, 47, 0.12);
  color: rgb(255, 51, 89);
  border-color: rgba(255, 0, 48, 0.15);
}

a {
  color: var(--accent, #f3a303);
  transition: 0.5s color;
}

a:hover {
  color: #c47f00;
}

.uk-notification-message-success {
  background-color: rgb(50, 210, 150);
  color: rgb(255, 252, 252);
}

.uk-notification-close {
  color: rgb(255, 255, 255);
  left: 15px;
  right: auto;
  padding: 0;
  top: 15px;
}

.uk-notification-message {
  /* padding-right: 40px; */
  border-radius: 4px;
  padding: 10px;
  font-size: 17px;
}

*:focus {
  outline: 0;
}

#modal-global-search .uk-modal-dialog {
  background: rgba(0, 0, 0, 0.4509803922);
}

.search-suggestion {
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  z-index: 1;
  overflow-x: hidden;
}

/*@media (max-width: 959px) {*/

.search-global-main {
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
}

#modal-global-search .uk-modal-dialog {
  display: flex;
  flex-direction: column;
}

.search-global-main > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.items-search-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.items-search-body .more {
  display: inline-block;
  padding: 2px 15px;
  background-color: rgba(76, 175, 80, 0.1019607843);
  color: #4caf50;
  border-radius: 5px;
  transition: 0.3s;
  cursor: pointer;
  font-size: 12px;
}

.items-search-body .more:hover {
  opacity: 0.6;
}

.search-suggestion input[type=text] {
  display: block;
  width: 100%;
  padding: 7px;
  text-align: center;
  background-color: rgb(245, 245, 249);
  font-size: 15px;
  border: 0;
  border-radius: 3px;
  direction: ltr;
}

.search-suggestion .type {
  margin-top: 2px;
  z-index: 9;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
}

div#modal-global-search .close {
  padding: 11px !important;
}

div#modal-global-search .uk-modal-dialog {
  height: 100%;
}

.title-search-group {
  transition: 0.5s all;
  font-size: 15px;
  color: rgb(111, 114, 133);
  display: block;
  background-color: rgb(245, 245, 249);
  padding: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  text-align: right;
  font-weight: bold;
  margin-top: 5px;
}

.title-search-group a.more {
  display: block;
  background-color: rgb(243, 243, 243);
  color: rgb(95, 95, 95);
  text-align: center;
  padding: 6px;
  margin: 13px 0;
  border-radius: 3px;
  transition: 0.5s all;
}

.title-search-group:hover {
  background-color: rgb(221, 221, 221);
  color: rgb(40, 40, 40);
  transition: 0.5s all;
}

.item-search:hover {
  background-color: #fff8eb;
  transition: 0.5s all;
}

.sub-title-search {
  padding: 5px;
  direction: rtl;
  text-align: right;
}

.sub-title-search .global-search-meta {
  justify-content: flex-start;
}

.sub-title-search .global-search-meta__history {
  margin-right: auto;
}

.items-search-body .noItems {
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

[leoicon=close] {
  cursor: pointer;
}

.search-icon svg {
  width: 1.2em;
  height: 1.2em;
  /*fill: rgb(111, 114, 133);*/
}

.search-widget-2 {
  position: relative;
}

.search-widget-2 .search-icon {
  cursor: pointer;
}

.search-widget-2 .search-widget-2-body {
  display: flex;
  align-items: center;
}

.search-widget-2 .advanced-search-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.search-widget-2 .advanced-search-toggle:hover,
.search-widget-2 .advanced-search-toggle:focus {
  color: #f3a303;
  outline: none;
}

.search-widget-2 .search-suggestion {
  box-shadow: 0 0 7px #e1e1e1;
  margin: 30px 0 0;
  position: absolute;
  left: auto;
  right: 0;
  border-radius: 5px;
  width: min(600px, 100vw - 32px);
  max-width: 100%;
}

@media (max-width: 800px) {
  .search-widget-2 .search-suggestion {
    margin-top: 15px;
    right: 16px;
    width: calc(100vw - 32px);
  }
}

.search-widget-2 .search-suggestion .data-left {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-widget-2 .search-suggestion .data-left > div:nth-child(1) {
  flex: 1;
}

.search-widget-2 .search-suggestion .uk-width-expand {
  min-width: 0;
}

.search-widget-2 .search-suggestion .trending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.search-widget-2 .search-suggestion .trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  color: inherit;
  width: 100%;
}

.search-widget-2 .search-suggestion .trending-item:hover {
  background-color: #f5f5f9;
}

.search-widget-2 .search-suggestion .trending-item img {
  width: 50px;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.search-widget-2 .search-suggestion .trending-info {
  min-width: 0;
  flex: 1;
  text-align: right;
}

.search-widget-2 .search-suggestion .trending-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 70px;
}

.search-widget-2 .search-suggestion .trending-title {
  order: 1;
  align-self: flex-start;
  max-width: 100%;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  text-align: left;
  display: block;
  min-width: 0;
}

.search-widget-2 .search-suggestion .trending-meta {
  order: 2;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-widget-2 .search-suggestion .trending-type,
.search-widget-2 .search-suggestion .trending-score {
  font-size: 13px;
  color: #6f7285;
  min-width: 0;
}

.search-widget-2 .search-suggestion .trending-separator {
  font-size: 13px;
  color: #000;
  min-width: 0;
}

.search-widget-2 .search-suggestion .trending-type,
.search-widget-2 .search-suggestion .trending-score {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-widget-2 .search-suggestion img {
  width: 50px;
  border-radius: 2px;
}

.search-widget-2 .search-suggestion .global-search__advanced {
  position: relative;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  background-color: #f9fafb;
  padding: 12px;
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-inner {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background-color: #ffffff;
  overflow: hidden;
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-frame-wrapper {
  position: relative;
  padding-top: 60%;
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  font-size: 0.9rem;
  color: #475569;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(203, 213, 225, 0.08));
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close {
  position: absolute;
  top: 16px;
  left: 16px;
  border: 0;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close:hover,
.search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close:focus {
  background: rgba(243, 163, 3, 0.15);
  color: #f3a303;
  outline: none;
}

.search-widget-2 .input-text {
  border-color: rgba(0, 0, 0, 0);
  background-color: transparent;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  flex-wrap: nowrap;
}

.search-widget-2 .input-text form {
  flex: 1;
  display: flex;
}

.search-widget-2 .input-text .input {
  line-height: 20px;
  padding: 0;
  border: 0;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(72, 75, 98);
  width: 100%;
}

.search-widget-2 .input-text .input:hover {
  color: #1e87f0;
  transition: 0.3s all;
}

.search-widget-2 .input-text .advanced-search-toggle,
.search-widget-2 .input-text .search-icon {
  flex-shrink: 0;
}

.search-widget-2 .search-refresh {
  background-color: #f8f8f8;
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

@media (min-width: 900px) {
  .search-widget-2 > .input-text .placeholder {
    display: block !important;
    width: 250px;
    color: #B4B2B2;
    font-size: 14px;
  }
}

.search-widget-2 .box-group-title {
  padding: 8px;
  background-color: rgba(76, 175, 80, 0.1215686275);
  font-weight: bold;
  font-size: 15px;
  color: #4caf50;
}

.search-widget-2 span.split {
  background-color: #e2e2e2;
  width: 1px;
  margin: 0 8px;
}

.search-widget-2 svg {
  width: 24px;
  height: 24px;
  color: #b4b2b2;
}

a.item-search {
  padding: 8px 5px;
  display: block;
  border-bottom: 1px solid rgb(222, 226, 234);
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
}

.item-search .uk-grid > .uk-width-expand,
.item-search .data-left {
  min-width: 0;
}

.item-search .data-left {
  text-align: right;
  direction: rtl;
}

.item-search .data-left .uk-grid {
  justify-content: flex-end;
}

.item-search .title-search {
  max-width: 100%;
  display: block;
}

.sub-title-search > span {
  margin-left: 10px;
}

.title-search {
  text-align: right;
  direction: rtl;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-down {
  padding: 8px 0 0 !important;
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 0;
}

.uk-checkbox {
  border-radius: 3px;
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
  background-color: #f6b801;
}

ul.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 999px;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

ul.pagination .page-item {
  position: relative;
}

ul.pagination .page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  color: #5b6471;
  background-color: transparent;
  border-radius: 14px;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px transparent;
}

ul.pagination li:not(.active):not(.disabled) .page-link:hover {
  color: #1f2a44;
  background-color: #f7f8fb;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-0.5px);
}

ul.pagination li.active .page-link {
  background-image: linear-gradient(135deg, #f59e0b, #fbb03b);
  color: #fff;
  box-shadow: 0 12px 30px rgba(251, 146, 60, 0.32);
  cursor: default;
}

ul.pagination li.disabled .page-link {
  background-color: transparent;
  color: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
}

.modern-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

.modern-pagination__bar {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(145deg, #ffffff, #f7f9fb);
  border-radius: 999px;
  border: 1px solid #e5eaf2;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}

.modern-pagination__list {
  flex: 1;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.modern-pagination__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.modern-pagination__arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.modern-pagination__arrow-btn:hover {
  background: #f7f8fb;
  color: #0f172a;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.modern-pagination__arrow-btn--disabled {
  opacity: 0.35;
  background: transparent;
  box-shadow: none;
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
}

.modern-pagination__arrow-icon {
  width: 18px;
  height: 18px;
}

.page-ellipsis .page-dots {
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: 700;
  color: #9aa3b5;
}

.page-link--ghost {
  color: #9aa3b5;
}

.page-link--jump {
  width: 64px;
  height: 40px;
  padding: 0 8px;
  background: #fff7ed;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.8), 0 12px 28px rgba(251, 191, 36, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #b45309;
}

.page-jump-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-weight: 700;
  color: #b45309;
}

.page-jump-hint {
  font-size: 11px;
  color: #f59e0b;
  opacity: 0.6;
}

@media (max-width: 820px) {
  ul.pagination {
    flex-wrap: wrap;
  }

  .modern-pagination__bar {
    padding: 8px 12px;
    gap: 6px;
  }

  .modern-pagination__arrow-btn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 600px) {
  ul.pagination {
    gap: 6px;
  }

  ul.pagination .page-link,
  .page-link--jump {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }

  .page-link--jump {
    width: 52px;
  }

  .modern-pagination__arrow-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 400px) {
  ul.pagination {
    gap: 4px;
  }

  ul.pagination .page-link,
  .page-link--jump {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
  }

  .page-link--jump {
    width: 48px;
  }

  .modern-pagination__arrow-btn {
    width: 28px;
    height: 28px;
  }
}

.form input {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  min-width: 100%;
  max-width: 100%;
  border: 1px solid rgb(211, 214, 224);
  border-radius: 5px;
  padding: 8px 15px;
  color: rgb(72, 75, 98);
  font-size: 15px;
  transition: all 0.5s;
  margin: 12px;
  margin-right: 17px;
}

.form textarea {
  min-height: 130px;
  min-width: 100%;
  max-width: 100%;
  border: 1px solid rgb(211, 214, 224);
  border-radius: 5px;
  padding: 8px 15px;
  color: rgb(72, 75, 98);
  font-size: 15px;
  transition: all 0.5s;
  margin-top: 12px;
  width: 100%;
  display: block;
}

.uk-offcanvas-bar {
  background-color: rgb(255, 255, 255);
  color: rgb(33, 33, 33);
  display: flex;
  flex-direction: column;
}

.uk-offcanvas-bar .uk-navbar-nav {
  flex: 1;
}

.uk-offcanvas-bar .uk-navbar-nav > li .leoIcon {
  width: 35px;
  margin: 0;
}

.uk-offcanvas-bar .uk-navbar-nav > li > a {
  padding-right: 0 !important;
  display: flex;
  justify-content: flex-start;
  flex: 1;
}

.uk-offcanvas-bar .social-links {
  display: flex;
  justify-content: space-around;
}

.uk-offcanvas-bar .social-links svg {
  width: 29px;
}

.uk-offcanvas-bar .social-links a {
  color: #5a5a5a;
}

.uk-offcanvas-bar li {
  display: block;
}

.uk-offcanvas-bar li a {
  text-align: right;
  min-height: auto;
  padding: 10px !important;
  display: block;
  color: inherit !important;
}

.uk-offcanvas-bar li a span {
  margin-left: 12px;
}

.uk-offcanvas-bar ul.uk-navbar-nav {
  display: block;
}

.uk-offcanvas-bar ul.uk-navbar-nav .uk-parent a:after {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #b3b3b3;
  float: left;
  border-radius: 2px;
}

.uk-offcanvas-close {
  left: 20px;
  right: auto;
  color: #000;
}

.uk-offcanvas-close svg {
  color: rgb(0, 0, 0);
}

.uk-modal-footer button:empty {
  display: none;
}

.header {
  margin-bottom: 30px;
}

.header .li-logo img {
  max-width: 104px;
}

.header .uk-navbar-right a {
  color: #9A9898;
}

.header .uk-navbar-right .menu {
  padding: 9px 10px;
  background-color: #f8f8f8;
  border-radius: 5px;
  color: #464646;
  cursor: pointer;
}

.header .uk-dropdown-nav {
  padding-top: 10px;
}

.header .uk-dropdown-nav a {
  font-weight: bold;
  display: inline-block;
  padding: 2px 15px;
  margin: 5px 0;
  padding-right: 30px;
  border-radius: 5px 0 0 5px;
  transition: 0.3s all;
}

.header .uk-dropdown-nav a:hover {
  background-color: #F1F3F5;
  color: #585858;
  transition: 0.3s all;
}

.header .uk-dropdown-nav .uk-nav-header {
  padding-right: 30px;
  font-weight: bold;
  color: #f6a504;
  min-width: 140px;
}

.header .uk-navbar {
  border-bottom: 1px solid rgba(214, 214, 214, 0.25);
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
  border-radius: 5px;
  padding: 21px 15px;
}

.header .uk-navbar-nav > li > a {
  min-height: 38px;
}

.header .uk-navbar-nav > li > a .leoIcon {
  margin-left: -9px;
}

.header .uk-navbar-nav > li > a:hover {
  background-color: #F1F3F5;
  color: #585858;
  border-radius: 5px;
}

.header .uk-navbar-left .box {
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  width: 50px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  color: #F6A504;
}

.header .uk-navbar-left > ul > li > a {
  min-height: auto;
}

.header .uk-navbar-left > ul > li:last-of-type {
  margin-right: 8px;
}

.header .uk-dropdown {
  margin-top: 0;
  border-radius: 0 0 5px 5px;
  padding: 0;
  padding-bottom: 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  max-width: 350px;
}

.header .uk-dropdown:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 2px;
  bottom: 10px;
  background-color: #F6A504;
}

@media (max-width: 639px) {
  .header .uk-navbar {
    padding: 5px;
  }
}

.header-top {
  margin-bottom: 10px;
}

.header-top .logo img {
  max-height: 60px;
}

.header-top .register,
.header-top .login,
.header-top .account {
  padding: 9px 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  font-family: "Vazir";
  width: 95px;
}

.header-top .register .leoIcon,
.header-top .login .leoIcon,
.header-top .account .leoIcon {
  margin-left: 5px;
  width: 14px;
}

.header-top .account {
  color: #fff !important;
  background-color: #0f6ecd;
  transition: 0.3s all;
  border-radius: 5px;
  width: auto;
  display: inline-block;
}

.header-top .account:hover {
  opacity: 0.7;
  transition: 0.3s all;
}

.header-top .register {
  color: #fff !important;
  background-color: #F6A504;
  transition: 0.3s all;
  border-radius: 0 5px 5px 0;
}

.header-top .register:hover {
  opacity: 0.7;
  transition: 0.3s all;
}

.header-top .login {
  background-color: #fff;
  color: #7e7e7e;
  transition: 0.3s all;
  border-radius: 5px 0 0 5px;
}

.header-top .login:hover {
  background-color: #fff5e0;
  transition: 0.3s all;
  color: #f6a504;
}

.header-top .navbar-left > li > a {
  min-height: auto;
}

.slidenav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.slidenav .uk-slidenav {
  margin: 0;
  padding: 0;
}

.slidenav svg {
  height: 13px;
}

.slidenav .uk-dotnav {
  margin: 0;
}

.slidenav .uk-dotnav .uk-active a {
  width: 20px;
  border-radius: 5px;
  background-color: #F6A504;
}

.slidenav .uk-dotnav a {
  background-color: #d6d6d6;
  border: 0;
  width: 9px;
  height: 9px;
}

.slidenav .uk-dotnav li {
  padding-right: 5px;
  transition: 0.5s all;
}

.slidenav .uk-dotnav li:first-of-type {
  padding-right: 5px;
}

.slidenav .uk-dotnav li:last-of-type {
  padding-left: 5px;
}

.custom-confirm-model .uk-modal-dialog {
  border-radius: 5px;
  overflow: hidden;
  border-top: 5px solid #2196f3;
}

.custom-confirm-model .uk-button-primary {
  background-color: #2196f3 !important;
}

.custom-confirm-model button {
  border-radius: 5px;
}

.custom-confirm-model .uk-modal-body {
  font-size: 15px;
}

.custom-model .uk-modal-body {
  border-top: 4px solid #F6A504;
  border-radius: 5px;
}

.custom-model .uk-close {
  position: absolute;
  right: -10px;
  left: auto;
  top: -13px;
  background-color: rgb(255, 196, 80);
  color: #fff;
  border-radius: 2px;
}

.box-form-l-r {
  min-height: 550px;
}

.box-form-l-r .uk-card-default {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-color: #f5f9fc;
}

.box-form-l-r .data-right {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.box-form-l-r .data-right .info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-content: flex-end;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  color: #FFFFFF;
}

.box-form-l-r .data-left {
  padding: 20px;
  background-color: #fff;
  height: 100%;
}

.box-form-l-r .data-left .title {
  color: #A1A1A1;
  font-size: 14px;
  margin-bottom: 25px;
}

.box-form-l-r .data-left .title .leoIcon {
  width: 20px;
}

.box-form-l-r .data-left .uk-input {
  border-radius: 5px;
  margin-top: 7px;
  padding: 20px;
}

.box-form-l-r .data-left .box-btn > div > * {
  width: 100%;
  text-align: center;
  display: block;
}

.box-form-l-r .data-left .box-btn .uk-button-primary {
  background-color: #ffc34b !important;
  line-height: normal;
  padding: 10px 0;
  border-radius: 5px;
  transition: 0.3s all;
  font-size: 18px;
}

.box-form-l-r .data-left .box-btn .uk-button-primary:hover,
.box-form-l-r .data-left .box-btn a:hover {
  transition: 0.3s all;
  opacity: 0.6;
}

.box-form-l-r .data-left .box-btn a {
  background-color: #ffedb8;
  padding: 6px 0;
  color: #8c6900;
  border-radius: 5px;
  transition: 0.3s all;
}

.box-form-l-r .data-left .uk-checkbox {
  border-radius: 3px;
}

.box-form-l-r .data-left .uk-checkbox:checked {
  background-color: #f6b801;
}

.box-form-l-r img {
  margin-bottom: 10px;
}

.box-form-l-r .tab-auth {
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 15px;
}

.box-form-l-r .tab-auth span {
  border-color: #f6a504;
  color: #f6a504;
}

.box-form-l-r .tab-auth > * {
  padding: 10px;
  display: inline-block;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  margin-bottom: -1px;
  color: #767676;
  font-weight: bold;
}

.box-form-l-r .tab-auth .btn-link-reset {
  color: #727272;
}

.box-form-l-r .tab-auth .btn-link-reset:hover {
  color: #000;
}

.review-like {
  text-align: center;
  margin-bottom: 30px;
}

.review-like .box {
  margin: auto;
  display: inline-block;
}

.review-like .box .title {
  color: #707070;
  font-weight: bold;
  margin-bottom: 15px;
}

.review-like .box .happy {
  color: #35ff2e;
  border: 1px solid;
  padding: 7px 15px;
  width: 130px;
  border-radius: 5px;
}

.review-like .box .sad {
  color: #ff876f;
  border: 1px solid;
  width: 130px;
  border-radius: 5px;
  padding: 7px 15px;
}

.comments.form {
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  background-color: #fff;
  border-radius: 5px;
}

.comments.form textarea {
  background-color: #fff;
  border: 0;
}

.comments.form .spoiler {
  background-color: #fff;
  margin-right: 10px;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 8px 0 27px rgba(0, 0, 0, 0.0901960784);
  padding-bottom: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-block;
}

@media (max-width: 480px) {
  .comments.form .spoiler {
    position: relative;
    margin-right: 0;
    font-size: 12px;
  }
}

.comments.form .spoiler * {
  cursor: pointer;
}

.comments.form .spoiler input {
  min-width: auto;
  padding: 8px;
  margin: 0;
}

.comments.form .spoiler input:focus {
  background-color: #fff;
}

.comments.form .spoiler input:checked,
.comments.form .spoiler input:indeterminate {
  background-color: #8bc34a;
}

.comments.form .comment-action {
  text-align: right;
  padding: 12px;
  padding-top: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.comments.form .btn-emoji {
  background-color: #ffd35c;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.0705882353);
  border-radius: 5px;
  padding: 3px 13px;
  cursor: pointer;
  transition: 0.3s all;
  display: inline-block;
  font-size: 19px;
  padding-bottom: 0;
}

.comments.form .btnSendCommet {
  background-color: #2196f3;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.0705882353);
  border-radius: 5px;
  padding: 5px 20px;
  cursor: pointer;
  transition: 0.3s all;
  display: inline-block;
}

.comments.form .btnSendCommet:hover {
  opacity: 0.7;
  transition: 0.3s all;
}

.show-more-text {
  cursor: pointer;
  color: #ff6b6b;
  padding: 5px 15px;
  border-radius: 5px;
  transition: 0.3s all;
  margin-bottom: 20px;
  display: inline-block;
  margin-top: 10px;
  background-color: #fff6f6;
}

.show-more-text:hover {
  color: #f00;
  transition: 0.3s all;
}

.page-items {
  margin-bottom: 15px;
}

.page-items .title {
  font-size: 23px;
  margin-bottom: 30px;
  font-weight: bold;
}

.page-items .post-type {
  margin-bottom: 15px;
}

em-emoji-picker {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

em-emoji-picker.hidden {
  display: none;
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked {
  background-color: #f6a504;
  border-color: transparent;
}

.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus,
.uk-radio:checked:focus,
.uk-radio:indeterminate:focus {
  background-color: #f6a504;
}

.box-search-advance {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.0705882353);
}

.box-search-advance > .title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #9A9898;
  margin-bottom: 40px !important;
}

.box-search-advance .row-1 {
  margin-bottom: 30px;
}

.box-search-advance .row-1 .uk-input {
  border-radius: 5px;
}

.box-search-advance .row-1 .box > .label {
  color: #5f5f5f;
  margin-bottom: 5px;
}

.box-search-advance .row-1 .box .box-select {
  position: relative;
}

.box-search-advance .row-1 .box .box-select .select {
  border: 1px solid #e5e5e5;
  padding: 5px 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 5px;
}

.box-search-advance .row-1 .box .box-select .select .label {
  flex: 1;
}

.box-search-advance .row-1 .box .box-select .dropdownBody {
  position: absolute;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1882352941);
  border-radius: 5px;
  margin-top: 10px;
  padding: 5px;
  z-index: 1;
}

.box-search-advance .row-1 .box .box-select .dropdownBody .item {
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.box-search-advance .row-1 .box .box-select .dropdownBody .item.active {
  background-color: #fff8ea;
  font-weight: bold;
  color: #ef9f00;
}

.box-search-advance .border-split {
  height: 3px;
  background-color: #f7f7f7;
  margin: 30px 0;
  border-radius: 5px;
}

.box-search-advance .box-type .box-title {
  display: flex;
  margin-bottom: 20px;
  cursor: pointer;
}

.box-search-advance .box-type .box-title .title {
  flex: 1;
  color: #5f5f5f;
  font-size: 15px;
}

.box-search-advance .box-type .box {
  margin-bottom: 15px;
}

.box-search-advance .box-type .box label {
  cursor: pointer;
}

.box-search-advance .box-type input.uk-checkbox {
  border-radius: 3px;
}

.box-search-advance button {
  background-color: #F6A504;
  color: #fff;
  border: 0;
  padding: 7px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s all;
}

.box-search-advance button:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.custom-footer {
  direction: rtl;
  background-color: #ffffff;
  padding: 60px 25px;
  border-top: 1px solid #e9ecef;
  font-family: "Vazirmatn", sans-serif;
  line-height: 1.8;
  margin-top: 60px;
}

.custom-footer__container {
  max-width: 1140px;
  margin: 0 auto;
}

.custom-footer .footer-main-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 60px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e9ecef;
}

.custom-footer .footer-intro h3,
.custom-footer .footer-links-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 15px;
}

.custom-footer .footer-intro__content {
  font-size: 14px;
  color: #6c757d;
  text-align: justify;
}

.custom-footer .footer-intro__content p {
  margin: 0 0 12px;
}

.custom-footer .footer-intro__content a {
  color: #f6a504;
  text-decoration: none;
}

.custom-footer .footer-intro__content a:hover {
  text-decoration: underline;
}

.custom-footer .footer-links-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 30px;
       column-gap: 30px;
}

.custom-footer .footer-links-section li {
  margin-bottom: 10px;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.custom-footer .footer-links-section a {
  color: #6c757d;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.custom-footer .footer-links-section a:hover,
.custom-footer .footer-links-section a:focus {
  color: #f6a504;
}

.custom-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.custom-footer .footer-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.custom-footer .action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  text-decoration: none;
  color: #212529;
  font-weight: 500;
  font-size: 14px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.custom-footer .action-button i {
  color: #f6a504;
  font-size: 16px;
}

.custom-footer .action-button:hover,
.custom-footer .action-button:focus {
  background-color: #fff8e1;
  border-color: #f6a504;
  color: #f6a504;
}

.custom-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  color: #999999;
  font-size: 22px;
  transition: color 0.3s ease;
  text-decoration: none;
}

.custom-footer .footer-social a:hover,
.custom-footer .footer-social a:focus {
  color: #f6a504;
}

.custom-footer .footer-social a:focus-visible {
  outline: 2px solid #f6a504;
  outline-offset: 2px;
}

.custom-footer .footer-social a span {
  display: none;
}

.custom-footer .footer-social a svg {
  width: 1em;
  height: 1em;
}

.custom-footer .footer-copyright {
  width: 100%;
  font-size: 13px;
  color: #999999;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 4px;
}

.custom-footer .footer-copyright p {
  margin: 0;
}

@media (max-width: 992px) {
  .custom-footer .footer-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .custom-footer {
    padding: 45px 18px 0;
  }

  .custom-footer .footer-intro h3,
  .custom-footer .footer-links-section h3 {
    font-size: 15px;
  }

  .custom-footer .footer-intro__content,
  .custom-footer .footer-links-section a,
  .custom-footer .footer-copyright {
    font-size: 12px;
  }

  .custom-footer .footer-links-section ul {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }

  .custom-footer .footer-bottom {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-footer * {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes box-shadow-flash {
  50% {
    box-shadow: 0 0 30px #f6a504;
  }
}

a.box-buy-share {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  padding: 10px 14px;
  border-radius: 999px;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.28);
  z-index: 10;
  transition: 0.3s;
  animation: box-shadow-flash 5s infinite;
}

a.box-buy-share i {
  color: #fef3c7;
}

a.box-buy-share strong {
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  padding-right: 8px;
}

a.box-buy-share:hover {
  color: #ffffff;
  opacity: 1;
  transform: translateY(-2px);
}

:root {
  --ap-background-color: #f8fafc;
  --ap-card-background: #ffffff;
  --ap-text-color: #1e293b;
  --ap-text-muted: #64748b;
  --ap-border-color: #f1f5f9;
  --ap-green: #10b981;
  --ap-blue: #3b82f6;
  --ap-star-color: #ffc107;
  --ap-tag-hardsub-green-bg: #e0f2fe;
  --ap-tag-hardsub-green-text: #2563eb;
  --ap-tag-quality-bg: #f1f5f9;
  --ap-tag-quality-text: #475569;
  --ap-border-radius: 12px;
  --ap-section-primary: #f39c12;
  --ap-section-title-color: #2c3e50;
  --ap-section-button-hover-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ap-background-color: #050a16;
    --ap-card-background: rgba(15, 23, 42, 0.96);
    --ap-text-color: #e2e8f0;
    --ap-text-muted: #94a3b8;
    --ap-border-color: rgba(148, 163, 184, 0.16);
    --ap-green: #10b981;
    --ap-blue: #60a5fa;
    --ap-star-color: #facc15;
    --ap-tag-hardsub-green-bg: rgba(37, 99, 235, 0.2);
    --ap-tag-hardsub-green-text: #60a5fa;
    --ap-tag-quality-bg: #111827;
    --ap-tag-quality-text: #cbd5e1;
    --ap-border-radius: 12px;
    --ap-section-primary: #fbbf24;
    --ap-section-title-color: #f8fafc;
    --ap-section-button-hover-text: #0f172a;
  }
}

body:not(.dark) {
  color-scheme: light;
  --ap-background-color: #f8fafc;
  --ap-card-background: #ffffff;
  --ap-text-color: #1e293b;
  --ap-text-muted: #64748b;
  --ap-border-color: #f1f5f9;
  --ap-tag-hardsub-green-bg: #e0f2fe;
  --ap-tag-hardsub-green-text: #2563eb;
  --ap-tag-quality-bg: #f1f5f9;
  --ap-tag-quality-text: #475569;
  --ap-blue: #3b82f6;
  --ap-star-color: #ffc107;
  --ap-section-primary: #f39c12;
  --ap-section-title-color: #2c3e50;
  --ap-section-button-hover-text: #ffffff;
}

body.dark {
  color-scheme: dark;
}

.post-anime {
  --anime-card-width: clamp(232px, 21.5vw, 268px);
  width: var(--anime-card-width);
  max-width: var(--anime-card-width);
  flex: 0 0 var(--anime-card-width);
  margin: 0 12px 28px;
  display: inline-flex;
  vertical-align: top;
  flex-direction: column;
}

@media (max-width: 1400px) {
  .post-anime {
    --anime-card-width: clamp(224px, 25vw, 256px);
  }
}

@media (max-width: 1200px) {
  .post-anime {
    --anime-card-width: clamp(214px, 27vw, 244px);
  }
}

@media (max-width: 992px) {
  .post-anime {
    --anime-card-width: clamp(198px, 33vw, 232px);
  }
}

@media (max-width: 768px) {
  .post-anime {
    --anime-card-width: clamp(172px, 48vw, 220px);
    margin: 0 8px 22px;
  }
}

@media (max-width: 480px) {
  .post-anime {
    --anime-card-width: clamp(160px, 52vw, 210px);
    margin: 0 6px 20px;
  }
}

.post-anime .anime-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1 1 auto;
  background-color: var(--ap-card-background);
  border-radius: var(--ap-border-radius);
  border: 1px solid var(--ap-border-color);
  text-decoration: none;
  color: var(--ap-text-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  contain: content;
}

.post-anime .anime-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.18);
}

.post-anime .card-image-container {
  position: relative;
  aspect-ratio: 2/2.55;
  overflow: hidden;
  background: #0f172a;
}

.post-anime .poster-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease;
}

.post-anime .anime-card:hover .poster-img {
  transform: scale(1.05);
}

.post-anime .status-tag {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  z-index: 3;
  backdrop-filter: saturate(140%) blur(2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.post-anime .status-tag.status-airing {
  background-color: rgba(16, 185, 129, 0.85);
}

.post-anime .status-tag.status-finished {
  background-color: rgba(59, 130, 246, 0.85);
}

.post-anime .status-tag.status-not-uploaded {
  background-color: rgba(239, 68, 68, 0.85);
}

.post-anime .summary-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 80%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2;
}

.post-anime .anime-card:hover .summary-overlay {
  opacity: 1;
  visibility: visible;
}

.post-anime .summary-text {
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: right;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.45);
}

.post-anime .countdown-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 66%, transparent 100%);
  color: #ffffff;
  padding: 0.58rem 0.5rem 0.24rem;
  display: flex;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  text-shadow: 0 2px 6px rgba(15, 23, 42, 0.6);
}

.post-anime .countdown-overlay * {
  text-shadow: inherit;
}

.post-anime .countdown-overlay .countdown {
  width: 100%;
  min-width: 0;
}

.post-anime .countdown-overlay .countdown-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  direction: rtl;
  gap: 0;
  margin-inline: auto;
  width: 100%;
}

.post-anime .countdown-overlay .countdown-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-bottom: 0.46rem;
}

.post-anime .countdown-overlay .countdown-heading__title {
  color: #ffffff;
  font-size: 0.86em;
  font-weight: 900;
  line-height: 1.2;
}

.post-anime .countdown-overlay .countdown-heading__schedule {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.2;
}

.post-anime .countdown-overlay .countdown-unit {
  align-items: center;
  display: flex;
  flex: none;
  width: auto;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
  padding-inline: 0.2rem;
  position: relative;
}

.post-anime .countdown-overlay .countdown-unit + .countdown-unit::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72) 28%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.72) 72%, rgba(255, 255, 255, 0));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
  content: "";
  height: 1.55rem;
  inset-inline-start: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
}

.post-anime .countdown-overlay [class^=uk-countdown-]:not(.uk-countdown-label) {
  display: block;
  font-size: 1.1em;
  font-weight: 900;
  min-width: 2ch;
}

.post-anime .countdown-overlay .uk-countdown-label {
  display: block;
  font-size: 0.76em;
  margin-top: 0.02rem;
}

@media (max-width: 640px) {
  .post-anime .countdown-overlay {
    font-size: 0.8rem;
    padding: 0.48rem 0.4rem 0.24rem;
    letter-spacing: 0.015em;
  }

  .post-anime .countdown-overlay .countdown-heading {
    margin-bottom: 0.38rem;
  }
}

@media (max-width: 480px) {
  .post-anime .countdown-overlay {
    font-size: 0.74rem;
    padding: 0.5rem 0.35rem 0.25rem;
    letter-spacing: 0.01em;
  }

  .post-anime .countdown-overlay .countdown-heading {
    margin-bottom: 0.32rem;
  }
}

.post-anime .anime-card:hover .countdown-overlay {
  opacity: 0;
  visibility: hidden;
}

.post-anime .card-content {
  padding: 0.62rem 0.68rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  gap: 0.32rem;
}

.post-anime .front .bottom .dic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 0.15rem;
}

.post-anime .front .bottom .dic .item.star,
.post-anime .front .bottom .dic .item.hit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-anime .front .bottom .dic .item.star .label,
.post-anime .front .bottom .dic .item.hit .label {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.post-anime .front .bottom .dic .item.star .label {
  font-variant-numeric: tabular-nums;
}

.post-anime .glass-meta-divider {
  width: 100%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.75) 50%, rgba(148, 163, 184, 0));
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  opacity: 0.95;
  display: block;
}

.post-anime .glass-meta-divider::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(12px);
  opacity: 0.65;
}

.post-anime .glass-meta-divider {
  flex: 1 1 100%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.75) 50%, rgba(148, 163, 184, 0));
  position: relative;
  overflow: hidden;
  margin: 4px 0;
  opacity: 0.95;
}

.post-anime .glass-meta-divider::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(12px);
  opacity: 0.65;
}

.post-anime .anime-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  text-align: left;
  direction: rtl;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  max-width: 100%;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

@media (max-width: 768px) {
  .post-anime .anime-title {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .post-anime .anime-title {
    font-size: 0.65rem;
  }
}

.post-anime .meta-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  direction: ltr;
}

.post-anime .rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--ap-text-color);
  direction: rtl;
  white-space: nowrap;
  text-align: right;
  margin-inline-start: auto;
  flex-shrink: 0;
  order: 2;
}

.post-anime .rating .score {
  order: 1;
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  text-align: left;
}

.post-anime .rating .star-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  fill: var(--ap-star-color);
  order: 2;
  flex-shrink: 0;
}

.post-anime .tags-side {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  direction: ltr;
  flex: 1 1 auto;
  order: 1;
}

.post-anime .tag {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.38rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  background-color: var(--ap-tag-quality-bg);
  color: var(--ap-tag-quality-text);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
}

.post-anime .tag.tag-hardsub-green {
  background-color: var(--ap-tag-hardsub-green-bg);
  color: var(--ap-tag-hardsub-green-text);
}

.post-anime .tag.tag-quality {
  background-color: var(--ap-tag-quality-bg);
  color: var(--ap-tag-quality-text);
  order: -1;
  overflow: visible;
  text-overflow: initial;
  flex: 0 0 auto;
}

.post-anime .tag__label {
  font-size: 0.9em;
  margin-inline-end: 0.22rem;
  opacity: 0.82;
}

.post-anime .tag__value {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.post-anime .tag.tag-not-uploaded {
  background-color: rgba(254, 226, 226, 0.8);
  color: #b91c1c;
}

.post-anime .card-stats {
  padding-top: 0.12rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--ap-text-muted);
  font-weight: 600;
  direction: ltr;
  margin-top: 0.2rem;
}

.post-anime .stat-year {
  justify-self: end;
  color: #64748b;
  text-align: right;
}

.post-anime .stat-episode {
  justify-self: center;
  color: var(--ap-text-muted);
  white-space: nowrap;
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  direction: rtl;
  justify-content: center;
  min-width: 0;
}

.post-anime .stat-episode .episode-current {
  color: currentColor;
  font-weight: 700;
}

.post-anime .stat-episode .episode-label {
  color: #64748b;
  font-size: 0.86em;
}

.post-anime .stat-episode .episode-total {
  color: currentColor;
  font-size: 0.86em;
}

.post-anime .stat-views {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  flex-direction: row;
  min-width: 0;
}

.post-anime .stat-views .icon {
  width: 14px;
  height: 14px;
  opacity: 1;
  color: #64748b;
  fill: currentColor;
}

.post-anime .stat-views .label {
  color: currentColor;
  font-weight: 600;
}

@media (max-width: 767px) {
  .post-anime .card-content {
    padding: 0.6rem;
    gap: 0.35rem;
  }

  .post-anime .anime-title {
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
    line-height: 1.35;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .post-anime .meta-tags {
    gap: 0.35rem;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

  .post-anime .tag {
    font-size: 0.56rem;
    padding: 0.1rem 0.24rem;
    max-width: 100%;
  }

  .post-anime .rating {
    font-size: 0.7rem;
    gap: 0.15rem;
    align-self: flex-start;
  }

  .post-anime .rating .star-icon {
    width: 14px;
    height: 14px;
  }

  .post-anime .tags-side {
    gap: 0.22rem;
    max-width: 100%;
  }

  .post-anime .card-stats {
    font-size: 0.66rem;
    padding-top: 0.1rem;
    margin-top: 0.15rem;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .post-anime .status-tag {
    font-size: 0.6rem;
    padding: 0.15rem 0.5rem;
    inset-inline-start: 0.5rem;
    top: 0.5rem;
  }

  .post-anime .summary-text {
    font-size: 0.7rem;
    -webkit-line-clamp: 7;
  }
}

@media (max-width: 540px) {
  .post-anime .card-content {
    padding: 0.55rem;
  }

  .post-anime .anime-title {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
    line-height: 1.35;
    font-weight: 800;
  }

  .post-anime .meta-tags {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
  }

  .post-anime .rating {
    margin-inline-start: auto;
  }

  .post-anime .tags-side {
    width: auto;
  }

  .post-anime .tag {
    font-size: 0.58rem;
    padding: 0.12rem 0.28rem;
  }

  .post-anime .card-stats {
    -moz-column-gap: 0.4rem;
         column-gap: 0.4rem;
    font-size: 0.64rem;
    padding-top: 0.08rem;
    margin-top: 0.12rem;
  }

  .post-anime .status-tag {
    font-size: 0.55rem;
    inset-inline-start: 0.45rem;
    top: 0.45rem;
  }

  .post-anime .summary-text {
    font-size: 0.65rem;
    -webkit-line-clamp: 6;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.box-anime {
  position: relative;
  overflow: visible;
}

.box-card .box-search-cart {
  border: 1px solid #f6a504;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  display: flex;
}

.box-card .box-search-cart [type=search] {
  border: 0;
  padding: 8px 15px;
  flex: 1;
  background-color: #fff;
}

.box-card .box-search-cart [type=submit] {
  border: 0;
  background-color: #f6a504;
  color: #fff;
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.3s;
}

.box-card .box-search-cart [type=submit]:hover {
  opacity: 0.6;
}

.box-card > .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.box-card > .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.box-card > .title .right {
  flex: 1 1 auto;
  min-width: 200px;
}

.box-card > .title .left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  margin-left: auto;
}

.box-card > .title .left .more {
  margin: 0;
}

.box-card > .title h1,
.box-card > .title h2,
.box-card > .title h3,
.box-card > .title h4 {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  padding-bottom: 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ap-section-title-color);
  background: none;
}

.box-card > .title h1:before,
.box-card > .title h2:before,
.box-card > .title h3:before,
.box-card > .title h4:before {
  display: none;
}

.box-card > .title h1:after,
.box-card > .title h2:after,
.box-card > .title h3:after,
.box-card > .title h4:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, var(--ap-section-primary), transparent);
}

.box-card .section-header__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ap-section-title-color);
}

.box-card .section-header__title:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, var(--ap-section-primary), transparent);
}

.box-card .section-header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  background-color: transparent;
  border: 2px solid var(--ap-section-primary);
  color: var(--ap-section-primary);
  border-radius: 999px;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.box-card .section-header__button:hover {
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.box-card .section-header__button:focus-visible {
  outline: 0;
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25);
}

.box-card > .title .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  background-color: transparent;
  border: 2px solid var(--ap-section-primary);
  color: var(--ap-section-primary);
  border-radius: 999px;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.box-card > .title .more:hover {
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.box-card > .title .more:focus-visible {
  outline: 0;
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25);
}

@media (max-width: 500px) {
  .box-card > .section-header,
  .box-card > .title {
    gap: 12px;
  }

  .box-card .section-header__title,
  .box-card > .title h1,
  .box-card > .title h2,
  .box-card > .title h3,
  .box-card > .title h4 {
    font-size: 16px;
    padding-bottom: 6px;
  }

  .box-card .section-header__button,
  .box-card > .title .more {
    font-size: 12px;
    padding: 6px 18px;
  }

  .box-card > .title .left {
    margin-inline-start: 0;
    margin-left: 0;
  }
}

#box-login-google-popup {
  position: fixed;
  left: 10px;
  bottom: 10px;
}

.box-home-description {
  position: relative;
  margin: 40px 0;
  --seo-primary-color: #f3a303;
  --seo-background: #ffffff;
  --seo-text-color: #1e293b;
  --seo-subtle-text: #475569;
  --seo-border-color: rgba(148, 163, 184, 0.28);
  --seo-shadow: 0 24px 45px rgba(15, 23, 42, 0.08);
  background-color: var(--seo-background);
  border-radius: 16px;
  border: 1px solid var(--seo-border-color);
  padding: clamp(28px, 5vw, 48px);
  line-height: 1.9;
  color: var(--seo-text-color);
}

.box-home-description h1,
.box-home-description h2,
.box-home-description h3,
.box-home-description h4,
.box-home-description h5,
.box-home-description h6 {
  color: var(--seo-text-color);
  font-weight: 700;
  margin: 0 0 20px 0;
}

.box-home-description h1,
.box-home-description h2 {
  font-size: clamp(15px, 2.5vw, 26px);
  font-weight: 800;
  margin-bottom: 25px;
  padding-bottom: 15px;
  position: relative;
}

.box-home-description h1::after,
.box-home-description h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 4px;
  background-color: var(--seo-primary-color);
  border-radius: 2px;
}

.box-home-description p {
  font-size: 15px;
  color: var(--seo-subtle-text);
  margin: 0 0 18px 0;
}

.box-home-description p:last-child {
  margin-bottom: 0;
}

.box-home-description ul,
.box-home-description ol {
  list-style: none;
  padding: 0;
  margin: 26px 0;
}

.box-home-description li {
  position: relative;
  padding-right: 30px;
  font-size: 15px;
  color: var(--seo-subtle-text);
  margin-bottom: 14px;
}

.box-home-description li::before {
  content: "\F058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--seo-primary-color);
  font-size: 18px;
}

.box-home-description li:last-child {
  margin-bottom: 0;
}

.box-home-description a {
  color: var(--seo-primary-color);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.box-home-description a:hover,
.box-home-description a:focus {
  opacity: 0.7;
}

.box-home-description strong {
  color: var(--seo-text-color);
}

@media (max-width: 600px) {
  .box-home-description {
    margin: 30px 0;
    border-radius: 14px;
    padding: 32px 24px;
  }
}

.user-login-massage {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(246, 165, 4, 0.7803921569);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: #fff;
  border-radius: 5px;
  z-index: 1;
}

.user-login-massage a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  border-radius: 5px;
}

.user-login-massage .message-body > * {
  padding: 2px 10px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.3490196078);
  border-radius: 5px;
}

.user-login-massage .message-body > *:hover {
  border-color: #fff;
}

.user-login-massage .message-body {
  padding: 10px;
  text-align: center;
}

.user-login-massage .message-body span {
  display: block !important;
  margin-bottom: 3px;
}

@media (max-width: 406px) {
  .box-search .box-search-title-type {
    display: none;
  }

  .box-search .link-search {
    font-size: 11px;
  }
}

.box-search {
  margin-bottom: 70px !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.box-search .select-tabs {
  text-align: center;
  padding: 15px 5px;
}

.box-search .select-tabs .select-tab-head {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.box-search .link-search {
  display: inline-block;
  padding: 6px 15px;
  background-color: #F5A404;
  color: #fff;
  border-radius: 4px;
  margin: auto;
  white-space: nowrap;
  transition: 0.3s;
  cursor: pointer;
}

.box-search .link-search.active {
  filter: grayscale(1);
}

.box-search .link-search:hover {
  opacity: 0.6;
}

.box-search .uk-input {
  border-radius: 5px;
}

.box-search > .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.box-search > .title .right {
  flex: 1 1 auto;
  min-width: 200px;
}

.box-search > .title h4,
.box-search > .title h1 {
  display: inline-block;
  color: var(--ap-section-title-color);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  padding: 0;
  position: relative;
  padding-bottom: 8px;
  background: none;
}

.box-search > .title h4:before,
.box-search > .title h1:before {
  display: none;
}

.box-search > .title h4:after,
.box-search > .title h1:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, var(--ap-section-primary), transparent);
}

.box-search > .title h4 .box-search-title,
.box-search > .title h1 .box-search-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: inherit;
}

.box-search > .title h4 .box-search-title span,
.box-search > .title h1 .box-search-title span {
  display: inline;
}

.box-search > .title h4 .box-search-title-type,
.box-search > .title h1 .box-search-title-type {
  color: var(--ap-section-primary);
}

.box-search > .title .left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.box-search > .title .left .link-search {
  margin: 0;
}

.box-search .body {
  position: relative;
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .box-search > .title {
    gap: 12px;
  }

  .box-search > .title .right {
    min-width: 0;
  }

  .box-search > .title .left {
    width: 100%;
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .box-search > .title .left .link-search {
    width: 100%;
    text-align: center;
  }

  .box-search .body {
    padding: 12px;
  }
}

.box-search .item {
  display: inline-block;
  margin: 5px;
}

.box-search .item .title:hover,
.box-search .item .title.active {
  background-color: #F1F3F5;
  transition: 0.3s all;
}

.box-search .item .title {
  display: flex;
  cursor: pointer;
  align-items: center;
  color: #585858;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s all;
}

.box-search .item .title .uk-icon {
  margin-right: 5px;
  margin-left: -4px;
}

.box-search .item .dropdown {
  position: absolute;
  width: 100%;
  background-color: #fff;
  left: 0;
  right: 0;
  margin-top: 23px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.0509803922);
  z-index: 1;
}

.box-search .item .dropdown .btn-close {
  margin-bottom: 10px;
  font-size: 15px;
  color: #f6a504;
  background-color: #fff4e0;
  padding: 5px 15px;
  display: none;
  border-radius: 5px;
  cursor: pointer;
}

.box-search .item .dropdown .dropdown-items label {
  margin: 5px;
  display: inline-block;
  cursor: pointer;
}

.box-search .item .dropdown .dropdown-items {
  overflow-y: auto;
  display: block;
}

@media (max-width: 425px) {
  .box-search .item .dropdown {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .box-search .item .dropdown .btn-close {
    display: inline-block;
  }
}

.box-search .btn-search {
  background-color: #E2F3FF;
  border: 0;
  padding: 6px 26px;
  border-radius: 5px;
  color: #585858;
  transition: 0.3s all;
  cursor: pointer;
  margin: 5px;
  display: inline-block;
}

.box-search .btn-search:hover {
  background-color: #f1f3f5;
  transition: 0.3s all;
}

.anime-single {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 0;
}

.anime-single h1,
.anime-single h2 {
  font-size: 17px;
  color: #585858;
  text-align: right;
}

.anime-single .box-title {
  margin-bottom: 20px;
}

.anime-single .label-new {
  color: #fff;
  transform: rotate(-90deg);
  display: inline-block;
  margin-left: -12px;
  margin-right: -29px;
  background-color: #4caf50;
  padding: 0 9px;
  font-size: 12px;
  width: 56px;
  text-align: center;
}

.anime-single .tag-subtited,
.anime-single .tag-online {
  background-color: #e2f2e3;
  color: #4caf50;
  padding: 2px 15px;
  border-radius: 22px;
  font-size: 12px;
  display: inline-block;
}

.anime-single .tag-online {
  background-color: #fff7de;
  color: #b16900;
}

.anime-single .box-data .translate {
  margin-bottom: 15px;
}

.anime-single .main-data {
  margin-bottom: 20px;
  padding: 15px;
}

@media (max-width: 576px) {
  .anime-single .main-data {
    padding: 0;
  }
}

.anime-single .main-data .box-img img {
  box-shadow: 0 7px 30px rgba(34, 42, 104, 0.1490196078);
  border-radius: 5px;
}

.anime-single .box-1 {
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #F1F3F5;
  padding-bottom: 10px;
}

.anime-single .box-1 .raing {
  display: flex;
  flex-direction: row-reverse;
  height: 15px;
}

.anime-single .box-1 .raing.aniplus .l1 {
  color: #db9100 !important;
}

.anime-single .box-1 .raing.myanimelist .l1 {
  color: #2e51a2 !important;
}

.anime-single .box-1 .raing .users {
  display: flex;
  flex-direction: row-reverse;
}

.anime-single .box-1 .raing .label {
  color: #B2B2B2;
  margin: 0 5px;
}

.anime-single .box-1 .raing .label .l1 {
  color: #636363;
}

.anime-single .box-1 .raing [leoicon=star] {
  color: #F6A504;
}

.anime-single .box-1 .raing .star-val {
  color: #585858;
}

.anime-single .box-1 .raing .star-as {
  color: #B2B2B2;
}

.anime-single .box-1 .raing .star {
  direction: ltr;
  margin: 0 5px;
}

.anime-single .box-1 .raing .users {
  margin: 0 5px;
  border-left: 1px solid #e1e1e1;
  padding-left: 5px;
}

.anime-single .box-1 .raing .users [leoicon=account_heart] {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.anime-single .box-1 .raing [leoicon=star] svg {
  width: 15px;
  height: 15px;
}

.anime-single .box-1 .highest-quality .label,
.anime-single .box-1 .highest-quality .value {
  background: #B2B2B2 0% 0% no-repeat padding-box;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 13px;
  padding: 3px 5px 0 4px;
  display: inline-block;
  line-height: 15px;
}

.anime-single .box-1 .highest-quality {
  direction: ltr;
  border-left: 1px solid #e1e1e1;
  padding-left: 5px;
  height: 18px;
}

.anime-single .box-1 .highest-quality .value {
  background-color: #F6A504;
}

.anime-single .box-1 .raing .users .value {
  color: #585858;
}

.anime-single .box-1 .raing-label {
  direction: ltr;
}

.anime-single .box-1 .anime-single-box-1 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.anime-single .box-1 .anime-single-box-1:hover [leoicon=heart] .b,
.anime-single .box-1 .anime-single-box-1[aria-expanded=true] .b {
  fill: #666666;
}

.anime-single .box-1 .anime-single-box-1[aria-expanded=true] [leoicon=down] {
  transform: rotate(180deg);
  transition: 0.3s all;
}

.anime-single .box-1 .anime-single-box-1 [leoicon=down] {
  transition: 0.3s all;
}

.anime-single .box-1 .anime-single-box-data {
  width: 100%;
  margin-top: 24px;
}

.anime-single .box-1 .anime-single-box-data .loadingBox {
  color: #000000;
}

.anime-single .box-1 .anime-single-box-data .body {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 18px;
  padding: 24px;
  background-color: rgba(236, 241, 247, 0.65);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.anime-single .box-1 .anime-single-box-data .form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anime-single .box-1 .anime-single-box-data .section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #475569;
}

.anime-single .box-1 .anime-single-box-data .status-section .section-title {
  color: #f3a303;
}

.anime-single .box-1 .anime-single-box-data .box-select {
  width: 100%;
}

.anime-single .box-1 .anime-single-box-data .box-select .select {
  padding: 14px 18px;
  border-radius: 14px;
  background-color: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #1f2933;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.anime-single .box-1 .anime-single-box-data .box-select .select:hover {
  border-color: #f3a303;
  box-shadow: 0 18px 36px rgba(243, 163, 3, 0.22);
}

.anime-single .box-1 .anime-single-box-data .status-section .box-select .select {
  background-color: rgba(243, 163, 3, 0.16);
  border-color: rgba(243, 163, 3, 0.38);
  color: #b45309;
}

.anime-single .box-1 .anime-single-box-data .rating-section .box-select .select {
  background-color: rgba(255, 255, 255, 0.92);
}

.anime-single .box-1 .anime-single-box-data .progress-inputs {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.anime-single .box-1 .anime-single-box-data .progress-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.anime-single .box-1 .anime-single-box-data .progress-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c7680;
}

.anime-single .box-1 .anime-single-box-data .progress-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background-color: #ffffff;
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.anime-single .box-1 .anime-single-box-data .progress-input-wrapper input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 600;
  color: #1f2933;
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
  direction: ltr;
  font-size: 0.95rem;
}

.anime-single .box-1 .anime-single-box-data .progress-input-wrapper input:focus {
  outline: none;
}

.anime-single .box-1 .anime-single-box-data .progress-input-wrapper input::-webkit-outer-spin-button,
.anime-single .box-1 .anime-single-box-data .progress-input-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.anime-single .box-1 .anime-single-box-data .progress-total {
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
  direction: ltr;
}

.anime-single .box-1 .anime-single-box-data .list {
  background: none;
  border: none;
  padding: 0;
}

.anime-single .box-1 .anime-single-box-data .list-section {
  margin-top: 4px;
}

.anime-single .box-1 .anime-single-box-data .list-button {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.anime-single .box-1 .anime-single-box-data .list-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 163, 3, 0.25);
}

.anime-single .box-1 .anime-single-box-data .list-button.add-to-list {
  background-color: rgba(243, 163, 3, 0.16);
  color: #b45309;
}

.anime-single .box-1 .anime-single-box-data .list-button.add-to-list:hover {
  background-color: rgba(243, 163, 3, 0.26);
  box-shadow: 0 14px 32px rgba(243, 163, 3, 0.2);
}

.anime-single .box-1 .anime-single-box-data .list-button.remove-list {
  background-color: rgba(240, 80, 110, 0.18);
  color: #b91c1c;
}

.anime-single .box-1 .anime-single-box-data .list-button.remove-list:hover {
  background-color: rgba(240, 80, 110, 0.28);
  box-shadow: 0 14px 32px rgba(240, 80, 110, 0.22);
}

.anime-single .box-2 {
  line-height: 25px;
  margin-bottom: 20px;
  white-space: normal;
}

.anime-single .box-3 .box {
  background-color: #F1F3F5;
  color: #9f9f9f;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
  margin: 5px 0;
}

.anime-single .box-3 .box .value {
  color: #6e6e6e;
}

.anime-single .box-3 .box a:hover {
  color: #000;
}

.anime-single .box-info {
  font-size: 13px;
  padding: 15px;
  margin-bottom: 20px;
}

.anime-single .box-info h4 {
  margin-bottom: 15px;
  color: #747474;
  font-size: 15px;
}

.anime-single .box-info .lists {
  border-right: 2px solid rgba(178, 178, 178, 0.1490196078);
  padding-right: 10px;
}

.anime-single .box-info .lists .item {
  display: flex;
  margin-bottom: 10px;
}

.anime-single .box-info .lists .item .label {
  min-width: 94px;
  color: #959595;
}

.anime-single .box-info .col-1 .item .label {
  min-width: 85px !important;
}

.anime-single .box-info .col-2 .item .label {
  min-width: 110px !important;
}

.anime-single .box-info .other-titles {
  margin-bottom: 20px;
}

.anime-single .box-info .other-titles .label {
  min-width: auto !important;
  padding-left: 10px;
}

.anime-single .box-info a {
  color: #d08b00;
  direction: ltr;
  display: inline-block;
}

.anime-single .box-info a:hover {
  color: #000;
}

@media (max-width: 634px) {
  .anime-single .box-info .col-1 .item .label,
  .anime-single .box-info .col-3 .item .label,
  .anime-single .box-info .other-titles .label {
    min-width: 110px !important;
  }
}

.anime-single .manga-alert {
  margin-bottom: 0;
  padding: 8px;
  font-weight: bold;
  background-color: #E2F3FF;
  color: #565656;
}

.anime-single .manga-alert .uk-button {
  background-color: #fff;
  border-radius: 4px;
}

.box-tags {
  margin-top: 30px;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
}

.box-tags h4 {
  margin-bottom: 20px;
}

.box-tags a {
  background-color: #e9e9e9;
  padding: 4px 15px 0;
  border-radius: 4px;
  color: #000 !important;
  direction: rtl !important;
  transition: 0.3s;
  margin-bottom: 3px;
  display: inline-block;
}

.box-tags a:hover {
  opacity: 0.6;
}

.box-more-dic {
  line-height: 30px;
  margin-top: 30px;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1019607843);
}

.box-more-dic p:last-child {
  margin-bottom: 0;
}

.box-more-dic ul {
  margin-right: 16px;
}

.box-more-dic p {
  margin: 5px 0;
}

.box-more-dic blockquote {
  border-right: 3px solid #f8a008;
  padding: 15px;
  border-radius: 5px;
  background-color: #f5f5f9;
  margin: 0;
  color: #666;
  line-height: 30px;
}

.box-more-dic blockquote p:last-child {
  margin-bottom: 0;
}

.box-more-dic h2 {
  font-size: 25px;
}

.box-more-dic h3 {
  font-size: 20px;
}

.box-more-dic h4 {
  font-size: 15px;
}

.box-more-dic h1,
.box-more-dic h2,
.box-more-dic h3,
.box-more-dic h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.box-more-dic h1:before,
.box-more-dic h2:before,
.box-more-dic h3:before,
.box-more-dic h4:before {
  width: 35px;
  height: 3px;
  background-color: #F8A008;
  content: "";
  display: inline-block;
}

.uk-modal .btn-download {
  position: absolute;
  top: -27px;
  right: 0;
  color: #fff;
}

.box-select {
  position: relative;
  flex: 1;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.box-select .select {
  cursor: pointer;
}

.box-select .dropdownBody {
  position: absolute;
  background-color: #ffffff;
  left: -7px;
  right: -7px;
  margin-top: 19px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  padding: 5px;
  border-radius: 5px;
  z-index: 1;
}

.box-select .dropdownBody .body-items {
  max-height: 200px;
  overflow-y: auto;
}

.box-select .dropdownBody .box-search-select input {
  border: 1px solid #afafaf;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 5px 10px;
}

.box-select .dropdownBody .item {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f3f5;
  cursor: pointer;
  transition: 0.3s all;
  border-radius: 5px;
  margin: 2px 0;
}

.box-select .dropdownBody .item.active {
  background-color: #f1f3f5;
}

.box-select .dropdownBody .item:hover {
  background-color: #f1f3f5;
  transition: 0.3s all;
}

.anime-single .box-title-bg {
  display: flex;
  position: absolute;
  justify-content: center;
  transition: 0.3s all;
}

.anime-single .box-title-bg .before,
.anime-single .box-title-bg .after {
  background-image: url(/images/tab-title.png?2434c2447d3a0e8a3d04f9f4aa654f2f);
  width: 70px;
  height: 41px;
}

.anime-single .box-title-bg .before {
  transform: rotate(180deg);
}

.anime-single .box-title-bg .title {
  width: 70px;
  background-color: #e2f3ff;
}

@media (max-width: 420px) {
  .anime-single .box-title-bg {
    display: none;
  }
}

.anime-single .box-tab {
  position: relative;
}

.anime-single .box-tab .blog-items .blog-loop {
  border: 1px solid #d3d3d3;
}

.anime-single .box-tab .box-pictures .item {
  text-align: center;
  border: 1px solid #ddd;
  padding: 17px;
  border-radius: 5px;
  margin-bottom: 14px;
  display: block;
}

.anime-single .box-tab .box-pictures .item img {
  border-radius: 5px;
  max-width: 100%;
}

.anime-single .box-tab .box-tab-top {
  overflow: hidden;
  position: relative;
}

.anime-single .box-tab .box-tab-top .uk-tab .count {
  margin-right: 6px;
  margin-left: -5px;
  border-radius: 4px;
  background-color: #76a0bd;
  color: #fff;
  line-height: 1;
  padding: 2px 5px 0 5px;
  font-size: 11px;
}

.anime-single .box-tab .box-tab-top .uk-tab:before {
  border-color: #d1ecff;
}

.anime-single .box-tab .box-tab-top .uk-tab .title {
  padding: 10px 0;
  margin: 0 20px;
}

.anime-single .box-tab .box-tab-top .uk-tab .tab:first-child a .title {
  margin-right: 5px;
}

.anime-single .box-tab .box-tab-top .uk-tab a {
  -moz-column-gap: 0;
       column-gap: 0;
  display: flex;
  padding: 0;
  color: #585858;
  border: 0;
  font-weight: bold;
  background-repeat: no-repeat;
}

.anime-single .box-tab .downloads {
  padding-top: 20px;
}

.anime-single .box-tab .downloads .pagination {
  margin: 30px 0;
}

.anime-single .box-tab .downloads .uk-tab:before {
  border: 0;
}

.anime-single .box-tab .downloads .uk-tab {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.anime-single .box-tab .downloads .uk-tab > * {
  float: none;
}

.anime-single .box-tab .downloads .uk-subnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.anime-single .box-tab .downloads .uk-subnav > * > :first-child {
  color: #003d8d;
  border: 0;
  border-radius: 5px;
  background-color: #d8eeff;
  margin: 0 5px;
  padding: 5px 15px;
  box-shadow: 0 10px 15px rgba(0, 61, 141, 0.1);
}

.anime-single .box-tab .downloads .uk-subnav > * > :first-child:hover,
.anime-single .box-tab .downloads .uk-subnav > * > :first-child:focus {
  color: #003d8d;
  opacity: 0.8;
}

.anime-single .box-tab .downloads .uk-switcher > :not(.uk-active) {
  display: none;
}

@media (max-width: 480px) {
  .anime-single .box-tab .box-tab-top .uk-tab {
    width: 100%;
  }

  .anime-single .box-tab .box-tab-top .uk-tab > * {
    width: 100%;
  }

  .anime-single .box-tab .box-tab-top .uk-tab > * > a {
    width: 100%;
    margin: 5px 0;
    justify-content: center;
  }

  .anime-single .box-tab .box-tab-top .uk-tab > * > a .title {
    margin: 0;
  }

  .anime-single .box-tab .box-tab-top .uk-tab .uk-active > a {
    background-color: #e2f3ff;
    border-radius: 5px;
  }
}

.anime-single .related-items {
  padding: 10px;
  padding-top: 20px;
}

.anime-single .related-items--grid {
  padding: 0;
}

.anime-single .related-items--grid .related-items__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1280px) {
  .anime-single .related-items--grid .related-items__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .anime-single .related-items--grid .related-items__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .anime-single .related-items--grid .related-items__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .anime-single .related-items--grid .related-items__list {
    gap: 12px;
  }
}

.anime-single .related-items--grid .related-items__list > .post-anime {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  margin: 0;
}

.anime-single .related-items--grid .related-items__list > .post-anime .anime-card {
  width: 100%;
  max-width: none;
}

.box-youtube {
  min-height: 194px;
  background-color: #010101;
  margin-bottom: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
  border: 1px solid #e2e2e2;
  overflow: hidden;
}

.box-youtube:hover .leoIcon {
  background-color: #4a4a4a;
  transition: 0.3s all;
}

.box-youtube .title {
  position: absolute;
  left: 10px;
  bottom: 5px;
  color: #fff;
}

.box-youtube .leoIcon {
  background-color: #8c8c8c;
  padding: 3px;
  border-radius: 2px;
  color: #fff;
  transition: 0.3s all;
  position: absolute;
  transform: scale(1.5);
}

.box-youtube .leoIcon svg {
  width: 30px;
}

.box-youtube iframe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.data-bottom {
  position: relative;
}

.data-bottom .comments.form {
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
}

.data-bottom .comments.form textarea {
  box-shadow: none;
}

.page-schedule .schedule-hub {
  margin-bottom: 32px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  box-shadow: 0 15px 50px -10px rgba(0, 20, 80, 0.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: schedule-hub-fade-in 0.7s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.page-schedule .schedule-hub__content {
  padding: 2rem;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__content {
    padding: 1.5rem;
  }
}

.page-schedule .schedule-hub__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

.page-schedule .schedule-hub__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff8e6;
  display: grid;
  place-items: center;
  color: #f3a303;
}

.page-schedule .schedule-hub__icon svg {
  width: 24px;
  height: 24px;
}

.page-schedule .schedule-hub__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e293b;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__title {
    font-size: 1.4rem;
  }
}

.page-schedule .schedule-hub__announcement {
  color: #64748b;
  line-height: 1.9;
  font-size: 1rem;
  max-height: 90px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-in-out;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__announcement {
    font-size: 0.95rem;
  }
}

.page-schedule .schedule-hub__announcement::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.page-schedule .schedule-hub__announcement.is-expanded {
  max-height: 1000px;
}

.page-schedule .schedule-hub__announcement.is-expanded::after {
  opacity: 0;
}

.page-schedule .schedule-hub__announcement p {
  margin: 0;
}

.page-schedule .schedule-hub__toggle {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  background: none;
  border: none;
  color: #f3a303;
  font-weight: 700;
  cursor: pointer;
}

.page-schedule .schedule-hub__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.page-schedule .schedule-hub__toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.page-schedule .schedule-hub__divider {
  border: none;
  height: 1px;
  background-color: #e2e8f0;
  margin: 2rem 0 0;
}

.page-schedule .schedule-hub__filters {
  padding: 1.5rem 2rem;
  background-color: #fcfcfc;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__filters {
    padding: 1.5rem;
  }
}

.page-schedule .schedule-hub__filters--solo {
  margin-bottom: 32px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  box-shadow: 0 15px 50px -10px rgba(0, 20, 80, 0.1);
  padding: 1.5rem 2rem;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__filters--solo {
    padding: 1.5rem;
  }
}

.page-schedule .schedule-hub__filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .page-schedule .schedule-hub__filter-list {
    justify-content: center;
  }
}

.page-schedule .schedule-hub__filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  background-color: #f1f5f9;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.page-schedule .schedule-hub__filter-btn:hover,
.page-schedule .schedule-hub__filter-btn:focus {
  background-color: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.page-schedule .schedule-hub .uk-active > .schedule-hub__filter-btn {
  background-image: linear-gradient(45deg, #ffb703, #f3a303);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px -5px rgba(243, 163, 3, 0.6);
  transform: translateY(-2px);
}

.page-schedule .box-anime {
  margin-bottom: 36px;
  border-radius: 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.page-schedule .box-anime .title {
  padding: 24px 28px 12px;
  display: flex;
  align-items: center;
}

.page-schedule .box-anime .title h4 {
  margin: 0;
}

.page-schedule .box-anime .title h4 span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: #d97706;
  border-radius: 0;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: none;
}

.page-schedule .box-anime .body {
  padding: 12px 28px 28px;
}

@media (max-width: 1024px) {
  .page-schedule .box-anime .body {
    padding: 12px 22px 24px;
  }
}

@media (max-width: 768px) {
  .page-schedule .box-anime .body {
    padding: 10px 18px 22px;
  }
}

@media (max-width: 480px) {
  .page-schedule .box-anime .body {
    padding: 10px 14px 18px;
  }
}

.page-schedule .box-anime .body ul {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .page-schedule .box-anime .body ul {
    gap: 20px;
  }
}

@media (max-width: 960px) {
  .page-schedule .box-anime .body ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .page-schedule .box-anime .body ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 400px) {
  .page-schedule .box-anime .body ul {
    gap: 14px;
  }
}

.page-schedule .box-anime .body ul > .post-anime {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  min-width: 0;
}

.page-schedule .box-anime .body ul > .post-anime .anime-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-animo-pagination].animo-pagination {
  align-items: center;
  direction: rtl;
  display: flex;
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  justify-content: center;
  margin: 2rem auto;
  max-width: 1400px;
  width: 100%;
}

.animo-pagination__list {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  justify-content: center;
}

.animo-pagination__item {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  color: #374151;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 800;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 2.75rem;
}

.animo-pagination__item:hover {
  background: #fffaf0;
  border-color: #f3a303;
  box-shadow: 0 14px 30px rgba(243, 163, 3, 0.16);
  color: #f3a303;
  transform: translateY(-1px);
}

.animo-pagination__item--active {
  background: #f3a303;
  border-color: #f3a303;
  box-shadow: 0 12px 28px rgba(243, 163, 3, 0.3);
  color: #fff;
}

.animo-pagination__item--active:hover {
  background: #f3a303;
  color: #fff;
  transform: none;
}

.animo-pagination__item--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.animo-pagination__item svg {
  height: 1.25rem;
  width: 1.25rem;
}

.animo-pagination__ellipsis {
  position: relative;
}

.animo-pagination__jump {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  bottom: 4rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  display: none;
  gap: 0.375rem;
  left: 50%;
  padding: 0.5rem;
  position: absolute;
  transform: translateX(-50%);
  width: 10rem;
  z-index: 50;
}

.animo-pagination__jump.is-open {
  display: flex;
}

.animo-pagination__jump-arrow {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  bottom: -0.375rem;
  height: 0.75rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 0.75rem;
}

.animo-pagination__jump-input {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 800;
  height: 2.25rem;
  outline: none;
  text-align: center;
  width: 5rem;
}

.animo-pagination__jump-input:focus {
  background: #fff;
  border-color: #f3a303;
}

.animo-pagination__jump-submit {
  background: #f3a303;
  border: 0;
  border-radius: 0.625rem;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  height: 2.25rem;
  padding: 0 0.75rem;
}

.animo-pagination__jump-submit:hover {
  background: #e09600;
}

@media (max-width: 640px) {
  .animo-pagination__list {
    gap: 0.375rem;
  }

  .animo-pagination__item {
    font-size: 0.875rem;
    height: 2.5rem;
    width: 2.5rem;
  }

  .animo-pagination__item--optional {
    display: none;
  }
}

.page-genre .genres {
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  margin: 0 0 32px;
  border-radius: 16px;
  border: 1px solid rgba(231, 229, 228, 0.8);
  width: 100%;
  max-width: none;
}

@media (min-width: 640px) {
  .page-genre .genres {
    padding: 24px;
  }
}

.page-genre .genre-selector-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.page-genre .genre-selector-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #1c1917;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.5;
}

.page-genre .genre-selector-card__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  font-size: 0.8125rem;
}

.page-genre .genre-selector-card__search {
  gap: 8px;
  min-height: 40px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-color: rgba(231, 229, 228, 0.9);
  border-radius: 12px;
  background: rgba(250, 250, 249, 0.9);
  box-shadow: none;
}

.page-genre .genre-selector-card__search:focus-within {
  border-color: #fbbf24;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.page-genre .genre-selector-card__search .box-search-studios__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #d97706;
  font-size: 0.875rem;
}

.page-genre .genre-selector-card__search .box-search-studios__icon::before {
  content: none;
}

.page-genre .genre-selector-card__search input {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.page-genre .genre-selector-card__search input::-moz-placeholder {
  color: #a8a29e;
}

.page-genre .genre-selector-card__search input::placeholder {
  color: #a8a29e;
}

.page-genre .genre-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-genre .genre-tags-grid li {
  margin: 0;
}

.page-genre .genre-tag {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 32px;
  padding: 5px 10px;
  background: rgba(250, 250, 249, 0.9);
  color: #1c1917;
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid rgba(231, 229, 228, 0.8);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.page-genre .genre-tag .material-icons {
  color: var(--genre-accent, #d97706);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.page-genre .genre-tag:hover {
  border-color: var(--genre-accent, #fcd34d);
  background: color-mix(in srgb, var(--genre-accent, #f59e0b) 9%, #ffffff);
  color: var(--genre-accent, #78350f);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--genre-accent, #78350f) 14%, transparent);
}

.page-genre .genre-tag:hover .material-icons {
  transform: scale(1.1);
}

.page-genre .genre-tag:focus-visible {
  outline: 2px solid var(--genre-accent, #d97706);
  outline-offset: 2px;
  border-color: var(--genre-accent, #f59e0b);
  background: color-mix(in srgb, var(--genre-accent, #f59e0b) 9%, #ffffff);
}

@media (max-width: 639px) {
  .page-genre .genres {
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 14px;
  }

  .page-genre .genre-selector-card__header {
    margin-bottom: 12px;
  }

  .page-genre .genre-selector-card__title {
    font-size: 0.8125rem;
  }

  .page-genre .genre-tags-grid {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(32px, 1fr));
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    overflow-x: auto;
    padding: 1px;
    scrollbar-width: none;
  }

  .page-genre .genre-tags-grid::-webkit-scrollbar {
    display: none;
  }

  .page-genre .genre-tag {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 0.65rem;
    white-space: nowrap;
  }
}

.page-year-index {
  --year-primary-color: #f3a303;
  --year-primary-shadow: rgba(243, 163, 3, 0.2);
  --year-bg-color: #f4f5f7;
  --year-card-bg: #ffffff;
  --year-text-color: #2c3e50;
  --year-subtle-text-color: #7f8c8d;
  --year-border-color: #e9ecef;
  --year-item-bg: #f8f9fa;
}

.page-year-index .year-index__layout {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) 0;
}

.page-year-index .genres {
  padding: clamp(28px, 5vw, 40px);
  max-width: none;
  width: 100%;
  margin: 0 auto;
  color: var(--year-text-color);
  background-color: var(--year-card-bg);
  border-radius: 22px;
  border: 1px solid var(--year-border-color);
  box-shadow: 0 22px 60px rgba(148, 163, 184, 0.18);
}

.page-year-index .box-search-studios {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: block;
}

.page-year-index .box-search-studios:focus-within {
  border: none;
  background: transparent;
  box-shadow: none;
}

.page-year-index .search-container {
  margin-bottom: 28px;
}

.page-year-index .search-input {
  width: 100%;
  padding: 13px 18px;
  font-size: 16px;
  font-family: inherit;
  background-color: var(--year-bg-color);
  border: 1px solid #e0e4e8;
  color: var(--year-text-color);
  border-radius: 10px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.page-year-index .search-input::-moz-placeholder {
  color: var(--year-subtle-text-color);
}

.page-year-index .search-input::placeholder {
  color: var(--year-subtle-text-color);
}

.page-year-index .search-input:focus {
  outline: none;
  background-color: var(--year-card-bg);
  border-color: var(--year-primary-color);
  box-shadow: 0 0 0 4px var(--year-primary-shadow);
}

.page-year-index .decades-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-year-index .decade-group {
  border: 1px solid var(--year-border-color);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--year-card-bg);
}

.page-year-index .decade-group[open] > .year-content-wrapper {
  max-height: 500px;
  opacity: 1;
  padding: 20px 24px;
}

.page-year-index .decade-group[open] > .decade-header .fa-chevron-down {
  transform: rotate(-180deg);
}

.page-year-index .decade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--year-text-color);
  background-color: var(--year-item-bg);
  transition: background-color 0.2s ease;
  list-style: none;
}

.page-year-index .decade-header:hover {
  background-color: #f0f0f0;
}

.page-year-index .decade-header::-webkit-details-marker {
  display: none;
}

.page-year-index .decade-header .fa-chevron-down {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--year-subtle-text-color);
}

@media (max-width: 640px) {
  .page-year-index .decade-header {
    padding: 15px 18px;
    font-size: 16px;
  }
}

.page-year-index .year-content-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding: 0 24px;
  background-color: var(--year-card-bg);
}

.page-year-index .year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.page-year-index .year-grid li {
  margin: 0;
}

.page-year-index .year-tag {
  display: block;
  background-color: var(--year-item-bg);
  color: var(--year-subtle-text-color);
  padding: 8px 10px;
  border-radius: 50px;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

.page-year-index .year-tag:hover,
.page-year-index .year-tag:focus {
  background-color: var(--year-primary-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--year-primary-shadow);
}

.page-year-index .year-tag:focus {
  outline: none;
}

.page-year-index .year-tag.active {
  background-color: var(--year-primary-color);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 10px var(--year-primary-shadow);
}

.page-anime .box-anime,
.page-season .box-anime {
  overflow: visible;
  background-color: var(--ap-card-background);
  border: 1px solid var(--ap-border-color);
  border-radius: 22px;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.45), 0 16px 35px -30px rgba(15, 23, 42, 0.32);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (max-width: 960px) {
  .page-anime .box-anime,
  .page-season .box-anime {
    border-radius: 20px;
  }
}

@media (max-width: 720px) {
  .page-anime .box-anime,
  .page-season .box-anime {
    border-radius: 18px;
    box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.35);
  }
}

@media (max-width: 540px) {
  .page-anime .box-anime,
  .page-season .box-anime {
    border-radius: 16px;
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.32);
  }
}

.page-anime .box-anime .title,
.page-season .box-anime .title {
  margin-bottom: 0;
  padding: 24px 28px 14px;
  border-bottom: 1px solid var(--ap-border-color);
}

@media (max-width: 960px) {
  .page-anime .box-anime .title,
  .page-season .box-anime .title {
    padding: 22px 22px 12px;
  }
}

@media (max-width: 640px) {
  .page-anime .box-anime .title,
  .page-season .box-anime .title {
    padding: 20px 18px 10px;
  }
}

.page-anime .box-anime .body,
.page-season .box-anime .body {
  padding: 24px 22px 16px;
}

@media (max-width: 960px) {
  .page-anime .box-anime .body,
  .page-season .box-anime .body {
    padding: 20px 18px 12px;
  }
}

@media (max-width: 768px) {
  .page-anime .box-anime .body,
  .page-season .box-anime .body {
    padding: 18px 14px 10px;
  }
}

@media (max-width: 480px) {
  .page-anime .box-anime .body,
  .page-season .box-anime .body {
    padding: 16px 12px 10px;
  }
}

.page-anime .box-anime .body ul,
.page-season .box-anime .body ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

@media (max-width: 960px) {
  .page-anime .box-anime .body ul,
  .page-season .box-anime .body ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .page-anime .box-anime .body ul,
  .page-season .box-anime .body ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .page-anime .box-anime .body ul,
  .page-season .box-anime .body ul {
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .page-anime .box-anime .body ul,
  .page-season .box-anime .body ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.page-anime .box-anime .body ul > .post-anime,
.page-season .box-anime .body ul > .post-anime {
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  display: flex;
  min-width: 0;
  min-height: 100%;
}

.page-anime .box-anime .body ul > .post-anime .anime-card,
.page-season .box-anime .body ul > .post-anime .anime-card {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  background-clip: padding-box;
}

@media (max-width: 420px) {
  .page-anime .box-anime .body ul > .post-anime .anime-card,
  .page-season .box-anime .body ul > .post-anime .anime-card {
    border-radius: 14px;
  }
}

.page-anime .box-anime .body ul > .post-anime .card-content,
.page-season .box-anime .body ul > .post-anime .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

@media (max-width: 420px) {
  .page-anime .box-anime .body ul > .post-anime .card-content,
  .page-season .box-anime .body ul > .post-anime .card-content {
    padding: 0.65rem;
    gap: 0.5rem;
  }
}

.page-anime .box-anime.box-card,
.page-season .box-anime.box-card {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.page-anime .box-anime.box-card .title,
.page-season .box-anime.box-card .title {
  border-bottom: 0;
}

.page-season .box-anime {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.page-season .box-anime .title {
  border-bottom: none;
}

.slider-horizontal {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  transition: all 0.2s;
  display: flex;
  align-items: stretch;
  --slider-gap: 18px;
  gap: var(--slider-gap);
  padding: 0 10px 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.slider-horizontal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.slider-horizontal::-webkit-scrollbar-track {
  background: transparent;
}

.slider-horizontal::-webkit-scrollbar-thumb {
  background: rgba(226, 232, 240, 0.6);
  border-radius: 999px;
}

.slider-horizontal > .post-anime {
  --anime-card-width: clamp(150px, calc((100% - (5 * var(--slider-gap))) / 6), 210px);
  flex: 0 0 var(--anime-card-width);
  width: var(--anime-card-width);
  margin: 0;
  scroll-snap-align: center;
}

.slider-horizontal > .media-song-card {
  list-style: none;
  --media-card-width: clamp(260px, calc((100% - (2 * var(--slider-gap))) / 3), 340px);
  flex: 0 0 var(--media-card-width);
  width: var(--media-card-width);
  margin: 0;
  scroll-snap-align: start;
}

@media (max-width: 1200px) {
  .slider-horizontal > .post-anime {
    --anime-card-width: clamp(170px, calc((100% - (3 * var(--slider-gap))) / 4), 220px);
  }

  .slider-horizontal > .media-song-card {
    --media-card-width: clamp(240px, calc((100% - (2 * var(--slider-gap))) / 2.5), 310px);
  }
}

@media (max-width: 960px) {
  .slider-horizontal > .post-anime {
    --anime-card-width: clamp(160px, calc((100% - (2 * var(--slider-gap))) / 3), 200px);
  }

  .slider-horizontal > .media-song-card {
    --media-card-width: clamp(220px, calc((100% - (2 * var(--slider-gap))) / 2.2), 290px);
  }
}

@media (max-width: 768px) {
  .slider-horizontal {
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
  }

  .slider-horizontal > .post-anime {
    --anime-card-width: min(280px, calc(85vw));
    flex: 0 0 var(--anime-card-width);
    max-width: var(--anime-card-width);
  }

  .slider-horizontal > .media-song-card {
    --media-card-width: min(320px, calc(88vw));
    flex: 0 0 var(--media-card-width);
    max-width: var(--media-card-width);
  }

  .slider-horizontal {
    --slider-gap: 14px;
    padding: 0 6px 18px;
  }
}

@media (max-width: 540px) {
  .slider-horizontal {
    --slider-gap: 12px;
    padding: 0 4px 16px;
  }

  .slider-horizontal > .post-anime {
    --anime-card-width: calc((100% - var(--slider-gap)) / 2);
  }

  .slider-horizontal > .media-song-card {
    --media-card-width: calc((100% - var(--slider-gap)) / 1.6);
  }
}

.slider-horizontal.active > .post-anime {
  pointer-events: none;
}

.slider-horizontal.active > .media-song-card {
  pointer-events: none;
}

.slider-horizontal.media-song-slider {
  --slider-gap: 18px;
  padding: 0 8px 22px;
}

.slider-horizontal.media-song-slider > .media-song--slider {
  flex: 0 0 clamp(260px, 30vw, 320px);
  width: clamp(260px, 30vw, 320px);
  scroll-snap-align: start;
  margin: 0;
}

@media (max-width: 960px) {
  .slider-horizontal.media-song-slider > .media-song--slider {
    flex-basis: clamp(240px, 42vw, 300px);
    width: clamp(240px, 42vw, 300px);
  }
}

@media (max-width: 640px) {
  .slider-horizontal.media-song-slider {
    --slider-gap: 14px;
    padding: 0 6px 18px;
  }

  .slider-horizontal.media-song-slider > .media-song--slider {
    flex-basis: min(280px, 86vw);
    width: min(280px, 86vw);
  }
}

.studio-directory {
  padding: 48px 0 64px;
}

@media (max-width: 960px) {
  .studio-directory {
    padding: 40px 0 48px;
  }
}

@media (max-width: 640px) {
  .studio-directory {
    padding: 32px 0 40px;
  }
}

.studio-directory__card {
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 18px 44px rgba(15, 24, 44, 0.08);
  border: 1px solid rgba(17, 24, 39, 0.06);
}

.studio-directory__letters {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

.box-search-studios {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(243, 163, 3, 0.05);
  border: 1px solid rgba(243, 163, 3, 0.18);
  border-radius: 12px;
  padding: clamp(10px, 2.5vw, 14px) clamp(14px, 3vw, 20px);
  margin-bottom: clamp(16px, 4vw, 28px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.box-search-studios:focus-within {
  border-color: rgba(243, 163, 3, 0.5);
  background: rgba(243, 163, 3, 0.08);
  box-shadow: 0 0 0 3px rgba(243, 163, 3, 0.14);
}

.box-search-studios__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  background: rgba(243, 163, 3, 0.12);
  position: relative;
}

.box-search-studios__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M14.5115 13.0978L18.4244 17.0107L17.0102 18.4249L13.0973 14.5121C11.8347 15.5209 10.2054 16.1252 8.44056 16.1252C4.29927 16.1252 0.9375 12.7634 0.9375 8.62216C0.9375 4.48087 4.29927 1.11911 8.44056 1.11911C12.5818 1.11911 15.9436 4.48087 15.9436 8.62216C15.9436 10.387 15.3393 12.0163 14.3305 13.2789L14.5115 13.0978ZM13.0471 12.8735C14.0675 11.7836 14.6907 10.2777 14.6907 8.62216C14.6907 5.16538 11.8973 2.37197 8.44056 2.37197C4.98378 2.37197 2.19036 5.16538 2.19036 8.62216C2.19036 12.0789 4.98378 14.8723 8.44056 14.8723C10.0961 14.8723 11.6019 14.2492 12.6919 13.2288L13.0471 12.8735Z" fill="%23f3a303"/%3E%3C/svg%3E') no-repeat center;
}

.box-search-studios input {
  background: transparent;
  border: none;
  color: #111827;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
  font-family: inherit;
  padding: 0;
  outline: none;
}

.box-search-studios input::-moz-placeholder {
  color: rgba(17, 24, 39, 0.45);
}

.box-search-studios input::placeholder {
  color: rgba(17, 24, 39, 0.45);
}

.studio-letter.is-hidden {
  display: none;
}

.studio-letter:not(:has(.studio-letter__item:not(.uk-hidden))) {
  display: none;
}

.studio-letter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.studio-letter__title {
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  color: #111827;
  font-weight: 700;
  margin: 0;
}

.studio-letter__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .studio-letter__grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.studio-letter__item a {
  display: block;
  padding: 12px 16px;
  background: rgba(17, 24, 39, 0.04);
  border-radius: 12px;
  color: #1f2937;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.studio-letter__item a:hover,
.studio-letter__item a:focus {
  background: #f3a303;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(243, 163, 3, 0.22);
}

.box-captcha {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  overflow: hidden;
}

.box-captcha .uk-grid {
  align-items: center;
}

.box-captcha button {
  border: 0;
  color: #353535;
  background-color: #fff;
  cursor: pointer;
  padding: 6px;
}

.box-captcha button .uk-icon {
  width: 28px;
}

.box-captcha img {
  margin: 0;
}

.invalid-feedback {
  color: #f44336;
}

.js-box-captcha .uk-input {
  margin: 0 !important;
}

.customModal .uk-modal-body {
  white-space: break-spaces;
}

.notification {
  position: relative;
  cursor: default !important;
}

.notification .data-top {
  padding: 5px;
  padding-bottom: 0;
}

.notification .head {
  border-bottom: 1px solid #ebebeb;
  padding: 10px;
}

.notification .head .leoIcon {
  transition: 0.3s all;
}

.notification .head .leoIcon:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.notification .head .title {
  padding: 1px 0;
  font-weight: bold;
}

.notification .head .checks {
  cursor: pointer;
  margin-right: 10px;
  transition: 0.3s all;
}

.notification .head .setting {
  color: #606060;
  display: inline-block;
  margin-right: 10px;
}

.notification .head .more {
  background-color: #f7f7fa;
  color: #606060;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  transition: 0.3s all;
}

.notification .head .more:hover {
  transition: 0.3s all;
  opacity: 0.6;
}

.notification .no-items {
  padding: 10px;
  padding-bottom: 5px;
}

.notification .item {
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px;
  padding-bottom: 10px;
}

.notification .item .uk-icon.check {
  padding: 10px;
  background-color: #dedede;
  border-radius: 50%;
  color: #000;
  display: none;
  width: 39px;
  transition: 0.3s all;
}

.notification .item .uk-icon.check:hover {
  background-color: #565656;
  color: #fff;
  transition: 0.3s all;
}

.notification .item:hover .icon {
  display: none;
}

.notification .item:hover .uk-icon.check {
  display: inline-block;
  cursor: pointer;
}

.notification .item:last-child {
  border: 0;
  margin-bottom: 0;
}

.notification .item:first-child {
  margin-top: 5px;
}

.notification .item .icon {
  border-radius: 50%;
  padding: 2px;
}

.notification .item .icon svg {
  width: 35px;
  height: 35px;
}

.notification .item .time {
  font-size: 12px;
  background-color: #f7f7fa;
  color: #606060;
  padding: 1px 5px;
  border-radius: 5px;
  display: inline-block;
}

.notification .item [resource-name=notifications] .link-view {
  margin-left: 15px;
}

.notification .item .link-view {
  display: inline-block;
  background-color: #fff4dd;
  color: #f6a504;
  padding: 4px 10px;
  border-radius: 5px;
  transition: 0.3s all;
  font-size: 13px;
}

.notification .item .link-view:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.notification .item .link-view .leoIcon {
  margin-left: 5px;
  width: 17px;
}

.notification p {
  margin-bottom: 5px;
  font-size: 13px;
}

.notification .btn {
  padding: 8px 9px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s all;
  margin-top: 1px;
  color: #fff;
  background-color: #f3a303;
  position: relative;
}

.notification .btn .leoIcon svg {
  width: 20px;
  height: 20px;
}

.notification .btn:hover {
  opacity: 0.6;
}

.notification .btn .count {
  position: absolute;
  left: -7px;
  top: -9px;
  background-color: #f1a102;
  border-radius: 5px;
  min-width: 20px;
  text-align: center;
  font-size: 12px;
  border: 1px solid #fff;
}

.notification .body {
  position: absolute;
  z-index: 1;
  background-color: #fff;
  left: 0;
  width: 450px;
  margin-top: 19px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.notification .hide {
  cursor: pointer;
  text-align: center;
  background-color: #fee6e5;
  color: #f44336;
  border-radius: 5px;
  padding: 5px;
  transition: 0.3s all;
  margin-bottom: 5px;
  display: none;
}

@media (max-width: 500px) {
  .notification .body {
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    position: fixed;
    margin-top: 0;
    bottom: 0;
  }

  .notification .hide {
    display: block;
  }
}

.notification .items {
  overflow-y: auto;
}

.notification .read-all {
  text-align: center;
  background-color: #e2f3ff;
  color: #0073c3;
  border-radius: 5px;
  padding: 5px;
  transition: 0.3s all;
  margin-bottom: 10px;
  cursor: pointer;
}

.notification .read-all:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.profile .main-tab {
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  margin-bottom: 20px;
  overflow: hidden;
}

.profile .main-tab a {
  padding: 14px;
  border-bottom-width: 2px;
  border-radius: 2px;
  font-weight: bold;
}

.profile .main-tab .uk-active a {
  border-color: #f3a303;
  color: #f3a303;
}

.profile .profile-header {
  background-color: #f2a202;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.0392156863);
  padding: 15px;
  color: #ffffff;
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile .profile-header [leoicon=verified] {
  background-color: #fff;
  border-radius: 50%;
  display: flex;
}

.profile .main-tab-body .right-data {
  background-color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

.profile .main-tab-body .right-data .avatar {
  max-width: 100%;
  margin-bottom: 15px;
}

.profile .main-tab-body .right-data .name {
  margin-bottom: 15px;
}

.profile .left-data .box {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 5px;
}

.profile .left-data .box .title {
  color: #f2a202;
  font-weight: bold;
  margin-bottom: 15px;
  display: flex;
}

.profile .left-data .box .title .icon {
  margin-left: 10px;
}

.profile .statistics .item {
  display: flex;
  align-content: center;
  margin-bottom: 10px;
  align-items: center;
}

.profile .statistics .item .key {
  flex: 1;
}

.profile .statistics .item .box-color {
  padding: 6px;
  border-radius: 50%;
  margin-left: 10px;
}

.profile .grid-list {
  text-align: right;
}

.profile .grid-list .item {
  display: flex;
  margin-bottom: 10px;
}

.profile .grid-list .item .label {
  flex: 1;
}

.profile .graph-anime {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 15px;
}

.profile .graph-anime .box-color {
  height: 15px;
}

.profile .resourceBookmark {
  position: relative;
}

.profile .resourceBookmark nav {
  background-color: transparent;
  box-shadow: none;
}

.profile .resourceBookmark input.box-search-input {
  width: 100%;
  border: 1px solid #dfdfdf;
  padding: 5px 10px;
  border-radius: 5px;
}

.profile .resourceBookmark .box-filters {
  margin-bottom: 20px;
}

.profile .resourceBookmark .box-filters .box-select .select {
  min-width: 205px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.profile .resourceBookmark .box-filters .box-select .select .label {
  flex: 1;
}

.profile .resourceBookmark .box-filters .box-select .select .label-title {
  color: #f2a202;
  font-weight: bold;
}

.profile .resourceBookmark .box-filters .box-select .select:hover {
  opacity: 0.6;
}

.profile .resourceBookmark .box-filters .box-select .body-items {
  max-height: unset;
}

.profile .resourceBookmark .resourceTable .item {
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #efefef;
}

.profile .resourceBookmark .resourceTable .item .body {
  padding: 10px 0;
}

.profile .resourceBookmark .resourceTable .item .anime-title {
  color: #ba7c00;
}

.uk-container {
  max-width: 1200px;
  padding-right: 24px;
  padding-left: 24px;
}

.page-rule {
  padding: 72px 0 112px;
}

.page-rule .uk-container {
  max-width: 960px;
}

.page-rule .rule-header {
  text-align: center;
  margin-bottom: 52px;
}

.page-rule .rule-header__title {
  font-size: 2rem;
  font-weight: 700;
  color: #3f4246;
  margin-bottom: 14px;
}

.page-rule .rule-header__subtitle {
  font-size: 1rem;
  color: #7b8187;
}

.page-rule .uk-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 44px;
  margin-bottom: 32px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: transform 0.3s ease;
}

.page-rule .uk-card:hover {
  transform: translateY(-2px);
}

.page-rule .uk-card-title {
  font-size: 1.12rem;
  font-weight: 600;
  color: #1f2933;
  margin-bottom: 22px;
}

.page-rule .rule-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-rule .rule-accordion > li {
  border-bottom: 1px solid #e5e9f1;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.page-rule .rule-accordion > li:last-child {
  border-bottom: none;
}

.page-rule .rule-accordion > li.uk-open {
  border-bottom-color: transparent;
  background-color: rgba(252, 163, 17, 0.04);
}

.page-rule .rule-accordion > li.uk-open .rule-accordion-title {
  color: #fca311;
}

.page-rule .rule-accordion > li.uk-open .rule-accordion-title::after {
  border-color: rgba(252, 163, 17, 0.6);
  background: linear-gradient(#fca311, #fca311) center/16px 2px no-repeat;
}

.page-rule .rule-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 1rem;
  font-weight: 500;
  color: #3f4246;
  padding: 20px 0;
  padding-inline-end: 64px;
  padding-left: 64px;
  position: relative;
  transition: color 0.3s ease;
}

.page-rule .rule-accordion-title:hover {
  color: #fca311;
}

.page-rule .rule-accordion-title:hover::after {
  border-color: rgba(252, 163, 17, 0.4);
}

.page-rule .rule-accordion-title::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(209, 213, 219, 0.9);
  transform: translateY(-50%);
  transition: border-color 0.3s ease, background 0.3s ease;
  background: linear-gradient(#8e949c, #8e949c) center/14px 2px no-repeat, linear-gradient(#8e949c, #8e949c) center/2px 14px no-repeat;
}

.page-rule .rule-accordion-title::before {
  display: none;
}

.page-rule .rule-accordion-content {
  color: #7a7f85;
  font-size: 0.88rem;
  line-height: 2.1;
  padding: 0 0 18px;
}

.page-rule .rule-accordion-content p {
  margin-bottom: 12px;
}

@media (max-width: 960px) {
  .page-rule {
    padding: 48px 0 88px;
  }

  .page-rule .uk-card {
    padding: 30px 28px;
  }

  .page-rule .rule-accordion-title {
    padding-inline-end: 56px;
    padding-left: 56px;
  }
}

@media (max-width: 640px) {
  .page-rule .rule-header__title {
    font-size: 1.6rem;
  }

  .page-rule .rule-accordion-title {
    font-size: 0.95rem;
  }

  .page-rule .rule-accordion-content {
    font-size: 0.85rem;
  }
}

.compare-anime .content {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.compare-anime h3 {
  margin-bottom: 25px;
  font-size: 16px;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 8px;
}

.compare-anime h3 b {
  color: #f2a303;
}

.compare-anime table {
  width: 100%;
  border-collapse: collapse;
}

.compare-anime table td {
  border-bottom: 1px solid #ededed;
  padding: 5px;
}

.tab-friends .box {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 5px;
}

.tab-friends .box img {
  width: 80px;
  margin-left: 10px;
}

.tab-friends .box a.avatar {
  color: #4e4e4e;
  display: block;
  transition: 0.3s all;
  overflow: hidden;
  border-radius: 5px;
}

.tab-friends .box a.avatar:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.action-top {
  margin-bottom: 15px;
}

.action-top .add-friend {
  background-color: #2196f3;
  border: 0;
  color: #ffffff;
  padding: 7px 15px;
  border-radius: 5px;
  margin-left: 15px;
  cursor: pointer;
  transition: 0.3s all;
}

.action-top .add-friend .uk-icon {
  margin-left: 5px;
}

.action-top .add-friend:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.action-top form {
  display: inline-block;
}

.action-top .compare-anime {
  display: inline-block;
  background-color: #4caf50;
  color: #fff;
  padding: 7px 15px;
  border-radius: 5px;
  transition: 0.3s all;
  margin-left: 15px;
}

.action-top .compare-anime:hover {
  opacity: 0.5;
  transition: 0.3s all;
}

.action-top .box-sharing {
  display: inline-block;
}

.action-top .box-sharing .btn {
  background-color: #f6a504;
  color: #fff;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(246, 165, 4, 0.25);
  transition: 0.3s all;
  cursor: pointer;
}

.action-top .box-sharing .btn:hover {
  opacity: 0.85;
  transition: 0.3s all;
}

.box-app-index {
  color: #f6a504;
  margin-bottom: 50px;
  padding: 32px;
  border-radius: 7px;
  opacity: 0.4;
  background-color: #ff3e3e;
  opacity: 0.4;
  background-color: #ffffff;
  opacity: 0.9;
  background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 47.5px 47.5px, linear-gradient(#f6a504 3.8px, transparent 3.8px) 0 -1.9px, linear-gradient(90deg, #f6a504 3.8px, #ffffff 3.8px) -1.9px 0;
}

.box-app-index .title {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.box-app-index .dic {
  font-size: 16px;
}

.box-app-index .more {
  display: block;
  text-align: center;
  background-color: #f6a504;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  transition: 0.6s all;
}

.box-app-index .more:last-child {
  margin-bottom: 0;
}

.box-app-index .more:hover {
  opacity: 0.6;
  transition: 0.6s all;
}

.page-box-filters {
  width: 100%;
  margin: 0 0 32px;
  display: block;
}

.page-box-filters .filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: none;
}

.page-box-filters .filter-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
}

.page-box-filters .filter-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background-color: #ffffff;
  min-width: 220px;
}

.page-box-filters .filter-search__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
}

.page-box-filters .filter-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.page-box-filters .filter-chip__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background-color: #ffffff;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.page-box-filters .filter-chip__button:hover,
.page-box-filters .filter-chip__button:focus-visible {
  border-color: rgba(243, 163, 3, 0.55);
  color: #e58f00;
  outline: none;
}

.page-box-filters .filter-chip__button.is-active {
  background: linear-gradient(135deg, rgba(243, 163, 3, 0.15), rgba(243, 163, 3, 0.05));
  border-color: rgba(243, 163, 3, 0.65);
  color: #b46900;
}

.page-box-filters .filter-chip__label {
  font-weight: 700;
  font-size: 0.9rem;
}

.page-box-filters .filter-chip__value {
  font-size: 0.88rem;
  color: inherit;
}

.page-box-filters .filter-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.page-box-filters .filter-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.page-box-filters .filter-toggle {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background-color: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.page-box-filters .filter-toggle:hover,
.page-box-filters .filter-toggle:focus-within {
  background-color: rgba(243, 163, 3, 0.12);
  border-color: rgba(243, 163, 3, 0.4);
}

.page-box-filters .filter-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.page-box-filters .filter-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.35);
  transition: background-color 0.25s ease;
}

.page-box-filters .filter-toggle__thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 0.25s ease;
}

.page-box-filters .filter-toggle input:checked + .filter-toggle__track {
  background: linear-gradient(135deg, #ff9400, #ff7a00);
}

.page-box-filters .filter-toggle input:checked + .filter-toggle__track .filter-toggle__thumb {
  transform: translateX(-20px);
}

.page-box-filters .filter-toggle__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1f2937;
}

.page-box-filters .filter-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 14px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #ff9400, #ff7a00);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.page-box-filters .filter-apply-btn:hover,
.page-box-filters .filter-apply-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.page-box-filters .filter-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1200;
}

.page-box-filters .filter-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-box-filters .filter-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
}

.page-box-filters .filter-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(90vh, 640px);
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-box-filters .filter-modal__dialog--tall {
  max-height: min(90vh, 720px);
}

.page-box-filters .filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  position: relative;
}

.page-box-filters .filter-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
}

.page-box-filters .filter-modal__close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.2s ease;
  position: absolute;
  left: 18px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.page-box-filters .filter-modal__close:hover,
.page-box-filters .filter-modal__close:focus-visible {
  color: #f97316;
  outline: none;
}

.page-box-filters .filter-modal__body {
  padding: 18px 22px;
  overflow-y: auto;
}

.page-box-filters .filter-modal__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.page-box-filters .filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background-color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-box-filters .filter-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-box-filters .filter-option__mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.5);
  position: relative;
  flex-shrink: 0;
}

.page-box-filters .filter-option__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.page-box-filters .filter-option__text {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1f2937;
}

.page-box-filters .filter-option.is-active {
  border-color: rgba(243, 163, 3, 0.65);
  background: linear-gradient(135deg, rgba(243, 163, 3, 0.18), rgba(243, 163, 3, 0.04));
}

.page-box-filters .filter-option.is-active .filter-option__mark {
  border-color: rgba(243, 163, 3, 0.85);
}

.page-box-filters .filter-option.is-active .filter-option__mark::after {
  background-color: #f3a303;
}

.page-box-filters .filter-modal__footer {
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  justify-content: flex-end;
}

.page-box-filters .filter-modal__apply {
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9400, #ff7a00);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.page-box-filters .filter-modal__apply:hover,
.page-box-filters .filter-modal__apply:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 640px) {
  .page-box-filters .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page-box-filters .filter-toolbar__actions {
    width: 100%;
    justify-content: space-between;
  }

  .page-box-filters .filter-apply-btn {
    width: 100%;
  }

  .page-box-filters .filter-toggle {
    flex: 1 1 auto;
    justify-content: space-between;
  }
}

body.is-filter-modal-open {
  overflow: hidden;
  touch-action: none;
}

.recommendation-archive {
  margin: 32px 0 48px;
}

@media (max-width: 640px) {
  .recommendation-archive {
    margin: 24px 0 40px;
  }
}

@media (max-width: 480px) {
  .recommendation-archive {
    margin: 20px 0 32px;
  }
}

.recommendation-archive .recommendation-hero {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: 36px 40px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06);
  margin: 0 auto 28px;
  max-width: 1200px;
}

@media (max-width: 960px) {
  .recommendation-archive .recommendation-hero {
    padding: 28px 24px;
    border-radius: 32px;
  }
}

@media (max-width: 640px) {
  .recommendation-archive .recommendation-hero {
    padding: 24px 18px;
    border-radius: 24px;
  }
}

.recommendation-archive .recommendation-hero .recommendation-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #111827;
}

.recommendation-archive .recommendation-hero .recommendation-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.recommendation-archive .recommendation-hero .recommendation-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}

.recommendation-archive .recommendation-hero .recommendation-hero__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.recommendation-archive .recommendation-hero .recommendation-hero__title {
  font-size: clamp(1.85rem, 1.35rem + 1.1vw, 2.35rem);
  font-weight: 900;
  color: #111827;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.recommendation-archive .recommendation-hero .recommendation-hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(59, 130, 246, 0.12));
  color: #1f2937;
  border: 1px solid rgba(79, 70, 229, 0.14);
  box-shadow: 0 8px 18px -10px rgba(59, 130, 246, 0.4);
  text-wrap: balance;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metrics {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  min-width: 110px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #1f2937;
  text-align: center;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 2px;
  background: #eef2ff;
  color: #4f46e5;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric-value {
  font-size: 1.15rem;
  font-weight: 900;
  color: #111827;
  line-height: 1.35;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: #9ca3af;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--blue {
  background: #f0f6ff;
  border-color: #e0edff;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--blue .recommendation-hero__metric-icon {
  background: #e0eaff;
  color: #2563eb;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--amber {
  background: #fff7ed;
  border-color: #ffe9d7;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--amber .recommendation-hero__metric-icon {
  background: #ffe7c7;
  color: #d97706;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--green {
  background: #ecfdf3;
  border-color: #d7f1e3;
}

.recommendation-archive .recommendation-hero .recommendation-hero__metric--green .recommendation-hero__metric-icon {
  background: #dbf5e8;
  color: #047857;
}

.recommendation-archive .recommendation-hero .recommendation-hero__divider {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
}

.recommendation-archive .recommendation-hero .recommendation-hero__synopsis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-archive .recommendation-hero .recommendation-hero__synopsis-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recommendation-archive .recommendation-hero .recommendation-hero__synopsis-dot {
  width: 4px;
  height: 16px;
  background: #d1d5db;
  border-radius: 999px;
  display: inline-block;
}

.recommendation-archive .recommendation-hero .recommendation-hero__synopsis-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #9ca3af;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recommendation-archive .recommendation-hero .recommendation-hero__description {
  font-size: 0.95rem;
  line-height: 1.85;
  color: #4b5563;
  margin: 0;
  font-weight: 500;
  max-width: none;
}

.recommendation-archive .recommendation-archive__grid {
  background-color: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 24px 20px;
}

@media (max-width: 640px) {
  .recommendation-archive .recommendation-archive__grid {
    padding: 20px 16px;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .recommendation-archive .recommendation-archive__grid {
    padding: 18px 14px;
  }
}

.recommendation-archive.recommendation-archive--relation .recommendation-archive__grid {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .recommendation-archive.recommendation-archive--relation .recommendation-archive__grid {
    padding: 0;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .recommendation-archive.recommendation-archive--relation .recommendation-archive__grid {
    padding: 0;
  }
}

.recommendation-archive .recommendation-archive__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 992px) {
  .recommendation-archive .recommendation-archive__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 720px) {
  .recommendation-archive .recommendation-archive__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 540px) {
  .recommendation-archive .recommendation-archive__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .recommendation-archive .recommendation-archive__list {
    gap: 16px;
  }
}

.recommendation-archive .recommendation-archive__list > .post-anime {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  margin: 0;
}

.recommendation-archive .recommendation-archive__list > .post-anime .anime-card {
  width: 100%;
  max-width: none;
}

.recommendation-archive .recommendation-archive__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.recommendation-archive .recommendation-archive__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.recommendation-archive .recommendation-archive__eyebrow {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.recommendation-archive .recommendation-archive__paginator {
  margin-top: 24px;
}

.recommendation-archive--catalog .recommendation-hero__content {
  gap: 18px;
}

.recommendation-archive--catalog .recommendation-hero__description {
  max-width: 840px;
}

.recommendation-archive--catalog .recommendation-archive__filters {
  margin-bottom: 28px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.recommendation-archive--catalog .recommendation-archive__filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 960px) {
  .recommendation-archive--catalog .recommendation-archive__filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .recommendation-archive--catalog .recommendation-archive__filters-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.recommendation-archive--catalog .filter-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recommendation-archive--catalog .filter-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1f2937;
}

.recommendation-archive--catalog .filter-field--checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #f39c12;
}

.recommendation-archive--catalog .filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.recommendation-archive--catalog .filter-select {
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 0 14px;
  font-size: 0.92rem;
  color: #0f172a;
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-archive--catalog .filter-select:focus {
  border-color: #f39c12;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
  outline: none;
}

.recommendation-archive--catalog .filter-submit {
  align-self: flex-start;
  background: linear-gradient(135deg, #f39c12, #ef7e14);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-archive--catalog .filter-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(239, 126, 20, 0.6);
}

.recommendation-archive--catalog .filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ef7e14;
  text-decoration: none;
}

.recommendation-archive--catalog .filter-reset:hover {
  text-decoration: underline;
}

.recommendation-archive--catalog .recommendation-archive__filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .recommendation-archive .recommendation-hero {
    padding: 24px 18px;
  }

  .recommendation-archive .recommendation-hero .recommendation-hero__title-row {
    gap: 10px;
  }

  .recommendation-archive .recommendation-hero .recommendation-hero__subtitle {
    width: 100%;
    justify-content: center;
  }

  .recommendation-archive .recommendation-hero .recommendation-hero__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .recommendation-archive .recommendation-archive__grid {
    padding: 20px 16px;
  }
}

@keyframes filter-dropdown-reveal {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.box-dic {
  margin-top: 40px;
  margin-bottom: 0 !important;
  --seo-primary-color: #f3a303;
  --seo-background: #ffffff;
  --seo-text-color: #1e293b;
  --seo-subtle-text: #475569;
  --seo-border-color: rgba(148, 163, 184, 0.28);
  --seo-shadow: 0 24px 45px rgba(15, 23, 42, 0.08);
}

.box-dic .body {
  position: relative;
  padding: clamp(28px, 5vw, 48px);
  background-color: var(--seo-background);
  border-radius: 16px;
  border: 1px solid var(--seo-border-color);
  box-shadow: var(--seo-shadow);
  line-height: 2;
  color: var(--seo-text-color);
}

.box-dic .body h1 {
  font-size: clamp(24px, 4.5vw, 28px);
  font-weight: 800;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  position: relative;
}

.box-dic .body h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 4px;
  background-color: var(--seo-primary-color);
  border-radius: 2px;
}

.box-dic .body h2,
.box-dic .body h3,
.box-dic .body h4,
.box-dic .body h5,
.box-dic .body h6 {
  font-weight: 700;
  color: var(--seo-text-color);
  margin: 40px 0 20px 0;
  border-right: 4px solid var(--seo-primary-color);
  padding-right: 15px;
  font-size: clamp(18px, 4vw, 22px);
}

.box-dic .body h3,
.box-dic .body h4,
.box-dic .body h5,
.box-dic .body h6 {
  font-size: clamp(17px, 3.8vw, 20px);
}

.box-dic .body p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--seo-subtle-text);
  margin: 0 0 20px 0;
}

.box-dic .body p:last-child {
  margin-bottom: 0;
}

.box-dic .body ul,
.box-dic .body ol {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.box-dic .body li {
  position: relative;
  padding-right: 34px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--seo-subtle-text);
  margin-bottom: 16px;
}

.box-dic .body li::before {
  content: "\F058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--seo-primary-color);
  font-size: 18px;
}

.box-dic .body li:last-child {
  margin-bottom: 0;
}

.box-dic .body a {
  color: var(--seo-primary-color);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.box-dic .body a:hover,
.box-dic .body a:focus {
  opacity: 0.7;
}

.box-dic .body strong {
  color: var(--seo-text-color);
}

.box-dic .link-anime {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  font-weight: 600;
  color: var(--seo-primary-color);
  background-color: rgba(243, 163, 3, 0.12);
  border-radius: 999px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.box-dic .link-anime:hover {
  opacity: 1;
  background-color: rgba(243, 163, 3, 0.2);
}

@media (max-width: 600px) {
  .box-dic .body {
    padding: 32px 24px;
  }
}

.box-request-subtitle {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.0588235294);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px !important;
  text-align: center;
  width: 245px;
  margin-left: 15px;
}

.box-request-subtitle .box-count {
  text-align: center;
  padding-top: 10px;
}

.box-request-subtitle .title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000714 100%) 0% 0% no-repeat padding-box;
  margin: 0;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  color: #fff;
  white-space: pre-line;
  direction: ltr;
}

.box-request-subtitle .body {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.0509803922);
}

.box-request-subtitle a {
  position: relative;
  color: #f6a504;
  transition: 0.3s all;
  display: block;
}

.box-request-subtitle a:hover {
  opacity: 0.6;
  transition: 0.3s all;
}

.box-request-subtitle .box-like-request-subtitle {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.3s all;
  justify-content: center;
  margin-top: 10px;
  padding: 5px 0;
  background-color: rgba(0, 0, 0, 0.0901960784);
  border-radius: 5px;
}

.box-request-subtitle .box-like-request-subtitle .leoIcon {
  margin-left: 5px;
}

.box-request-subtitle .box-like-request-subtitle .count {
  font-weight: bold;
  min-width: 20px;
  padding: 0 5px;
  text-align: center;
  padding-top: 3px;
}

.box-request-subtitle .box-like-request-subtitle:hover {
  transition: 0.3s all;
  opacity: 0.6;
}

.box-request-subtitle .box-like-request-subtitle.active {
  color: #f6a504;
  background-color: rgba(246, 165, 4, 0.1215686275);
}

.link-btn-footer {
  padding: 10px;
  background-color: #F1F3F5;
  color: #585858;
  display: block;
  text-align: center;
  border-radius: 5px;
  font-size: 15px;
}

.link-btn-footer:hover {
  opacity: 0.6;
  color: #585858;
}

.page-server-status .server-box,
.page-server-status .box-top {
  background-color: #fff;
  padding: 35px 30px;
  margin-bottom: 25px;
  box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.page-server-status .server-box.box-color-error .leoIcon.uk-icon,
.page-server-status .box-top.box-color-error .leoIcon.uk-icon {
  background-color: #f44336;
}

.page-server-status .box-top [leoicon=check] {
  background-color: #4caf50;
  color: #fff;
  padding: 5px;
  font-size: 52px;
  border-radius: 5px;
}

.page-server-status .box-top [leoicon=check] svg {
  width: 40px;
  height: 40px;
}

.page-server-status .box-top .title {
  font-size: 17px;
  font-weight: bold;
}

.page-server-status .box-top .time {
  color: #4caf50;
  font-weight: bold;
}

.page-server-status .server-box > .title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 15px;
}

.page-server-status .server-box > .title [leoicon=check] {
  padding: 2px;
  background-color: #4caf50;
  border-radius: 5px;
  color: #fff;
  margin-left: 5px;
}

.page-server-status .server-item {
  margin-top: 5px;
  background-color: #F9F9F9;
  border-radius: 5px;
  overflow: hidden;
}

.page-server-status .server-item .title {
  padding: 10px 15px;
  font-weight: bold;
}

.page-server-status .server-item.color-error .title {
  background-color: #f8eae9;
  color: #f44336;
}

.page-server-status .server-item.color-success .title {
  background-color: #eef4ef;
  color: #4caf50;
}

.sub-tabs {
  position: relative;
}

.sub-tabs .sub-tab-title {
  margin-top: 15px;
  box-shadow: 1px 2px 2px rgba(121, 102, 153, 0.4);
  display: inline-flex;
  background-color: #fff;
  border-radius: 25px;
  margin-right: 20px;
  margin-left: 20px;
}

.sub-tabs .sub-tab-title:before {
  display: none;
}

.sub-tabs .sub-tab-title li {
  padding-right: 0;
}

.sub-tabs .sub-tab-title a {
  border: 0;
  padding: 5px 25px;
  border-radius: 25px;
  min-width: 75px;
  color: #585858;
}

@media (max-width: 400px) {
  .sub-tabs .sub-tab-title a {
    padding: 5px 3px;
  }
}

.sub-tabs .sub-tab-title .uk-active a {
  background-color: #f2a303;
  color: #fff;
}

.sub-tabs .box-filter {
  position: absolute;
  left: 13px;
  top: 15px;
  display: flex;
  box-shadow: 1px 2px 2px rgba(121, 102, 153, 0.4);
  background-color: #ffffff;
  border-radius: 25px;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 600px) {
  .sub-tabs .box-filter {
    position: relative;
    margin-right: 5px;
    right: 0;
    left: 0;
    top: 0;
    display: inline-flex;
  }
}

.sub-tabs .box-filter div {
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 25px;
}

.sub-tabs .box-filter .uk-active {
  background-color: #f2a303;
  color: #fff;
}

.page-audio audio {
  width: 100%;
}

.dir-rtl {
  direction: rtl !important;
}

.box-shadow-none {
  box-shadow: none;
}

.op-ed-section {
  max-width: 1200px;
  margin: 40px auto;
  font-family: "Vazirmatn", sans-serif;
  direction: rtl;
}

.op-ed-section * {
  font-family: inherit;
  box-sizing: border-box;
}

.op-ed-section > .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.op-ed-section .section-header__title {
  position: relative;
  margin: 0;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ap-section-title-color);
}

.op-ed-section .section-header__title:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, var(--ap-section-primary), transparent);
}

.op-ed-section .section-header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  background-color: transparent;
  border: 2px solid var(--ap-section-primary);
  color: var(--ap-section-primary);
  border-radius: 999px;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.op-ed-section .section-header__button:hover {
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.op-ed-section .section-header__button:focus-visible {
  outline: 0;
  background-color: var(--ap-section-primary);
  color: var(--ap-section-button-hover-text);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.25);
}

@media (max-width: 500px) {
  .op-ed-section > .section-header {
    gap: 12px;
    flex-wrap: wrap;
  }

  .op-ed-section .section-header__title {
    font-size: 18px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .op-ed-section .section-header__button {
    font-size: 12px;
    padding: 6px 18px;
    margin-inline-start: auto;
    flex-shrink: 0;
  }
}

.op-ed-section .op-ed-header {
  align-items: flex-end;
  gap: 24px;
}

.op-ed-section .op-ed-header .op-ed-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-ed-section .op-ed-header .op-ed-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ap-section-title-color);
}

.op-ed-section .op-ed-header .op-ed-subtitle {
  margin: 0;
  color: #8e8e8e;
  font-size: 0.95rem;
}

.op-ed-section .op-ed-header .op-ed-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-inline-start: auto;
  flex: 1 1 420px;
  max-width: 520px;
}

.op-ed-section .op-ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f6f7fb;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.op-ed-section .op-ed-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 1 1 420px;
}

.op-ed-section .op-ed-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background-color: #eef1f7;
  border-radius: 14px;
  border: 1px solid #e2e7ef;
}

.op-ed-section .op-ed-chip-group.op-ed-chip-group--elevated {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px rgba(15, 23, 42, 0.05);
}

.op-ed-section .op-ed-chip-group.op-ed-chip-group--types {
  background: #f3f4f8;
}

.op-ed-section .op-ed-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #6b7280;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  border: 1px solid #e3e7ef;
}

.op-ed-section .op-ed-chip:hover {
  border-color: #f39c12;
  color: #f39c12;
}

.op-ed-section .op-ed-chip.is-active {
  background: linear-gradient(135deg, #fbbf24, #f39c12);
  color: #0f172a;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(243, 156, 18, 0.22);
}

.op-ed-section .op-ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.op-ed-section .op-ed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 1 1 420px;
}

.op-ed-section .op-ed-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background-color: #f8f9fb;
  border-radius: 12px;
  border: 1px solid #eceff4;
}

.op-ed-section .op-ed-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  border: 1px solid #e8ebf0;
}

.op-ed-section .op-ed-chip:hover {
  border-color: #f39c12;
  color: #f39c12;
}

.op-ed-section .op-ed-chip.is-active {
  background: linear-gradient(135deg, #f39c12, #ffa733);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.18);
}

.op-ed-section .op-ed-header--compact {
  align-items: center;
}

.op-ed-section .op-ed-header--compact .op-ed-controls {
  flex: 0 0 auto;
  max-width: none;
}

@media (max-width: 768px) {
  .op-ed-section .op-ed-header {
    align-items: stretch;
  }

  .op-ed-section .op-ed-header .op-ed-controls {
    width: 100%;
  }

  .op-ed-section .op-ed-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .op-ed-section .op-ed-toolbar__filters {
    width: 100%;
  }

  .op-ed-section .op-ed-chip-group {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .op-ed-section .op-ed-chip {
    flex: 1 1 calc(33% - 8px);
    min-width: 110px;
    justify-content: center;
  }
}

.op-ed-section .op-ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.op-ed-section .op-ed-slider {
  position: relative;
}

.op-ed-section .op-ed-slider__track {
  position: relative;
}

@media (min-width: 1024px) {
  .op-ed-section.op-ed-section--home .op-ed-slider__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .op-ed-section.op-ed-section--home .op-ed-slider__track .op-ed-card {
    flex: initial;
    min-width: 0;
    width: 100%;
  }
}

.op-ed-section .op-ed-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.98));
  color: rgba(15, 23, 42, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.op-ed-section .op-ed-slider__nav--prev {
  right: 6px;
}

.op-ed-section .op-ed-slider__nav--next {
  left: 6px;
}

.op-ed-section .op-ed-slider__nav:hover {
  transform: translateY(-50%) scale(1.05);
  background: linear-gradient(135deg, #ffffff, #f4f7fc);
  color: rgba(15, 23, 42, 0.95);
}

.op-ed-section .op-ed-slider__nav-icon {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s ease;
}

.op-ed-section .op-ed-slider__nav-icon path {
  transition: stroke 0.25s ease;
}

.op-ed-section .op-ed-slider__nav-icon--flip {
  transform: scaleX(-1);
}

.op-ed-section .op-ed-slider__nav:hover .op-ed-slider__nav-icon {
  transform: translate3d(1.5px, 0, 0);
}

.op-ed-section .op-ed-slider__nav:hover .op-ed-slider__nav-icon--flip {
  transform: scaleX(-1) translate3d(-1.5px, 0, 0);
}

.op-ed-section .op-ed-slider__nav:hover .op-ed-slider__nav-icon path {
  stroke: currentColor;
}

.op-ed-section .op-ed-slider__nav:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: translateY(-50%);
  pointer-events: none;
}

.op-ed-section .op-ed-slider.is-scrollable .op-ed-slider__nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .op-ed-section .op-ed-slider__nav {
    display: none;
  }
}

.op-ed-section .op-ed-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8ecf3;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  gap: 16px;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.op-ed-section .op-ed-card:hover {
  transform: translateY(-4px);
  border-color: #dfe5ef;
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);
}

.op-ed-section .op-ed-card:before {
  content: "";
  display: none;
}

.op-ed-section .op-ed-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.op-ed-section .op-ed-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.op-ed-section .op-ed-card-info {
  flex: 1;
  text-align: right;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-ed-section .op-ed-anime {
  margin: 0;
  color: #9aa2b6;
  font-size: 0.85rem;
}

.op-ed-section .op-ed-anime {
  margin: 6px 0 0;
  color: #a0a6b3;
  font-size: 0.8rem;
}

.op-ed-section .op-ed-song-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: #1f2937;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.op-ed-section .op-ed-artist {
  margin: 0;
  color: #6b7280;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-ed-section .op-ed-artist a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.op-ed-section .op-ed-artist a:hover {
  color: #f39c12;
}

.op-ed-section .op-ed-artist a.people-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.op-ed-section .op-ed-artist-separator {
  white-space: nowrap;
}

.op-ed-section .op-ed-artist-ellipsis {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 700;
}

.op-ed-section .op-ed-artist-placeholder {
  display: inline-block;
  min-height: 1em;
}

.op-ed-section .op-ed-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.op-ed-section .op-ed-tag {
  color: #0f172a;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.op-ed-section .op-ed-tag.op-ed-tag--op {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.op-ed-section .op-ed-tag.op-ed-tag--ed {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #064e3b;
}

.op-ed-section .op-ed-meta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.82rem;
}

.op-ed-section .op-ed-meta {
  white-space: nowrap;
}

.op-ed-section .op-ed-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.op-ed-section .op-ed-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background-color: #e9f6f4;
  color: #0f766e;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.op-ed-section .op-ed-action:hover {
  background-color: #d7efeb;
  transform: translateY(-1px);
  color: #0f766e;
}

.op-ed-section .op-ed-action--primary {
  background: linear-gradient(135deg, #fbbf24, #f39c12);
  color: #0f172a;
  box-shadow: 0 12px 22px rgba(243, 156, 18, 0.24);
}

.op-ed-section .op-ed-action--primary:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #0f172a;
}

.op-ed-section .op-ed-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
  width: 100%;
}

.op-ed-section .op-ed-search:focus-within {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}

.op-ed-section .op-ed-search-icon {
  color: #a0a6b3;
  font-size: 18px;
}

.op-ed-section .op-ed-search-input {
  border: none;
  background: transparent;
  outline: none;
  color: #2c3e50;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
}

.op-ed-section .op-ed-search-input::-moz-placeholder {
  color: #b0b7c5;
}

.op-ed-section .op-ed-search-input::placeholder {
  color: #b0b7c5;
}

.op-ed-section .op-ed-search-button {
  background: linear-gradient(135deg, #fbbf24, #f39c12);
  color: #0f172a;
  border: none;
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.op-ed-section .op-ed-search-button:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(243, 156, 18, 0.24);
}

.op-ed-section .op-ed-download {
  background-color: #f0f2f8;
  color: #2c3e50;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.op-ed-section .op-ed-download:hover {
  background-color: #e1e4eb;
  color: #2c3e50;
}

.op-ed-section .op-ed-download icons {
  font-size: 14px;
}

@media (max-width: 992px) {
  .op-ed-section .op-ed-grid {
    grid-template-columns: 1fr;
  }
}

.op-ed-section .op-ed-section--archive .op-ed-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  overflow: visible;
  padding-inline: 0;
  margin-inline: 0;
  scroll-snap-type: none;
}

@media (max-width: 640px) {
  .op-ed-section .op-ed-section--archive .op-ed-grid {
    gap: 16px;
  }

  .op-ed-section .op-ed-section--archive .op-ed-card {
    flex: initial;
    min-width: 0;
    width: 100%;
    scroll-snap-align: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .op-ed-section .op-ed-section--archive .op-ed-card-meta {
    width: 100%;
    justify-content: space-between;
  }

  .op-ed-section .op-ed-section--archive .op-ed-download {
    width: 100%;
    justify-content: center;
  }
}

.op-ed-section .op-ed-empty {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .op-ed-section .op-ed-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .op-ed-section .op-ed-header .op-ed-controls {
    margin-inline-start: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider {
    margin-inline: -8px;
    padding-inline: 8px;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::before,
  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::before {
    right: 0;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::after {
    left: 0;
    transform: scaleX(-1);
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider.is-scrollable::before,
  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider.is-scrollable::after {
    opacity: 1;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider.is-at-start::before {
    opacity: 0;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider.is-at-end::after {
    opacity: 0;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider__track {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 0 0 12px;
    margin: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    direction: ltr;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider__track::-webkit-scrollbar {
    display: none;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider__track {
    scrollbar-width: none;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider__track .op-ed-card {
    flex: 0 0 auto;
    min-width: clamp(240px, 78vw, 320px);
    max-width: 360px;
    width: auto;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    gap: 20px;
    direction: rtl;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-card-meta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) and (min-width: 1024px) {
  .op-ed-section:not(.op-ed-section--archive).op-ed-section--home .op-ed-slider__track .op-ed-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .op-ed-section:not(.op-ed-section--archive).op-ed-section--home .op-ed-slider__track .op-ed-card .op-ed-card-meta {
    width: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .op-ed-section:not(.op-ed-section--archive) .op-ed-slider__track .op-ed-card {
    min-width: clamp(210px, 86vw, 280px);
    padding: 18px;
  }

  .op-ed-section:not(.op-ed-section--archive) .op-ed-download {
    width: 100%;
    justify-content: center;
  }
}

body.dark .op-ed-section .op-ed-slider__nav {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-color: rgba(148, 163, 184, 0.2);
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}

body.dark .op-ed-section .op-ed-slider__nav:hover {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.95));
  color: #f8fafc;
}

@media (max-width: 640px) {
  body.dark .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::before,
  body.dark .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::after {
    background: linear-gradient(to left, rgba(17, 24, 39, 0.9), rgba(17, 24, 39, 0));
  }

  body.dark .op-ed-section:not(.op-ed-section--archive) .op-ed-slider::after {
    transform: scaleX(-1);
  }
}

::-webkit-scrollbar {
  width: 7px;
  height: 3px;
}

/* Track */

::-webkit-scrollbar-track {
  background: #fdeac9;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: #f3a303;
  border-radius: 2px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.download-modern {
  --download-primary: #f39c12;
  --download-primary-dark: #e67e22;
  --download-accent: #c81e3a;
  --download-accent-hover: #a1152d;
  --download-surface: #ffffff;
  --download-border: #e2e8f0;
  --download-background: #f8fafc;
  --download-text: #0f172a;
  --download-muted: #475569;
  --download-hover: #f1f5f9;
}

body.dark .download-modern.bg-light-bg {
  background-color: transparent;
}

body.dark .download-card,
body.dark .download-card:hover {
  box-shadow: none;
}

body.dark .download-modern {
  --download-surface: transparent;
  --download-border: rgba(148, 163, 184, 0.35);
  --download-background: transparent;
  --download-text: #f8fafc;
  --download-muted: rgba(203, 213, 225, 0.85);
  --download-hover: rgba(148, 163, 184, 0.16);
}

.download-modern__surface {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .download-modern__surface {
    gap: 24px;
  }
}

.download-modern__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.download-modern__search {
  position: relative;
  flex: 1 1 220px;
}

.download-modern__search-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--download-muted);
}

.download-modern__search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  padding: 10px 16px;
  padding-right: 42px;
  font-size: 0.875rem;
  background-color: var(--download-surface);
  color: var(--download-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__search-input:focus {
  outline: none;
  border-color: rgba(243, 156, 18, 0.45);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15);
}

.download-modern__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-modern__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  background: var(--download-surface);
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.download-modern__icon-btn:hover {
  background: var(--download-hover);
  color: var(--download-primary);
  border-color: rgba(243, 156, 18, 0.45);
}

.download-guide-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.download-guide-link__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1f2a44;
  background: rgba(30, 136, 229, 0.08);
  border: 1px solid rgba(30, 136, 229, 0.12);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.download-guide-link__button:hover {
  color: #0f172a;
  background: rgba(30, 136, 229, 0.14);
  border-color: rgba(30, 136, 229, 0.22);
  transform: translateY(-1px);
}

.download-guide-link__button:focus-visible {
  outline: 2px solid rgba(30, 136, 229, 0.35);
  outline-offset: 2px;
}

.download-placeholder {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.download-placeholder__body {
  width: 100%;
  max-width: 640px;
  padding: 18px 20px;
  background-color: #e3f2fd;
  color: #1e88e5;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(30, 136, 229, 0.08);
  opacity: 0;
  transform: translateY(-10px);
  animation: downloadPlaceholderFade 0.45s ease-out forwards;
  animation-delay: 0.2s;
}

.download-placeholder__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.download-placeholder__text::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .download-placeholder__body {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .download-guide-link__button {
    transition: none;
  }
}

body.dark .download-placeholder__body {
  background-color: #102a43;
  color: #4dabf7;
  box-shadow: 0 10px 20px rgba(10, 14, 22, 0.6);
}

body.dark .download-placeholder__text::before {
  opacity: 0.7;
}

body.dark .download-guide-link__button {
  color: #e2e8f0;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.2);
}

body.dark .download-guide-link__button:hover {
  color: #f8fafc;
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .download-placeholder__body {
    background-color: #102a43;
    color: #4dabf7;
    box-shadow: 0 10px 20px rgba(10, 14, 22, 0.6);
  }

  :root:not(.light) .download-placeholder__text::before {
    opacity: 0.7;
  }

  :root:not(.light) .download-guide-link__button {
    color: #e2e8f0;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.2);
  }

  :root:not(.light) .download-guide-link__button:hover {
    color: #f8fafc;
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.3);
  }
}

@keyframes downloadPlaceholderFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.download-modern__filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-modern__filters-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .download-modern__filters-mobile {
    display: none;
  }
}

.download-modern__filters-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  background: var(--download-hover);
  padding: 4px;
  border-radius: 999px;
}

.download-modern__filters-tab {
  padding: 8px 0;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__filters-tab.is-active {
  background: var(--download-surface);
  color: var(--download-primary);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.download-modern__filters-panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.download-modern__pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--download-border);
  background: var(--download-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--download-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.download-modern__pill.is-active {
  background: var(--download-primary);
  border-color: var(--download-primary);
  color: #fff;
  box-shadow: 0 14px 28px rgba(243, 156, 18, 0.24);
}

.download-modern__filters-desktop {
  display: none;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .download-modern__filters-desktop {
    display: flex;
    flex-wrap: wrap;
  }
}

.download-modern__filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.download-modern__filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--download-muted);
  font-size: 0.875rem;
}

.download-modern__filters-icon {
  width: 18px;
  height: 18px;
  color: var(--download-muted);
}

.download-modern__filters-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--download-hover);
  padding: 4px;
  border-radius: 999px;
}

.download-modern__link {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__link.is-active {
  background: var(--download-surface);
  color: var(--download-primary);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.download-modern__link:hover {
  color: var(--download-text);
}

.download-modern__modal-enter-active,
.download-modern__modal-leave-active {
  transition: opacity 0.15s ease;
}

.download-modern__modal-enter,
.download-modern__modal-leave-to {
  opacity: 0;
}

.download-modern__modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-modern__modal-card {
  background: var(--download-surface);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  width: 100%;
  max-width: 420px;
}

.download-modern__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.download-modern__modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--download-text);
  margin: 0;
}

.download-modern__modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--download-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.download-modern__modal-close:hover {
  background: var(--download-hover);
  color: var(--download-primary);
}

.download-modern__modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-modern__modal-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  color: var(--download-text);
}

.download-modern__modal-action {
  border-radius: 14px;
  background: var(--download-hover);
  border: 0;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: right;
  color: var(--download-text);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.download-modern__modal-action:hover {
  color: var(--download-primary);
}

.download-modern__modal-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-modern__modal-range-inputs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.download-modern__modal-range-inputs input {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--download-border);
  background: var(--download-hover);
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--download-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.download-modern__modal-range-inputs input:focus {
  outline: none;
  border-color: rgba(243, 156, 18, 0.6);
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
}

@media (max-width: 480px) {
  .download-modern__modal-range-inputs {
    gap: 8px;
  }

  .download-modern__modal-range-inputs input {
    flex-basis: calc(50% - 4px);
  }
}

.download-modern__modal-footer {
  display: flex;
  gap: 12px;
}

.download-modern__modal-primary,
.download-modern__modal-secondary {
  flex: 1;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.download-modern__modal-primary {
  background: var(--download-primary);
  color: #fff;
}

.download-modern__modal-primary:hover {
  background: var(--download-primary-dark);
}

.download-modern__modal-secondary {
  background: var(--download-hover);
  color: var(--download-text);
}

.download-modern__modal-secondary:hover {
  background: rgba(226, 232, 240, 0.8);
}

/* ==================== Main Header Theme Styles ==================== */

:root {
  --accent: #f3a303;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --nav-inactive: #2563eb;
  --line: #e2e8f0;
  --soft: #f1f5f9;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, .08);
}

#theme-toggle:checked ~ .site-wrapper {
  --bg: #111827;
  --surface: #1f2937;
  --text: #e2e8f0;
  --muted: #9ca3af;
  --nav-inactive: #3b82f6;
  --line: #374151;
  --soft: #374151;
}

body.dark {
  --bg: #111827;
  --surface: #1f2937;
  --text: #e2e8f0;
  --muted: #9ca3af;
  --nav-inactive: #3b82f6;
  --line: #374151;
  --soft: #374151;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", sans-serif;
  transition: background 0.3s, color 0.3s;
}

body.ap-search-open {
  overflow: hidden;
}

a {
  color: var(--accent, #f3a303);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #c47f00;
}

button,
label {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.visually-hidden.toggle-control {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

.ap-header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== Desktop Header ========== */

.main-header-container {
  display: none;
  padding: 16px 0;
  margin-bottom: 48px;
}

.main-header {
  position: sticky;
  top: 16px;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s;
}

.brand-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}

.brand-logo .brand-name {
  font-weight: 900;
  font-size: 1.7rem;
}

.main-nav {
  display: block;
  color: var(--text);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  color: inherit;
}

.nav-item {
  position: relative;
}

.link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: all 0.2s;
  white-space: nowrap;
  color: inherit;
}

body.dark .main-header .link,
#theme-toggle:checked ~ .site-wrapper .main-header .link {
  color: var(--text);
}

.link svg.icon {
  width: 20px;
  height: 20px;
}

.link svg.arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.link:hover,
.nav-item.active > .link {
  background: var(--soft);
  color: var(--accent);
}

body.dark .nav-item.active > .link,
body.dark .nav-item:hover > .link,
#theme-toggle:checked ~ .site-wrapper .nav-item.active > .link,
#theme-toggle:checked ~ .site-wrapper .nav-item:hover > .link {
  color: var(--accent);
}

.nav-item:hover > .link .arrow {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(10px);
  min-width: 240px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  border-right: 5px solid var(--accent);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item.mega .dropdown {
  right: 0;
  left: auto;
}

.nav-item:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drop-link {
  display: block;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
}

body.dark .drop-link,
#theme-toggle:checked ~ .site-wrapper .drop-link {
  color: var(--text);
}

.drop-link:hover {
  color: var(--accent);
  background-color: var(--soft);
}

#theme-toggle:checked ~ .site-wrapper .main-nav,
#theme-toggle:checked ~ .site-wrapper .main-nav .link,
body.dark .main-nav,
body.dark .main-nav .link {
  color: var(--text);
}

.nav-item.mega > .dropdown {
  width: 500px;
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.search-trigger-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: all 0.2s;
}

.search-trigger-btn svg {
  width: 20px;
  height: 20px;
}

.search-trigger-btn:hover,
.search-trigger-btn:focus-visible {
  background-color: var(--soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  outline: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-header .header-actions {
  justify-content: flex-end;
  direction: ltr;
}

.main-header .header-actions .action-btn.cta {
  direction: rtl;
}

.action-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background-color: var(--soft);
  color: var(--muted);
  transition: all 0.2s;
}

.action-btn:hover,
.nav-item.active .action-btn {
  background-color: var(--line);
  color: var(--text);
}

.action-btn.cta {
  background-color: var(--accent);
  color: white;
  width: auto;
  padding: 0 16px;
  font-weight: 700;
  white-space: nowrap;
}

.notification-panel {
  left: 0;
  transform: translateY(10px);
  width: 420px;
  padding: 0;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  direction: rtl;
  padding: 12px 16px;
}

.notif-title {
  margin-left: auto;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: right;
}

.notif-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.notif-control-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}

.notif-control-btn:hover {
  background: var(--soft);
  color: var(--text);
}

.notif-view-all {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
}

.notif-view-all:hover {
  background: var(--soft);
}

.notif-body {
  max-height: 400px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding: 8px;
  scrollbar-gutter: stable both-edges;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  direction: rtl;
  padding: 12px;
  border-radius: var(--radius-md);
}

.notif-item:hover {
  background-color: var(--soft);
}

.notif-icon {
  color: #3b82f6;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 32px;
}

.notif-content {
  flex-grow: 1;
  font-size: 0.95rem;
  font-weight: 500;
  direction: rtl;
  text-align: right;
}

.notif-content strong {
  font-weight: 800;
  direction: ltr;
  display: inline-block;
}

.notif-timestamp {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}

.notif-action {
  margin-inline-start: auto;
  margin-inline-end: 0;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-section {
  margin-bottom: 24px;
}

.search-section:last-child {
  margin-bottom: 0;
}

.search-section.is-empty,
.search-section.is-hidden {
  display: none;
}

.search-results-status {
  font-size: 0.8rem;
  color: var(--muted);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.search-result-group {
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--radius-lg, 16px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-result-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 800;
  gap: 12px;
}

.search-result-group-view-all {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-strong, #f97316);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.search-result-group-view-all:hover,
.search-result-group-view-all:focus {
  background-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-strong, #f97316);
  transform: translateY(-1px);
}

.search-result-items {
  display: grid;
  gap: 8px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: background-color 0.2s, transform 0.2s;
}

.search-result-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-2px);
}

.search-result-cover {
  width: 52px;
  height: 72px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.search-result-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  align-items: flex-end;
  text-align: right;
  direction: rtl;
}

.search-result-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.search-result-type {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-strong, var(--accent));
  text-align: right;
  align-self: flex-end;
  display: block;
}

.search-result-meta {
  font-size: 0.8rem;
  color: var(--muted-strong, var(--muted));
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
  direction: rtl;
}

.search-results-empty {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.search-section-header h3 {
  font-size: 0.9rem;
  font-weight: 800;
}

.clear-history-btn {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.clear-history-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-tag {
  display: block;
  padding: 6px 12px;
  background: var(--soft);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.trending-list {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}

.trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.trending-item:hover {
  background-color: var(--soft);
}

.trending-item img {
  width: 50px;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.trending-info {
  width: 100%;
  text-align: right;
  min-width: 0;
  flex: 1;
}

.trending-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 70px;
}

.trending-title {
  order: 1;
  align-self: flex-start;
  font-weight: 700;
  font-size: 1rem;
  direction: ltr;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
  display: block;
}

.trending-meta {
  order: 2;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.trending-type,
.trending-score {
  font-size: 0.85rem;
  color: var(--muted-strong, var(--accent));
  font-weight: 600;
  min-width: 0;
}

.trending-separator {
  font-size: 0.85rem;
  color: #000;
  font-weight: 600;
  min-width: 0;
}

body.dark .trending-separator,
#theme-toggle:checked ~ .site-wrapper .trending-separator {
  color: rgba(248, 250, 252, 0.75);
}

.trending-type,
.trending-score {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.25s ease;
  pointer-events: none;
}

#search-toggle:checked ~ .site-wrapper .search-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.search-overlay .search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 24px;
  width: min(720px, 100%);
  margin: 0 auto;
}

.search-overlay .search-header .search-form {
  flex: 1;
  display: flex;
}

.search-overlay .search-header .search-input {
  flex: 1;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 16px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-overlay .search-header .search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.search-overlay .search-header .action-btn {
  width: 52px;
  height: 52px;
}

.search-overlay .search-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  width: min(640px, 100%);
  margin: 0 auto 40px;
  padding: 0 24px 24px;
}

.search-advanced-panel {
  display: none;
  margin-bottom: 24px;
}

.search-advanced-panel.is-active {
  display: block;
}

.search-advanced-panel .global-search__advanced {
  border-bottom: 0;
  background: transparent;
  padding: 0;
}

.search-advanced-panel .global-search__advanced-inner {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
}

.search-advanced-panel .global-search__advanced-frame-wrapper {
  padding-top: 56.25%;
}

.search-advanced-panel .global-search__advanced-frame {
  border-radius: inherit;
}

.search-advanced-panel .global-search__advanced-placeholder {
  display: none;
}

.search-advanced-panel.is-loading .global-search__advanced-placeholder {
  display: flex;
}

.search-advanced-panel .global-search__advanced-close {
  top: 12px;
  left: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

.search-overlay .search-body .trending-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.search-overlay .search-body .trending-item:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(148, 163, 184, 0.42);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

body.dark .search-overlay .search-body .trending-item,
#theme-toggle:checked ~ .site-wrapper .search-overlay .search-body .trending-item {
  background: rgba(30, 41, 59, 0.62);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

body.dark .search-overlay .search-body .trending-item:hover,
#theme-toggle:checked ~ .site-wrapper .search-overlay .search-body .trending-item:hover {
  background: rgba(51, 65, 85, 0.76);
  border-color: rgba(148, 163, 184, 0.34);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
}

.search-overlay .search-body .trending-item,
.search-overlay .search-body .trending-item:visited,
.search-overlay .search-body .trending-item:active {
  color: var(--text);
}

.search-overlay .search-body .trending-title {
  color: inherit;
}

/* ========== Mobile App-Style Layout ========== */

.mobile-header,
.bottom-nav,
.menu-sheet,
.notif-sheet {
  display: none;
}

@media (max-width: 991px) {
  .main-header-container {
    display: none;
  }

  body {
    padding-top: 104px;
    padding-bottom: 72px;
  }
}

@media (max-width: 991px) and (max-width: 767px) {
  body {
    padding-top: 24px;
    padding-bottom: 0;
  }
}

@media (max-width: 991px) {
  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 60px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  body.dark .mobile-header,
  #theme-toggle:checked ~ .site-wrapper .mobile-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(148, 163, 184, 0.22);
  }

  .mobile-header .brand-logo .brand-name {
    font-size: 1.5rem;
  }

  .bottom-nav {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
    z-index: 100;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
  }

  body.dark .bottom-nav,
  #theme-toggle:checked ~ .site-wrapper .bottom-nav {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 -12px 30px rgba(2, 6, 23, 0.65);
  }

  #menu-toggle:checked ~ .site-wrapper .bottom-nav {
    transform: translateY(100%);
    pointer-events: none;
    opacity: 0;
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    transition: all 0.2s;
  }

  body.dark .bn-item,
  #theme-toggle:checked ~ .site-wrapper .bn-item {
    background: transparent;
    color: #e2e8f0;
  }

  .bn-item.active {
    color: var(--accent);
  }

  .bn-item svg {
    width: 24px;
    height: 24px;
  }

  .search-overlay {
    padding: 0;
  }

  .search-overlay .search-header {
    padding: 16px;
    width: 100%;
    margin: 0;
    gap: 8px;
  }

  .search-overlay .search-header .action-btn {
    width: 48px;
    height: 48px;
  }

  .search-overlay .search-body {
    padding: 0 16px 16px;
    width: min(640px, 100%);
    margin: 0 auto;
  }

  .menu-sheet,
  .notif-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 520;
    visibility: hidden;
  }

  .ms-overlay,
  .ns-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .ms-content,
  .ns-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 95vh;
    background: var(--bg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.dark .ms-content,
  body.dark .ns-content,
  #theme-toggle:checked ~ .site-wrapper .ms-content,
  #theme-toggle:checked ~ .site-wrapper .ns-content {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 -24px 48px rgba(2, 6, 23, 0.6);
  }

  .ms-header,
  .ns-header {
    padding: 16px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
  }

  body.dark .ms-header,
  body.dark .ns-header,
  #theme-toggle:checked ~ .site-wrapper .ms-header,
  #theme-toggle:checked ~ .site-wrapper .ns-header {
    border-bottom-color: rgba(148, 163, 184, 0.2);
  }

  .ms-title,
  .ns-title {
    font-weight: 800;
    font-size: 1.1rem;
  }

  .ms-close-btn,
  .ns-close-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--muted);
    background: var(--soft);
  }

  .ms-close-btn:hover,
  .ns-close-btn:hover {
    background-color: var(--line);
    color: var(--text);
  }

  body.dark .ms-close-btn,
  body.dark .ns-close-btn,
  #theme-toggle:checked ~ .site-wrapper .ms-close-btn,
  #theme-toggle:checked ~ .site-wrapper .ns-close-btn {
    background: rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
  }

  body.dark .ms-close-btn:hover,
  body.dark .ns-close-btn:hover,
  #theme-toggle:checked ~ .site-wrapper .ms-close-btn:hover,
  #theme-toggle:checked ~ .site-wrapper .ns-close-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #f8fafc;
  }

  #menu-toggle:checked ~ .site-wrapper .menu-sheet,
  #notif-toggle-mobile:checked ~ .site-wrapper .notif-sheet {
    visibility: visible;
  }

  #menu-toggle:checked ~ .site-wrapper .ms-overlay,
  #notif-toggle-mobile:checked ~ .site-wrapper .ns-overlay {
    opacity: 1;
  }

  #menu-toggle:checked ~ .site-wrapper .ms-content,
  #notif-toggle-mobile:checked ~ .site-wrapper .ns-content {
    transform: translateY(0);
  }

  .ms-body,
  .ns-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 232, 240, 0.6) transparent;
  }

  .ms-body::-webkit-scrollbar,
  .ns-body::-webkit-scrollbar {
    width: 6px;
  }

  .ms-body::-webkit-scrollbar-track,
  .ns-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .ms-body::-webkit-scrollbar-thumb,
  .ns-body::-webkit-scrollbar-thumb {
    background-color: rgba(226, 232, 240, 0.6);
    border-radius: 999px;
  }

  .dark .ms-body,
  .dark .ns-body {
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }

  .dark .ms-body::-webkit-scrollbar-thumb,
  .dark .ns-body::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45);
  }

  .ms-tabs {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    gap: 28px;
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
  }

  body.dark .ms-tabs,
  #theme-toggle:checked ~ .site-wrapper .ms-tabs {
    background: rgba(15, 23, 42, 0.88);
    border-bottom-color: rgba(148, 163, 184, 0.2);
  }

  .ms-tab-label {
    flex: 0;
    text-align: center;
    padding: 14px 16px;
    font-weight: 700;
    color: var(--muted);
    position: relative;
    white-space: nowrap;
    font-size: 0.88rem;
    line-height: 1.6;
  }

  #tab-type-toggle:checked ~ .ms-body .ms-tabs [for=tab-type-toggle],
  #tab-status-toggle:checked ~ .ms-body .ms-tabs [for=tab-status-toggle],
  #tab-archive-toggle:checked ~ .ms-body .ms-tabs [for=tab-archive-toggle] {
    color: var(--text);
  }

  .ms-tab-label::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--accent);
    transform: scaleX(0);
    transition: transform 0.2s;
  }

  #tab-type-toggle:checked ~ .ms-body .ms-tabs [for=tab-type-toggle]::after,
  #tab-status-toggle:checked ~ .ms-body .ms-tabs [for=tab-status-toggle]::after,
  #tab-archive-toggle:checked ~ .ms-body .ms-tabs [for=tab-archive-toggle]::after {
    transform: scaleX(1);
  }

  .ms-panels {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
  }

  .ms-panel {
    display: none;
  }

  #tab-type-toggle:checked ~ .ms-body .ms-panels .panel-type,
  #tab-status-toggle:checked ~ .ms-body .ms-panels .panel-status,
  #tab-archive-toggle:checked ~ .ms-body .ms-panels .panel-archive {
    display: block;
  }

  .panel-archive .menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border: 0;
    background: transparent;
  }

  .panel-archive .menu-item {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-md);
  }

  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  body.dark .menu-list,
  #theme-toggle:checked ~ .site-wrapper .menu-list {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 36px -24px rgba(2, 6, 23, 0.8);
  }

  .menu-item a {
    display: flex;
    align-items: flex-start;
    -moz-column-gap: 12px;
         column-gap: 12px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    transition: background-color 0.2s;
    line-height: 1.8;
  }

  .menu-item:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

  body.dark .menu-item:not(:last-child),
  #theme-toggle:checked ~ .site-wrapper .menu-item:not(:last-child) {
    border-bottom-color: rgba(148, 163, 184, 0.12);
  }

  .panel-archive .menu-item {
    border: 1px solid var(--line);
  }

  .panel-archive .menu-item:nth-child(odd) {
    border-inline-end: 1px solid var(--line);
  }

  .panel-archive .menu-item:not(:nth-last-child(-n+2)) {
    border-bottom: 1px solid var(--line);
  }

  body.dark .panel-archive .menu-item,
  #theme-toggle:checked ~ .site-wrapper .panel-archive .menu-item {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
  }

  body.dark .panel-archive .menu-item:nth-child(odd),
  #theme-toggle:checked ~ .site-wrapper .panel-archive .menu-item:nth-child(odd) {
    border-inline-end-color: rgba(148, 163, 184, 0.12);
  }

  body.dark .panel-archive .menu-item:not(:nth-last-child(-n+2)),
  #theme-toggle:checked ~ .site-wrapper .panel-archive .menu-item:not(:nth-last-child(-n+2)) {
    border-bottom-color: rgba(148, 163, 184, 0.12);
  }

  .menu-item a:active {
    background-color: var(--soft);
  }

  body.dark .menu-item a:hover,
  body.dark .menu-item a:active,
  #theme-toggle:checked ~ .site-wrapper .menu-item a:hover,
  #theme-toggle:checked ~ .site-wrapper .menu-item a:active {
    background-color: rgba(148, 163, 184, 0.12);
  }

  .menu-icon {
    margin-inline-end: 0;
    color: var(--accent);
    display: grid;
    place-items: center;
    min-width: 32px;
  }

  .menu-text {
    flex-grow: 1;
    line-height: 1.8;
  }

  .menu-chevron {
    color: var(--muted);
    margin-inline-start: auto;
    padding-top: 4px;
  }

  .ns-body {
    padding: 12px 16px 24px;
  }
}

@media (min-width: 992px) {
  .search-overlay {
    padding: 60px 0;
  }

  .search-overlay .search-body {
    max-height: calc(100vh - 220px);
  }
}

@media (min-width: 992px) {
  .main-header-container {
    display: block;
  }
}

.main-content {
  padding-top: 3rem;
}

.media-theme-surface {
  --media-bg: #ffffff;
  --media-text: #1f2937;
  --media-muted: #6b7280;
  --media-soft: #f3f4f6;
  --media-border: rgba(148, 163, 184, 0.2);
  --media-card-bg: #ffffff;
  --media-shadow: 0 35px 80px -50px rgba(15, 23, 42, 0.55);
  --media-accent: #f59e0b;
  --media-accent-strong: #d97706;
  --media-accent-soft: rgba(245, 158, 11, 0.15);
  --media-ed-accent: #0ea5e9;
  --media-ed-accent-soft: rgba(14, 165, 233, 0.12);
  color: var(--media-text);
}

.media-hub {
  --media-bg: #ffffff;
  --media-text: #1f2937;
  --media-muted: #6b7280;
  --media-soft: #f3f4f6;
  --media-border: rgba(148, 163, 184, 0.2);
  --media-card-bg: #ffffff;
  --media-shadow: 0 35px 80px -50px rgba(15, 23, 42, 0.55);
  --media-accent: #f59e0b;
  --media-accent-strong: #d97706;
  --media-accent-soft: rgba(245, 158, 11, 0.15);
  --media-ed-accent: #0ea5e9;
  --media-ed-accent-soft: rgba(14, 165, 233, 0.12);
  font-family: "Vazirmatn", "Vazir", sans-serif;
  border-radius: 32px;
  padding: 36px 32px;
  color: var(--media-text);
  position: relative;
  overflow: hidden;
}

.media-hub__header {
  display: flex;
  justify-content: center;
}

.media-hub__tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--media-soft);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  flex-wrap: wrap;
}

.media-hub__tab {
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--media-muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;
}

.media-hub__tab.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.media-hub__tab:hover {
  background: rgba(148, 163, 184, 0.18);
  color: var(--media-text);
}

.media-hub__tab.is-active {
  background: var(--media-accent);
  color: #ffffff;
  box-shadow: 0 12px 24px -16px rgba(245, 158, 11, 0.9);
}

.media-hub__body {
  margin-top: 32px;
}

.media-tab {
  display: none;
  animation: media-tab-fade 0.3s ease;
}

.media-tab.is-active {
  display: block;
}

@keyframes media-tab-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.media-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.media-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.media-card__figure {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 24px;
  overflow: hidden;
  background-color: #1f2937;
  background-position: center;
  background-size: cover;
  box-shadow: var(--media-card-shadow);
  transition: transform 0.35s ease;
}

.media-card__figure:hover {
  transform: translateY(-6px);
}

.media-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.15));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.media-card__figure:hover .media-card__overlay {
  opacity: 1;
}

.media-hub__empty-text {
  text-align: center;
  color: var(--media-muted);
  font-weight: 600;
  padding: 48px 0;
}

.media-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transform: scale(0.6);
  opacity: 0;
  transition: all 0.25s ease;
}

.media-card__figure:hover .media-card__play {
  transform: scale(1);
  opacity: 1;
}

.media-card__play svg {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 10px 15px rgba(15, 23, 42, 0.45));
}

.media-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--media-text);
  line-height: 1.6;
}

.media-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.media-toolbar__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.media-filter {
  border: none;
  background: #ffffff;
  color: var(--media-muted);
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 0 1px var(--media-border);
}

.media-filter:hover {
  background: rgba(148, 163, 184, 0.16);
  color: var(--media-text);
}

.media-filter.is-active {
  background: var(--media-accent);
  color: #ffffff;
  box-shadow: 0 12px 24px -16px rgba(245, 158, 11, 0.8);
}

.media-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: min(260px, 100%);
}

.media-search__input {
  width: 100%;
  padding: 11px 14px;
  padding-inline-start: 44px;
  border-radius: 14px;
  border: 1px solid var(--media-border);
  background: #ffffff;
  color: var(--media-text);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.media-search__input:focus {
  outline: none;
  border-color: var(--media-accent);
  box-shadow: 0 0 0 3px var(--media-accent-soft);
}

.media-search__icon {
  position: absolute;
  inset-inline-end: 16px;
  color: var(--media-muted);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-search__icon svg {
  width: 20px;
  height: 20px;
}

.media-song-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.media-song {
  background: var(--media-card-bg);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: var(--media-card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-song--compact {
  padding: 18px 20px;
}

.media-song:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.55);
}

.media-song.is-hidden {
  display: none;
}

.media-song__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.media-song__info {
  text-align: right;
}

.media-song__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--media-text);
}

.media-song__artist {
  margin-top: 6px;
  color: var(--media-muted);
  font-size: 0.85rem;
}

.media-song__anime {
  margin-top: 4px;
  color: var(--media-muted);
  font-size: 0.83rem;
}

.media-song__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.media-song__tag--op {
  background: var(--media-accent-soft);
  color: var(--media-accent-strong);
}

.media-song__tag--ed {
  background: var(--media-ed-accent-soft);
  color: var(--media-ed-accent);
}

.media-song__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--media-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.media-song__episodes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--media-muted);
  font-size: 0.85rem;
}

.media-song__episodes svg {
  width: 20px;
  height: 20px;
}

.media-song__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.media-song__action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--media-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--media-muted);
  transition: all 0.2s ease;
}

.media-song__action svg {
  width: 20px;
  height: 20px;
}

.media-song__action:hover {
  background: var(--media-accent);
  color: #ffffff;
  box-shadow: 0 12px 25px -18px rgba(245, 158, 11, 0.8);
}

.media-gallery {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 16px;
       column-gap: 16px;
}

@media (min-width: 640px) {
  .media-gallery {
    -moz-column-count: 3;
         column-count: 3;
  }
}

@media (min-width: 960px) {
  .media-gallery {
    -moz-column-count: 4;
         column-count: 4;
  }
}

.media-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 20px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
  box-shadow: var(--media-card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-gallery__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.55);
}

.media-gallery__image {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.media-gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  color: #ffffff;
}

.media-gallery__overlay svg {
  width: 32px;
  height: 32px;
}

.media-gallery__item:hover .media-gallery__overlay {
  opacity: 1;
}

.media-empty {
  margin-top: 20px;
  text-align: center;
  color: var(--media-muted);
  font-weight: 600;
  display: none;
}

.media-empty.is-visible {
  display: block;
}

.media-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 1050;
}

.media-modal.is-visible {
  display: flex;
}

.media-modal__content {
  position: relative;
  max-width: min(90vw, 960px);
  width: 100%;
  background: #ffffff;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 45px 95px -60px rgba(15, 23, 42, 0.8);
}

.media-modal__image {
  width: 100%;
  max-height: 75vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 16px;
}

.media-modal__close,
.media-modal__download {
  position: absolute;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.media-modal__close:hover,
.media-modal__download:hover {
  background: rgba(15, 23, 42, 0.9);
}

.media-modal__close svg,
.media-modal__download svg {
  width: 22px;
  height: 22px;
}

.media-modal__close {
  inset-inline-start: 16px;
}

.media-modal__download {
  inset-inline-end: 16px;
}

@media (max-width: 640px) {
  .media-hub {
    padding: 28px 20px;
    border-radius: 28px;
  }

  .media-hub__body {
    margin-top: 16px;
  }

  .media-hub__tabs {
    width: 100%;
    justify-content: space-between;
  }

  .media-hub__tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 12px;
  }

  .media-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .media-toolbar__filters {
    width: 100%;
    justify-content: space-between;
  }

  .media-filter {
    flex: 1 1 auto;
    text-align: center;
  }

  .media-search {
    width: 100%;
  }

  .media-song-list {
    grid-template-columns: 1fr;
  }

  .media-modal__content {
    padding: 18px;
  }

  .media-modal__close,
  .media-modal__download {
    top: 12px;
  }
}

body.media-modal-open {
  overflow: hidden;
}

.video-archive {
  padding: clamp(32px, 4vw, 56px) 0 80px;
  background: transparent;
  color: var(--ap-text-color);
}

.video-archive__filters {
  margin-bottom: 28px;
}

.video-archive__hero {
  margin-bottom: 26px;
  background: transparent;
  border-radius: 28px;
  border: none;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: none;
}

.video-archive__hero-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: center;
}

.video-archive__hero-highlight {
  background: transparent;
  border-radius: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: none;
  display: grid;
  gap: 10px;
}

.video-archive__section-header {
  align-items: center;
  gap: 18px;
}

.video-archive__hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--ap-blue), var(--ap-green));
  color: #fff;
  font-weight: 700;
  width: -moz-fit-content;
  width: fit-content;
}

.video-archive__hero h1 {
  margin: 6px 0 0;
}

.video-archive__description {
  margin: 6px 0 0;
  color: var(--ap-text-muted);
  line-height: 1.8;
}

.video-archive__hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.video-archive__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--ap-text-color);
  font-weight: 700;
}

.video-archive__cta {
  display: flex;
  align-items: center;
}

.video-archive__hero-highlight-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ap-section-primary, #3b82f6), #14b8a6);
  color: #ffffff;
  font-weight: 800;
  width: -moz-fit-content;
  width: fit-content;
  box-shadow: 0 15px 35px -18px rgba(59, 130, 246, 0.45);
}

.video-archive__hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.video-archive__stat {
  background: var(--ap-card-background);
  border: 1px solid var(--ap-border-color);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  box-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.35);
}

.video-archive__stat-label {
  color: var(--ap-text-muted);
  font-weight: 600;
}

.video-archive__stat-value {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ap-text-color);
}

.video-archive__filters-card {
  background: var(--ap-card-background);
  border-radius: 24px;
  border: 1px solid var(--ap-border-color);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-archive__filters-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.video-archive__filters-header strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ap-section-title-color);
}

.video-archive__sort {
  display: grid;
  gap: 8px;
  min-width: 260px;
}

.video-archive__sort-label {
  font-weight: 700;
  color: var(--ap-text-color);
}

.video-archive__sort-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-sort-pill {
  position: relative;
  display: inline-flex;
}

.video-sort-pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.video-sort-pill__content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  min-width: 150px;
  justify-content: center;
  box-shadow: 0 15px 35px -35px rgba(15, 23, 42, 0.35);
  transition: all 0.2s ease;
}

.video-sort-pill input:focus-visible + .video-sort-pill__content {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 3px;
}

.video-sort-pill input:checked + .video-sort-pill__content {
  background: linear-gradient(120deg, #22d3ee, #6366f1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 20px 40px -28px rgba(99, 102, 241, 0.6);
}

.video-sort-pill__icon {
  font-size: 1.1rem;
}

.video-archive__filters-header p {
  margin: 6px 0 0;
  color: var(--ap-text-muted);
}

.video-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.video-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.video-filter-label {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.95rem;
}

.video-filter-field--compact {
  min-width: 220px;
}

.video-filter-input,
.video-filter-select {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 12px 16px;
  font-size: 0.95rem;
  background: #f8fafc;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  color: #0f172a;
}

.video-filter-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) center;
  padding-inline-end: 46px;
}

.video-filter-input:focus,
.video-filter-select:focus {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  outline: none;
}

.video-archive__filters-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.video-filters__apply {
  border-radius: 999px;
  padding: 12px 28px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #0f172a;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.video-filters__apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 35px -15px rgba(249, 115, 22, 0.45);
  filter: brightness(1.03);
}

.video-filters__reset {
  color: #fbbf24;
  font-weight: 600;
  text-decoration: none;
}

.video-filter-chips {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 16px;
}

.video-filter-chips__label {
  font-weight: 700;
  color: #0f172a;
}

.video-filter-chip {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
}

@media (max-width: 960px) {
  .video-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .video-filters__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .video-archive__filters-header {
    flex-direction: column;
  }

  .video-filter-field--compact {
    width: 100%;
  }

  .video-archive__filters-actions {
    justify-content: flex-start;
  }
}

.video-archive__grid {
  background: var(--ap-card-background);
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--ap-border-color);
  box-shadow: 0 24px 52px -38px rgba(15, 23, 42, 0.28);
}

.video-archive__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.video-archive__header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.video-archive__subtitle {
  color: var(--ap-text-muted);
  margin-top: 4px;
}

.video-archive__badge {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 700;
}

.video-archive__badge--muted {
  background: rgba(148, 163, 184, 0.15);
  color: var(--ap-text-muted);
}

.video-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.video-card {
  background: transparent;
  border-radius: 22px;
  overflow: hidden;
  border: none;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.video-card__figure {
  display: block;
  position: relative;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
}

.video-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35));
}

.video-card__figure--locked::after {
  background: rgba(15, 23, 42, 0.55);
}

.video-card__figure:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

.video-card__trigger {
  background-color: transparent;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f97316, #fbbf24);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.6);
}

.video-card__lock {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(15, 23, 42, 0.85);
  color: #f9fafb;
  padding: 8px;
  border-radius: 12px;
  z-index: 2;
}

.video-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-card__badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.18);
  color: #c7d2fe;
}

.video-card__badge--music {
  background: rgba(236, 72, 153, 0.2);
  color: #fbcfe8;
}

.video-card__year {
  font-size: 0.85rem;
  color: #94a3b8;
}

.video-card__title {
  font-size: 1.1rem;
  margin: 0;
  color: #0f172a;
}

.video-card__anime {
  font-size: 0.9rem;
  color: #475569;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.video-card__anime a {
  font-weight: 600;
}

.video-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.video-card__action {
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  background: #f59e0b;
  color: #111827;
  border: none;
  cursor: pointer;
}

.video-card__action--secondary {
  background: #eef2ff;
  color: #1e293b;
}

.video-card__action--disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.video-archive__empty {
  padding: 32px;
  text-align: center;
  border-radius: 18px;
  background: #fffbeb;
  color: #d97706;
  font-weight: 600;
}

.video-archive__paginator {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.video-archive__paginator .modern-pagination {
  width: 100%;
}

.video-archive__paginator .modern-pagination__bar {
  max-width: 760px;
  margin: 0 auto;
}

.video-preview-modal__dialog {
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  background: #0f172a;
}

.video-preview-modal__cover {
  height: 140px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.1);
}

.video-preview-modal__player {
  padding: 16px 16px 0;
}

.video-preview-modal__player video {
  width: 100%;
  border-radius: 18px;
  background: #000;
}

.video-preview-modal__content {
  padding: 20px 24px 32px;
  color: #fff;
}

.video-preview-modal__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 12px;
  font-weight: 600;
}

.anime-online-player {
  width: 100%;
}

.anime-online-player__aspect {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.anime-online-player__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #000;
}

.video-preview-modal__title {
  margin: 0 0 8px;
}

.video-preview-modal__meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1024px) {
  .video-archive__hero-inner {
    grid-template-columns: 1fr;
  }

  .video-archive__hero-highlight,
  .video-archive__hero-stats {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .video-archive__hero {
    padding: 24px;
  }

  .video-archive__hero-inner {
    gap: 20px;
  }

  .video-archive__filters-card {
    padding: 20px;
  }

  .video-archive__grid {
    padding: 20px;
  }
}

.relation-ui {
  position: relative;
  margin: 48px 0 104px;
  padding: 0 0 56px;
  background: none;
}

.relation-ui__background {
  display: none;
}

.relation-ui__shell {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 64px) 0 0;
}

.relation-hero {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}

.relation-hero__card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 46px);
  padding: clamp(26px, 4vw, 52px);
  border-radius: 40px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 18px 50px -25px rgba(249, 115, 22, 0.15);
  overflow: hidden;
}

.relation-hero__pattern {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.7), rgba(255, 255, 255, 0));
  transform: skewX(-12deg) translateX(25%);
  pointer-events: none;
}

.relation-hero__body {
  position: relative;
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1;
}

.relation-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relation-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.35);
}

.relation-hero__badge--primary {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.relation-hero__badge--secondary {
  background: #eff6ff;
  border-color: #dbeafe;
  color: #1d4ed8;
}

.relation-hero__title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.relation-hero__title span {
  display: inline-block;
  margin-top: 8px;
  background: linear-gradient(90deg, #f97316, #fbbf24);
  -webkit-background-clip: text;
  color: transparent;
}

.relation-hero__description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #475569;
  text-align: justify;
  border-right: 4px solid #fb923c;
  padding-right: 18px;
  border-radius: 3px;
}

.relation-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 24px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  margin: 0;
}

.relation-hero__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  border-radius: 18px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.relation-hero__stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 20px;
  background: #f8fafc;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.1);
}

.relation-hero__stat-icon svg {
  width: 26px;
  height: 26px;
}

.relation-hero__stat dt {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
  margin: 0 0 4px;
}

.relation-hero__stat dd {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.relation-hero__stat:hover {
  background: #fff7ed;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -22px rgba(249, 115, 22, 0.45);
}

.relation-hero__stat:hover .relation-hero__stat-icon {
  background: #fff;
  color: #f97316;
  box-shadow: 0 8px 24px -16px rgba(249, 115, 22, 0.55);
}

.relation-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.relation-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 22px;
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 20px 40px -18px rgba(15, 23, 42, 0.35);
}

.relation-hero__cta svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.relation-hero__cta:hover {
  background: #f97316;
  color: #fff;
}

.relation-hero__cta:hover svg {
  transform: translateX(-4px);
}

.relation-hero__cta:active {
  transform: translateY(1px) scale(0.98);
}

.relation-hero__access {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
  opacity: 0.85;
}

.relation-hero__access::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}

.relation-hero__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 12px 26px -18px rgba(15, 23, 42, 0.4);
  min-width: 120px;
  text-align: center;
}

.relation-hero__status--airing {
  background: rgba(16, 185, 129, 0.95);
}

.relation-hero__status--finished {
  background: rgba(59, 130, 246, 0.95);
}

.relation-hero__status--not-uploaded {
  background: rgba(239, 68, 68, 0.95);
}

.relation-hero__status--unknown {
  background: rgba(148, 163, 184, 0.9);
}

.relation-info-card {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
  padding: 22px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #475569;
  font-weight: 600;
  text-align: center;
}

.relation-info-card__accent {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb923c, #fdba74);
  pointer-events: none;
}

.relation-info-card {
  padding-left: 42px;
}

.relation-info-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff7ed;
  color: #f97316;
  display: flex;
  align-items: center;
  justify-content: center;
}

.relation-info-card__icon svg {
  width: 18px;
  height: 18px;
}

.relation-info-card strong {
  color: #0f172a;
}

.relation-network {
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 35px -20px rgba(15, 23, 42, 0.2);
}

.relation-network__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.relation-network__title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.relation-network__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
}

.relation-network__icon svg {
  width: 24px;
  height: 24px;
}

.relation-network__eyebrow {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 700;
}

.relation-network__title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 900;
  color: #0f172a;
}

.relation-network__total {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.relation-network__empty {
  padding: 32px;
  border-radius: 24px;
  text-align: center;
  background: #f8fafc;
  color: #94a3b8;
  font-weight: 600;
}

.relation-network__sections {
  margin-top: 24px;
}

.relation-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin: 0 -6px;
  padding-inline: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.relation-tabs::-webkit-scrollbar {
  display: none;
}

.relation-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-weight: 800;
  color: #64748b;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 6px 16px -14px rgba(15, 23, 42, 0.25);
}

.relation-tabs__item.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  transform: scale(1.05);
}

.relation-tabs__count {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.relation-tabs__item.is-active .relation-tabs__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.relation-grid {
  display: none;
}

.relation-grid.is-active {
  display: block;
}

.relation-grid__title {
  margin: 0 0 20px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
}

.relation-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.relation-grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  min-height: 260px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.relation-grid-card:hover {
  transform: translateY(-4px);
  border-color: #fed7aa;
  box-shadow: 0 20px 30px -20px rgba(249, 115, 22, 0.35);
}

.relation-grid-card__subtitle {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f97316;
}

.relation-grid-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #0f172a;
}

.relation-grid-card__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  justify-content: center;
}

.relation-grid-card__status-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f8fafc;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.relation-grid-card__status-icon svg {
  width: 16px;
  height: 16px;
}

.relation-grid-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #64748b;
  padding-inline: 14px;
}

.relation-grid-card__pill--available {
  background: #ecfdf5;
  color: #047857;
}

.relation-grid-card__glow {
  position: absolute;
  inset: auto auto -40px -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.25), transparent 70%);
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.relation-grid-card:hover .relation-grid-card__glow,
.relation-grid-card:focus-within .relation-grid-card__glow {
  opacity: 1;
}

.relation-grid-card--soon {
  cursor: default;
  border-color: #e2e8f0;
}

.relation-grid-card--soon:hover {
  transform: none;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.relation-grid-card--soon:hover .relation-grid-card__glow,
.relation-grid-card--soon:focus-within .relation-grid-card__glow {
  opacity: 0;
}

.relation-showcase__filter {
  margin: 48px 0 24px;
}

.relation-showcase__archive {
  margin-bottom: 32px;
}

@media (max-width: 960px) {
  .relation-hero__card {
    border-radius: 32px;
  }

  .relation-network {
    border-radius: 28px;
  }
}

@media (max-width: 960px) {
  .relation-showcase {
    margin: 32px 0 64px;
  }

  .relation-showcase__hero-card {
    border-radius: 32px;
  }

  .relation-showcase__panel {
    border-radius: 28px;
  }
}

@media (max-width: 640px) {
  .relation-hero__card {
    padding: 24px;
  }

  .relation-hero__stats {
    flex-direction: column;
  }

  .relation-network {
    padding: 24px;
  }

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

.video-detail {
  position: relative;
  padding: 36px 0 60px;
  background: transparent;
  color: #0f172a;
  overflow: hidden;
}

.video-detail__background {
  position: absolute;
  inset: -120px 0 0;
  pointer-events: none;
  display: none;
}

.video-detail__glow {
  position: absolute;
  filter: blur(120px);
  border-radius: 999px;
  opacity: 0.6;
}

.video-detail__glow--primary {
  width: 420px;
  height: 420px;
  background: #f3a303;
  top: -60px;
  right: -80px;
}

.video-detail__glow--secondary {
  width: 360px;
  height: 360px;
  background: #38bdf8;
  left: -90px;
  bottom: 60px;
}

.video-detail__hero {
  position: relative;
  margin-bottom: 24px;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 80px -40px rgba(15, 23, 42, 0.4);
  overflow: hidden;
}

.video-detail__hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: none;
  opacity: 0;
  filter: none;
}

.video-detail__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9));
}

.video-detail__hero > * {
  position: relative;
  z-index: 1;
}

.video-detail__hero-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.video-detail__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 800;
  font-size: 13px;
}

.video-detail__hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.video-detail__ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.15s ease;
}

.video-detail__ghost-link:hover {
  border-color: #f3a303;
  color: #7c2d12;
  box-shadow: 0 12px 30px -18px rgba(243, 163, 3, 0.55);
}

.video-detail__title {
  margin: 14px 0 8px;
  font-size: 32px;
  line-height: 1.4;
  color: #0f172a;
}

.video-detail__subtitle {
  margin: 0 0 12px;
  color: #475569;
  line-height: 1.8;
  font-size: 15px;
}

.video-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.video-detail__chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.5);
}

.video-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .video-detail__layout {
    grid-template-columns: 1fr;
  }
}

.video-detail__main {
  display: grid;
  gap: 16px;
}

.video-detail__card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 24px 80px -38px rgba(15, 23, 42, 0.3);
}

.video-detail__player-card {
  padding: 20px;
}

.video-detail__player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.video-detail__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #78350f;
  font-weight: 800;
  font-size: 12px;
}

.video-detail__muted {
  margin: 6px 0 0;
  color: #64748b;
}

.video-detail__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.video-detail__link {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.video-detail__link:hover {
  color: #7c2d12;
  border-color: #f3a303;
  box-shadow: 0 8px 24px -18px rgba(243, 163, 3, 0.6);
}

.video-detail__player-shell {
  position: relative;
  margin-top: 16px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: radial-gradient(circle at 12% 22%, rgba(250, 204, 21, 0.1), transparent 40%), radial-gradient(circle at 70% 10%, rgba(14, 165, 233, 0.08), transparent 40%), #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.video-detail__player {
  background: #0f172a;
}

.video-detail__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #0b1220;
}

.video-detail__player-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.35);
  backdrop-filter: blur(6px);
}

.video-detail__pulse {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
  animation: pulse 2s ease-in-out infinite;
}

.video-detail__lock {
  padding: 42px 20px;
  text-align: center;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.9), rgba(226, 232, 240, 0.9));
}

.video-detail__lock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: #f59e0b;
}

.video-detail__lock-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.video-detail__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.video-detail__stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 30px -22px rgba(15, 23, 42, 0.4);
}

.video-detail__stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
}

.video-detail__stat-icon--purple {
  background: rgba(124, 58, 237, 0.12);
  color: #6b21a8;
}

.video-detail__stat-icon--green {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.video-detail__stat-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.video-detail__stat-icon--orange {
  background: rgba(249, 115, 22, 0.14);
  color: #9a3412;
}

.video-detail__stat-label {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 13px;
}

.video-detail__stat-value {
  margin: 0;
  font-weight: 800;
  color: #0f172a;
}

.video-detail__description {
  padding: 20px;
}

.video-detail__section-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.video-detail__section-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(243, 163, 3, 0.12);
  color: #b45309;
}

.video-detail__section-title {
  margin: 4px 0 0;
  font-size: 20px;
  color: #0f172a;
}

.video-detail__description-body {
  color: #0f172a;
  line-height: 1.9;
  font-size: 15px;
}

.video-detail__sidebar {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 12px;
}

.video-detail__info-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.video-detail__poster {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #e2e8f0;
  min-height: 220px;
}

.video-detail__poster img {
  width: 100%;
  display: block;
}

.video-detail__rating {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 12px;
  box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #f8fafc;
  backdrop-filter: blur(6px);
}

.video-detail__rating-icon {
  color: #f59e0b;
  font-size: 14px;
}

.video-detail__poster-body {
  display: grid;
  gap: 12px;
}

.video-detail__poster-titles {
  display: grid;
  gap: 4px;
}

.video-detail__poster-title {
  margin: 0;
  font-weight: 800;
  color: #0f172a;
}

.video-detail__poster-subtitle {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.video-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
}

.video-detail__tag {
  padding: 7px 12px;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 700;
}

.video-detail__actions {
  display: flex;
  gap: 10px;
}

.video-detail__icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.video-detail__icon-button:hover {
  color: #b45309;
  border-color: #f3a303;
  box-shadow: 0 12px 26px -18px rgba(243, 163, 3, 0.55);
}

.video-detail__cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.video-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.video-detail__cta--ghost {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}

.video-detail__cta:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.video-detail__cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -22px rgba(15, 23, 42, 0.45);
}

@media (max-width: 768px) {
  .video-detail__hero,
  .video-detail__card {
    border-radius: 18px;
  }

  .video-detail__player-header,
  .video-detail__hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .video-detail__hero-actions,
  .video-detail__links {
    width: 100%;
  }

  .video-detail__sidebar {
    position: static;
  }
}

/* Tailwind-inspired anime page filters, matched to filter.html mockup. */

.page-box-filters .filter-toolbar--desktop {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-box-filters .filter-toolbar__chips {
  gap: 8px;
}

.page-box-filters .filter-chip__button {
  min-height: 42px;
  border-radius: 999px;
  padding: 8px 16px;
  border-color: #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.875rem;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.page-box-filters .filter-chip__button:hover,
.page-box-filters .filter-chip__button:focus-visible {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.page-box-filters .filter-chip__button.is-active {
  background: #fff9ee;
  border-color: rgba(243, 163, 3, 0.55);
  color: #111827;
}

.page-box-filters .filter-chip__label {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

.page-box-filters .filter-chip__value {
  color: #1f2937;
  font-size: 0.875rem;
  font-weight: 800;
}

.page-box-filters .filter-chip__icon {
  width: 14px;
  height: 14px;
  color: #6b7280;
}

.page-box-filters .filter-toolbar__actions {
  gap: 16px;
}

.page-box-filters .filter-toggle {
  min-height: 42px;
  flex-direction: row-reverse;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #f9fafb;
  border-color: #e5e7eb;
}

.page-box-filters .filter-toggle__label {
  color: #374151;
  font-size: 0.875rem;
  font-weight: 800;
}

.page-box-filters .filter-toggle__track {
  width: 40px;
  height: 20px;
  background: #d1d5db;
}

.page-box-filters .filter-toggle__thumb {
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db;
}

.page-box-filters .filter-toggle input:checked + .filter-toggle__track {
  background: #f3a303;
}

.page-box-filters .filter-toggle input:checked + .filter-toggle__track .filter-toggle__thumb {
  transform: translateX(-20px);
  border-color: #ffffff;
}

.page-box-filters .filter-apply-btn,
.page-box-filters .filter-modal__apply {
  border-radius: 999px;
  background: #f3a303;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.page-box-filters .filter-apply-btn:hover,
.page-box-filters .filter-modal__apply:hover,
.page-box-filters .filter-apply-btn:focus-visible,
.page-box-filters .filter-modal__apply:focus-visible {
  background: #e09600;
}

.page-box-filters .filter-toolbar-mobile {
  display: none;
}

.page-box-filters .filter-mobile-trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease;
}

.page-box-filters .filter-mobile-trigger:active {
  transform: scale(0.98);
}

.page-box-filters .filter-mobile-trigger__title,
.page-box-filters .filter-mobile-trigger__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-box-filters .filter-mobile-trigger__title {
  font-size: 0.9375rem;
  font-weight: 800;
}

.page-box-filters .filter-mobile-trigger__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(243, 163, 3, 0.1);
  color: #f3a303;
}

.page-box-filters .filter-mobile-trigger__icon svg {
  width: 20px;
  height: 20px;
}

.page-box-filters .filter-mobile-trigger__badge {
  border-radius: 999px;
  background: #f3f4f6;
  padding: 4px 12px;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 800;
}

.page-box-filters .filter-mobile-trigger__badge svg {
  width: 16px;
  height: 16px;
}

.page-box-filters .filter-modal {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-box-filters .filter-modal__dialog {
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-box-filters .filter-modal.is-open .filter-modal__dialog {
  transform: scale(1);
  opacity: 1;
}

.page-box-filters .filter-modal__header {
  padding: 16px;
  border-bottom-color: #f3f4f6;
}

.page-box-filters .filter-modal__title {
  font-size: 1rem;
  font-weight: 800;
}

.page-box-filters .filter-modal__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f9fafb;
  font-size: 1.35rem;
}

.page-box-filters .filter-modal__body {
  padding: 16px;
}

.page-box-filters .filter-modal__body--stacked {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-box-filters .filter-modal__section-title {
  margin: 0 4px 10px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 800;
}

.page-box-filters .filter-modal__options {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.page-box-filters .filter-option {
  min-height: 42px;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border-color: #e5e7eb;
  background: #ffffff;
}

.page-box-filters .filter-option__text {
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 600;
}

.page-box-filters .filter-option__mark {
  width: 16px;
  height: 16px;
  border-width: 1px;
  border-color: #d1d5db;
  background: #ffffff;
}

.page-box-filters .filter-option__mark::after {
  inset: 3px;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.page-box-filters .filter-option.is-active {
  background: #fff9ee;
  border-color: #f3a303;
}

.page-box-filters .filter-option.is-active .filter-option__text {
  color: #111827;
  font-weight: 800;
}

.page-box-filters .filter-option.is-active .filter-option__mark::after {
  transform: scale(1);
}

@media (max-width: 767px) {
  .page-box-filters {
    margin-bottom: 20px;
  }

  .page-box-filters .filter-toolbar--desktop {
    display: none;
  }

  .page-box-filters .filter-toolbar-mobile {
    display: block;
  }

  .page-box-filters .filter-modal:not(.filter-modal--all) {
    display: none;
  }

  .page-box-filters .filter-modal {
    align-items: flex-end;
    padding: 0;
  }

  .page-box-filters .filter-modal__dialog {
    width: 100%;
    max-height: 90vh;
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
  }

  .page-box-filters .filter-modal.is-open .filter-modal__dialog {
    transform: translateY(0);
  }

  .page-box-filters .filter-modal__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-box-filters .filter-toggle--mobile {
    flex: none;
    width: 100%;
    justify-content: space-between;
    border-radius: 999px;
  }

  .page-box-filters .filter-modal__footer {
    padding: 12px 16px 20px;
  }

  .page-box-filters .filter-modal__apply {
    width: 100%;
  }
}

.login-required-alert {
  text-align: center;
}

body.dark .login-required-alert,
#theme-toggle:checked ~ .site-wrapper .login-required-alert {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.18);
  color: #e2e8f0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.login-required-alert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

body.dark .login-required-alert__actions .uk-button,
#theme-toggle:checked ~ .site-wrapper .login-required-alert__actions .uk-button {
  background: rgba(248, 250, 252, 0.12);
  border-color: rgba(226, 232, 240, 0.28);
  color: #f8fafc;
}

body.dark .login-required-alert__actions .uk-button:hover,
body.dark .login-required-alert__actions .uk-button:focus,
#theme-toggle:checked ~ .site-wrapper .login-required-alert__actions .uk-button:hover,
#theme-toggle:checked ~ .site-wrapper .login-required-alert__actions .uk-button:focus {
  background: rgba(248, 250, 252, 0.2);
  color: #ffffff;
}

/* Animo Header */

.animo-header-shell {
  font-family: Vazirmatn, IRANSans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: transparent;
  padding-top: 0;
}

.site-wrapper.animo-header-shell,
#leo {
  background: transparent;
}

.animo-header-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 20px 16px 0;
  background: transparent;
}

.animo-desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(241, 245, 249, 0.8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  padding: 12px 24px;
  margin-top: 0;
}

.animo-header-right,
.animo-main-nav,
.animo-header-actions {
  display: flex;
  align-items: center;
}

.animo-header-right {
  gap: 32px;
}

.animo-header-actions {
  gap: 12px;
}

.animo-main-nav {
  gap: 24px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.animo-brand,
.animo-mobile-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}

.animo-brand {
  width: 150px;
  height: 48px;
}

.animo-brand img,
.animo-mobile-brand img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.animo-brand:hover,
.animo-mobile-brand:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) and (max-width: 1150px) {
  .animo-desktop-header {
    padding: 12px 16px;
  }

  .animo-header-right {
    gap: 18px;
  }

  .animo-main-nav {
    gap: 14px;
  }

  .animo-brand {
    width: 125px;
    height: 43px;
  }

  .animo-search-pill {
    width: 140px;
  }
}

.animo-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: #334155;
  transition: color 0.2s ease;
}

.animo-nav-link:hover {
  color: #f3a303;
}

.animo-nav-link svg {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.animo-nav-link--home,
.animo-nav-link.is-active {
  color: #f3a303;
  background: rgba(243, 163, 3, 0.1);
  padding: 6px 12px;
  border-radius: 12px;
}

.animo-nav-link--home svg,
.animo-nav-link.is-active svg {
  color: currentColor;
}

.animo-chevron {
  width: 12px !important;
  height: 12px !important;
  transition: transform 0.2s ease;
}

.animo-nav-group {
  position: relative;
}

.animo-nav-group:hover .animo-chevron {
  transform: rotate(180deg);
}

.animo-dropdown,
.animo-notification-dropdown,
.animo-profile-dropdown {
  position: absolute;
  top: 100%;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.18s ease;
  z-index: 60;
}

.animo-dropdown {
  right: 0;
  margin-top: 8px;
  padding: 8px;
  z-index: 50;
}

.animo-nav-group:hover .animo-dropdown,
.animo-notification-menu:hover .animo-notification-dropdown,
.animo-notification-menu:focus-within .animo-notification-dropdown,
.animo-profile-menu:hover .animo-profile-dropdown,
.animo-profile-menu:focus-within .animo-profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.animo-dropdown--type {
  width: 256px;
}

.animo-dropdown--type a {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.2s;
}

.animo-dropdown a:hover {
  background: #f8fafc;
}

.animo-dropdown--type span,
.animo-dropdown--status b {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.animo-dropdown--type small,
.animo-dropdown--status small {
  font-size: 10px;
  font-weight: 400;
  color: #94a3b8;
}

.animo-dropdown--status {
  width: 224px;
}

.animo-dropdown--status a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 12px;
}

.animo-dropdown--status a span {
  display: flex;
  flex-direction: column;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.dot-green {
  background: #10b981;
}

.dot-slate {
  background: #cbd5e1;
}

.dot-amber {
  background: #f59e0b;
}

.animo-mega {
  width: 440px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border-right: 4px solid #f3a303;
}

.animo-mega strong {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  padding: 0 8px;
  margin-bottom: 4px;
}

.animo-mega a {
  display: block;
  padding: 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #334155;
  transition: 0.2s;
}

.animo-mega a:hover {
  color: #f3a303;
  background: #f8fafc;
}

.animo-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 176px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  background: #f8fafc;
  border-radius: 12px;
  padding: 6px 12px;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.2s;
}

.animo-search-pill:hover {
  background: rgba(241, 245, 249, 0.8);
}

.animo-search-pill svg {
  width: 16px;
  height: 16px;
}

.animo-search-pill span {
  font-size: 12px;
  font-weight: 600;
}

.animo-toolbox {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(241, 245, 249, 0.8);
  padding: 4px;
  border-radius: 12px;
}

.animo-tool-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #64748b;
  transition: 0.2s;
}

.animo-tool-btn:hover {
  background: #fff;
  color: #1e293b;
}

.animo-tool-btn svg {
  width: 16px;
  height: 16px;
}

.animo-tool-btn span,
.animo-mobile-btn--notification span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #f43f5e;
}

.animo-tool-btn span {
  top: 4px;
  right: 4px;
}

.animo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #f1f5f9;
  transition: 0.2s;
  display: block;
}

.animo-avatar:hover {
  border-color: #f3a303;
}

.animo-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.animo-notification-menu,
.animo-profile-menu {
  position: relative;
}

.animo-notification-dropdown,
.animo-profile-dropdown {
  left: 0;
  margin-top: 8px;
}

.animo-notification-dropdown {
  width: 280px;
  padding: 10px;
}

.animo-dropdown-title {
  padding: 2px 4px 8px;
  font-size: 12px;
  font-weight: 900;
  color: #1e293b;
}

.animo-notification-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px;
  border-radius: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.animo-notification-item:hover,
.animo-notification-all:hover,
.animo-profile-dropdown a:hover,
.animo-profile-dropdown button:hover {
  background: #f8fafc;
  color: #f3a303;
}

.animo-notification-item small {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.animo-notification-empty,
.animo-notification-all {
  display: block;
  padding: 10px;
  border-radius: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.animo-notification-all {
  margin-top: 6px;
  border-top: 1px solid #f1f5f9;
  color: #f3a303;
}

.animo-profile-dropdown {
  width: 176px;
  padding: 6px;
  overflow: hidden;
}

.animo-profile-dropdown a,
.animo-profile-dropdown button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.animo-profile-dropdown form {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid #f1f5f9;
}

.animo-profile-dropdown button,
.animo-profile-login {
  color: #e11d48 !important;
}

.animo-mobile-header,
.animo-drawer-overlay,
.animo-mobile-drawer {
  display: none;
}

body.dark .animo-desktop-header,
#theme-toggle:checked ~ .site-wrapper .animo-desktop-header,
body.dark .animo-mobile-header,
#theme-toggle:checked ~ .site-wrapper .animo-mobile-header {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

body.dark .animo-main-nav,
body.dark .animo-nav-link,
#theme-toggle:checked ~ .site-wrapper .animo-main-nav,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link {
  color: #cbd5e1;
}

body.dark .animo-nav-link:hover,
body.dark .animo-nav-link.is-active,
body.dark .animo-nav-link--home,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link:hover,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link.is-active,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link--home {
  color: #fbbf24;
}

body.dark .animo-nav-link.is-active,
body.dark .animo-nav-link--home,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link.is-active,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link--home {
  background: rgba(251, 191, 36, 0.14);
}

body.dark .animo-nav-link svg,
#theme-toggle:checked ~ .site-wrapper .animo-nav-link svg {
  color: #94a3b8;
}

body.dark .animo-dropdown,
body.dark .animo-mobile-drawer,
#theme-toggle:checked ~ .site-wrapper .animo-dropdown,
#theme-toggle:checked ~ .site-wrapper .animo-mobile-drawer {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
}

body.dark .animo-dropdown a:hover,
body.dark .animo-mega a:hover,
#theme-toggle:checked ~ .site-wrapper .animo-dropdown a:hover,
#theme-toggle:checked ~ .site-wrapper .animo-mega a:hover {
  background: rgba(30, 41, 59, 0.95);
  color: #fbbf24;
}

body.dark .animo-dropdown--type span,
body.dark .animo-dropdown--status b,
body.dark .animo-mega a,
body.dark .animo-drawer-user b,
body.dark .animo-drawer-links,
body.dark .animo-drawer-links > a,
body.dark .animo-drawer-links .grid a,
#theme-toggle:checked ~ .site-wrapper .animo-dropdown--type span,
#theme-toggle:checked ~ .site-wrapper .animo-dropdown--status b,
#theme-toggle:checked ~ .site-wrapper .animo-mega a,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-user b,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links > a,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links .grid a {
  color: #e2e8f0;
}

body.dark .animo-dropdown--status small,
body.dark .animo-mega strong,
body.dark .animo-drawer-links strong,
#theme-toggle:checked ~ .site-wrapper .animo-dropdown--status small,
#theme-toggle:checked ~ .site-wrapper .animo-mega strong,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links strong {
  color: #94a3b8;
}

body.dark .animo-search-pill,
body.dark .animo-toolbox,
body.dark .animo-mobile-btn,
body.dark .animo-drawer-links > a,
body.dark .animo-drawer-links .grid a,
body.dark .animo-drawer-close,
#theme-toggle:checked ~ .site-wrapper .animo-search-pill,
#theme-toggle:checked ~ .site-wrapper .animo-toolbox,
#theme-toggle:checked ~ .site-wrapper .animo-mobile-btn,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links > a,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links .grid a,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-close {
  background: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}

body.dark .animo-tool-btn:hover,
#theme-toggle:checked ~ .site-wrapper .animo-tool-btn:hover {
  background: rgba(51, 65, 85, 0.92);
  color: #f8fafc;
}

body.dark .animo-avatar,
#theme-toggle:checked ~ .site-wrapper .animo-avatar {
  border-color: rgba(148, 163, 184, 0.28);
}

body.dark .animo-drawer-head,
body.dark .animo-drawer-links strong,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-head,
#theme-toggle:checked ~ .site-wrapper .animo-drawer-links strong {
  border-color: rgba(148, 163, 184, 0.18);
}

@media (max-width: 1023px) {
  .animo-header-shell {
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .animo-header-wrap {
    margin: 0 auto 14px;
    padding: 0 12px;
  }

  .animo-desktop-header {
    display: none;
  }

  .animo-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    border-radius: 16px;
    padding: 10px clamp(8px, 2.5vw, 16px);
    gap: 8px;
  }

  .animo-mobile-brand {
    width: clamp(84px, 24vw, 128px);
    height: 44px;
  }

  .animo-mobile-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(3px, 1.5vw, 8px);
  }

  .animo-mobile-btn {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .animo-mobile-btn svg {
    width: 16px;
    height: 16px;
  }

  .animo-mobile-btn--menu {
    background: #f1f5f9;
    color: #1e293b;
  }

  .animo-mobile-btn--menu svg {
    width: 20px;
    height: 20px;
  }

  .animo-mobile-btn--notification {
    position: relative;
  }

  .animo-mobile-btn--notification span {
    top: 7px;
    right: 7px;
  }

  .animo-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .animo-mobile-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    background: #fff;
    z-index: 51;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
  }

  .animo-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
  }

  .animo-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .animo-drawer-user img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    -o-object-fit: cover;
       object-fit: cover;
    background: #f1f5f9;
  }

  .animo-drawer-user b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
  }

  .animo-drawer-user small {
    font-size: 10px;
    font-weight: 600;
    color: #f3a303;
  }

  .animo-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .animo-drawer-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .animo-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
  }

  .animo-drawer-links > a,
  .animo-drawer-links .grid a {
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    color: #334155;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .animo-drawer-links > a:hover,
  .animo-drawer-links .grid a:hover {
    background: rgba(243, 163, 3, 0.1);
    color: #f3a303;
  }

  .animo-drawer-links > a.active {
    color: #f3a303;
  }

  .animo-drawer-links strong {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
  }

  .animo-drawer-links .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    text-align: center;
  }

  .animo-drawer-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 3px);
    min-width: 148px;
    margin: 24px auto 0;
    padding: 10px;
    border-radius: 12px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 12px;
    font-weight: 700;
    border-top: 1px solid #f1f5f9;
  }

  #menu-toggle:checked ~ .site-wrapper .animo-drawer-overlay {
    opacity: 1;
    visibility: visible;
  }

  #menu-toggle:checked ~ .site-wrapper .animo-mobile-drawer {
    transform: translateX(0);
  }
}

.dark {
  background-color: #050a16;
  --ap-background-color: #050a16;
  --ap-card-background: rgba(15, 23, 42, 0.96);
  --ap-text-color: #e2e8f0;
  --ap-text-muted: #94a3b8;
  --ap-border-color: rgba(148, 163, 184, 0.16);
  --ap-border-radius: 12px;
  --ap-tag-quality-bg: #111827;
  --ap-tag-quality-text: #cbd5e1;
  --ap-tag-hardsub-green-bg: rgba(37, 99, 235, 0.2);
  --ap-tag-hardsub-green-text: #60a5fa;
  --ap-blue: #60a5fa;
  --ap-star-color: #facc15;
  --ap-section-primary: #fbbf24;
  --ap-section-title-color: #f8fafc;
  --ap-section-button-hover-text: #0f172a;
}

.dark h1,
.dark .uk-h1,
.dark .page-title h1 {
  color: var(--ap-section-title-color);
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.55);
}

.dark h2,
.dark .uk-h2,
.dark h3,
.dark .uk-h3,
.dark h4,
.dark .uk-h4,
.dark h5,
.dark .uk-h5,
.dark h6,
.dark .uk-h6,
.dark .section-title,
.dark .uk-heading-small,
.dark .uk-heading-medium,
.dark .uk-heading-large,
.dark .uk-heading-xlarge,
.dark .uk-heading-2xlarge {
  color: var(--ap-section-title-color);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.5);
}

.dark p,
.dark span,
.dark li,
.dark label,
.dark .uk-text-default,
.dark .uk-text-small,
.dark .uk-text-large,
.dark .uk-text-lead,
.dark .text-default {
  color: var(--ap-text-color);
}

.dark strong,
.dark b,
.dark .text-strong {
  color: var(--ap-section-title-color);
}

.dark .uk-text-muted,
.dark .text-muted,
.dark .muted,
.dark .uk-text-meta,
.dark .meta,
.dark .uk-text-secondary {
  color: var(--ap-text-muted) !important;
}

.dark a,
.dark .uk-link,
.dark .uk-link-text,
.dark .uk-link-heading {
  color: var(--ap-blue);
  transition: color 0.2s ease;
}

.dark a:hover,
.dark .uk-link:hover,
.dark .uk-link-text:hover,
.dark .uk-link-heading:hover {
  color: #93c5fd;
}

.dark hr,
.dark .uk-hr,
.dark .divider {
  border-color: var(--ap-border-color);
  background-color: var(--ap-border-color);
}

.dark blockquote,
.dark .uk-blockquote {
  border-color: var(--ap-border-color);
  color: var(--ap-text-muted);
  background: rgba(15, 23, 42, 0.5);
}

.dark code,
.dark pre {
  background: rgba(15, 23, 42, 0.72);
  color: var(--ap-section-title-color);
  border-color: var(--ap-border-color);
}

.dark .ap-ad-banner__wrapper {
  background: linear-gradient(150deg, rgba(30, 64, 175, 0.3), rgba(15, 23, 42, 0.85));
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 26px 48px rgba(2, 6, 23, 0.45);
}

.dark .ap-ad-banner__label {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
}

.dark .ap-ad-banner__link {
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.65), rgba(22, 78, 99, 0.85));
  box-shadow: 0 22px 46px rgba(7, 11, 23, 0.6);
}

.dark .ap-ad-banner__link:hover,
.dark .ap-ad-banner__link:focus-visible {
  box-shadow: 0 28px 54px rgba(7, 11, 23, 0.7);
}

.dark .ap-ad-text__wrapper {
  background: linear-gradient(155deg, rgba(8, 145, 178, 0.28), rgba(15, 23, 42, 0.88));
  border-color: rgba(34, 211, 238, 0.18);
  box-shadow: 0 26px 52px rgba(8, 47, 73, 0.45);
}

.dark .ap-ad-text__title {
  color: #e0f2fe;
}

.dark .ap-ad-text__body {
  color: rgba(226, 232, 240, 0.88);
}

.dark .ap-ad-text__label {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
}

.dark .ap-ad-text__cta {
  background: linear-gradient(135deg, #22d3ee, #0284c7);
  box-shadow: 0 20px 38px rgba(2, 132, 199, 0.45);
}

.dark .ap-ad-text__cta:hover,
.dark .ap-ad-text__cta:focus-visible {
  box-shadow: 0 24px 46px rgba(2, 132, 199, 0.55);
}

.dark .header .uk-navbar {
  background-color: #4a4a4a;
  box-shadow: none;
  border: 0;
}

.dark .header .uk-navbar-right a {
  color: #dadada;
}

.dark .header .uk-navbar-nav > li > a:hover {
  background-color: #646464;
  color: #e3e3e3;
}

.dark .search-widget-2 .input-text {
  background-color: transparent;
}

.dark .search-widget-2 span.split {
  background-color: #e3e3e3;
}

.dark .search-widget-2 svg {
  color: #e3e3e3;
}

.dark .post-anime .anime-card {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 47, 73, 0.82) 100%);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--ap-text-color);
  box-shadow: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.dark .post-anime .anime-card:hover {
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: none;
  transform: translateY(-2px);
}

.dark .post-anime .glass-meta-divider {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(148, 163, 184, 0.75) 50%, rgba(15, 23, 42, 0));
  box-shadow: inset 0 0 12px rgba(15, 23, 42, 0.45);
  opacity: 0.9;
}

.dark .post-anime .glass-meta-divider::before {
  background: rgba(125, 211, 252, 0.35);
}

.dark .post-anime .card-image-container {
  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.18), transparent 65%), #020617;
}

.dark .post-anime .countdown-overlay {
  background: linear-gradient(to top, rgba(2, 6, 23, 0.9) 0%, rgba(8, 47, 73, 0.62) 66%, transparent 100%);
  text-shadow: 0 2px 6px rgba(2, 6, 23, 0.65);
}

.dark .post-anime .status-tag {
  --ap-status-badge-bg: rgba(59, 130, 246, 0.92);
  --ap-status-badge-border: rgba(125, 211, 252, 0.45);
  color: #f8fafc;
  border: 1px solid var(--ap-status-badge-border);
  background-color: var(--ap-status-badge-bg);
  background-image: none;
  mix-blend-mode: normal;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 28px -18px rgba(59, 130, 246, 0.55), 0 8px 18px -12px rgba(15, 23, 42, 0.6);
  text-shadow: 0 1px 4px rgba(2, 6, 23, 0.5);
}

.dark .post-anime .status-tag.status-airing {
  --ap-status-badge-bg: rgba(16, 185, 129, 0.92);
  --ap-status-badge-border: rgba(45, 212, 191, 0.5);
}

.dark .post-anime .status-tag.status-finished {
  --ap-status-badge-bg: rgba(59, 130, 246, 0.92);
  --ap-status-badge-border: rgba(125, 211, 252, 0.5);
}

.dark .post-anime .status-tag.status-not-uploaded {
  --ap-status-badge-bg: rgba(239, 68, 68, 0.9);
  --ap-status-badge-border: rgba(248, 113, 113, 0.55);
}

.dark .post-anime .status-tag:hover,
.dark .post-anime .status-tag:focus-visible {
  color: #f8fafc;
  background-color: var(--ap-status-badge-bg);
  border-color: var(--ap-status-badge-border);
  box-shadow: 0 16px 32px -18px rgba(59, 130, 246, 0.65), 0 10px 22px -12px rgba(15, 23, 42, 0.7);
}

.dark .post-anime .summary-overlay {
  background: linear-gradient(to top, rgba(2, 6, 23, 0.94) 0%, rgba(2, 6, 23, 0.8) 48%, rgba(2, 6, 23, 0.45) 100%);
}

.dark .page-anime .box-anime {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 100%);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 48px -28px rgba(7, 14, 32, 0.75);
}

.dark .page-anime .box .uk-pagination > li > a,
.dark .page-anime .box .uk-pagination > li > span {
  color: #cbd5f5;
}

.dark .page-anime .box .uk-pagination > li > a:hover,
.dark .page-anime .box .uk-pagination > li > span:hover {
  color: #fbbf24;
}

.dark .page-anime .box .uk-pagination > .uk-active > span,
.dark .page-anime .box .uk-pagination > .uk-active > a {
  background-color: rgba(251, 191, 36, 0.16);
  color: #facc15;
  border-radius: 8px;
}

.dark .page-anime .box-anime .title {
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

.dark .page-anime .box-anime .title h4 span {
  color: var(--ap-section-title-color);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55);
}

.dark .page-anime .box-anime .body {
  color: var(--ap-text-color);
}

.dark .page-anime .box-anime .body ul {
  gap: 18px;
}

@media (max-width: 540px) {
  .dark .page-anime .box-anime {
    box-shadow: 0 16px 32px -22px rgba(7, 14, 32, 0.7);
    border-color: rgba(148, 163, 184, 0.18);
  }
}

.dark .page-anime .box-anime.box-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dark .page-anime .box-anime.box-card .title {
  border-bottom-color: transparent;
}

.dark .post-anime .summary-text {
  color: #f8fafc;
  text-shadow: 0 1px 4px rgba(2, 6, 23, 0.55);
}

.dark .post-anime .genre-chip {
  color: #d1d5db;
  border-color: rgba(148, 163, 184, 0.28);
}

.dark .post-anime .rating {
  color: var(--ap-text-color);
}

.dark .post-anime .tag {
  background-color: var(--ap-tag-quality-bg);
  color: var(--ap-tag-quality-text);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 20px -18px rgba(15, 23, 42, 0.6);
}

.dark .post-anime .tag.tag-hardsub-green {
  background-color: var(--ap-tag-hardsub-green-bg);
  color: var(--ap-tag-hardsub-green-text);
  border-color: rgba(96, 165, 250, 0.45);
}

.dark .post-anime .tag.tag-not-uploaded {
  background-color: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.3);
}

.dark .post-anime .meta-tags {
  border-bottom-color: rgba(148, 163, 184, 0.08);
}

.dark .post-anime .card-stats {
  border-top-color: rgba(148, 163, 184, 0.08);
  color: var(--ap-text-muted);
}

.dark .post-anime .stat-views {
  color: var(--ap-text-color);
}

.dark .post-anime .stat-views .icon {
  opacity: 1;
  color: #7dd3fc;
  fill: currentColor;
}

.dark .post-anime .stat-year {
  color: #7aa0c6;
}

.dark .post-anime .stat-episode {
  color: var(--ap-text-muted);
}

.dark .post-anime .stat-episode .episode-label {
  color: #7aa0c6;
}

.dark .post-anime .stat-episode .episode-separator,
.dark .post-anime .stat-episode .episode-total {
  color: var(--ap-text-muted);
}

.dark .post-anime .anime-title {
  color: #f8fafc;
}

.dark .page-year-index {
  background-color: transparent;
}

.dark .page-year-index .year-index__layout {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) 0;
}

.dark .page-year-index .genres {
  padding: clamp(28px, 5vw, 40px);
  color: #e2e8f0;
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.55);
}

.dark .page-year-index .box-search-studios {
  background: transparent;
  border: none;
  box-shadow: none;
}

.dark .page-year-index .box-search-studios:focus-within {
  border: none;
  background: transparent;
  box-shadow: none;
}

.dark .page-year-index .search-input {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.25);
  color: inherit;
}

.dark .page-year-index .search-input::-moz-placeholder {
  color: rgba(148, 163, 184, 0.7);
}

.dark .page-year-index .search-input::placeholder {
  color: rgba(148, 163, 184, 0.7);
}

.dark .page-year-index .search-input:focus {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
  background-color: rgba(2, 6, 23, 0.95);
}

.dark .page-year-index .decade-group {
  border-color: rgba(148, 163, 184, 0.25);
  background-color: rgba(15, 23, 42, 0.7);
}

.dark .page-year-index .decade-group[open] > .year-content-wrapper {
  padding: 20px 24px;
}

.dark .page-year-index .decade-header {
  background-color: rgba(30, 41, 59, 0.75);
  color: #f8fafc;
  padding: 18px 24px;
  font-size: 18px;
}

.dark .page-year-index .decade-header:hover {
  background-color: rgba(55, 65, 81, 0.7);
}

.dark .page-year-index .decade-header .fa-chevron-down {
  color: rgba(226, 232, 240, 0.7);
}

@media (max-width: 640px) {
  .dark .page-year-index .decade-header {
    padding: 15px 18px;
    font-size: 16px;
  }
}

.dark .page-year-index .year-content-wrapper {
  background-color: rgba(15, 23, 42, 0.7);
  padding: 0 24px;
}

.dark .page-year-index .year-tag {
  background-color: rgba(30, 41, 59, 0.72);
  color: rgba(226, 232, 240, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.dark .page-year-index .decade-group[open] > .decade-header .fa-chevron-down {
  color: #fbbf24;
}

.dark .page-year-index .year-tag:hover,
.dark .page-year-index .year-tag:focus,
.dark .page-year-index .year-tag.active {
  background-color: var(--year-primary-color);
  color: #0f172a;
  border-color: transparent;
  box-shadow: 0 12px 28px -18px rgba(251, 191, 36, 0.6);
}

.dark .page-schedule .schedule-hub {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 28px 70px -42px rgba(2, 6, 23, 0.75);
}

.dark .page-schedule .schedule-hub__title {
  color: #e0f2fe;
}

.dark .page-schedule .schedule-hub__announcement {
  color: #cbd5f5;
}

.dark .page-schedule .schedule-hub__announcement::after {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0));
}

.dark .page-schedule .schedule-hub__toggle {
  color: #fbbf24;
}

.dark .page-schedule .schedule-hub__divider {
  background-color: rgba(148, 163, 184, 0.16);
}

.dark .page-schedule .schedule-hub__filters {
  background-color: rgba(15, 23, 42, 0.8);
  border-top-color: rgba(148, 163, 184, 0.16);
}

.dark .page-schedule .schedule-hub__filters--solo {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 28px 70px -42px rgba(2, 6, 23, 0.75);
}

.dark .page-schedule .schedule-hub__filter-btn {
  background-color: rgba(30, 41, 59, 0.85);
  color: #cbd5f5;
}

.dark .page-schedule .schedule-hub__filter-btn:hover,
.dark .page-schedule .schedule-hub__filter-btn:focus {
  background-color: rgba(59, 73, 96, 0.85);
  color: #f8fafc;
}

.dark .page-schedule .uk-active > .schedule-hub__filter-btn {
  background-image: linear-gradient(45deg, #fbbf24, #f97316);
  color: #111827;
  box-shadow: 0 12px 30px -18px rgba(251, 191, 36, 0.55);
}

.dark .page-schedule .box-anime {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dark .page-schedule .box-anime .title h4 span {
  background: transparent;
  color: #fbbf24;
  box-shadow: none;
}

.dark .page-schedule .box-anime .body {
  color: #e2e8f0;
}

.dark .box-search .body {
  background-color: #2a2a2a;
}

.dark .box-search .body .select-tab-head {
  color: #dadada;
}

.dark .page-season {
  background-color: transparent;
}

.dark .page-season .season-filter {
  color: #e2e8f0;
}

.dark .page-season .season-filter__title {
  color: #f8fafc;
}

.dark .page-season .season-filter__bar {
  background-color: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 22px 48px -28px rgba(2, 6, 23, 0.7);
}

.dark .page-season .season-filter__trigger {
  background-color: rgba(30, 41, 59, 0.78);
  color: #e2e8f0;
}

.dark .page-season .season-filter__trigger-icon {
  color: rgba(203, 213, 225, 0.8);
}

.dark .page-season .season-filter__trigger:hover {
  background-color: rgba(51, 65, 85, 0.85);
}

.dark .page-season .season-filter__trigger.is-open {
  box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.28);
}

.dark .page-season .season-filter__trigger.is-open .dark .page-season .season-filter__trigger-icon {
  color: #fbbf24;
}

.dark .page-season .season-filter__trigger.is-active {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
}

.dark .page-season .season-filter__trigger.is-active .dark .page-season .season-filter__trigger-icon {
  color: #111827;
}

.dark .page-season .season-filter__overlay {
  background-color: rgba(2, 6, 23, 0.7);
}

.dark .page-season .season-filter__modal {
  background-color: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 44px 88px -44px rgba(7, 14, 32, 0.9);
}

.dark .page-season .season-filter__modal-header,
.dark .page-season .season-filter__modal-footer {
  border-color: rgba(148, 163, 184, 0.24);
}

.dark .page-season .season-filter__modal-title {
  color: #f8fafc;
}

.dark .page-season .season-filter__modal-content,
.dark .page-season .season-filter__mobile-section h4 {
  color: #f8fafc;
}

.dark .page-season .season-filter__modal-close {
  color: rgba(148, 163, 184, 0.6);
}

.dark .page-season .season-filter__modal-close:hover {
  color: #f8fafc;
}

.dark .page-season .season-filter__apply {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
}

.dark .page-season .season-filter__apply:hover {
  background-image: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.dark .page-season .season-filter__year {
  background-color: rgba(17, 24, 39, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.dark .page-season .season-filter__year-title {
  background-color: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
}

.dark .page-season .season-filter__season {
  background-color: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

.dark .page-season .season-filter__season:hover {
  border-color: rgba(251, 191, 36, 0.6);
  color: #fbbf24;
}

.dark .page-season .season-filter__season.is-selected {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: transparent;
  color: #111827;
  font-weight: 800;
  text-shadow: none;
}

.dark .page-season .season-filter__option {
  color: rgba(226, 232, 240, 0.85);
}

.dark .page-season .season-filter__option-box {
  background-color: rgba(17, 24, 39, 0.92);
  border-color: rgba(148, 163, 184, 0.35);
}

.dark .page-season .season-filter__option-label {
  color: #e2e8f0;
}

.dark .page-season .season-filter .season-filter__option input:checked + .season-filter__option-box {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.22);
}

.dark .page-season .season-filter .season-filter__option input:checked + .season-filter__option-box::after {
  content: "";
  width: 6px;
  height: 12px;
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  transform: rotate(45deg);
}

.dark .page-season .season-filter .season-filter__option input:checked ~ .season-filter__option-label {
  color: #fbbf24;
  font-weight: 800;
}

.dark .page-season .season-filter__pill span {
  background-color: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}

.dark .page-season .season-filter .season-filter__pill input:checked + span {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: transparent;
  color: #111827;
}

.dark .page-season .season-filter__sort-card {
  background-color: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}

.dark .page-season .season-filter__sort-label {
  color: #e2e8f0;
}

.dark .page-season .season-filter__sort-mark {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.35);
}

.dark .page-season .season-filter__sort-mark::after {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.dark .page-season .season-filter__sort-option:hover .dark .page-season .season-filter__sort-card,
.dark .page-season .season-filter__sort-option input:focus-visible + .dark .page-season .season-filter__sort-card {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
}

.dark .page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card {
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.24), 0 10px 24px rgba(2, 6, 23, 0.35);
}

.dark .page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-label {
  color: #111827;
  font-weight: 800;
}

.dark .page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-mark {
  background-color: #111827;
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.18);
}

.dark .page-season .season-filter .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-mark::after {
  background-image: none;
  background-color: #ffffff;
  transform: scale(1);
}

.dark .page-season .season-filter__reset {
  color: rgba(148, 163, 184, 0.75);
}

.dark .page-season .season-filter__reset:hover {
  color: #f87171;
  background-color: rgba(248, 113, 113, 0.12);
}

.dark .page-season .season-filter__later {
  background-color: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
}

.dark .page-season .season-filter__later:hover {
  background-color: rgba(59, 130, 246, 0.26);
  color: #e0f2fe;
}

.dark .custom-footer {
  background-color: #1c1c1c;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dark .custom-footer .footer-main-grid {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .custom-footer .footer-intro h3,
.dark .custom-footer .footer-links-section h3 {
  color: #f5f5f5;
}

.dark .custom-footer .footer-intro__content,
.dark .custom-footer .footer-links-section a {
  color: #cbcbcb;
}

.dark .custom-footer .footer-intro__content a {
  color: #f6d27a;
}

.dark .custom-footer .footer-intro__content a:hover {
  color: #ffd98a;
}

.dark .custom-footer .footer-links-section a:hover,
.dark .custom-footer .footer-links-section a:focus {
  color: #f6d27a;
}

.dark .custom-footer .action-button {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.08);
  background-color: rgba(34, 34, 34, 0.88);
}

.dark .custom-footer .action-button i {
  color: #f6d27a;
}

.dark .custom-footer .action-button:hover,
.dark .custom-footer .action-button:focus {
  color: #f6d27a;
  border-color: #f6a504;
  background-color: rgba(246, 165, 4, 0.12);
}

.dark .custom-footer .footer-social a {
  color: #a7a7a7;
}

.dark .custom-footer .footer-social a:hover,
.dark .custom-footer .footer-social a:focus {
  color: #f6d27a;
}

.dark .custom-footer .footer-social a:focus-visible {
  outline-color: rgba(246, 165, 4, 0.55);
}

.dark .custom-footer .footer-copyright {
  color: #8f8f8f;
}

.dark .custom-footer .footer-copyright p {
  color: inherit;
}

.dark .anime-single {
  background-color: transparent;
  color: #e3e3e3;
}

.dark .uk-alert-primary {
  background-color: #646464;
  color: #e1e1e1;
}

.dark .uk-alert-warning {
  color: #f6ad55;
  background-color: rgba(254, 215, 170, 0.14);
  border: 1px solid rgba(246, 173, 85, 0.45);
  box-shadow: 0 14px 30px rgba(246, 173, 85, 0.12);
}

.dark .anime-single h1,
.dark .anime-single h2 {
  color: #e3e3e3;
}

.dark .anime-single .box-1 .raing .star-as {
  color: #e3e3e3;
}

.dark .anime-single .box-1 .raing .star-val {
  color: #d4d4d4;
}

.dark .anime-single .box-1 .raing.myanimelist .l1 {
  color: #bed2ff !important;
}

.dark .anime-single .box-1 .raing .users .value {
  color: #e3e3e3;
}

.dark .anime-single .box-1 .raing.aniplus .l1 {
  color: #ffb82d !important;
}

.dark .anime-single .box-1 .anime-single-box-data .body {
  border-color: rgba(148, 163, 184, 0.38);
  background-color: rgba(17, 24, 39, 0.92);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
}

.dark .anime-single .box-1 .anime-single-box-data .section-title {
  color: #cbd5f5;
}

.dark .anime-single .box-1 .anime-single-box-data .status-section .section-title {
  color: #fcd34d;
}

.dark .anime-single .box-1 .anime-single-box-data .box-select .select {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.45);
  color: #f3f4f6;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.6);
}

.dark .anime-single .box-1 .anime-single-box-data .status-section .box-select .select {
  background-color: rgba(252, 211, 77, 0.18);
  border-color: rgba(252, 211, 77, 0.4);
  color: #fbbf24;
}

.dark .anime-single .box-1 .anime-single-box-data .progress-label {
  color: #cbd5f5;
}

.dark .anime-single .box-1 .anime-single-box-data .progress-input-wrapper {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.55);
}

.dark .anime-single .box-1 .anime-single-box-data .progress-input-wrapper input {
  color: #f3f4f6;
}

.dark .anime-single .box-1 .anime-single-box-data .progress-total {
  color: #94a3b8;
}

.dark .anime-single .box-1 .anime-single-box-1:hover [leoicon=heart] .b,
.dark .anime-single .box-1 .anime-single-box-1[aria-expanded=true] .b {
  fill: #ccc;
}

.dark .anime-single .box-1 {
  border-bottom-color: #2c2c2c;
}

.dark .anime-single .box-1 .anime-single-box-data .list-button {
  color: #f3f4f6;
}

.dark .anime-single .box-1 .anime-single-box-data .list-button.add-to-list {
  background-color: rgba(252, 211, 77, 0.22);
  color: #fcd34d;
  box-shadow: 0 14px 32px rgba(250, 204, 21, 0.25);
}

.dark .anime-single .box-1 .anime-single-box-data .list-button.add-to-list:hover {
  background-color: rgba(252, 211, 77, 0.32);
}

.dark .anime-single .box-1 .anime-single-box-data .list-button.remove-list {
  background-color: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
  box-shadow: 0 14px 32px rgba(248, 113, 113, 0.3);
}

.dark .anime-single .box-1 .anime-single-box-data .list-button.remove-list:hover {
  background-color: rgba(248, 113, 113, 0.34);
}

.dark .box-select .dropdownBody {
  background-color: #2c2c2c;
}

.dark .box-select .dropdownBody .item.active {
  background-color: #4a4a4a;
}

.dark .box-select .dropdownBody .item {
  border: 0;
}

.dark .box-select .dropdownBody .item:hover {
  background-color: #4a4a4a;
}

.dark .anime-single .box-3 .box {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark .anime-single .box-3 .box .value {
  color: #e3e3e3;
}

.dark .box-tags {
  background-color: #4a4a4a;
}

.dark .box-tags h4 {
  color: #e3e3e3;
}

.dark .box-tags a {
  background-color: #7c7c7c;
  color: #e8e8e8 !important;
}

.dark .box-more-dic {
  background-color: #4a4a4a;
  color: #e3e3e3;
}

.dark .box-more-dic * {
  color: #e3e3e3;
}

.dark .anime-single .box-info .lists .item .label {
  color: #c8c8c8;
}

.dark .anime-single .box-info a {
  color: #ffd071;
}

.dark .anime-single .box-info h4 {
  color: #cfcfcf;
}

.dark .anime-single .box-info a:hover {
  color: #fde9cd;
}

.dark .anime-single .box-info .lists .item .value {
  color: #ededed;
}

.dark .anime-single .box-tab .box-tab-top .uk-tab a {
  color: #e3e3e3;
}

@media (max-width: 420px) {
  .dark .anime-single .box-tab .box-tab-top .uk-tab .uk-active a {
    color: #000;
  }
}

.dark .header-top .logo img {
  border-radius: 5px;
}

.dark .anime-single .box-1 .highest-quality .value {
  color: #4a4a4a;
}

.dark .anime-single .box-1 .highest-quality .label {
  color: #4a4a4a;
}

.dark .dark-mode-button .moon {
  display: none;
}

.dark .dark-mode-button .sun {
  display: block;
}

.dark-mode-button .sun {
  display: none;
  padding: 1px 0;
}

.dark-mode-button {
  padding: 8px 9px;
  margin-left: 10px;
  cursor: pointer;
  /* border: 1px solid #7c7c7c; */
  border-radius: 5px;
  transition: 0.3s all;
  margin-top: 1px;
  color: #fff;
  background-color: #7e7e7e;
}

.dark .dark-mode-button {
  color: #fff;
  border-color: #9a9a9a;
}

.dark-mode-button:hover {
  opacity: 0.7;
  transition: 0.3s all;
}

.dark .search-widget-2 .search-refresh {
  background-color: #646464;
}

.dark .search-widget-2 .input-text .input::-moz-placeholder {
  color: #dadada;
  opacity: 1;
  /* Firefox */
}

.dark .search-widget-2 .input-text .input::placeholder {
  color: #dadada;
  opacity: 1;
  /* Firefox */
}

.dark .search-widget-2 .input-text .input:-ms-input-placeholder {
  color: #dadada;
}

.dark .search-widget-2 .input-text .input::-ms-input-placeholder {
  color: #dadada;
}

.dark .search-widget-2 .input-text .input {
  color: #dadada;
}

.dark .search-widget-2 .advanced-search-toggle {
  color: #dadada;
}

.dark .search-widget-2 .advanced-search-toggle:hover,
.dark .search-widget-2 .advanced-search-toggle:focus {
  color: #fbbf24;
}

.dark .search-widget-2 .search-suggestion {
  background-color: #4a4a4a;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid;
}

.dark .search-widget-2 .search-suggestion .global-search__advanced {
  background-color: rgba(30, 41, 59, 0.82);
  border-bottom-color: rgba(148, 163, 184, 0.28);
}

.dark .search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-inner {
  border-color: rgba(148, 163, 184, 0.25);
  background-color: rgba(15, 23, 42, 0.92);
}

.dark .search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-placeholder {
  color: #cbd5f5;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.55));
}

.dark .search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close {
  background: rgba(15, 23, 42, 0.4);
  color: #e2e8f0;
}

.dark .search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close:hover,
.dark .search-widget-2 .search-suggestion .global-search__advanced .global-search__advanced-close:focus {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.dark a.item-search {
  color: #dadada;
  border-color: #2c2c2c;
}

.dark .item-search:hover {
  background-color: #2c2c2c;
}

.dark .items-search-body .more {
  background-color: #2b2b2b;
}

.dark .box-search .uk-input {
  background-color: #2c2c2c;
  color: #dadada;
  border-color: #4a4a4a;
}

.dark .page-schedule .filters {
  background-color: #4a4a4a;
}

.dark .uk-subnav-pill > * > a:hover,
.dark .uk-subnav-pill > * > a:focus {
  background-color: #2c2c2c;
  color: #dadada;
  border-radius: 5px;
}

.dark .page-schedule .filters .uk-active a {
  background-color: #2c2c2c;
  color: #dadada;
}

.dark .page-schedule .filters a {
  color: #dadada;
}

.dark .page-schedule .scheduleItem {
  background-color: #4a4a4a;
  color: #ededed;
}

.dark .studio-directory__card {
  background-color: #111827;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.dark .box-search-studios {
  background: rgba(243, 163, 3, 0.12);
  border-color: rgba(243, 163, 3, 0.32);
}

.dark .box-search-studios__icon {
  background: rgba(243, 163, 3, 0.2);
}

.dark .box-search-studios input {
  background: transparent;
  color: #f9fafb;
}

.dark .box-search-studios input::-moz-placeholder {
  color: rgba(249, 250, 251, 0.5);
}

.dark .box-search-studios input::placeholder {
  color: rgba(249, 250, 251, 0.5);
}

.dark .studio-letter__header {
  border-bottom-color: rgba(249, 250, 251, 0.08);
}

.dark .studio-letter__title {
  color: #f9fafb;
}

.dark .studio-letter__item a {
  background: rgba(249, 250, 251, 0.08);
  color: #f3f4f6;
}

.dark .studio-letter__item a:hover,
.dark .studio-letter__item a:focus {
  background: #f3a303;
  color: #111827;
  box-shadow: 0 16px 30px rgba(243, 163, 3, 0.35);
}

.dark .box-comment {
  background-color: transparent;
}

.dark .commentBody .bodyComment {
  background-color: #3c3c3c;
}

.dark .commentBody .bodyComment .data-bottom .comments.form {
  background-color: #2c2c2c;
}

.dark .comments.form {
  background-color: #383838;
  border-color: #383838;
}

.dark .comments.form textarea {
  color: #dadada;
  background-color: unset;
}

.dark .comments.form textarea::-moz-placeholder {
  color: #dadada;
  opacity: 1;
}

.dark .comments.form textarea::placeholder {
  color: #dadada;
  opacity: 1;
}

.dark .comments.form textarea:-ms-input-placeholder {
  color: #dadada;
}

.dark .comments.form textarea::-ms-input-placeholder {
  color: #dadada;
}

.dark .comments.form .spoiler {
  background-color: #282828;
  color: #dadada;
}

.dark .uk-alert-success {
  background-color: #1e1e1e;
}

.dark .commentBody .bodyComment .reply:hover {
  color: #a2a2a2;
}

.dark .commentBody .bodyComment .reply {
  color: #dadada;
}

.dark .like-sub {
  color: #dadada;
}

.dark .commentBody span.show-more-comment {
  background-color: #2c2c2c;
  color: #dadada;
  border: 0;
}

.dark .commentBody span.show-more-comment:hover {
  opacity: 0.6;
}

.dark .commentBody .bodyComment .dic {
  color: #dadada;
}

.dark .commentBody .bodyComment .data-top .name {
  color: #dadada;
}

.dark .box-youtube {
  background-color: #2c2c2c;
  color: #dadada;
  border: 0;
}

.dark .anime-single .box-title-bg {
  filter: contrast(0) brightness(0.4);
}

.dark .anime-single .box-tab > .uk-tab .title {
  color: #ededed;
}

.dark .profile .resourceBookmark input.box-search-input {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
  color: #dfdfdf;
}

.dark .profile .resourceBookmark input.box-search-input::-moz-placeholder {
  color: #dfdfdf;
}

.dark .profile .resourceBookmark input.box-search-input::placeholder {
  color: #dfdfdf;
}

.dark .box-card .box-search-cart [type=search] {
  background-color: unset;
  color: #fff;
}

.dark .box-card .box-search-cart [type=search]::-moz-placeholder {
  color: #fff;
}

.dark .box-card .box-search-cart [type=search]::placeholder {
  color: #fff;
}

.dark .leo-app-user {
  background-color: #4a4a4a;
}

.dark .leo-app-user .sidebar-content {
  background-color: #565656;
  border-top-color: #2c2c2c;
  box-shadow: none;
}

.dark ul.menu-list > li > a .content {
  color: #e3e3e3;
}

.dark ul.menu-list .menu-item-link a > span.leoIcon {
  color: #e3e3e3;
}

.dark ul.menu-list > li > a svg {
  fill: #e3e3e3;
}

.dark .leo-app-user ul.menu-list > li.active,
.dark .leo-app-user ul.menu-list > li:hover {
  background-color: #2c2c2c;
}

.dark .leo-sidebar-bottom {
  background-color: unset !important;
}

.dark .leo-sidebar-bottom .leo-sidebar-logout {
  color: #e3e3e3;
}

.dark .leo-app-shell {
  background-color: #171717;
}

.dark .sidebar-content {
  background-color: #1f1f1f;
  box-shadow: none;
}

.dark .leo-sidebar__brand-link {
  color: #f3f3f3;
}

.dark .leo-sidebar__menu-title {
  color: #a1a1aa;
}

.dark .leo-sidebar-profile {
  background-color: #262626;
  border-color: #333333;
}

.dark .leo-sidebar-profile__avatar img {
  border-color: #1f1f1f;
}

.dark .leo-sidebar-profile__status {
  border-color: #1f1f1f;
}

.dark .leo-sidebar-profile__name {
  color: #f3f3f3;
}

.dark .leo-sidebar-profile__email {
  color: #a1a1aa;
}

.dark .leo-app-user .buy-sharing {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark .leo-app-user .last-payment {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark .resourceDetail > h1,
.dark .resourceIndex > h1 {
  color: #e3e3e3;
}

.dark .resourceIndexBody {
  background-color: #2c2c2c;
}

.dark .leo-app-user .last-payment thead th {
  background-color: #565656;
  color: #e3e3e3;
  border-color: #2c2c2c;
}

.dark .leo-app-user .last-payment tr:nth-child(odd) {
  background-color: #565656;
}

.dark .leo-app-user .last-payment th,
.dark .leo-app-user .last-payment td {
  border-color: #2c2c2c;
}

.dark .resourceIndexBody tr:hover td {
  background-color: #404040;
}

.dark .leo-app-user .user-top {
  background-color: #242424;
  border-radius: 32px;
  box-shadow: none;
}

.dark .leo-app-user .user-top .user-top__name {
  color: #e3e3e3;
}

.dark .leo-app-user .user-top .user-top__email {
  color: #e3e3e3;
}

.dark .leo-app-user .user-top .user-top__profile-card {
  background-color: #2b2b2b;
  border-color: #333333;
}

.dark .leo-app-user .user-top .user-top__profile-card:hover {
  border-color: #444444;
}

.dark .leo-app-user .user-top .user-top__card {
  background-color: #262626;
  border-color: #333333;
  box-shadow: none;
}

.dark .leo-app-user .user-top .user-top__card-bg {
  background: rgba(246, 165, 4, 0.15);
}

.dark .leo-app-user .user-top .user-top__card--manga .user-top__card-bg {
  background: rgba(37, 99, 235, 0.2);
}

.dark .leo-app-user .user-top .user-top__card-label,
.dark .leo-app-user .user-top .user-top__card-sub,
.dark .leo-app-user .user-top .user-top__card-value .unit {
  color: #c4c4c4;
}

.dark .leo-app-user .user-top .user-top__card-value {
  color: #f3f3f3;
}

.dark .leo-app-user .user-top .user-top__card-icon {
  background: rgba(246, 165, 4, 0.2);
  color: #f6a504;
}

.dark .leo-app-user .user-top .user-top__card--manga .user-top__card-icon {
  background: rgba(37, 99, 235, 0.25);
  color: #9bb9ff;
}

.dark .leo-app-user .user-top .user-top__progress {
  background-color: #3a3a3a;
}

.dark .leo-app-user .user-top .user-top__progress-bar {
  box-shadow: none;
}

.dark .leo-app-user .user-top .user-top__card-status {
  background: rgba(34, 197, 94, 0.15);
  color: #6ee7b7;
}

.dark .leo-app-user .user-top .user-top__card-status.is-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.dark .leo-app-user .user-top .user-top__status {
  background: rgba(34, 197, 94, 0.15);
  color: #6ee7b7;
}

.dark .leo-app-user .user-top .user-top__status.is-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.dark .leo-app-user .user-top .user-top__profile-link {
  color: #f3f3f3;
}

.dark .leo-app-user .user-top .user-top__id {
  color: #e3e3e3;
}

.dark .leo-app-user .user-top .user-top__id .value {
  color: #ffffff;
}

.dark .leo-app-user .user-top .box .label {
  color: #e3e3e3;
}

.dark .leo-app-user .user-top .box .value {
  color: #e3e3e3;
}

.dark .leo-app-user .user-top .box {
  background-color: #2b2b2b;
  border-color: #333333;
}

.dark .resourceFormBody .panel > .body,
.dark .resourceFormBodyDetail .panel > .body {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark .panel > .title,
.dark .resourceTitle {
  color: #e3e3e3;
}

.dark .rowField {
  border-color: #787878;
}

.dark .fieldFile label {
  background-color: #4a4a4a;
  border: 0;
  color: #e3e3e3;
}

.dark .fieldFile label:hover {
  opacity: 0.8;
}

.dark .resourceFormBody input {
  background-color: #4a4a4a;
  color: #e3e3e3;
  border: 0;
}

.dark .bg-info {
  background-color: #2c2c2c !important;
  color: #e3e3e3 !important;
}

.dark .resourceBookmark .status {
  background-color: #2c2c2c;
  border-radius: 5px;
}

.dark .resourceBookmark .status .item {
  background-color: #2c2c2c !important;
  border: 0;
  color: #cacaca;
}

.dark .resourceBookmark .status .item.active {
  color: #ffc107;
}

.dark .leo-app-user .resourceTable th {
  background-color: #2c2c2c;
}

.dark .resourceBookmark td {
  color: #e3e3e3;
}

.dark .resourceBookmark .es {
  background-color: #565656;
  border: 0;
  color: #e3e3e3;
}

.dark .bookmark-status .btn-status {
  background-color: #565656;
  border: 0;
}

.dark .resourceActionBody {
  background-color: #565656;
  border: 0;
}

.dark .resourceActionBody > * {
  color: #e3e3e3;
}

.dark .modal > div {
  background-color: #2c2c2c;
}

.dark .ResourceModalBottom {
  background-color: #2c2c2c;
}

.dark .modal {
  background-color: rgba(0, 0, 0, 0.2901960784);
}

.dark .modal h2 {
  color: #e3e3e3;
}

.dark .ResourceModalBtnCancel {
  color: #e3e3e3;
}

.dark .resourceTable td {
  color: #e3e3e3;
}

.dark .uk-alert-danger {
  background-color: #2c2c2c;
}

.dark .ticket-item a:hover {
  background-color: #242424;
}

.dark .ticket-item a {
  color: #e3e3e3;
}

.dark .ticket-view .box-view {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark .uk-button-default {
  color: #e3e3e3;
}

.dark .resourceFormBody select,
.dark .resourceFormBody textarea {
  background-color: #4a4a4a;
  border: 0;
  color: #e3e3e3;
}

.dark .ticket-item {
  background-color: #565656;
  color: #e3e3e3;
}

.dark .field-ComputedField {
  background-color: #2c2c2c;
  color: #e3e3e3;
}

.dark ul.pagination {
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.dark ul.pagination .page-link {
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 800;
}

.dark ul.pagination li:not(.active):not(.disabled) .page-link:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.dark ul.pagination li.active .page-link {
  background-image: linear-gradient(135deg, #fbbf24, #f97316);
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(251, 191, 36, 0.25);
}

.dark .dashboard-overview__badge {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.dark .dashboard-overview__badge.is-inactive {
  background-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.dark .panel-page-header h1 {
  color: #f8fafc;
}

.dark .panel-page-header p {
  color: #94a3b8;
}

.dark .panel-action-btn {
  box-shadow: 0 12px 30px rgba(251, 191, 36, 0.2);
}

.dark .panel-secondary-btn {
  border-color: #334155;
  background-color: #1f2937;
  color: #94a3b8;
}

.dark .panel-secondary-btn:hover {
  border-color: #f6a504;
  color: #f6a504;
}

.dark .user-dashboard-tabs .tabs {
  background-color: #111827;
}

.dark .user-dashboard-tabs-modern {
  background-color: #0f172a;
  border-color: #1f2937;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.4);
}

.dark .user-dashboard-tabs-modern__segmented {
  background-color: #111827;
}

.dark .user-dashboard-tabs-modern__tab {
  color: #9ca3af;
}

.dark .user-dashboard-tabs-modern__tab.is-active {
  background-color: #1f2937;
  color: #f6a504;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.4);
}

.dark .user-dashboard-tabs-modern__table thead th {
  color: #9ca3af;
  border-bottom-color: #1f2937;
}

.dark .user-dashboard-tabs-modern__table tbody tr:hover {
  background-color: #111827;
}

.dark .user-dashboard-tabs-modern__table td,
.dark .user-dashboard-tabs-modern__date,
.dark .user-dashboard-tabs-modern__login-os {
  color: #e5e7eb;
}

.dark .user-dashboard-tabs-modern__amount {
  color: #f9fafb;
}

.dark .user-dashboard-tabs-modern__payment-card,
.dark .user-dashboard-tabs-modern__login-card {
  background-color: #111827;
  border-color: #1f2937;
}

.dark .user-dashboard-tabs-modern__login-icon {
  background-color: #0b1220;
  border-color: #1f2937;
  color: #cbd5f5;
}

.dark .user-dashboard-tabs-modern__login-date,
.dark .user-dashboard-tabs-modern__login-browser,
.dark .user-dashboard-tabs-modern__empty {
  color: #94a3b8;
}

.dark .panel-section-title h3 {
  color: #f8fafc;
}

.dark .leo-modal__dialog {
  background-color: #1f2937;
  color: #e2e8f0;
}

.dark .leo-modal__close {
  background-color: rgba(148, 163, 184, 0.12);
}

.dark .leo-modal__header h3 {
  color: #f8fafc;
}

.dark .leo-modal__header p {
  color: #94a3b8;
}

.dark .leo-modal__toggle {
  background-color: #0f172a;
}

.dark .leo-modal__toggle-btn {
  color: #94a3b8;
}

.dark .leo-modal__toggle-btn.is-active {
  background-color: #1f2937;
  color: #f8fafc;
}

.dark .leo-modal__input,
.dark .leo-modal__text-input,
.dark .leo-modal__textarea {
  background-color: #0f172a;
  border-color: transparent;
}

.dark .leo-modal__input input,
.dark .leo-modal__text-input,
.dark .leo-modal__textarea textarea {
  color: #f8fafc;
}

.dark .leo-modal__counter {
  background-color: #0f172a;
  border-color: #1e293b;
}

.dark .leo-modal__counter-controls {
  background-color: #111827;
  border-color: #1e293b;
}

.dark .leo-modal__upload {
  border-color: #1e293b;
  color: #94a3b8;
}

.dark .leo-modal__ghost {
  background-color: #111827;
  color: #cbd5f5;
}

.dark .leo-modal__footer {
  border-top-color: #1e293b;
}

.dark .uk-notification-message {
  background-color: #1f2937;
  color: #f8fafc;
}

.dark .uk-notification-message-success {
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.dark .uk-notification-message-warning,
.dark .uk-notification-message-danger {
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #f87171;
}

.dark ul.pagination li.disabled .page-link {
  color: #6b7280;
}

.dark .modern-pagination__bar {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.85));
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
}

.dark .modern-pagination__arrow-btn {
  background: rgba(30, 41, 59, 0.85);
  color: #f1f5f9;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

.dark .modern-pagination__arrow-btn:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #fff7ed;
}

.dark .modern-pagination__arrow-btn--disabled {
  color: #475569;
  background: transparent;
}

.dark .page-link--ghost {
  color: #94a3b8;
}

.dark .page-link--jump {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 12px 28px rgba(0, 0, 0, 0.4);
  color: #fcd34d;
}

.dark .page-jump-input {
  color: #fef3c7;
}

.dark .page-jump-hint {
  color: #fbbf24;
}

.dark #oframeplayer {
  background-color: #4c4c4c !important;
}

.dark .uk-modal-dialog {
  color: #e3e3e3;
  background-color: #404040;
}

.dark .model-box-sharing {
  background-color: #262626;
  color: #e5e7eb;
}

.dark .sharing-modal__close {
  background: #2c2c2c;
}

.dark .sharing-modal__header h3 {
  color: #f3f4f6;
}

.dark .sharing-modal__header p {
  color: #9ca3af;
}

.dark .sharing-toggle {
  background: #2c2c2c;
}

.dark .sharing-toggle__item {
  color: #9ca3af;
}

.dark .sharing-toggle__item.active {
  background: #1f1f1f;
  color: #f9fafb;
}

.dark .sharing-plan {
  background: #1f1f1f;
  border-color: #2c2c2c;
}

.dark .sharing-plan.active {
  border-color: #ba7c00;
  background: rgba(186, 124, 0, 0.15);
}

.dark .sharing-plan__title,
.dark .sharing-plan__price-main {
  color: #f9fafb;
}

.dark .sharing-plan__days,
.dark .sharing-plan__price-old {
  color: #9ca3af;
}

.dark .sharing-discount input,
.dark .sharing-message {
  background: #2c2c2c;
  border-color: #3a3a3a;
  color: #e5e7eb;
}

.dark .sharing-discount__btn {
  background: #0f172a;
}

.dark .sharing-summary {
  background: #2c2c2c;
  border-color: #3a3a3a;
}

.dark .sharing-summary__row {
  color: #cbd5f5;
}

.dark .sharing-summary__row--total {
  color: #f9fafb;
}

.dark .sharing-terms {
  color: #cbd5f5;
}

.dark .sharing-terms a {
  color: #f9fafb;
}

.dark .sharing-modal__footer {
  border-top-color: #2c2c2c;
  background: #262626;
}

.dark .sharing-total span:last-child {
  color: #f9fafb;
}

.dark .sharing-pay {
  background: #ba7c00;
  box-shadow: 0 14px 24px rgba(186, 124, 0, 0.25);
}

.dark .header .uk-navbar-right .menu {
  background-color: #2c2c2c;
  color: #dadada;
}

.dark .uk-offcanvas-bar {
  background-color: #2c2c2c;
  color: #dadada;
}

.dark .uk-offcanvas-bar .social-links a {
  color: #dad2cf;
}

.dark .uk-offcanvas-close svg {
  color: #dadada;
}

.dark .box-card > .title .more {
  background-color: transparent;
  color: var(--ap-section-primary);
  border-color: var(--ap-section-primary);
}

.dark .section-header__title,
.dark .box-card .section-header__title,
.dark .box-card > .title h1,
.dark .box-card > .title h2,
.dark .box-card > .title h3,
.dark .box-card > .title h4 {
  color: var(--ap-section-title-color);
}

.dark {
  --ap-section-title-color: #f8fafc;
  --ap-section-button-hover-text: #1f2937;
}

.dark .section-header__button:hover,
.dark .section-header__button:focus-visible,
.dark .box-card > .title .more:hover,
.dark .box-card > .title .more:focus-visible {
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.45);
}

.dark .box-form-l-r .uk-card-default {
  background-color: #000;
}

.dark .box-form-l-r .data-left {
  background-color: #4a4a4a;
  color: #e3e3e3;
}

.dark .box-form-l-r .data-left a {
  color: #ffc34b;
}

.dark .box-form-l-r .data-left a:hover {
  color: #ffe2a7;
}

.dark .box-form-l-r .data-left .title {
  color: #e3e3e3;
}

.dark .box-form-l-r .tab-auth > a {
  color: #e3e3e3;
}

.dark .box-form-l-r .data-left .uk-input {
  background-color: #2c2c2c;
  border: 0;
  color: #e3e3e3;
}

.dark a.btn.btn-link-reset {
  color: #e3e3e3;
}

.dark .uk-modal-footer,
.dark .uk-modal-header {
  background-color: #2c2c2c;
  border-color: #000;
}

.dark .notification .body {
  background-color: #646464;
  color: #e1e1e1;
}

.dark .notification .body a {
  color: #e1e1e1;
  border-bottom: 1px dotted;
}

.dark .notification .body .read-all {
  background-color: #4a4a4a;
  color: #e1e1e1;
}

.dark .notification .head .more {
  background-color: #585858;
}

.dark .notification .item .time {
  background-color: #868686;
  color: #e1e1e1;
}

.dark .notification .item .link-view {
  background-color: #2c2c2c;
}

.dark [resource-name=notifications] .resourceIndexBody {
  color: #dadada;
}

.dark .leo-app-user .resourceIndex .resourceIndexBodyFooter.navbar {
  background-color: #565656;
  border: 0;
  color: #e3e3e3;
}

.dark .notification .hide {
  background-color: #4c4c4c;
  color: #e1e1e1;
}

.dark .profile .main-tab {
  background-color: #4a4a4a;
}

.dark .profile .profile-header {
  background-color: #c68400;
  color: #e3e3e3;
}

.dark .profile .main-tab a {
  color: #c4c4c4;
}

.dark .profile .main-tab-body .right-data {
  background-color: #4a4a4a;
  color: #e3e3e3;
}

.dark .profile .left-data .box {
  background-color: #4a4a4a;
  color: #e3e3e3;
}

.dark .profile .resourceTable .item {
  background-color: #4a4a4a;
  border: 0;
  color: #e3e3e3;
}

.dark .profile .resourceBookmark .box-filters .box-select {
  color: #dadada;
}

.dark .profile .resourceBookmark .box-filters .box-select .select {
  background-color: #4a4a4a;
}

.dark .profile .left-data .box a {
  color: #00e709;
  font-weight: bold;
}

.dark .resourceActionBody .label-action {
  color: #dadada;
}

.dark .header .uk-dropdown {
  background-color: #4a4a4a;
}

.dark .header .uk-dropdown a:hover {
  background-color: #2d2d2d;
}

.dark .page-rule {
  background-color: transparent;
}

.dark .page-rule .rule-header__title {
  color: #f3f4f6;
}

.dark .page-rule .rule-header__subtitle {
  color: #9ca3af;
}

.dark .page-rule .uk-card {
  background-color: #1f2937;
  border: 1px solid rgba(71, 85, 105, 0.7);
  color: #d1d5db;
}

.dark .page-rule .uk-card-title {
  color: #f9fafb;
}

.dark .page-rule .rule-accordion > li {
  border-bottom: 1px solid rgba(71, 85, 105, 0.6);
}

.dark .page-rule .rule-accordion > li.uk-open {
  border-bottom-color: transparent;
  background-color: rgba(252, 163, 17, 0.08);
}

.dark .page-rule .rule-accordion > li.uk-open .rule-accordion-title::after {
  border-color: rgba(252, 163, 17, 0.55);
  background: linear-gradient(#fca311, #fca311) center/16px 2px no-repeat;
}

.dark .page-rule .rule-accordion-title {
  color: #e5e7eb;
}

.dark .page-rule .rule-accordion-title::after {
  border-color: rgba(148, 163, 184, 0.7);
  background: linear-gradient(#cbd5f5, #cbd5f5) center/14px 2px no-repeat, linear-gradient(#cbd5f5, #cbd5f5) center/2px 14px no-repeat;
}

.dark .page-rule .rule-accordion-title:hover::after {
  border-color: rgba(252, 163, 17, 0.4);
}

.dark .page-rule .rule-accordion-content {
  color: #9ca3af;
}

.dark .tab-friends .box {
  background-color: #4a4a4a;
}

.dark .tab-friends .box a {
  color: #e3e3e3;
}

.dark .compare-anime .content {
  background-color: #4a4a4a;
  color: #e3e3e3;
}

.dark .compare-anime h3 {
  color: #e3e3e3;
}

.dark .compare-anime table td {
  border-color: #646464;
}

.dark .box-comment .action-sort {
  background-color: #383838;
}

.dark .box-comment .action-sort .item {
  background-color: #2c2c2c;
  color: #fff;
}

.dark .box-comment .action-sort .item.active {
  background-color: #f2a203;
}

.dark .bodyComment .box-spoiler .spoiler-dic {
  color: #e3e3e3;
}

@media (max-width: 420px) {
  .dark .anime-single .box-tab > .uk-tab .uk-active .title {
    color: #000;
  }
}

.dark .box-app-index {
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, #2c2c2c 20%, #2c2c2c 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)), radial-gradient(circle, rgba(0, 0, 0, 0) 20%, #2c2c2c 20%, #2c2c2c 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)) 47.5px 47.5px, linear-gradient(#f6a504 3.8px, rgba(0, 0, 0, 0) 3.8px) 0 -1.9px, linear-gradient(90deg, #f6a504 3.8px, #2c2c2c 3.8px) -1.9px 0;
}

.dark .page-box-filters .filter-toolbar {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.72));
  border: 1px solid rgba(30, 41, 59, 0.85);
}

.dark .page-box-filters .filter-chip__button {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(30, 41, 59, 0.85);
  color: #f8fafc;
}

.dark .page-box-filters .filter-chip__button:hover,
.dark .page-box-filters .filter-chip__button:focus-visible {
  color: #facc15;
  border-color: rgba(251, 191, 36, 0.55);
}

.dark .page-box-filters .filter-chip__button.is-active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(30, 41, 59, 0.82));
  border-color: rgba(251, 191, 36, 0.6);
  color: #fbbf24;
}

.dark .page-box-filters .filter-chip__label {
  color: #e2e8f0;
}

.dark .page-box-filters .filter-chip__value {
  color: #cbd5f5;
}

.dark .page-box-filters .filter-chip__icon {
  color: #cbd5f5;
}

.dark .page-box-filters .filter-toolbar__actions {
  color: #e2e8f0;
}

.dark .page-box-filters .filter-toggle {
  background-color: rgba(15, 23, 42, 0.7);
  border-color: rgba(30, 41, 59, 0.85);
}

.dark .page-box-filters .filter-toggle__label {
  color: #e2e8f0;
}

.dark .page-box-filters .filter-toggle__thumb {
  background-color: #0f172a;
}

.dark .page-box-filters .filter-toggle input:checked + .filter-toggle__track {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.dark .page-box-filters .filter-toggle input:checked + .filter-toggle__track .filter-toggle__thumb {
  background-color: #1f2937;
}

.dark .page-box-filters .filter-modal__overlay {
  background-color: rgba(2, 6, 23, 0.75);
}

.dark .page-box-filters .filter-modal__dialog {
  background-color: rgba(15, 23, 42, 0.96);
  border-color: rgba(30, 41, 59, 0.85);
}

.dark .page-box-filters .filter-modal__header {
  border-bottom-color: rgba(71, 85, 105, 0.45);
}

.dark .page-box-filters .filter-modal__title {
  color: #f8fafc;
}

.dark .page-box-filters .filter-modal__close {
  color: #cbd5f5;
  left: 22px;
  right: auto;
}

.dark .page-box-filters .filter-modal__close:hover,
.dark .page-box-filters .filter-modal__close:focus-visible {
  color: #facc15;
}

.dark .page-box-filters .filter-modal__body {
  background-color: transparent;
}

.dark .page-box-filters .filter-option {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(30, 41, 59, 0.85);
}

.dark .page-box-filters .filter-option__mark {
  border-color: rgba(148, 163, 184, 0.45);
}

.dark .page-box-filters .filter-option__text {
  color: #e2e8f0;
}

.dark .page-box-filters .filter-option.is-active {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(15, 23, 42, 0.85));
}

.dark .page-box-filters .filter-option.is-active .filter-option__mark {
  border-color: rgba(251, 191, 36, 0.8);
}

.dark .page-box-filters .filter-option.is-active .filter-option__mark::after {
  background-color: #fbbf24;
}

.dark .page-box-filters .filter-modal__footer {
  border-top-color: rgba(71, 85, 105, 0.45);
}

.dark .page-box-filters .filter-modal__apply {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(249, 115, 22, 0.7));
}

.dark .recommendation-archive .recommendation-hero {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.92));
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.6);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__content {
  color: #e2e8f0;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__title-row {
  gap: 10px;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__title {
  color: #f8fafc;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__subtitle {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.18), rgba(59, 130, 246, 0.18));
  color: #e8edff;
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.65);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.32);
  color: #e2e8f0;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric-label {
  color: #cbd5f5;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--blue {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--blue .recommendation-hero__metric-icon {
  background: rgba(59, 130, 246, 0.28);
  color: #bfdbfe;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--amber {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--amber .recommendation-hero__metric-icon {
  background: rgba(251, 191, 36, 0.28);
  color: #fde68a;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__metric--green .recommendation-hero__metric-icon {
  background: rgba(16, 185, 129, 0.28);
  color: #bbf7d0;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__divider {
  background: rgba(226, 232, 240, 0.25);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__synopsis-label {
  color: #cbd5f5;
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__synopsis-dot {
  background: rgba(226, 232, 240, 0.6);
}

.dark .recommendation-archive .recommendation-hero .recommendation-hero__description {
  color: #e2e8f0;
}

.dark .recommendation-archive .recommendation-archive__grid {
  background-color: rgba(15, 23, 42, 0.92);
  border-color: rgba(71, 85, 105, 0.55);
}

.dark .recommendation-archive .recommendation-archive__header h2 {
  color: #e2e8f0;
}

.dark .recommendation-archive.recommendation-archive--relation .recommendation-archive__grid {
  background-color: transparent;
  border-color: transparent;
}

.dark .recommendation-archive .recommendation-archive__list > .post-anime .anime-card {
  background-color: rgba(15, 23, 42, 0.88);
  border-color: rgba(71, 85, 105, 0.45);
}

.dark .recommendation-archive--catalog .recommendation-archive__filters {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(71, 85, 105, 0.55);
}

.dark .recommendation-archive--catalog .filter-label {
  color: #cbd5f5;
}

.dark .recommendation-archive--catalog .filter-select {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(71, 85, 105, 0.45);
  color: #e2e8f0;
}

.dark .recommendation-archive--catalog .filter-field--checkbox {
  color: #e2e8f0;
}

.dark .recommendation-archive--catalog .filter-reset {
  color: #fbbf24;
}

.dark .recommendation-archive .recommendation-archive__header h2 {
  color: #f8fafc;
}

@media (max-width: 640px) {
  .dark .recommendation-archive .recommendation-hero {
    padding: 24px 18px;
  }
}

.dark .toggle-switch__slider {
  background-color: #334155;
}

.dark .toggle-switch input:checked + .toggle-switch__slider {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.dark .toggle-switch__slider::before,
.dark .toggle-switch input:checked + .toggle-switch__slider::before {
  background-color: #0f172a;
}

.dark .toggle-switch input:focus-visible + .toggle-switch__slider {
  outline: 3px solid rgba(34, 197, 94, 0.35);
  outline-offset: 3px;
}

.dark .box-dic {
  --seo-background: rgba(15, 23, 42, 0.96);
  --seo-text-color: #f8fafc;
  --seo-subtle-text: #cbd5f5;
  --seo-border-color: rgba(148, 163, 184, 0.35);
  --seo-shadow: 0 28px 55px rgba(2, 6, 23, 0.65);
  --seo-primary-color: #fbbf24;
}

.dark .box-dic .body {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 47, 73, 0.82) 100%);
  border-color: var(--seo-border-color);
  box-shadow: var(--seo-shadow);
  color: var(--seo-text-color);
}

.dark .box-dic .body p,
.dark .box-dic .body li,
.dark .box-dic .body span,
.dark .box-dic .body blockquote {
  color: var(--seo-subtle-text);
}

.dark .box-dic .body strong,
.dark .box-dic .body b,
.dark .box-dic .body em {
  color: var(--seo-text-color);
}

.dark .box-dic .body h1::after {
  background-color: var(--seo-primary-color);
}

.dark .box-dic .body h2,
.dark .box-dic .body h3,
.dark .box-dic .body h4,
.dark .box-dic .body h5,
.dark .box-dic .body h6 {
  border-right-color: var(--seo-primary-color);
}

.dark .box-dic .body li::before,
.dark .box-dic .body a {
  color: var(--seo-primary-color);
}

.dark .box-dic .link-anime {
  background-color: rgba(251, 191, 36, 0.16);
}

.dark .box-dic .link-anime:hover {
  background-color: rgba(251, 191, 36, 0.24);
}

.dark .box-request-subtitle {
  background-color: #545454;
  color: #e3e3e3;
  border-color: #7a7a7a;
}

.dark .link-btn-footer {
  background-color: #2f2f2f;
  border-color: #3c3c3c;
  color: #f1f1f1;
}

.dark .link-btn-footer:hover {
  background-color: rgba(122, 95, 255, 0.15);
  color: #dcd6ff;
}

.dark .page-server-status .server-box,
.dark .page-server-status .box-top {
  background-color: #4a4a4a;
  color: #dadada;
}

.dark .page-server-status .server-item {
  background-color: #5d5d5d;
}

.dark .anime-single .tag-subtited {
  background-color: #2c2c2c;
  color: #55c259;
}

.dark .anime-single .tag-online {
  background-color: #2c2c2c;
  color: #FFC107;
}

.dark .sub-tabs .sub-tab-title,
.dark .sub-tabs .box-filter {
  background-color: #333;
  color: #ededed;
  box-shadow: none;
}

.dark .sub-tabs .sub-tab-title a {
  color: #ededed;
}

.dark .sub-tabs .sub-tab-title .uk-active a {
  color: #ededed;
}

.dark .op-ed-section .op-ed-title {
  color: #f7f8fc;
}

.dark .op-ed-section .op-ed-subtitle {
  color: #c8ccd8;
}

.dark .op-ed-section .op-ed-controls {
  margin-inline-start: auto;
}

.dark .op-ed-section .op-ed-toolbar {
  background: #0f172a;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dark .op-ed-section .op-ed-chip-group {
  background-color: #0c1220;
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .op-ed-section .op-ed-chip-group.op-ed-chip-group--types {
  background-color: #0e172b;
}

.dark .op-ed-section .op-ed-chip {
  background-color: #0b1220;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .op-ed-section .op-ed-chip:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}

.dark .op-ed-section .op-ed-chip.is-active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(251, 191, 36, 0.28);
}

.dark .op-ed-section .op-ed-header--compact {
  align-items: center;
}

.dark .op-ed-section .op-ed-header--compact .op-ed-controls {
  flex: 0 0 auto;
  max-width: none;
}

.dark .op-ed-section .op-ed-card {
  background-color: #0f1625;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f7f8fc;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.dark .op-ed-section .op-ed-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: #131c2d;
}

.dark .op-ed-section .op-ed-card-info {
  color: inherit;
}

.dark .op-ed-section .op-ed-search {
  background-color: #0e1523;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dark .op-ed-section .op-ed-search:focus-within {
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
  background-color: #121b2b;
}

.dark .op-ed-section .op-ed-search-icon {
  color: #9ea4b4;
}

.dark .op-ed-section .op-ed-search-input {
  color: #f7f8fc;
}

.dark .op-ed-section .op-ed-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.dark .op-ed-section .op-ed-search-input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.dark .op-ed-section .op-ed-search-button {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(243, 156, 18, 0.35);
}

.dark .op-ed-section .op-ed-search-button:hover {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  box-shadow: 0 12px 24px rgba(243, 156, 18, 0.4);
}

.dark .op-ed-section .op-ed-song-title {
  color: #f7f8fc;
}

.dark .op-ed-section .op-ed-anime {
  color: #9ea4b4;
}

.dark .op-ed-section .op-ed-artist {
  color: #cbd5f5;
}

.dark .op-ed-section .op-ed-artist a {
  color: inherit;
}

.dark .op-ed-section .op-ed-artist a:hover {
  color: #f9aa32;
}

.dark .op-ed-section .op-ed-artist-ellipsis {
  color: inherit;
}

.dark .op-ed-section .op-ed-artist-separator {
  color: #94a3b8;
}

.dark .op-ed-section .op-ed-meta-group {
  color: #9ea4b4;
}

.dark .op-ed-section .op-ed-tag {
  color: #0f172a;
  background-color: rgba(255, 255, 255, 0.98);
}

.dark .op-ed-section .op-ed-tag.op-ed-tag--op {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
}

.dark .op-ed-section .op-ed-tag.op-ed-tag--ed {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #064e3b;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action {
  background-color: rgba(34, 197, 173, 0.12);
  color: #5eead4;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action:hover {
  background-color: rgba(34, 197, 173, 0.18);
  color: #a5f3fc;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action--primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.35);
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action--primary:hover {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  color: #0f172a;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action {
  background-color: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action--primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.3);
}

.dark .op-ed-section .op-ed-card-actions .op-ed-action--primary:hover {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  color: #0f172a;
}

@media (max-width: 640px) {
  .dark .op-ed-section .op-ed-card {
    background-color: #181d29;
  }
}

.dark .op-ed-section--archive .op-ed-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  overflow: visible;
  padding-inline: 0;
  margin-inline: 0;
  scroll-snap-type: none;
  mask-image: none;
  -webkit-mask-image: none;
}

@media (max-width: 640px) {
  .dark .op-ed-section--archive .op-ed-grid {
    gap: 16px;
  }

  .dark .op-ed-section--archive .op-ed-card {
    flex: initial;
    min-width: 0;
    width: 100%;
    scroll-snap-align: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dark .op-ed-section--archive .op-ed-card-meta {
    width: 100%;
    justify-content: space-between;
  }

  .dark .op-ed-section--archive .op-ed-download {
    width: 100%;
    justify-content: center;
  }
}

.dark .fieldNumber > span.leoIcon {
  background-color: #4a4a4a;
}

.dark .fieldNumber {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
}

.dark .box-home-description {
  --seo-background: rgba(15, 23, 42, 0.96);
  --seo-text-color: #f8fafc;
  --seo-subtle-text: #cbd5f5;
  --seo-border-color: rgba(148, 163, 184, 0.35);
  --seo-shadow: 0 28px 55px rgba(2, 6, 23, 0.65);
  --seo-primary-color: #fbbf24;
  background-color: var(--seo-background);
  border-color: var(--seo-border-color);
  box-shadow: var(--seo-shadow);
  color: var(--seo-text-color);
}

.dark .box-home-description h1,
.dark .box-home-description h2,
.dark .box-home-description h3,
.dark .box-home-description h4,
.dark .box-home-description h5,
.dark .box-home-description h6 {
  color: var(--seo-text-color);
}

.dark .box-home-description a {
  color: var(--seo-primary-color);
}

body.dark .media-theme-surface,
body.dark .media-hub {
  --media-bg: transparent;
  --media-text: #f8fafc;
  --media-muted: #cbd5f5;
  --media-soft: transparent;
  --media-border: rgba(148, 163, 184, 0.35);
  --media-card-bg: rgba(17, 24, 39, 0.8);
  --media-card-shadow: 0 45px 110px -65px rgba(2, 6, 23, 0.95);
  --media-shadow: 0 55px 140px -80px rgba(2, 6, 23, 0.9);
  --media-accent: #f59e0b;
  --media-accent-strong: #fbbf24;
  --media-accent-soft: rgba(251, 191, 36, 0.2);
  --media-ed-accent: #38bdf8;
  --media-ed-accent-soft: rgba(56, 189, 248, 0.18);
}

body.dark .media-hub__tabs {
  background: transparent;
  box-shadow: none;
}

body.dark .media-hub__tab.is-disabled {
  opacity: 0.45;
}

body.dark .media-hub__tab:hover {
  background: rgba(148, 163, 184, 0.2);
}

body.dark .media-filter {
  background: rgba(17, 24, 39, 0.7);
  box-shadow: none;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

body.dark .media-filter:hover {
  background: rgba(148, 163, 184, 0.18);
}

body.dark .media-search__input {
  background: rgba(17, 24, 39, 0.75);
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--media-text);
}

body.dark .media-search__input::-moz-placeholder {
  color: rgba(226, 232, 240, 0.6);
}

body.dark .media-search__input::placeholder {
  color: rgba(226, 232, 240, 0.6);
}

body.dark .media-search__input:focus {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

body.dark .media-hub__empty-text {
  color: rgba(203, 213, 225, 0.8);
}

body.dark .media-song__action {
  background: rgba(30, 41, 59, 0.85);
  color: rgba(226, 232, 240, 0.9);
}

body.dark .media-gallery__overlay {
  background: rgba(15, 23, 42, 0.55);
}

body.dark .media-modal__content {
  background: rgba(15, 23, 42, 0.92);
}

body.dark .media-modal__close,
body.dark .media-modal__download {
  background: rgba(30, 41, 59, 0.85);
}

body.dark .media-modal__close:hover,
body.dark .media-modal__download:hover {
  background: rgba(30, 41, 59, 0.95);
}

.dark .video-archive {
  background: transparent;
  color: #e5e7eb;
}

.dark .video-archive__hero {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.dark .video-archive__hero-highlight {
  background: transparent;
  border-color: transparent;
}

.dark .video-archive__hero-chip {
  background: rgba(236, 72, 153, 0.9);
}

.dark .video-archive__description {
  color: rgba(248, 250, 252, 0.8);
}

.dark .video-archive__hero-meta {
  color: rgba(226, 232, 240, 0.75);
}

.dark .video-archive__meta-pill {
  background: rgba(59, 130, 246, 0.18);
  color: #e5e7eb;
}

.dark .video-archive__stat {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
}

.dark .video-archive__stat-label {
  color: rgba(226, 232, 240, 0.75);
}

.dark .video-archive__stat-value {
  color: #f8fafc;
}

.dark .video-archive__hero-highlight-play {
  background: linear-gradient(135deg, #38bdf8, #7c3aed);
  color: #0b1024;
}

.dark .video-archive__hero-stats {
  color: #e5e7eb;
}

.dark .video-archive__filters-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 25px 50px -40px rgba(0, 0, 0, 0.75);
}

.dark .video-filter-input,
.dark .video-filter-select {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}

.dark .video-archive__sort-label {
  color: #e2e8f0;
}

.dark .video-sort-pill__content {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
}

.dark .video-sort-pill input:checked + .video-sort-pill__content {
  background: linear-gradient(120deg, #2563eb, #7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 20px 40px -28px rgba(37, 99, 235, 0.75);
}

.dark .video-filter-chip {
  background: rgba(59, 130, 246, 0.25);
  color: #bfdbfe;
}

.dark .video-filter-label,
.dark .video-archive__subtitle {
  color: rgba(226, 232, 240, 0.75);
}

.dark .video-archive__grid {
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 28px 60px -42px rgba(0, 0, 0, 0.8);
}

.dark .video-archive__badge {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

.dark .video-archive__badge--muted {
  background: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.9);
}

.dark .video-card {
  background: transparent;
  border-color: transparent;
}

.dark .video-card__title {
  color: #f8fafc;
}

.dark .video-card__anime {
  color: rgba(226, 232, 240, 0.8);
}

.dark .video-card__action--secondary {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

.dark .video-card__action {
  background: linear-gradient(120deg, #2563eb, #7c3aed);
}

.dark .video-card__action--disabled {
  background: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.7);
}

.dark .video-card__play {
  background: linear-gradient(140deg, #fb923c, #f97316);
  border-color: rgba(226, 232, 240, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.dark .video-preview-modal__dialog {
  background: #020617;
}

.dark .video-preview-modal__chip {
  background: rgba(148, 163, 184, 0.25);
}

.dark .video-preview-modal__meta {
  color: rgba(226, 232, 240, 0.85);
}

.dark .video-archive__empty {
  background: rgba(120, 53, 15, 0.3);
  color: #fed7aa;
}

.dark .relation-ui {
  background: none;
}

.dark .relation-ui__background,
.dark .relation-hero__pattern {
  display: none;
}

.dark .relation-hero__card {
  background: linear-gradient(160deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.92));
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 35px 60px rgba(2, 6, 23, 0.85);
}

.dark .relation-hero__pattern {
  opacity: 0.15;
}

.dark .relation-hero__badge--primary {
  background: rgba(253, 230, 138, 0.15);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}

.dark .relation-hero__badge--secondary {
  background: rgba(147, 197, 253, 0.15);
  border-color: rgba(147, 197, 253, 0.3);
  color: #93c5fd;
}

.dark .relation-hero__title span {
  background: linear-gradient(270deg, #fb923c, #f97316);
}

.dark .relation-hero__description {
  border-right-color: #fb923c;
  color: rgba(226, 232, 240, 0.8);
}

.dark .relation-hero__stat-icon {
  background: rgba(15, 23, 42, 0.6);
  color: rgba(248, 250, 252, 0.85);
}

.dark .relation-hero__stat dt {
  color: rgba(226, 232, 240, 0.6);
}

.dark .relation-hero__stat dd {
  color: #f8fafc;
}

.dark .relation-hero__cta {
  background: #f97316;
  color: #0f172a;
}

.dark .relation-hero__cta:hover {
  background: #fb923c;
  color: #0f172a;
}

.dark .relation-info-card {
  background: rgba(2, 6, 23, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.85);
}

.dark .relation-info-card__accent {
  background: linear-gradient(180deg, #f97316, #fb923c);
}

.dark .relation-info-card__icon {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
}

.dark .relation-network {
  background: rgba(2, 6, 23, 0.92);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
}

.dark .relation-network__icon {
  background: rgba(15, 23, 42, 0.65);
  color: rgba(226, 232, 240, 0.8);
}

.dark .relation-network__title {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.25);
}

.dark .relation-network__total {
  color: rgba(226, 232, 240, 0.78);
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.7);
  box-shadow: none;
}

.dark .relation-tabs__item {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.75);
}

.dark .relation-tabs__item.is-active {
  background: #f97316;
  border-color: #f97316;
  color: #0f172a;
}

.dark .relation-tabs__item.is-active .relation-tabs__count {
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

.dark .relation-grid__title {
  color: #f8fafc;
}

.dark .relation-grid-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
  color: #f8fafc;
}

.dark .relation-grid-card:hover {
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 20px 35px -25px rgba(249, 115, 22, 0.5);
}

.dark .relation-grid-card__subtitle {
  color: #fb923c;
}

.dark .relation-grid-card__pill {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

.dark .relation-grid-card__pill--available {
  background: rgba(16, 185, 129, 0.25);
  color: #bbf7d0;
}

.dark .relation-grid-card__status-icon {
  background: rgba(15, 23, 42, 0.7);
  color: rgba(226, 232, 240, 0.85);
}

.dark .relation-grid-card__glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.35), transparent 70%);
}

.dark .video-detail {
  background: transparent;
  color: #e2e8f0;
}

.dark .video-detail__background {
  display: none;
}

.dark .video-detail__hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.82));
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 28px 80px -38px rgba(0, 0, 0, 0.65);
}

.dark .video-detail__hero::after {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.84));
}

.dark .video-detail__chip {
  background: #f3a303;
  color: #0f172a;
}

.dark .video-detail__title,
.dark .video-detail__stat-value,
.dark .video-detail__poster-title,
.dark .video-detail__section-title,
.dark .video-detail__eyebrow {
  color: #e2e8f0;
}

.dark .video-detail__subtitle,
.dark .video-detail__muted,
.dark .video-detail__stat-label,
.dark .video-detail__poster-subtitle,
.dark .video-detail__description-body {
  color: #cbd5e1;
}

.dark .video-detail__card,
.dark .video-detail__player-card,
.dark .video-detail__info-card,
.dark .video-detail__stat-card,
.dark .video-detail__player-shell,
.dark .video-detail__tag,
.dark .video-detail__link,
.dark .video-detail__ghost-link,
.dark .video-detail__icon-button {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
}

.dark .video-detail__link,
.dark .video-detail__ghost-link,
.dark .video-detail__icon-button {
  background: #0b1220;
}

.dark .video-detail__ghost-link:hover,
.dark .video-detail__link:hover,
.dark .video-detail__icon-button:hover {
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 12px 26px -18px rgba(251, 191, 36, 0.45);
}

.dark .video-detail__player-shell {
  background: radial-gradient(circle at 12% 22%, rgba(250, 204, 21, 0.12), transparent 40%), radial-gradient(circle at 70% 10%, rgba(14, 165, 233, 0.12), transparent 40%), #0b1220;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dark .video-detail__player-badge {
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.dark .video-detail__rating,
.dark .video-detail__tag {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
}

.dark .video-detail__cta {
  background: linear-gradient(135deg, #f3a303, #f59e0b);
  border-color: #f3a303;
  color: #0f172a;
}

.dark .video-detail__cta--ghost {
  background: #0b1120;
  border-color: rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
}

.dark .page-box-filters .filter-toolbar--desktop,
.dark .page-box-filters .filter-mobile-trigger,
.dark .page-box-filters .filter-modal__dialog {
  background: #0f172a;
  border-color: rgba(51, 65, 85, 0.9);
}

.dark .page-box-filters .filter-chip__button,
.dark .page-box-filters .filter-option {
  background: #111827;
  border-color: rgba(51, 65, 85, 0.9);
  color: #e5e7eb;
}

.dark .page-box-filters .filter-chip__button:hover,
.dark .page-box-filters .filter-chip__button:focus-visible {
  background: #1f2937;
  color: #f8fafc;
}

.dark .page-box-filters .filter-chip__label,
.dark .page-box-filters .filter-mobile-trigger__badge,
.dark .page-box-filters .filter-modal__section-title {
  color: #94a3b8;
}

.dark .page-box-filters .filter-chip__value,
.dark .page-box-filters .filter-mobile-trigger__title,
.dark .page-box-filters .filter-modal__title,
.dark .page-box-filters .filter-option.is-active .filter-option__text {
  color: #f8fafc;
}

.dark .page-box-filters .filter-chip__button.is-active,
.dark .page-box-filters .filter-option.is-active {
  background: rgba(243, 163, 3, 0.16);
  border-color: rgba(243, 163, 3, 0.7);
}

.dark .page-box-filters .filter-toggle,
.dark .page-box-filters .filter-modal__close,
.dark .page-box-filters .filter-mobile-trigger__badge {
  background: #111827;
  border-color: rgba(51, 65, 85, 0.9);
}

.dark .page-box-filters .filter-toggle__label,
.dark .page-box-filters .filter-option__text {
  color: #e5e7eb;
}

.dark .page-box-filters .filter-modal__header,
.dark .page-box-filters .filter-modal__footer {
  border-color: rgba(51, 65, 85, 0.7);
}

/* Season browser enhancements in dark theme */

.dark .page-season .season-filter__header {
  background: linear-gradient(110deg, rgba(251, 191, 36, 0.15), rgba(15, 23, 42, 0.45));
  border-color: rgba(251, 191, 36, 0.22);
}

.dark .page-season .season-filter__bar--desktop {
  background: #111b2e;
  border-color: rgba(148, 163, 184, 0.2);
}

.dark .page-season .season-filter__trigger {
  border-color: rgba(148, 163, 184, 0.2);
  background: #1c2a3f;
  color: #e2e8f0;
}

.dark .page-season .season-filter__trigger:hover {
  background: #263950;
  border-color: rgba(251, 191, 36, 0.45);
}

.dark .page-season .season-filter__trigger.is-active {
  color: #1a2231;
  background: linear-gradient(135deg, #fbd36b, #f59e0b);
  border-color: #f5b82f;
}

.dark .page-season .season-filter__trigger.is-active .dark .page-season .season-filter__trigger-icon {
  color: #1a2231;
}

.dark .page-season .season-filter__year {
  background: linear-gradient(180deg, #1a273a, #111a2c);
  border-color: rgba(148, 163, 184, 0.2);
}

.dark .page-season .season-filter__year-title {
  background: transparent;
  color: #f1f5f9;
}

.dark .page-season .season-filter__season {
  background: #202e43;
  border-color: rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}

.dark .page-season .season-filter__season:hover {
  background: #314056;
  color: #fbd36b;
}

.dark .page-season .season-filter__season.is-selected {
  background: linear-gradient(135deg, #fbd36b, #f59e0b);
  color: #271b05;
}

.dark .page-season .season-filter__sort-icon {
  background: rgba(251, 191, 36, 0.15);
  color: #fbd36b;
}

.dark .page-season .season-filter__sort-option input:checked + .dark .page-season .season-filter__sort-card .dark .page-season .season-filter__sort-icon {
  background: #111c2f;
  color: #fbd36b;
}

.dark .page-season .season-filter__later {
  background: linear-gradient(115deg, #3a2b17, #222c3a);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbd58c;
}

.dark .page-season .season-filter__later:hover {
  background: #44331b;
  color: #ffe0a0;
}

.dark .page-season .season-filter__later.is-selected {
  background: #4a361a;
}

.dark .page-season .season-filter__later-icon {
  background: rgba(251, 191, 36, 0.18);
  color: #fbd36b;
}

.dark .page-season .season-filter__mobile-count {
  background: rgba(251, 191, 36, 0.18);
  color: #fbd36b;
}

/* AniPlus user-facing panel styles. Compiled with Laravel Mix into front/app.css.
 * Order matches the former standalone stylesheets; keep scoped selectors intact. */

/* === public/front/user-panel-dark.css === */

/*
 * AniPlus user panel — dark skin.
 * The site's existing body.dark class (darkmode cookie / theme switch) is
 * the single source of truth.  Keep everything scoped to #leo_app so public
 * anime pages and the Leo administrator dashboard are not affected.
 *
 * No Tailwind or Sass compilation is needed: this file is served directly
 * after the panel's existing theme styles in both panel layouts.
 */

body.dark #leo_app {
  --panel-canvas: #050a16;
  --panel-sidebar: #0b1221;
  --panel-card: #101b2d;
  --panel-raised: #17253b;
  --panel-hover: #20314c;
  --panel-stroke: rgba(148, 163, 184, .19);
  --panel-stroke-strong: rgba(148, 163, 184, .32);
  --panel-title: #f8fafc;
  --panel-text: #e2e8f0;
  --panel-muted: #a3b3c8;
  --panel-accent: #fbbf24;
  --panel-ink: #172033;
  --panel-shadow: 0 16px 44px rgba(1, 6, 18, .27);
  color: var(--panel-text);
  color-scheme: dark;
}

body.dark #leo_app.leo-app-shell {
  background: radial-gradient(ellipse 75% 60% at 80% -15%, rgba(49, 72, 116, 0.22), transparent 75%), var(--panel-canvas);
  color: var(--panel-text);
}

body.dark #leo_app .leo-app-user,
body.dark #leo_app .leo-main,
body.dark #leo_app .leo-content,
body.dark #leo_app .leo-app-shell__main {
  background: transparent;
  color: var(--panel-text);
}

body.dark #leo_app .leo-app-shell__layout {
  background: transparent;
}

body.dark #leo_app ::-moz-selection {
  background: rgba(251, 191, 36, 0.28);
  color: #fff;
}

body.dark #leo_app ::selection {
  background: rgba(251, 191, 36, 0.28);
  color: #fff;
}

/* Sidebar, active section, identity and mobile navigation */

body.dark #leo_app .leo-sidebar-col,
body.dark #leo_app .leo-sidebar,
body.dark #leo_app .leo-sidebar .sidebar-content {
  background: var(--panel-sidebar);
  border-color: var(--panel-stroke);
  box-shadow: none;
}

body.dark #leo_app .leo-sidebar-col {
  border-left: 1px solid var(--panel-stroke);
}

body.dark #leo_app .leo-sidebar__brand-link,
body.dark #leo_app .leo-sidebar-profile__name {
  color: var(--panel-title);
}

body.dark #leo_app .leo-sidebar__menu-title,
body.dark #leo_app .leo-sidebar-profile__email {
  color: var(--panel-muted);
}

body.dark #leo_app .leo-sidebar-profile {
  background: var(--panel-card);
  border: 1px solid var(--panel-stroke);
}

body.dark #leo_app .leo-sidebar-profile:hover {
  border-color: rgba(251, 191, 36, 0.5);
}

body.dark #leo_app .leo-sidebar-profile__avatar img,
body.dark #leo_app .leo-sidebar-profile__status {
  border-color: var(--panel-sidebar);
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li,
body.dark #leo_app .leo-app-user ul.menu-list > li {
  background: transparent;
  box-shadow: none;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a,
body.dark #leo_app .leo-app-user ul.menu-list > li > a {
  color: #b4c1d4;
  border-radius: 16px;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a .content,
body.dark #leo_app .leo-app-user ul.menu-list > li > a .content {
  color: inherit;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li:not(.active):not(.menu-item-logout) > a:hover,
body.dark #leo_app .leo-app-user ul.menu-list > li:not(.active):not(.menu-item-logout) > a:hover {
  color: var(--panel-title);
  background: var(--panel-hover);
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a,
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a {
  color: var(--panel-ink) !important;
  background: linear-gradient(125deg, #fcd34d, #f59e0b);
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.18);
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a .content,
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a .content,
body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a svg,
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a svg {
  color: var(--panel-ink) !important;
  stroke: currentColor;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.menu-item-logout > a,
body.dark #leo_app .leo-app-user ul.menu-list > li.menu-item-logout > a,
body.dark #leo_app .leo-sidebar-bottom .leo-sidebar-logout {
  color: #fda4af !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.menu-item-logout > a:hover,
body.dark #leo_app .leo-app-user ul.menu-list > li.menu-item-logout > a:hover,
body.dark #leo_app .leo-sidebar-bottom .leo-sidebar-logout:hover {
  background: rgba(244, 63, 94, 0.12) !important;
  color: #fecdd3 !important;
}

body.dark #leo_app .leo-mobile-header,
body.dark #leo_app .leo-mobile-nav {
  background: rgba(11, 18, 33, 0.96);
  border-color: var(--panel-stroke);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(18px);
}

body.dark #leo_app .leo-mobile-header__brand {
  color: var(--panel-title);
}

body.dark #leo_app .leo-mobile-header__avatar {
  border-color: var(--panel-stroke-strong);
}

body.dark #leo_app .leo-mobile-nav__item {
  color: var(--panel-muted);
}

body.dark #leo_app .leo-mobile-nav__item.is-active,
body.dark #leo_app .leo-mobile-nav__item:hover {
  color: var(--panel-accent);
}

body.dark #leo_app .leo-sidebar-overlay.is-visible {
  background: rgba(1, 6, 18, 0.72);
}

/* Surfaces — dashboard, statistics, pages, empty states and old Leo resources */

body.dark #leo_app .bg-white,
body.dark #leo_app .dashboard-buy,
body.dark #leo_app .buy-sharing,
body.dark #leo_app .last-payment,
body.dark #leo_app .user-top,
body.dark #leo_app .user-top .user-top__card,
body.dark #leo_app .resourceIndexBody,
body.dark #leo_app .resourceDetail,
body.dark #leo_app .resourceFormBody .panel > .body,
body.dark #leo_app .resourceFormBodyDetail .panel > .body,
body.dark #leo_app .friend .box,
body.dark #leo_app .leo-tabs__content,
body.dark #leo_app .user-dashboard-tabs-modern,
body.dark #leo_app .bookmark-table,
body.dark #leo_app .bookmark-pagination,
body.dark #leo_app .bookmark-empty {
  background: var(--panel-card) !important;
  border-color: var(--panel-stroke) !important;
  color: var(--panel-text);
  box-shadow: var(--panel-shadow);
}

body.dark #leo_app .user-top .user-top__profile-card,
body.dark #leo_app .user-top .user-top__card,
body.dark #leo_app .user-top .box,
body.dark #leo_app .dashboard-buy {
  border-color: var(--panel-stroke);
  box-shadow: none;
}

body.dark #leo_app .user-top .user-top__profile-card {
  background: var(--panel-raised);
}

body.dark #leo_app .user-top .user-top__name,
body.dark #leo_app .user-top .user-top__card-value,
body.dark #leo_app .user-top .user-top__profile-link,
body.dark #leo_app .user-top .user-top__id .value,
body.dark #leo_app .dashboard-buy__title {
  color: var(--panel-title);
}

body.dark #leo_app .user-top .user-top__email,
body.dark #leo_app .user-top .user-top__card-label,
body.dark #leo_app .user-top .user-top__card-sub,
body.dark #leo_app .user-top .user-top__card-value .unit,
body.dark #leo_app .dashboard-buy__subtitle {
  color: var(--panel-muted);
}

body.dark #leo_app .user-top .user-top__progress {
  background: var(--panel-hover);
}

body.dark #leo_app .bg-gray-50,
body.dark #leo_app .bg-gray-100,
body.dark #leo_app .bg-gray-200,
body.dark #leo_app .bg-slate-50,
body.dark #leo_app .bg-slate-100,
body.dark #leo_app .bg-slate-800,
body.dark #leo_app .bg-slate-700,
body.dark #leo_app .user-dashboard-tabs-modern__segmented,
body.dark #leo_app .user-dashboard-tabs-modern__payment-card,
body.dark #leo_app .user-dashboard-tabs-modern__login-card,
body.dark #leo_app .leo-modal__toggle,
body.dark #leo_app .leo-modal__counter,
body.dark #leo_app .leo-modal__counter-controls {
  background-color: var(--panel-raised) !important;
  border-color: var(--panel-stroke) !important;
}

body.dark #leo_app .bg-slate-900 {
  background-color: var(--panel-card) !important;
}

body.dark #leo_app .bg-gray-900 {
  background-color: #101a2e !important;
}

body.dark #leo_app .bg-gray-50\/50,
body.dark #leo_app .bg-gray-100\/50 {
  background-color: rgba(32, 49, 76, 0.5) !important;
}

body.dark #leo_app .hover\:bg-gray-50:hover,
body.dark #leo_app tr.hover\:bg-gray-50:hover {
  background: var(--panel-hover) !important;
}

/* Text & borders: cover utility-based screens that have no dark: variants. */

body.dark #leo_app .text-gray-900,
body.dark #leo_app .text-gray-800,
body.dark #leo_app .text-gray-700,
body.dark #leo_app .text-slate-900,
body.dark #leo_app .text-slate-800,
body.dark #leo_app .text-slate-700,
body.dark #leo_app .text-slate-100 {
  color: var(--panel-title) !important;
}

body.dark #leo_app .text-gray-600,
body.dark #leo_app .text-gray-500,
body.dark #leo_app .text-gray-400,
body.dark #leo_app .text-slate-600,
body.dark #leo_app .text-slate-500,
body.dark #leo_app .text-slate-400,
body.dark #leo_app .text-slate-300 {
  color: var(--panel-muted) !important;
}

body.dark #leo_app .text-white {
  color: #fff !important;
}

body.dark #leo_app .border-gray-50,
body.dark #leo_app .border-gray-100,
body.dark #leo_app .border-gray-200,
body.dark #leo_app .border-slate-700,
body.dark #leo_app .border-slate-800,
body.dark #leo_app .border-slate-200,
body.dark #leo_app .divide-gray-50\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--panel-stroke) !important;
}

body.dark #leo_app .shadow-orange-100,
body.dark #leo_app .shadow-orange-200,
body.dark #leo_app .shadow-gray-100\/50 {
  box-shadow: 0 14px 32px rgba(245, 158, 11, 0.08) !important;
}

body.dark #leo_app .bg-blue-50,
body.dark #leo_app .bg-blue-50\/50 {
  background-color: rgba(59, 130, 246, 0.14) !important;
}

body.dark #leo_app .bg-emerald-50,
body.dark #leo_app .bg-green-50 {
  background-color: rgba(16, 185, 129, 0.14) !important;
}

body.dark #leo_app .bg-amber-50,
body.dark #leo_app .bg-orange-50 {
  background-color: rgba(245, 158, 11, 0.14) !important;
}

body.dark #leo_app .bg-red-50 {
  background-color: rgba(244, 63, 94, 0.13) !important;
}

body.dark #leo_app .text-blue-600,
body.dark #leo_app .text-blue-500 {
  color: #93c5fd !important;
}

body.dark #leo_app .text-emerald-600,
body.dark #leo_app .text-emerald-500,
body.dark #leo_app .text-green-500 {
  color: #6ee7b7 !important;
}

body.dark #leo_app .text-amber-600,
body.dark #leo_app .text-amber-500,
body.dark #leo_app .text-orange-500 {
  color: #fcd34d !important;
}

body.dark #leo_app .text-red-600,
body.dark #leo_app .text-red-500 {
  color: #fda4af !important;
}

/* Primary yellow controls: preserve readable ink on the brand accent. */

body.dark #leo_app [class~="bg-[#f6a504]"] {
  color: var(--panel-ink) !important;
}

body.dark #leo_app .resourceCreateItem {
  background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
  color: var(--panel-ink) !important;
}

/* Cards and history rows feel interactive but remain readable. */

body.dark #leo_app .group:hover,
body.dark #leo_app .bookmark-anime-row:hover {
  border-color: rgba(251, 191, 36, 0.25);
}

body.dark #leo_app .panel-page-header h1,
body.dark #leo_app .panel-section-title h3,
body.dark #leo_app .resourceIndex > h1,
body.dark #leo_app .resourceDetail > h1,
body.dark #leo_app .resourceTitle,
body.dark #leo_app .panel > .title {
  color: var(--panel-title);
}

body.dark #leo_app .panel-page-header p {
  color: var(--panel-muted);
}

body.dark #leo_app .panel-section-title svg {
  color: var(--panel-accent);
}

body.dark #leo_app .leo-tabs__switcher,
body.dark #leo_app .leo-tabs__list,
body.dark #leo_app .user-dashboard-tabs .tabs {
  background: var(--panel-raised);
  border-color: var(--panel-stroke);
}

body.dark #leo_app .leo-tabs__button,
body.dark #leo_app .user-dashboard-tabs-modern__tab {
  color: var(--panel-muted);
}

body.dark #leo_app .leo-tabs__button:hover {
  color: var(--panel-title);
}

body.dark #leo_app .leo-tabs__button.is-active,
body.dark #leo_app .user-dashboard-tabs-modern__tab.is-active,
body.dark #leo_app [data-dashboard-tabs] [role=tab][aria-selected=true] {
  background: var(--panel-hover) !important;
  color: var(--panel-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.14);
}

body.dark #leo_app [data-dashboard-tabs] [role=tab][aria-selected=false] {
  background: transparent !important;
  color: var(--panel-muted) !important;
  box-shadow: none;
}

body.dark #leo_app .dashboard-buy__action,
body.dark #leo_app .dashboard-buy__action.btn,
body.dark #leo_app .panel-action-btn,
body.dark #leo_app .resourceBtnSave:not(.uk-button-danger) {
  background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
  color: var(--panel-ink) !important;
  border-color: transparent;
  box-shadow: 0 12px 25px rgba(245, 158, 11, 0.17);
}

body.dark #leo_app .panel-secondary-btn {
  background: var(--panel-raised);
  border-color: var(--panel-stroke-strong);
  color: var(--panel-text);
}

body.dark #leo_app .panel-secondary-btn:hover {
  color: var(--panel-accent);
  border-color: var(--panel-accent);
}

/* Dark support tile still needs a light action button. */

body.dark #leo_app .bg-gray-900 .bg-white,
body.dark #leo_app .bg-gray-900 .bg-white:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.dark #leo_app .bg-gray-900 .bg-white.text-gray-900 {
  color: #0f172a !important;
}

/* Don't tint checkbox/thumbs white: retain the visual state of switches. */

body.dark #leo_app label .peer ~ .bg-white {
  background: #fff !important;
}

/* Unified forms, uploaders, dropdowns and third-party resources. */

body.dark #leo_app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
body.dark #leo_app textarea,
body.dark #leo_app select,
body.dark #leo_app .uk-input,
body.dark #leo_app .uk-textarea,
body.dark #leo_app .uk-select,
body.dark #leo_app .leo-modal__input,
body.dark #leo_app .leo-modal__text-input,
body.dark #leo_app .leo-modal__textarea,
body.dark #leo_app .box-select .select,
body.dark #leo_app .bookmark-search__input,
body.dark #leo_app .bookmark-modal__fields input {
  background-color: var(--panel-raised);
  color: var(--panel-title);
  border-color: var(--panel-stroke-strong);
}

body.dark #leo_app input.bg-transparent,
body.dark #leo_app textarea.bg-transparent,
body.dark #leo_app select.bg-transparent {
  background: transparent !important;
  border-color: transparent !important;
}

body.dark #leo_app .focus-within\:bg-white:focus-within {
  background: var(--panel-hover) !important;
  border-color: rgba(251, 191, 36, 0.52) !important;
}

body.dark #leo_app ::-moz-placeholder {
  color: #8192ad;
  opacity: 1;
}

body.dark #leo_app ::placeholder {
  color: #8192ad;
  opacity: 1;
}

body.dark #leo_app :is(input, textarea, select, button, a):focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: 3px;
}

body.dark #leo_app :is(input, textarea, select):focus {
  border-color: rgba(251, 191, 36, 0.65);
}

body.dark #leo_app :is(input, textarea, select):disabled {
  color: #7f92ad;
  opacity: 0.78;
  cursor: not-allowed;
}

body.dark #leo_app input[type=checkbox],
body.dark #leo_app input[type=radio] {
  accent-color: #fbbf24;
}

body.dark #leo_app select option {
  background: #17253b;
  color: #f8fafc;
}

body.dark #leo_app .rowField,
body.dark #leo_app .fieldFile label,
body.dark #leo_app .field-ComputedField,
body.dark #leo_app .resourceBookmark .es {
  background: var(--panel-raised);
  border-color: var(--panel-stroke);
  color: var(--panel-text);
}

body.dark #leo_app .resourceTable,
body.dark #leo_app .resourceTable th,
body.dark #leo_app .last-payment thead th {
  background: var(--panel-raised);
  border-color: var(--panel-stroke);
  color: var(--panel-muted);
}

body.dark #leo_app .resourceTable td,
body.dark #leo_app .last-payment td,
body.dark #leo_app .resourceBookmark td {
  background: transparent;
  border-color: var(--panel-stroke);
  color: var(--panel-text);
}

body.dark #leo_app .resourceTable tr:hover td,
body.dark #leo_app .resourceIndexBody tr:hover td {
  background: rgba(32, 49, 76, 0.7);
}

body.dark #leo_app .resourceActionBody,
body.dark #leo_app .box-select .dropdownBody,
body.dark #leo_app .uk-dropdown,
body.dark #leo_app .resourceBookmark .status,
body.dark #leo_app .resourceBookmark .status .item {
  background: var(--panel-raised) !important;
  border-color: var(--panel-stroke);
  color: var(--panel-text);
}

body.dark #leo_app .resourceActionBody > *,
body.dark #leo_app .box-select .dropdownBody .item {
  color: var(--panel-text);
}

body.dark #leo_app .resourceActionBody > *:hover,
body.dark #leo_app .box-select .dropdownBody .item:hover {
  background: var(--panel-hover);
}

body.dark #leo_app .resourceBookmark .status .item.active {
  color: var(--panel-accent);
}

/* Bookmark rows, filters, pagination and overlays. */

body.dark #leo_app .bookmark-anime-row,
body.dark #leo_app .bookmark-anime-row--mobile,
body.dark #leo_app .bookmark-toolbar,
body.dark #leo_app .bookmark-pagination,
body.dark #leo_app .bookmark-modal__dialog {
  background: var(--panel-card);
  border-color: var(--panel-stroke);
  box-shadow: var(--panel-shadow);
}

body.dark #leo_app .bookmark-table__head,
body.dark #leo_app .bookmark-anime-row--desktop {
  border-color: var(--panel-stroke);
}

body.dark #leo_app .anime-title.bookmark-anime-row__title,
body.dark #leo_app .bookmark-modal__head h3,
body.dark #leo_app .bookmark-empty strong {
  color: var(--panel-title);
}

body.dark #leo_app .bookmark-chip,
body.dark #leo_app .list-count-badge,
body.dark #leo_app .bookmark-status .btn-status,
body.dark #leo_app .bookmark-modal__close,
body.dark #leo_app .bookmark-modal__cancel {
  background: var(--panel-raised);
  color: var(--panel-text);
  border-color: var(--panel-stroke);
}

body.dark #leo_app .bookmark-chip--episodes {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

body.dark #leo_app .bookmark-chip--rating {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

body.dark #leo_app .bookmark-modal__head p,
body.dark #leo_app .bookmark-modal__fields label,
body.dark #leo_app .bookmark-anime-row__stat::before,
body.dark #leo_app .bookmark-anime-row__status::before {
  color: var(--panel-muted);
}

body.dark #leo_app .bookmark-modal__save {
  background: #fbbf24;
  color: #172033;
}

body.dark #leo_app .bookmark-empty {
  color: var(--panel-muted);
}

body.dark #leo_app .uk-pagination > * > *,
body.dark #leo_app ul.pagination .page-link {
  background: var(--panel-raised);
  border: 1px solid var(--panel-stroke);
  color: var(--panel-text);
  border-radius: 12px;
}

body.dark #leo_app .uk-pagination > .uk-active > *,
body.dark #leo_app ul.pagination li.active .page-link {
  background: var(--panel-accent);
  color: var(--panel-ink);
  border-color: var(--panel-accent);
}

body.dark #leo_app .uk-alert,
body.dark #leo_app .alert-warning {
  background: var(--panel-raised);
  border-color: var(--panel-stroke);
  color: var(--panel-text);
}

/* All dialogs used by tickets, requests, profile editing, subscriptions and logout. */

body.dark #leo_app .leo-modal__dialog,
body.dark #leo_app .ResourceModal,
body.dark #leo_app .modal > div,
body.dark #leo_app .ResourceModalBottom,
body.dark #leo_app .leo-logout-modal__card {
  background: var(--panel-card);
  border: 1px solid var(--panel-stroke);
  color: var(--panel-text);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.52);
}

body.dark #leo_app .leo-modal__header h3,
body.dark #leo_app .leo-logout-modal__title {
  color: var(--panel-title);
}

body.dark #leo_app .leo-modal__header p,
body.dark #leo_app .leo-logout-modal__text {
  color: var(--panel-muted);
}

body.dark #leo_app .leo-modal__close,
body.dark #leo_app .leo-logout-modal__btn--cancel,
body.dark #leo_app .ResourceModalBtnCancel {
  background: var(--panel-raised);
  color: var(--panel-text);
}

body.dark #leo_app .leo-logout-modal__backdrop {
  background: rgba(1, 6, 18, 0.77);
}

body.dark #leo_app .leo-logout-modal__btn--confirm {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
}

body.dark #leo_app .leo-modal__footer {
  border-color: var(--panel-stroke);
}

body.dark #leo_app .leo-modal__ghost {
  background: var(--panel-raised);
  color: var(--panel-text);
}

body.dark #leo_app .leo-modal__upload {
  background: var(--panel-card);
  border-color: var(--panel-stroke-strong);
}

/* UIkit can teleport modal/dialog nodes outside #leo_app. Scope to the panel page. */

html.user-panel-page body.dark .uk-modal-dialog,
html.user-panel-page body.dark .uk-offcanvas-bar {
  background: #101b2d;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

html.user-panel-page body.dark .uk-modal-dialog :is(input, select, textarea) {
  color: #f8fafc;
  background: #17253b;
  border-color: rgba(148, 163, 184, 0.3);
}

html.user-panel-page body.dark .uk-notification-message {
  color: #e2e8f0;
  background: #17253b;
  border-color: rgba(148, 163, 184, 0.3);
}

@media (max-width: 991px) {
  body.dark #leo_app .leo-sidebar-col {
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.28);
  }

  body.dark #leo_app .leo-main {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  body.dark #leo_app .leo-content {
    min-width: 0;
  }

  body.dark #leo_app .panel-page-header {
    gap: 14px;
  }

  body.dark #leo_app .leo-logout-modal__card,
  body.dark #leo_app .bookmark-modal__dialog {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dark #leo_app .user-top .user-top__card,
  body.dark #leo_app .leo-sidebar__menu a {
    transition: none;
  }
}

/* === public/front/user-dashboard.css === */

/*
 * AniPlus user dashboard.
 * Scoped component styles intentionally do not depend on the generated
 * Tailwind bundle, which may be absent on deployed installations.
 */

#leo_app .ap-dashboard {
  --dash-surface: #fff;
  --dash-bg: #f8fafc;
  --dash-border: #e8edf3;
  --dash-ink: #192436;
  --dash-muted: #69788e;
  --dash-accent: #ed9d00;
  --dash-accent-soft: #fff5dd;
  --dash-shadow: 0 10px 28px rgba(24, 39, 67, .045);
  width: 100%;
  max-width: 1440px;
  min-width: 0;
  margin-inline: auto;
  direction: rtl;
  font-family: Vazirmatn, sans-serif;
  color: var(--dash-ink);
}

#leo_app .ap-dashboard *,
#leo_app .ap-dashboard *::before,
#leo_app .ap-dashboard *::after {
  box-sizing: border-box;
}

#leo_app .ap-dashboard__intro {
  margin: 0 0 20px;
}

#leo_app .ap-dashboard__eyebrow {
  margin: 0 0 5px;
  color: #b67700;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.025em;
}

#leo_app .ap-dashboard__title {
  margin: 0;
  color: var(--dash-ink);
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.5;
}

#leo_app .ap-dashboard__description {
  margin: 3px 0 0;
  color: var(--dash-muted);
  font-size: 13px;
  line-height: 1.9;
}

#leo_app .ap-dashboard__body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

#leo_app .ap-dashboard .dashboard-buy {
  padding: 22px 26px;
  border: 1px solid var(--dash-border);
  border-radius: 22px;
  background: var(--dash-surface);
  box-shadow: var(--dash-shadow);
  min-width: 0;
}

#leo_app .ap-dashboard .dashboard-buy__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

#leo_app .ap-dashboard .dashboard-buy__content > div:first-child {
  flex: 1 1 260px;
  min-width: 0;
}

#leo_app .ap-dashboard .dashboard-buy__title {
  font-size: 19px;
  line-height: 1.6;
  color: var(--dash-ink);
}

#leo_app .ap-dashboard .dashboard-buy__subtitle {
  font-size: 12px;
  line-height: 1.9;
  color: var(--dash-muted);
}

#leo_app .ap-dashboard .dashboard-buy__action,
#leo_app .ap-dashboard .dashboard-buy__action.btn {
  margin-inline-start: auto;
  padding: 11px 18px;
  min-height: 43px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  background: var(--dash-accent);
  color: #fff;
  box-shadow: 0 8px 17px rgba(237, 157, 0, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#leo_app .ap-dashboard .dashboard-buy__action:not(.disabled):hover {
  background: #d88d00;
}

#leo_app .ap-dashboard :is(button, a, summary):focus-visible {
  outline: 3px solid rgba(237, 157, 0, 0.55);
  outline-offset: 3px;
}

/* Each statistic is its own compact, predictable card, not a utility grid. */

#leo_app .ap-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

#leo_app .ap-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 170px;
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid var(--dash-border);
  background: var(--dash-surface);
  box-shadow: var(--dash-shadow);
}

#leo_app .ap-stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#leo_app .ap-stat__caption {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 800;
  color: var(--dash-muted);
}

#leo_app .ap-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  color: #c68300;
  background: var(--dash-accent-soft);
}

#leo_app .ap-stat__icon svg {
  width: 22px;
  height: 22px;
}

#leo_app .ap-stat--level .ap-stat__icon {
  color: #2f69d1;
  background: #eef5ff;
}

#leo_app .ap-stat--support .ap-stat__icon {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.12);
}

#leo_app .ap-stat__value {
  display: inline-block;
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.55;
  color: var(--dash-ink);
  overflow-wrap: anywhere;
}

#leo_app .ap-stat__unit {
  margin-inline-start: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dash-muted);
}

#leo_app .ap-stat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--dash-muted);
  font-size: 12px;
  line-height: 1.7;
}

#leo_app .ap-stat__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 11px;
  color: #9b6200;
  background: var(--dash-accent-soft);
  font-size: 11px;
  font-weight: 800;
}

#leo_app .ap-stat__pill--off {
  background: #fff1f2;
  color: #be123c;
}

#leo_app .ap-stat--support {
  background: linear-gradient(135deg, #101b2d, #182a42);
  border-color: #24344a;
}

#leo_app .ap-stat--support .ap-stat__caption {
  color: #c3cddc;
}

#leo_app .ap-stat--support .ap-stat__value {
  font-size: 20px;
  color: #fff;
}

#leo_app .ap-stat--support .ap-stat__foot {
  color: #b3bfd1;
}

#leo_app .ap-stat__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #fff;
  color: #162238;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

#leo_app .ap-stat__action:hover {
  background: #fff2d7;
  color: #142033;
}

#leo_app .ap-stat__action[aria-disabled=true] {
  background: #35465e;
  color: #d1d9e7;
  cursor: default;
}

/* Native, keyboard-accessible disclosure and its existing security forms. */

#leo_app .ap-dashboard__security {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 18px;
  box-shadow: var(--dash-shadow);
  overflow: hidden;
}

#leo_app .ap-dashboard__security > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--dash-ink);
  font-size: 13px;
  font-weight: 800;
}

#leo_app .ap-dashboard__security > summary::-webkit-details-marker {
  display: none;
}

#leo_app .ap-dashboard__security > summary .ap-security__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--dash-accent);
}

#leo_app .ap-dashboard__security > summary .ap-security__chevron {
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  color: var(--dash-muted);
  transition: transform 0.2s;
}

#leo_app .ap-dashboard__security[open] .ap-security__chevron {
  transform: rotate(180deg);
}

#leo_app .ap-dashboard__security-content {
  padding: 0 16px 16px;
}

#leo_app .ap-dashboard .ap-account-security {
  background: var(--dash-bg);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  padding: 17px;
  color: var(--dash-ink);
}

#leo_app .ap-dashboard .ap-account-security > div:first-child,
#leo_app .ap-dashboard .ap-account-connection > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#leo_app .ap-dashboard .ap-account-security > div:first-child {
  justify-content: flex-start;
  margin-bottom: 14px;
}

#leo_app .ap-dashboard .ap-account-security > div:first-child svg {
  width: 20px;
  height: 20px;
  color: var(--dash-accent);
}

#leo_app .ap-dashboard .ap-account-security h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

#leo_app .ap-dashboard .ap-account-connection {
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  padding: 16px;
  background: var(--dash-surface);
}

#leo_app .ap-dashboard .ap-account-connection p {
  margin: 9px 0 0;
  line-height: 1.9;
}

#leo_app .ap-dashboard .ap-account-security form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--dash-border);
  padding-top: 16px;
}

#leo_app .ap-dashboard .ap-account-security form label {
  font-size: 12px;
  font-weight: 700;
}

#leo_app .ap-dashboard .ap-account-security form input {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--dash-border);
  background: var(--dash-surface);
  color: var(--dash-ink);
  font: inherit;
}

#leo_app .ap-dashboard .ap-account-security form button {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--dash-accent);
  color: #141e2e;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#leo_app .ap-dashboard .ap-account-security [hidden] {
  display: none !important;
}

#leo_app .ap-dashboard [data-ap-security-status] {
  margin: 8px 0 0;
  font-size: 12px;
}

/* History table: RTL content, date deliberately in the leftmost column. */

#leo_app .ap-history {
  border: 1px solid var(--dash-border);
  background: var(--dash-surface);
  border-radius: 20px;
  box-shadow: var(--dash-shadow);
  overflow: hidden;
  min-width: 0;
}

#leo_app .ap-history__tabs {
  display: flex;
  gap: 5px;
  margin: 16px 18px 0;
  padding: 5px;
  border-radius: 13px;
  background: var(--dash-bg);
}

#leo_app .ap-history__tab {
  flex: 1 1 0;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  color: var(--dash-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

#leo_app .ap-history__tab[aria-selected=true] {
  color: #a46900;
  background: var(--dash-surface);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.09);
}

#leo_app .ap-history__panel {
  padding: 18px 20px 22px;
  min-width: 0;
}

#leo_app .ap-history__panel[hidden] {
  display: none !important;
}

#leo_app .ap-history__table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

#leo_app .ap-history__table {
  width: 100%;
  min-width: 680px;
  direction: rtl;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: right;
}

#leo_app .ap-history__table th {
  padding: 13px 14px;
  background: var(--dash-bg);
  border-bottom: 1px solid var(--dash-border);
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

#leo_app .ap-history__table td {
  padding: 13px 14px;
  color: var(--dash-ink);
  border-bottom: 1px solid var(--dash-border);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

#leo_app .ap-history__table tr:last-child td {
  border-bottom: 0;
}

#leo_app .ap-history__table tbody tr:hover {
  background: var(--dash-bg);
}

#leo_app .ap-history__table :is(th, td).ap-history__center {
  text-align: center;
}

#leo_app .ap-history__table :is(th, td).ap-history__id {
  width: 10%;
  text-align: center;
}

#leo_app .ap-history__table :is(th, td).ap-history__tracking {
  width: 25%;
  text-align: center;
}

#leo_app .ap-history__table :is(th, td).ap-history__date {
  width: 18%;
  text-align: left;
}

#leo_app .ap-history__tracking span {
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#leo_app .ap-history__date time,
#leo_app .ap-login__date {
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#leo_app .ap-history__amount {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

#leo_app .ap-history__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
}

#leo_app .ap-history__status--success {
  background: #def8ec;
  color: #087951;
}

#leo_app .ap-history__status--pending {
  background: #fff2d5;
  color: #9b6500;
}

#leo_app .ap-history__status--failed {
  background: #ffe6e7;
  color: #b32632;
}

#leo_app .ap-history__empty {
  margin: 0;
  padding: 26px 10px;
  color: var(--dash-muted);
  font-size: 13px;
  text-align: center;
}

#leo_app .ap-history__mobile {
  display: none;
}

#leo_app .ap-history__payment-card,
#leo_app .ap-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--dash-border);
  border-radius: 13px;
  background: var(--dash-bg);
  min-width: 0;
}

#leo_app .ap-history__payment-details {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

#leo_app .ap-history__payment-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#leo_app .ap-history__payment-label {
  flex-shrink: 0;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 700;
}

#leo_app .ap-history__payment-code {
  min-width: 0;
  max-width: 70%;
  overflow-wrap: anywhere;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  text-align: left;
  font-size: 12px;
}

#leo_app .ap-history__payment-date {
  margin-inline-start: auto;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#leo_app .ap-history__mobile,
#leo_app .ap-history__logins {
  display: grid;
  gap: 10px;
}

#leo_app .ap-history__mobile {
  display: none;
}

#leo_app .ap-login__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  color: var(--dash-muted);
}

#leo_app .ap-login__icon svg {
  width: 21px;
  height: 21px;
}

#leo_app .ap-login__details {
  flex: 1;
  min-width: 0;
}

#leo_app .ap-login__device {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#leo_app .ap-login__browser {
  margin: 0;
  color: var(--dash-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

#leo_app .ap-login__date {
  flex-shrink: 0;
  color: var(--dash-muted);
  font-size: 11px;
}

body.dark #leo_app .ap-dashboard {
  --dash-surface: #101b2d;
  --dash-bg: #19273c;
  --dash-border: #2c3d53;
  --dash-ink: #f1f5f9;
  --dash-muted: #acbad0;
  --dash-accent: #f5ad25;
  --dash-accent-soft: #3b2d15;
  --dash-shadow: 0 10px 30px rgba(0,0,0,.16);
}

body.dark #leo_app .ap-stat__pill {
  color: #ffd18a;
}

body.dark #leo_app .ap-stat__pill--off {
  background: #49232c;
  color: #ffc9ce;
}

body.dark #leo_app .ap-stat--level .ap-stat__icon {
  background: #173552;
  color: #96c2ff;
}

body.dark #leo_app .ap-dashboard .ap-account-security,
body.dark #leo_app .ap-dashboard .ap-account-connection,
body.dark #leo_app .ap-dashboard .ap-account-security form input {
  background: var(--dash-bg) !important;
  color: var(--dash-ink) !important;
  border-color: var(--dash-border) !important;
}

body.dark #leo_app .ap-history__status--success {
  background: #143e35;
  color: #86efac;
}

body.dark #leo_app .ap-history__status--pending {
  background: #48371d;
  color: #fcd34d;
}

body.dark #leo_app .ap-history__status--failed {
  background: #482a36;
  color: #fda4af;
}

body.dark #leo_app .ap-dashboard .dashboard-buy__action,
body.dark #leo_app .ap-dashboard .dashboard-buy__action.btn {
  color: #172033 !important;
}

body.dark #leo_app .ap-history__tab[aria-selected=true] {
  color: #fbbf24;
}

@media (max-width: 1100px) {
  #leo_app .ap-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leo_app .ap-stat--support {
    grid-column: 1/-1;
  }
}

@media (max-width: 680px) {
  #leo_app .ap-dashboard__intro {
    margin-bottom: 15px;
  }

  #leo_app .ap-dashboard__body {
    gap: 13px;
  }

  #leo_app .ap-dashboard .dashboard-buy {
    padding: 17px 18px;
    border-radius: 17px;
  }

  #leo_app .ap-dashboard .dashboard-buy__action,
  #leo_app .ap-dashboard .dashboard-buy__action.btn {
    margin-inline-start: 0;
    width: 100%;
    min-height: 43px;
  }

  #leo_app .ap-dashboard__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #leo_app .ap-stat--support {
    grid-column: auto;
  }

  #leo_app .ap-stat {
    min-height: 144px;
    padding: 17px 18px;
    gap: 12px;
  }

  #leo_app .ap-history__tabs {
    margin: 12px 12px 0;
  }

  #leo_app .ap-history__panel {
    padding: 14px 12px 17px;
  }

  #leo_app .ap-history__table-wrap {
    display: none;
  }

  #leo_app .ap-history__mobile {
    display: grid;
  }

  #leo_app .ap-login {
    flex-wrap: wrap;
    gap: 10px;
  }

  #leo_app .ap-login__date {
    margin-inline-start: auto;
  }

  #leo_app .ap-dashboard__security > summary {
    padding: 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-dashboard * {
    transition-duration: 0s !important;
  }
}

/* === public/front/user-preferences.css === */

/* User preferences — scoped to avoid changing other Leo panels */

#leo_app .ap-preferences {
  --ap-line: #e8edf3;
  --ap-surface: #fff;
  --ap-subtle: #f8fafc;
  --ap-title: #192436;
  --ap-muted: #8190a4;
  --ap-accent: #f6a504;
  max-width: 920px;
  margin: 0 auto;
  color: var(--ap-title);
  font-family: Vazirmatn, Tahoma, sans-serif;
}

#leo_app .ap-preferences * {
  box-sizing: border-box;
}

#leo_app .ap-preferences__heading {
  margin-bottom: 20px;
}

#leo_app .ap-preferences__eyebrow {
  font-size: 11px;
  color: #ba7e0a;
  font-weight: 800;
}

#leo_app .ap-preferences__heading h1 {
  font-weight: 900;
  font-size: clamp(23px, 2vw, 29px);
  margin: 4px 0;
}

#leo_app .ap-preferences__heading p {
  color: var(--ap-muted);
  font-size: 12px;
  margin: 0;
  line-height: 2;
}

#leo_app .ap-preferences__form {
  display: grid;
  gap: 16px;
}

#leo_app .ap-preferences__section {
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-radius: 20px;
  padding: 22px 25px;
  box-shadow: 0 7px 25px rgba(24, 39, 67, 0.025);
}

#leo_app .ap-preferences__section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
}

#leo_app .ap-preferences__icon {
  height: 37px;
  width: 37px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff5df;
  color: #c58809;
  font-size: 20px;
  font-weight: 900;
  flex: none;
}

#leo_app .ap-preferences__section h2 {
  font-weight: 900;
  font-size: 15px;
  margin: 0;
  color: var(--ap-title);
}

#leo_app .ap-preferences__section-heading p {
  font-size: 11px;
  margin: 4px 0 0;
  color: var(--ap-muted);
}

#leo_app .ap-preferences__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#leo_app .ap-preferences__field {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--ap-title);
  font-size: 12px;
  font-weight: 800;
}

#leo_app .ap-preferences__field select {
  width: 100%;
  height: 46px;
  border-radius: 11px;
  border: 1px solid var(--ap-line);
  background: var(--ap-subtle);
  color: var(--ap-title);
  padding: 0 12px;
  font: inherit;
  cursor: pointer;
}

#leo_app .ap-preferences__field select:focus-visible,
#leo_app .ap-preferences button:focus-visible,
#leo_app .ap-preferences input:focus-visible + span {
  outline: 2px solid var(--ap-accent);
  outline-offset: 3px;
}

#leo_app .ap-preferences__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 65px;
  padding: 12px 0;
  cursor: pointer;
}

#leo_app .ap-preferences__row + .ap-preferences__row {
  border-top: 1px solid var(--ap-line);
}

#leo_app .ap-preferences__row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#leo_app .ap-preferences__row-copy strong {
  font-size: 12px;
  font-weight: 850;
  color: var(--ap-title);
}

#leo_app .ap-preferences__row-copy small {
  font-size: 11px;
  color: var(--ap-muted);
  line-height: 1.7;
}

#leo_app .ap-preferences__switch {
  position: relative;
  display: block;
  flex: 0 0 43px;
  width: 43px;
  height: 24px;
}

#leo_app .ap-preferences__switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

#leo_app .ap-preferences__switch > span {
  display: block;
  width: 43px;
  height: 24px;
  background: #dce3ec;
  border-radius: 99px;
  transition: background 0.2s;
}

#leo_app .ap-preferences__switch > span:after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1333333333);
  transition: transform 0.2s;
}

#leo_app .ap-preferences__switch input:checked + span {
  background: var(--ap-accent);
}

#leo_app .ap-preferences__switch input:checked + span:after {
  transform: translateX(-19px);
}

#leo_app .ap-preferences__topics {
  border-top: 1px solid var(--ap-line);
  padding-top: 18px;
  margin-top: 8px;
}

#leo_app .ap-preferences__topics h3 {
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--ap-title);
}

#leo_app .ap-preferences__topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#leo_app .ap-preferences__topic {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--ap-line);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  color: var(--ap-title);
  cursor: pointer;
  line-height: 1.8;
}

#leo_app .ap-preferences__topic:has(input:checked) {
  background: #fff9e9;
  border-color: #f6d98b;
}

#leo_app .ap-preferences__topic input {
  accent-color: var(--ap-accent);
  width: 15px;
  height: 15px;
  flex: none;
}

#leo_app .ap-preferences__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 1px 12px;
}

#leo_app .ap-preferences__footer > span {
  font-size: 11px;
  color: var(--ap-muted);
}

#leo_app .ap-preferences__footer button {
  border: 0;
  cursor: pointer;
  border-radius: 11px;
  background: var(--ap-accent);
  color: #fff;
  padding: 13px 22px;
  font-size: 12px;
  font-weight: 900;
  font-family: inherit;
  display: inline-flex;
  gap: 12px;
}

body.dark #leo_app .ap-preferences {
  --ap-line: #2d3c50;
  --ap-surface: #111c2e;
  --ap-subtle: #1c2a3f;
  --ap-title: #f1f5f9;
  --ap-muted: #adbbd0;
}

body.dark #leo_app .ap-preferences__icon {
  background: #3b2d15;
  color: #f7bc50;
}

body.dark #leo_app .ap-preferences__topic:has(input:checked) {
  background: #3b2d15;
  border-color: #79571d;
}

@media (max-width: 640px) {
  #leo_app .ap-preferences__section {
    padding: 17px;
    border-radius: 16px;
  }

  #leo_app .ap-preferences__grid,
  #leo_app .ap-preferences__topics-grid {
    grid-template-columns: 1fr;
  }

  #leo_app .ap-preferences__footer {
    align-items: stretch;
    flex-direction: column;
  }

  #leo_app .ap-preferences__footer button {
    justify-content: center;
  }

  #leo_app .ap-preferences__row-copy small {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-preferences__switch span {
    transition: none !important;
  }
}

/* === public/front/user-ticket-create.css === */

#leo_app .ap-ticket-create {
  --line: #e8edf3;
  --surface: #fff;
  --subtle: #f8fafc;
  --title: #192436;
  --muted: #8190a4;
  --accent: #f6a504;
  max-width: 1050px;
  margin: auto;
  color: var(--title);
  font-family: Vazirmatn, Tahoma, sans-serif;
}

#leo_app .ap-ticket-create * {
  box-sizing: border-box;
}

#leo_app .ap-ticket-create__back {
  margin-bottom: 18px;
}

#leo_app .ap-ticket-create__back a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

#leo_app .ap-ticket-create__back a:hover {
  color: var(--accent);
}

#leo_app .ap-ticket-create__eyebrow {
  color: #b67a00;
  font-size: 11px;
  font-weight: 900;
}

#leo_app .ap-ticket-create__header {
  margin-bottom: 23px;
}

#leo_app .ap-ticket-create__header h1 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 900;
  margin: 5px 0;
}

#leo_app .ap-ticket-create__header p {
  color: var(--muted);
  font-size: 12px;
  line-height: 2;
  margin: 0;
}

#leo_app .ap-ticket-create__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  align-items: start;
  gap: 18px;
}

#leo_app .ap-ticket-create__form,
#leo_app .ap-ticket-create__tip,
#leo_app .ap-ticket-create__notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 8px 30px rgba(24, 39, 67, 0.035);
}

#leo_app .ap-ticket-create__form-step {
  color: #ba821a;
  font-size: 10px;
  font-weight: 850;
}

#leo_app .ap-ticket-create__form-head {
  margin-bottom: 22px;
}

#leo_app .ap-ticket-create__form-head h2 {
  color: var(--title);
  font-size: 17px;
  font-weight: 900;
  margin: 5px 0;
}

#leo_app .ap-ticket-create__form-head p {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}

#leo_app .ap-ticket-create__fields {
  display: grid;
  gap: 18px;
}

#leo_app .ap-ticket-create__field {
  display: grid;
  gap: 8px;
}

#leo_app .ap-ticket-create__field > span {
  color: var(--title);
  font-size: 12px;
  font-weight: 850;
}

#leo_app .ap-ticket-create__field b {
  color: #e39e06;
}

#leo_app .ap-ticket-create__field input,
#leo_app .ap-ticket-create__field select,
#leo_app .ap-ticket-create__field textarea {
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  width: 100%;
  color: var(--title);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#leo_app .ap-ticket-create__field input,
#leo_app .ap-ticket-create__field select {
  height: 47px;
}

#leo_app .ap-ticket-create__field textarea {
  min-height: 158px;
  resize: vertical;
  line-height: 2;
}

#leo_app .ap-ticket-create__field :is(input, select, textarea):focus-visible {
  border-color: #f1b741;
  box-shadow: 0 0 0 3px rgba(246, 165, 4, 0.12);
}

#leo_app .ap-ticket-create__field ::-moz-placeholder {
  color: #a8b2c0;
}

#leo_app .ap-ticket-create__field ::placeholder {
  color: #a8b2c0;
}

#leo_app .ap-ticket-create__attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--subtle);
  padding: 15px;
  border: 1px dashed #cfd8e5;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}

#leo_app .ap-ticket-create__attachment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}

#leo_app .ap-ticket-create__attachment:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#leo_app .ap-ticket-create__attachment-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #fff4dc;
  border-radius: 10px;
  color: #bc810c;
  font-size: 22px;
  flex: none;
}

#leo_app .ap-ticket-create__attachment strong,
#leo_app .ap-ticket-create__attachment small {
  display: block;
  overflow-wrap: anywhere;
}

#leo_app .ap-ticket-create__attachment strong {
  font-size: 12px;
  color: var(--title);
}

#leo_app .ap-ticket-create__attachment small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

#leo_app .ap-ticket-create__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 20px;
}

#leo_app .ap-ticket-create__actions > a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

#leo_app .ap-ticket-create__actions button {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 12px 20px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

#leo_app .ap-ticket-create__actions button:disabled {
  opacity: 0.6;
  cursor: wait;
}

#leo_app .ap-ticket-create__actions button span {
  padding-right: 10px;
}

#leo_app .ap-ticket-create__tip {
  padding: 22px;
}

#leo_app .ap-ticket-create__tip-icon {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 12px;
  background: #fff3d9;
  color: #e49c06;
  font-size: 24px;
}

#leo_app .ap-ticket-create__tip h2 {
  font-size: 15px;
  font-weight: 900;
  color: var(--title);
  margin: 15px 0 5px;
}

#leo_app .ap-ticket-create__tip > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
  margin-bottom: 18px;
}

#leo_app .ap-ticket-create__tip-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 15px;
  color: var(--title);
  font-size: 11px;
  line-height: 1.9;
}

#leo_app .ap-ticket-create__tip-line b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 7px;
  background: var(--subtle);
  color: #b98316;
}

#leo_app .ap-ticket-create__hint {
  margin-top: 13px;
  padding: 0 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 2;
}

#leo_app .ap-ticket-create__notice strong {
  font-size: 17px;
  color: var(--title);
}

#leo_app .ap-ticket-create__notice p {
  color: var(--muted);
  font-size: 12px;
  line-height: 2;
}

#leo_app .ap-ticket-create__notice a {
  color: #c18503;
  font-size: 12px;
  font-weight: 900;
}

#leo_app .ap-ticket-create__alert,
#leo_app .ap-ticket-create__field small:not(.hidden),
#leo_app .ap-ticket-create__file-error:not(.hidden) {
  color: #d63f4d;
  font-size: 11px;
  font-weight: 700;
}

#leo_app .ap-ticket-create__alert:not(.hidden) {
  padding: 12px;
  background: #fff0f1;
  border-radius: 10px;
  margin-bottom: 16px;
}

#leo_app .ap-ticket-create .hidden {
  display: none !important;
}

body.dark #leo_app .ap-ticket-create {
  --line: #2d3c50;
  --surface: #111c2e;
  --subtle: #1c2a3f;
  --title: #f1f5f9;
  --muted: #adbbd0;
}

body.dark #leo_app .ap-ticket-create__attachment-icon,
body.dark #leo_app .ap-ticket-create__tip-icon {
  background: #3b2d15;
  color: #f6c35f;
}

@media (max-width: 810px) {
  #leo_app .ap-ticket-create__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #leo_app .ap-ticket-create__aside {
    display: none;
  }
}

@media (max-width: 600px) {
  #leo_app .ap-ticket-create__form,
  #leo_app .ap-ticket-create__notice {
    padding: 18px;
    border-radius: 16px;
  }

  #leo_app .ap-ticket-create__header p {
    font-size: 11px;
  }

  #leo_app .ap-ticket-create__actions {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-ticket-create * {
    transition: none !important;
  }
}

/* === public/front/my-anime-list.css === */

/* AniPlus personal anime library — isolated from the rest of Leo. */

#leo_app .ap-watchlist {
  --wl-surface: #fff;
  --wl-canvas: #f8fafc;
  --wl-line: #e8edf3;
  --wl-text: #192436;
  --wl-muted: #8190a4;
  --wl-accent: #ed9d00;
  --wl-soft: #fff6e6;
  --wl-shadow: 0 10px 28px rgba(24,39,67,.045);
  direction: rtl;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  color: var(--wl-text);
  font-family: Vazirmatn, Tahoma, sans-serif;
}

#leo_app .ap-watchlist *,
#leo_app .ap-watchlist *:before,
#leo_app .ap-watchlist *:after {
  box-sizing: border-box;
}

#leo_app .ap-watchlist :is(button, a, input):focus-visible {
  outline: 3px solid rgba(237, 157, 0, 0.5);
  outline-offset: 3px;
}

#leo_app .ap-watchlist button {
  font-family: inherit;
  cursor: pointer;
}

#leo_app .ap-watchlist button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#leo_app .ap-watchlist__intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

#leo_app .ap-watchlist__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 850;
  color: #ac7409;
}

#leo_app .ap-watchlist__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0a522;
  box-shadow: 0 0 0 4px #fff1d5;
}

#leo_app .ap-watchlist__intro h1 {
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 900;
  line-height: 1.5;
  margin: 6px 0 3px;
  color: var(--wl-text);
}

#leo_app .ap-watchlist__intro p {
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.9;
  margin: 0;
}

#leo_app .ap-watchlist__overview {
  display: grid;
  grid-template-columns: 44px auto;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
  min-width: 190px;
  padding: 14px 18px;
  border: 1px solid var(--wl-line);
  border-radius: 18px;
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow);
}

#leo_app .ap-watchlist__overview-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--wl-soft);
  color: var(--wl-accent);
}

#leo_app .ap-watchlist__overview-icon svg {
  width: 24px;
}

#leo_app .ap-watchlist__overview-number {
  font-size: 23px;
  line-height: 1.1;
  font-weight: 900;
}

#leo_app .ap-watchlist__overview-label {
  color: var(--wl-muted);
  font-size: 11px;
  font-weight: 750;
}

#leo_app .ap-watchlist__tools {
  padding: 17px;
  border: 1px solid var(--wl-line);
  border-radius: 21px;
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 21px;
}

#leo_app .ap-watchlist__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  min-width: 180px;
}

#leo_app .ap-watchlist__search input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 35px;
  border: 1px solid var(--wl-line);
  border-radius: 13px;
  background: var(--wl-canvas);
  outline: 0;
  color: var(--wl-text);
  font-size: 12px;
  font-weight: 750;
  transition: background 0.2s, border-color 0.2s;
}

#leo_app .ap-watchlist__search input:focus {
  border-color: #edba54;
  background: var(--wl-surface);
}

#leo_app .ap-watchlist__search input::-moz-placeholder {
  color: #9ba8b8;
}

#leo_app .ap-watchlist__search input::placeholder {
  color: #9ba8b8;
}

#leo_app .ap-watchlist__search-icon {
  position: absolute;
  right: 15px;
  width: 19px;
  height: 19px;
  color: #98a5b9;
  pointer-events: none;
}

#leo_app .ap-watchlist__search-clear {
  position: absolute;
  left: 7px;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--wl-muted);
}

#leo_app .ap-watchlist__filters {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#leo_app .ap-watchlist__filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wl-line);
  border-radius: 13px;
  background: var(--wl-surface);
  color: var(--wl-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.2s;
}

#leo_app .ap-watchlist__filter:hover,
#leo_app .ap-watchlist__filter.is-selected {
  border-color: #f1c571;
  background: var(--wl-soft);
  color: #aa6c00;
}

#leo_app .ap-watchlist__filter svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

#leo_app .ap-watchlist__filter .ap-watchlist__chevron {
  width: 14px;
  height: 14px;
  color: #9da9b8;
}

#leo_app .ap-watchlist__section {
  background: var(--wl-surface);
  border: 1px solid var(--wl-line);
  border-radius: 22px;
  box-shadow: var(--wl-shadow);
  overflow: hidden;
  min-width: 0;
}

#leo_app .ap-watchlist__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--wl-line);
}

#leo_app .ap-watchlist__section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

#leo_app .ap-watchlist__section-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--wl-accent);
  background: var(--wl-soft);
  font-size: 21px;
}

#leo_app .ap-watchlist__section-head h2 {
  font-size: 16px;
  font-weight: 900;
  color: var(--wl-text);
  margin: 0 0 3px;
}

#leo_app .ap-watchlist__section-head p {
  margin: 0;
  color: var(--wl-muted);
  font-size: 11px;
  font-weight: 650;
}

#leo_app .ap-watchlist__result-count {
  padding: 7px 12px;
  color: var(--wl-muted);
  background: var(--wl-canvas);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
}

#leo_app .ap-watchlist__results {
  position: relative;
  min-height: 180px;
}

#leo_app .ap-watchlist__list {
  display: grid;
  gap: 0;
}

#leo_app .ap-watchlist__card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(124px, 170px) minmax(135px, 165px);
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wl-line);
  transition: background-color 0.2s;
  min-width: 0;
}

#leo_app .ap-watchlist__card:last-child {
  border-bottom: 0;
}

#leo_app .ap-watchlist__card:hover {
  background: rgba(248, 250, 252, 0.72);
}

#leo_app .ap-watchlist__card.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

#leo_app .ap-watchlist__poster {
  width: 85px;
  height: 124px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: var(--wl-canvas);
  box-shadow: 0 6px 20px rgba(24, 39, 67, 0.12);
}

#leo_app .ap-watchlist__poster img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s;
}

#leo_app .ap-watchlist__poster:hover img {
  transform: scale(1.055);
}

#leo_app .ap-watchlist__poster svg {
  width: 28px;
  color: var(--wl-muted);
}

#leo_app .ap-watchlist__info {
  min-width: 0;
}

#leo_app .ap-watchlist__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

#leo_app .ap-watchlist__tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 7px;
  background: #eff2f7;
  color: #627089;
  font-size: 10px;
  font-weight: 800;
}

#leo_app .ap-watchlist__tag--amber {
  background: var(--wl-soft);
  color: #bf8009;
}

#leo_app .ap-watchlist__anime-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--wl-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.8;
  text-decoration: none;
  transition: color 0.2s;
}

#leo_app .ap-watchlist__anime-title:hover {
  color: var(--wl-accent);
}

#leo_app .ap-watchlist__progress {
  max-width: 400px;
  margin-top: 15px;
}

#leo_app .ap-watchlist__progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--wl-muted);
  font-size: 10px;
  font-weight: 750;
}

#leo_app .ap-watchlist__progress-label strong {
  color: var(--wl-text);
  font-size: 11px;
  font-weight: 850;
}

#leo_app .ap-watchlist__progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #eaf0f6;
  direction: ltr;
}

#leo_app .ap-watchlist__progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6be48, #eda010);
  transition: width 0.3s;
}

#leo_app .ap-watchlist__metrics {
  display: grid;
  gap: 10px;
}

#leo_app .ap-watchlist__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--wl-canvas);
  border: 1px solid var(--wl-line);
  border-radius: 11px;
}

#leo_app .ap-watchlist__metric-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--wl-muted);
}

#leo_app .ap-watchlist__metric strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--wl-text);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

#leo_app .ap-watchlist__metric small {
  font-size: 10px;
  color: var(--wl-muted);
  font-weight: 700;
}

#leo_app .ap-watchlist__rating svg {
  width: 15px;
  height: 15px;
  color: #f3b53f;
}

#leo_app .ap-watchlist__manage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#leo_app .ap-watchlist__status > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 850;
}

#leo_app .ap-watchlist__actions {
  display: flex;
  gap: 7px;
  width: 100%;
}

#leo_app .ap-watchlist__edit,
#leo_app .ap-watchlist__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 850;
  transition: all 0.2s;
}

#leo_app .ap-watchlist__edit {
  flex: 1;
  background: #fff7e8;
  border: 1px solid #ffebc2;
  color: #b77b0d;
}

#leo_app .ap-watchlist__edit:hover {
  background: #f9e5b6;
}

#leo_app .ap-watchlist__delete {
  border: 1px solid var(--wl-line);
  background: var(--wl-surface);
  color: var(--wl-muted);
  padding: 0 11px;
}

#leo_app .ap-watchlist__delete:hover {
  color: #dc3545;
  background: #fff0f0;
  border-color: #ffd4d9;
}

#leo_app .ap-watchlist__actions svg {
  width: 15px;
  height: 15px;
}

#leo_app .ap-watchlist__loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  min-height: 180px;
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 800;
}

#leo_app .ap-watchlist__spinner {
  width: 25px;
  height: 25px;
  border: 3px solid #f5e4bd;
  border-top-color: var(--wl-accent);
  border-radius: 50%;
  animation: ap-wl-spin 0.75s linear infinite;
}

@keyframes ap-wl-spin {
  to {
    transform: rotate(360deg);
  }
}

#leo_app .ap-watchlist__empty {
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 25px;
  gap: 8px;
}

#leo_app .ap-watchlist__empty-icon {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 20px;
  color: var(--wl-accent);
  background: var(--wl-soft);
}

#leo_app .ap-watchlist__empty-icon svg {
  width: 30px;
}

#leo_app .ap-watchlist__empty h3 {
  font-size: 16px;
  color: var(--wl-text);
  font-weight: 900;
  margin: 9px 0 0;
}

#leo_app .ap-watchlist__empty p {
  font-size: 12px;
  color: var(--wl-muted);
  margin: 0;
  line-height: 1.9;
}

#leo_app .ap-watchlist__reset {
  border: 0;
  border-radius: 10px;
  background: var(--wl-soft);
  color: #b47706;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 16px;
  margin-top: 10px;
}

#leo_app .ap-watchlist__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
}

#leo_app .ap-watchlist__page,
#leo_app .ap-watchlist__page-arrow {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  background: var(--wl-surface);
  border: 1px solid var(--wl-line);
  border-radius: 10px;
  color: var(--wl-text);
  font-size: 13px;
  font-weight: 850;
}

#leo_app .ap-watchlist__page.is-current {
  background: var(--wl-accent);
  color: #fff;
  border-color: var(--wl-accent);
}

#leo_app .ap-watchlist__page-dots {
  color: var(--wl-muted);
}

#leo_app .ap-watchlist__modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#leo_app .ap-watchlist__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
}

#leo_app .ap-watchlist__dialog {
  position: relative;
  width: 100%;
  max-width: 510px;
  max-height: min(90vh, 820px);
  overflow-y: auto;
  background: var(--wl-surface);
  border: 1px solid var(--wl-line);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

#leo_app .ap-watchlist__dialog-head,
#leo_app .ap-watchlist__dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--wl-line);
}

#leo_app .ap-watchlist__dialog-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--wl-text);
}

#leo_app .ap-watchlist__dialog-head p {
  margin: 5px 0 0;
  max-width: 370px;
  color: var(--wl-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

#leo_app .ap-watchlist__dialog-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--wl-canvas);
  color: var(--wl-muted);
  border: 0;
  border-radius: 50%;
  font-size: 23px;
}

#leo_app .ap-watchlist__dialog-body {
  display: grid;
  gap: 18px;
  padding: 22px;
}

#leo_app .ap-watchlist__error {
  padding: 12px;
  background: #fff0f0;
  border-radius: 11px;
  color: #c82c3a;
  font-size: 12px;
}

#leo_app .ap-watchlist__stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#leo_app .ap-watchlist__stepper label,
#leo_app .ap-watchlist__field-head,
#leo_app .ap-watchlist__status-field legend {
  font-size: 12px;
  font-weight: 850;
  color: var(--wl-text);
}

#leo_app .ap-watchlist__stepper-control {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--wl-canvas);
  border: 1px solid var(--wl-line);
  border-radius: 12px;
  padding: 4px;
}

#leo_app .ap-watchlist__stepper-control button {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 0;
  border-radius: 9px;
  background: var(--wl-surface);
  color: var(--wl-text);
  font-size: 18px;
}

#leo_app .ap-watchlist__stepper-control input {
  width: 57px;
  text-align: center;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--wl-text);
  font-size: 13px;
  font-weight: 850;
}

#leo_app .ap-watchlist__stepper-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

#leo_app .ap-watchlist__rating-field {
  padding: 15px;
  background: var(--wl-canvas);
  border: 1px solid var(--wl-line);
  border-radius: 13px;
}

#leo_app .ap-watchlist__field-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

#leo_app .ap-watchlist__field-head b {
  color: var(--wl-accent);
}

#leo_app .ap-watchlist__rating-field input {
  width: 100%;
  accent-color: #ed9d00;
}

#leo_app .ap-watchlist__status-field {
  margin: 0;
  border: 0;
  padding: 0;
}

#leo_app .ap-watchlist__status-field legend {
  margin-bottom: 10px;
}

#leo_app .ap-watchlist__status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#leo_app .ap-watchlist__status-options label {
  cursor: pointer;
}

#leo_app .ap-watchlist__status-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#leo_app .ap-watchlist__status-options span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--wl-canvas);
  border: 1px solid var(--wl-line);
  color: var(--wl-muted);
  font-size: 11px;
  font-weight: 850;
}

#leo_app .ap-watchlist__status-options i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#leo_app .ap-watchlist__status-options input:checked + span {
  border-color: #edb449;
  background: var(--wl-soft);
  color: #b0790a;
}

#leo_app .ap-watchlist__status-options input:focus-visible + span {
  outline: 3px solid #f6c86b;
}

#leo_app .ap-watchlist__dialog-footer {
  border-bottom: 0;
  border-top: 1px solid var(--wl-line);
}

#leo_app .ap-watchlist__dialog-footer button {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
}

#leo_app .ap-watchlist__danger {
  background: transparent;
  color: #cc4a57;
  border: 1px solid #f2cbd0;
}

#leo_app .ap-watchlist__save {
  background: var(--wl-accent);
  color: #fff;
  border: 1px solid var(--wl-accent);
}

#leo_app .ap-watchlist__filter-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 20px;
  max-height: 60vh;
  overflow: auto;
}

#leo_app .ap-watchlist__filter-options button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-align: right;
  padding: 12px;
  border: 1px solid var(--wl-line);
  border-radius: 10px;
  background: var(--wl-canvas);
  color: var(--wl-text);
  font-size: 12px;
  font-weight: 850;
}

#leo_app .ap-watchlist__filter-options button.is-selected {
  background: var(--wl-soft);
  color: #aa7000;
  border-color: #edb449;
}

body.dark #leo_app .ap-watchlist {
  --wl-surface: #101b2d;
  --wl-canvas: #19273c;
  --wl-line: #2c3d53;
  --wl-text: #f1f5f9;
  --wl-muted: #acbad0;
  --wl-accent: #f5ad25;
  --wl-soft: #3b2d15;
  --wl-shadow: 0 10px 30px rgba(0,0,0,.16);
}

body.dark #leo_app .ap-watchlist__tag {
  background: #26374c;
  color: #c2cddd;
}

body.dark #leo_app .ap-watchlist__tag--amber {
  background: #45351c;
  color: #f6c77d;
}

body.dark #leo_app .ap-watchlist__card:hover {
  background: #17253a;
}

body.dark #leo_app .ap-watchlist__progress-track {
  background: #304057;
}

body.dark #leo_app .ap-watchlist__loading {
  background: rgba(16, 27, 45, 0.85);
}

body.dark #leo_app .ap-watchlist__edit {
  background: #40311b;
  border-color: #564023;
  color: #ffd18a;
}

body.dark #leo_app .ap-watchlist__delete:hover {
  background: #472630;
  color: #fda4af;
}

body.dark #leo_app .ap-watchlist__error {
  background: #482a36;
  color: #fda4af;
}

@media (max-width: 1120px) {
  #leo_app .ap-watchlist__tools {
    flex-wrap: wrap;
  }

  #leo_app .ap-watchlist__search {
    flex-basis: 100%;
  }

  #leo_app .ap-watchlist__filters {
    width: 100%;
  }

  #leo_app .ap-watchlist__filter {
    flex: 1;
    min-width: 0;
  }

  #leo_app .ap-watchlist__filter span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #leo_app .ap-watchlist__card {
    grid-template-columns: 78px minmax(0, 1fr) minmax(115px, 155px);
    gap: 15px;
  }

  #leo_app .ap-watchlist__poster {
    width: 75px;
    height: 110px;
  }

  #leo_app .ap-watchlist__manage {
    grid-column: 2/4;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px dashed var(--wl-line);
    padding-top: 12px;
  }

  #leo_app .ap-watchlist__actions {
    width: auto;
    min-width: 145px;
  }
}

@media (max-width: 650px) {
  #leo_app .ap-watchlist__intro {
    align-items: flex-start;
  }

  #leo_app .ap-watchlist__overview {
    min-width: auto;
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
    padding: 12px;
  }

  #leo_app .ap-watchlist__overview-icon {
    display: none;
  }

  #leo_app .ap-watchlist__overview-number {
    font-size: 20px;
  }

  #leo_app .ap-watchlist__overview-label {
    font-size: 9px;
    max-width: 74px;
  }

  #leo_app .ap-watchlist__intro h1 {
    font-size: 21px;
  }

  #leo_app .ap-watchlist__intro p {
    font-size: 11px;
  }

  #leo_app .ap-watchlist__tools {
    padding: 12px;
    border-radius: 16px;
  }

  #leo_app .ap-watchlist__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #leo_app .ap-watchlist__filter {
    font-size: 11px;
    padding: 0 10px;
    justify-content: space-between;
  }

  #leo_app .ap-watchlist__filter:first-child {
    grid-column: 1/-1;
  }

  #leo_app .ap-watchlist__section-head {
    padding: 15px;
  }

  #leo_app .ap-watchlist__section-head p {
    font-size: 10px;
  }

  #leo_app .ap-watchlist__result-count {
    display: none;
  }

  #leo_app .ap-watchlist__card {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  #leo_app .ap-watchlist__poster {
    width: 75px;
    height: 112px;
    align-self: start;
  }

  #leo_app .ap-watchlist__info {
    align-self: start;
  }

  #leo_app .ap-watchlist__anime-title {
    font-size: 13px;
  }

  #leo_app .ap-watchlist__progress {
    margin-top: 11px;
  }

  #leo_app .ap-watchlist__metrics {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #leo_app .ap-watchlist__metric {
    padding: 9px;
  }

  #leo_app .ap-watchlist__metric strong {
    font-size: 13px;
  }

  #leo_app .ap-watchlist__manage {
    grid-column: 1/-1;
    padding-top: 11px;
    gap: 8px;
  }

  #leo_app .ap-watchlist__dialog {
    max-height: 90vh;
  }

  #leo_app .ap-watchlist__modal {
    align-items: flex-end;
    padding: 0;
  }

  #leo_app .ap-watchlist__dialog {
    border-radius: 22px 22px 0 0;
  }

  #leo_app .ap-watchlist__filter-options {
    grid-template-columns: 1fr 1fr;
  }

  #leo_app .ap-watchlist__dialog-body {
    padding: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-watchlist *,
  #leo_app .ap-watchlist *:before,
  #leo_app .ap-watchlist *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Compact library cards: quiet metadata, clear actions, animated watching progress. */

#leo_app .ap-watchlist__intro {
  margin-bottom: 14px;
}

#leo_app .ap-watchlist__intro h1 {
  margin: 0;
  font-size: clamp(21px, 2vw, 27px);
}

#leo_app .ap-watchlist__card {
  grid-template-columns: 70px minmax(0, 1fr) 132px;
  gap: 16px;
  padding: 14px 18px;
}

#leo_app .ap-watchlist__poster {
  width: 70px;
  height: 99px;
  border-radius: 11px;
}

#leo_app .ap-watchlist__tags {
  margin-bottom: 3px;
}

#leo_app .ap-watchlist__tag {
  font-size: 9px;
  min-height: 21px;
  padding: 2px 8px;
}

#leo_app .ap-watchlist__anime-title {
  font-size: 14px;
  line-height: 1.65;
}

#leo_app .ap-watchlist__progress {
  margin-top: 10px;
  max-width: 460px;
}

#leo_app .ap-watchlist__progress-track {
  height: 8px;
  position: relative;
  overflow: hidden;
}

#leo_app .ap-watchlist__progress-track span {
  position: relative;
  transform-origin: left center;
  animation: ap-wl-progress-in 0.9s cubic-bezier(0.18, 0.75, 0.25, 1) both;
  transition: width 0.75s cubic-bezier(0.18, 0.75, 0.25, 1);
  box-shadow: 0 0 10px rgba(246, 165, 4, 0.12);
}

#leo_app .ap-watchlist__progress-track span:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
  transform: translateX(-150%);
  animation: ap-wl-progress-shine 3.4s ease-in-out infinite;
}

#leo_app .ap-watchlist__card.is-progress-updated .ap-watchlist__progress-track {
  box-shadow: 0 0 0 4px rgba(246, 165, 4, 0.13);
}

#leo_app .ap-watchlist__quick-stats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

#leo_app .ap-watchlist__quick-stat {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 7px;
  background: var(--wl-canvas);
  color: var(--wl-muted);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 750;
}

#leo_app .ap-watchlist__quick-stat svg {
  width: 12px;
  height: 12px;
  color: #eaa327;
  flex: none;
}

#leo_app .ap-watchlist__quick-stat strong {
  color: var(--wl-text);
  font-size: 10px;
  font-weight: 900;
}

#leo_app .ap-watchlist__quick-stat small {
  font-size: 9px;
  font-weight: 600;
}

#leo_app .ap-watchlist__manage {
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

#leo_app .ap-watchlist__status > span {
  font-size: 10px;
  padding: 5px 9px;
}

#leo_app .ap-watchlist__actions {
  width: auto;
  gap: 5px;
}

#leo_app .ap-watchlist__edit,
#leo_app .ap-watchlist__delete {
  min-height: 32px;
  border-radius: 8px;
  font-size: 10px;
}

#leo_app .ap-watchlist__edit {
  flex: none;
  padding: 0 10px;
}

#leo_app .ap-watchlist__delete {
  width: 33px;
  padding: 0;
}

#leo_app .ap-watchlist__actions svg {
  width: 13px;
  height: 13px;
}

@keyframes ap-wl-progress-in {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes ap-wl-progress-shine {
  0%, 35% {
    transform: translateX(-150%);
  }

  75%, 100% {
    transform: translateX(150%);
  }
}

@media (max-width: 1120px) {
  #leo_app .ap-watchlist__card {
    grid-template-columns: 70px minmax(0, 1fr) 130px;
    gap: 12px;
  }

  #leo_app .ap-watchlist__manage {
    grid-column: auto;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    padding-top: 0;
  }

  #leo_app .ap-watchlist__actions {
    min-width: 0;
  }
}

@media (max-width: 650px) {
  #leo_app .ap-watchlist__card {
    grid-template-columns: 65px minmax(0, 1fr);
    padding: 12px;
    gap: 11px;
    position: relative;
  }

  #leo_app .ap-watchlist__poster {
    width: 65px;
    height: 95px;
  }

  #leo_app .ap-watchlist__info {
    grid-column: 2;
    align-self: start;
  }

  #leo_app .ap-watchlist__quick-stats {
    gap: 5px;
  }

  #leo_app .ap-watchlist__quick-stat {
    padding: 4px 6px;
    font-size: 9px;
  }

  #leo_app .ap-watchlist__manage {
    grid-column: 1/-1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 9px;
    border-top: 1px solid var(--wl-line);
  }

  #leo_app .ap-watchlist__actions {
    width: auto;
  }

  #leo_app .ap-watchlist__intro {
    margin-bottom: 12px;
  }

  #leo_app .ap-watchlist__section-head {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-watchlist__progress-track span,
  #leo_app .ap-watchlist__progress-track span:after {
    animation: none !important;
    transition: none !important;
  }
}

/* AniPlus 2026: compact RTL ticket creation and accessible preference cards. */

#leo_app .ap-ticket-create {
  max-width: 900px;
}

#leo_app .ap-ticket-create__layout {
  display: block;
}

#leo_app .ap-ticket-create__aside {
  display: none;
}

#leo_app .ap-ticket-create__header {
  margin-bottom: 18px;
}

#leo_app .ap-ticket-create__header h1 {
  margin: 0;
  color: var(--title);
}

#leo_app .ap-ticket-create__back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#leo_app .ap-ticket-create__back svg {
  width: 16px;
  height: 16px;
}

#leo_app .ap-ticket-create__form {
  padding: clamp(18px, 3vw, 30px);
}

#leo_app .ap-ticket-create__department {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

#leo_app .ap-ticket-create__department legend {
  float: none;
  width: 100%;
  font-size: 12px;
  font-weight: 850;
  color: var(--title);
  margin-bottom: 11px;
  padding: 0;
}

#leo_app .ap-ticket-create__department legend b {
  color: #d68b00;
}

#leo_app .ap-ticket-create__departments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#leo_app .ap-ticket-create__department-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  background: var(--subtle);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

#leo_app .ap-ticket-create__department-option:hover {
  border-color: #efbd63;
}

#leo_app .ap-ticket-create__department-option:has(input:checked) {
  border-color: #f1b847;
  background: rgba(246, 165, 4, 0.08);
  box-shadow: 0 0 0 2px rgba(246, 165, 4, 0.1);
}

#leo_app .ap-ticket-create__department-option:focus-within {
  outline: 2px solid #f6a504;
  outline-offset: 3px;
}

#leo_app .ap-ticket-create__department-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#leo_app .ap-ticket-create__department-icon {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: rgba(246, 165, 4, 0.12);
  color: #ce8b12;
}

#leo_app .ap-ticket-create__department-icon svg {
  height: 23px;
  width: 23px;
}

#leo_app .ap-ticket-create__department-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#leo_app .ap-ticket-create__department-copy strong {
  font-size: 13px;
  font-weight: 900;
  color: var(--title);
}

#leo_app .ap-ticket-create__department-copy small {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}

#leo_app .ap-ticket-create__selection-mark {
  display: grid;
  place-items: center;
  margin-right: auto;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
  background: var(--surface);
}

#leo_app .ap-ticket-create__selection-mark svg {
  width: 13px;
  height: 13px;
}

#leo_app .ap-ticket-create__department-option:has(input:checked) .ap-ticket-create__selection-mark {
  background: #ecaa25;
  border-color: #ecaa25;
  color: #fff;
}

#leo_app .ap-ticket-create__attachment-action {
  margin-right: auto;
  flex: none;
  font-size: 10px;
  font-weight: 850;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--title);
}

#leo_app .ap-ticket-create__attachment-icon svg {
  width: 20px;
  height: 20px;
}

#leo_app .ap-ticket-create__attachment-copy {
  min-width: 0;
}

#leo_app .ap-ticket-create__actions button {
  display: flex;
  align-items: center;
  gap: 10px;
}

#leo_app .ap-ticket-create__actions button svg {
  width: 16px;
  height: 16px;
}

#leo_app .ap-ticket-create__department > small:not(.hidden) {
  display: block;
  margin-top: 7px;
  color: #d63f4d;
  font-size: 11px;
}

#leo_app .ap-preferences__heading {
  margin-bottom: 17px;
}

#leo_app .ap-preferences__heading h1 {
  margin: 0;
}

#leo_app .ap-preferences__icon svg {
  width: 20px;
  height: 20px;
}

#leo_app .ap-preferences__option-group + .ap-preferences__option-group {
  margin-top: 22px;
}

#leo_app .ap-preferences__option-group h3 {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ap-title);
}

#leo_app .ap-preferences__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#leo_app .ap-preferences__choices--quality {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#leo_app .ap-preferences__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  border: 1.5px solid var(--ap-line);
  border-radius: 13px;
  background: var(--ap-subtle);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

#leo_app .ap-preferences__choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#leo_app .ap-preferences__choice:hover {
  border-color: #eaba5e;
}

#leo_app .ap-preferences__choice:has(input:checked) {
  background: rgba(246, 165, 4, 0.08);
  border-color: #e9ad3b;
  box-shadow: 0 0 0 2px rgba(246, 165, 4, 0.09);
}

#leo_app .ap-preferences__choice:focus-within {
  outline: 2px solid #f6a504;
  outline-offset: 2px;
}

#leo_app .ap-preferences__choice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ap-surface);
  color: #c48a1b;
  border: 1px solid var(--ap-line);
}

#leo_app .ap-preferences__choice-icon svg {
  width: 20px;
  height: 20px;
}

#leo_app .ap-preferences__choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#leo_app .ap-preferences__choice-copy strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--ap-title);
}

#leo_app .ap-preferences__choice-copy small {
  font-size: 10px;
  color: var(--ap-muted);
  line-height: 1.5;
}

#leo_app .ap-preferences__choice-tick {
  margin-right: auto;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 1px solid var(--ap-line);
  border-radius: 50%;
  color: transparent;
  background: var(--ap-surface);
}

#leo_app .ap-preferences__choice-tick svg {
  width: 12px;
  height: 12px;
}

#leo_app .ap-preferences__choice:has(input:checked) .ap-preferences__choice-tick {
  background: #e8a320;
  border-color: #e8a320;
  color: white;
}

#leo_app .ap-preferences__topics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#leo_app .ap-preferences__topic {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 62px;
  gap: 11px;
  padding: 10px 12px;
  border: 1.5px solid var(--ap-line);
  border-radius: 13px;
  background: var(--ap-subtle);
  font-size: 11px;
  line-height: 1.6;
  font-weight: 800;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

#leo_app .ap-preferences__topic input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#leo_app .ap-preferences__topic:hover {
  border-color: #eaba5e;
}

#leo_app .ap-preferences__topic:focus-within {
  outline: 2px solid #f6a504;
  outline-offset: 2px;
}

#leo_app .ap-preferences__topic:has(input:checked) {
  background: rgba(246, 165, 4, 0.07);
  border-color: #e9ad3b;
  box-shadow: 0 0 0 2px rgba(246, 165, 4, 0.08);
}

#leo_app .ap-preferences__topic-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  width: 36px;
  border-radius: 10px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  color: #c48a1b;
}

#leo_app .ap-preferences__topic-icon svg {
  width: 19px;
  height: 19px;
}

#leo_app .ap-preferences__topic-label {
  flex: 1;
  min-width: 0;
}

#leo_app .ap-preferences__topic-check {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: auto;
  border: 1.5px solid var(--ap-line);
  border-radius: 6px;
  background: var(--ap-surface);
  color: transparent;
}

#leo_app .ap-preferences__topic-check svg {
  height: 13px;
  width: 13px;
}

#leo_app .ap-preferences__topic:has(input:checked) .ap-preferences__topic-check {
  background: #edaa23;
  border-color: #edaa23;
  color: #fff;
}

body.dark #leo_app .ap-ticket-create__department-option:has(input:checked),
body.dark #leo_app .ap-preferences__choice:has(input:checked),
body.dark #leo_app .ap-preferences__topic:has(input:checked) {
  background: #392d1a;
  border-color: #b3822f;
}

body.dark #leo_app .ap-ticket-create__department-icon {
  background: #43351e;
  color: #f2bd5d;
}

@media (max-width: 700px) {
  #leo_app .ap-preferences__choices--quality {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leo_app .ap-preferences__topics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  #leo_app .ap-ticket-create__departments,
  #leo_app .ap-preferences__choices,
  #leo_app .ap-preferences__choices--quality,
  #leo_app .ap-preferences__topics-grid {
    grid-template-columns: 1fr;
  }

  #leo_app .ap-ticket-create__attachment {
    flex-wrap: wrap;
  }

  #leo_app .ap-ticket-create__attachment-action {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-ticket-create__department-option,
  #leo_app .ap-preferences__choice,
  #leo_app .ap-preferences__topic {
    transition: none !important;
  }
}

body.dark .anime-detail-page {
  --anime-card-bg: #111827;
  --anime-border-color: rgba(148, 163, 184, 0.22);
  --anime-text-primary: #f8fafc;
  --anime-text-secondary: #a8b5c7;
  --anime-muted-bg: #172033;
}

body.dark .anime-detail-page .anime-tabs-card .tabs-nav-container,
body.dark .anime-detail-page .anime-tabs-card .tab-content,
body.dark .anime-detail-page .anime-info-pane .anime-synopsis-card,
body.dark .anime-detail-page .anime-info-pane .anime-info-overview,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs,
body.dark .anime-detail-page .anime-relation-rail,
body.dark .anime-detail-page .anime-poster-card,
body.dark .anime-detail-page .anime-scores-card {
  border-color: rgba(148, 163, 184, 0.2);
  background: #111827;
  box-shadow: none;
}

/* Top-level navigation: information, downloads, related anime, characters,
 * and comments must remain readable before a tab is selected. */

body.dark .anime-detail-page .anime-tabs-card .tab-link {
  color: #cbd5e1;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link:hover,
body.dark .anime-detail-page .anime-tabs-card .tab-link:focus-visible {
  background: #1e293b;
  color: #f8fafc;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active {
  background: #f59e0b;
  color: #111827;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-count {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active .tab-count {
  background: rgba(15, 23, 42, 0.2);
  color: #111827;
}

/* Metadata and quality badges in the information tab. */

body.dark .anime-detail-page .anime-sidebar-update,
body.dark .anime-detail-page .anime-info-pane .anime-description-list,
body.dark .anime-detail-page .anime-info-pane .anime-production-list,
body.dark .anime-detail-page .anime-info-pane .anime-quick-facts > div,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__list,
body.dark .anime-detail-page .anime-tracker-progress,
body.dark .anime-detail-page .anime-scores-card .rating-item,
body.dark .anime-detail-page .anime-relation-rail__item {
  border-color: rgba(148, 163, 184, 0.18);
  background: #172033;
}

body.dark .anime-detail-page .anime-sidebar-update__label,
body.dark .anime-detail-page .anime-tracker-heading p,
body.dark .anime-detail-page .rating-count,
body.dark .anime-detail-page .anime-relation-rail__header p {
  color: #a8b5c7;
}

body.dark .anime-detail-page .anime-sidebar-update strong,
body.dark .anime-detail-page .anime-sidebar-update--quality,
body.dark .anime-detail-page .anime-tracker-heading h3,
body.dark .anime-detail-page .rating-score .value,
body.dark .anime-detail-page .rating-item header b,
body.dark .anime-detail-page .anime-relation-rail__header h2,
body.dark .anime-detail-page .anime-relation-rail__link {
  color: #f8fafc;
}

body.dark .anime-detail-page .anime-poster-timer,
body.dark .anime-detail-page .anime-synopsis-card .synopsis-toggle-button {
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

/* The quality value sits inside an already-dark status card, so it does not
 * need the amber surface used by standalone controls. */

body.dark .anime-detail-page .anime-sidebar-update__quality {
  border-color: rgba(251, 191, 36, 0.38);
  background: transparent;
  color: #fde68a;
}

/* Tags, keywords, and relation labels use a restrained dark chip surface. */

body.dark .anime-detail-page .anime-genre-chips a,
body.dark .anime-detail-page .anime-other-names-trigger,
body.dark .anime-detail-page .anime-relation-rail__total {
  border-color: rgba(148, 163, 184, 0.22);
  background: #1e293b;
  color: #e2e8f0;
}

body.dark .anime-detail-page .anime-genre-chips a:hover,
body.dark .anime-detail-page .anime-other-names-trigger:hover,
body.dark .anime-detail-page .anime-relation-rail__link:hover {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-relation-rail__badge,
body.dark .anime-detail-page .anime-info-section-heading__icon {
  background: rgba(146, 64, 14, 0.3);
  color: #fde68a;
}

/* The tracker stays distinct from the ratings below it without reverting to
 * the page's light card color. */

body.dark .anime-detail-page .anime-tracker-heading,
body.dark .anime-detail-page .anime-tracker-progress__tabs {
  border-color: rgba(148, 163, 184, 0.18);
}

body.dark .anime-detail-page .anime-tracker-heading > span,
body.dark .anime-detail-page .anime-tracker-heading__count,
body.dark .anime-detail-page .anime-tracker-rating,
body.dark .anime-detail-page .anime-tracker-progress__tab,
body.dark .anime-detail-page .anime-tracker-progress__footer button {
  border-color: rgba(148, 163, 184, 0.2);
  background: #1e293b;
  color: #e2e8f0;
}

body.dark .anime-detail-page .anime-tracker-progress__tab.is-active {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #111827;
}

body.dark .anime-detail-page .anime-tracker-progress__bar {
  background: #334155;
}

/* Keep the score cards, title dialog, technical metadata, and download tab
 * legible when the page switches themes. These elements use their own compact
 * surfaces and therefore cannot rely on the page-level text variables alone. */

body.dark .anime-detail-page .rating-item__source {
  background: rgba(146, 64, 14, 0.34);
  color: #fde68a;
}

body.dark .anime-detail-page .rating-item--mal .rating-item__source {
  background: rgba(30, 64, 175, 0.34);
  color: #bfdbfe;
}

body.dark .anime-detail-page .rating-score strong,
body.dark .anime-detail-page .rating-item footer b {
  color: #f8fafc;
}

body.dark .anime-detail-page .rating-score span,
body.dark .anime-detail-page .rating-item footer {
  color: #a8b5c7;
}

body.dark .anime-detail-page .rating-score em {
  border-color: rgba(251, 191, 36, 0.36);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

body.dark .anime-detail-page .rating-item--mal .rating-score em {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(30, 64, 175, 0.28);
  color: #bfdbfe;
}

/* MAL is an external source, but its card must keep the same dark surface as
 * the rest of the score panel.  This is especially important when MAL has no
 * score yet: the em dash, "بدون امتیاز", and the zero-vote count remain
 * readable rather than looking like a light-mode card. */

body.dark .anime-detail-page .rating-item--mal {
  border-color: rgba(96, 165, 250, 0.28);
  background: linear-gradient(145deg, #172033, #131c2c);
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.04);
}

body.dark .anime-detail-page .rating-item--mal header b,
body.dark .anime-detail-page .rating-item--mal .rating-score strong,
body.dark .anime-detail-page .rating-item--mal footer b {
  color: #f8fafc;
}

body.dark .anime-detail-page .rating-item--mal .rating-score span,
body.dark .anime-detail-page .rating-item--mal footer {
  color: #a8b5c7;
}

body.dark .anime-detail-page .rating-item--mal .rating-item__track {
  background: #26364c;
}

body.dark .anime-detail-page .rating-item__track {
  background: #334155;
}

body.dark .anime-detail-page .anime-technical-specs__item dt,
body.dark .anime-detail-page .anime-technical-specs__item dd,
body.dark .anime-detail-page .anime-producers__preview {
  color: #e2e8f0;
}

body.dark .anime-detail-page .anime-technical-specs__secondary,
body.dark .anime-detail-page .anime-quick-metric__label,
body.dark .anime-detail-page .anime-producers__drawer-label {
  color: #a8b5c7;
}

/* Tags and keywords use explicit light surfaces outside the information tab.
 * Give the complete card and its chips dark-mode surfaces rather than relying
 * on page variables that do not override those values. */

body.dark .anime-detail-page .anime-bottom-tags {
  border-color: rgba(148, 163, 184, 0.2);
  background: #111827;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-bottom-tags .tags-title {
  color: #f8fafc;
}

body.dark .anime-detail-page .anime-bottom-tags .tags-title::before {
  background: rgba(146, 64, 14, 0.34);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-bottom-tags .anime-chip {
  border-color: rgba(148, 163, 184, 0.22);
  background: #1e293b;
  color: #e2e8f0;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-bottom-tags .anime-chip:hover {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

body.dark .anime-detail-page .anime-technical-specs__item dd a,
body.dark .anime-detail-page .anime-producers__preview a {
  color: #fcd34d;
}

body.dark .anime-detail-page .anime-technical-specs__item dd a:hover,
body.dark .anime-detail-page .anime-producers__preview a:hover {
  color: #fde68a;
}

body.dark .anime-detail-modal {
  background: rgba(2, 6, 23, 0.76);
}

body.dark .anime-detail-modal__dialog {
  border-color: rgba(148, 163, 184, 0.24);
  background: #111827;
  color: #e2e8f0;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.64);
}

body.dark .anime-detail-modal__header {
  border-color: rgba(148, 163, 184, 0.18);
  background: #172033;
}

body.dark .anime-detail-modal__header h4,
body.dark .anime-other-names-list strong,
body.dark .anime-other-names-list__value {
  color: #f8fafc;
}

body.dark .anime-detail-modal__header p {
  color: #a8b5c7;
}

body.dark .anime-detail-modal__close {
  background: #1e293b;
  color: #cbd5e1;
}

body.dark .anime-detail-modal__close:hover {
  background: #334155;
  color: #f8fafc;
}

body.dark .anime-detail-modal__handle {
  background: #64748b;
}

body.dark .anime-other-names-list {
  color: #e2e8f0;
}

body.dark .anime-other-names-list > div {
  border-color: rgba(148, 163, 184, 0.2);
  background: #172033;
}

/* Shared finishing touches for the AniPlus seasonal browser and homepage. */

.page-season .season-filter__genre-columns {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.page-season .season-filter__option {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid #e7e9ef;
  border-radius: 12px;
  background: #fafbfe;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.page-season .season-filter__option:hover {
  border-color: #f3a303;
  background: #fff9eb;
  transform: translateY(-1px);
}

.page-season .season-filter__option:has(input:checked) {
  border-color: #f3a303;
  background: #fff8e7;
}

.page-season .season-filter__option:has(input:focus-visible) {
  outline: 2px solid #f3a303;
  outline-offset: 2px;
}

.page-season .season-filter__genre-icon {
  font-size: 20px;
  flex: 0 0 22px;
  line-height: 1;
}

.page-season .season-filter__option-label {
  min-width: 0;
  line-height: 1.5;
}

.page-season .season-filter__option-box {
  flex: 0 0 20px;
  margin-right: auto;
  order: 3;
}

.page-season .season-filter__pill-group {
  gap: 9px;
}

.page-season .season-filter__pill {
  cursor: pointer;
}

.page-season .season-filter__pill > .season-filter__pill-content {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.page-season .season-filter__pill .season-filter__pill-content > span:not(.season-filter__pill-icon) {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  pointer-events: none;
}

.page-season .season-filter__pill .season-filter__pill-content > .season-filter__pill-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d99008;
  font-size: 20px;
  line-height: 20px;
}

.page-season .season-filter__pill:hover > .season-filter__pill-content {
  border-color: #f3a303;
  transform: translateY(-1px);
}

.page-season .season-filter__pill input:checked + .season-filter__pill-content {
  border-color: #e49c00;
  background: #f3a303;
  color: #fff;
  box-shadow: 0 4px 12px rgba(243, 163, 3, 0.2);
}

.page-season .season-filter__pill input:checked + .season-filter__pill-content > .season-filter__pill-icon {
  color: #fff;
}

.page-season .season-filter__pill input:focus-visible + .season-filter__pill-content {
  outline: 2px solid #f3a303;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .page-season .season-filter__genre-columns {
    -moz-column-count: 2;
         column-count: 2;
  }

  .page-season .season-filter__pill-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-season .season-filter__pill > .season-filter__pill-content {
    width: 100%;
    padding: 9px 7px;
  }
}

@media (max-width: 420px) {
  .page-season .season-filter__genre-columns {
    -moz-column-count: 1;
         column-count: 1;
  }
}

.dark .page-season .season-filter__option {
  background: #1a273a;
  border-color: rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}

.dark .page-season .season-filter__option:hover,
.dark .page-season .season-filter__option:has(input:checked) {
  background: #302a1f;
  border-color: #f3a303;
}

.dark .page-season .season-filter__pill > .season-filter__pill-content {
  background: #1c2a3f;
  border-color: rgba(148, 163, 184, 0.23);
  color: #e2e8f0;
}

.dark .page-season .season-filter__pill .season-filter__pill-content > .season-filter__pill-icon {
  color: #fbd36b;
}

.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content {
  background: #f3a303;
  color: #1a2231;
}

.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content > .season-filter__pill-icon {
  color: #1a2231;
}

.box-card .section-header__title .ap-home-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  margin-left: 11px;
  border: 1px solid rgba(243, 163, 3, 0.24);
  border-radius: 12px;
  color: #dd9100;
  background: rgba(243, 163, 3, 0.1);
  vertical-align: middle;
}

.box-card .section-header__title .ap-home-heading-icon .material-icons {
  font-size: 22px;
}

.dark .box-card .section-header__title .ap-home-heading-icon {
  background: rgba(251, 191, 36, 0.13);
  color: #fbd36b;
  border-color: rgba(251, 191, 36, 0.24);
}

/* Only the shared collapsible SEO card is reduced; article body content stays intact. */

.home-seo-content.box-dic {
  margin: 20px 0 12px;
}

.home-seo-content.box-dic > .body {
  padding: clamp(15px, 2.5vw, 23px);
  border-radius: 14px;
  box-shadow: 0 7px 25px rgba(15, 23, 42, 0.045);
  line-height: 1.8;
}

.home-seo-content.box-dic .seo-content-wrapper {
  font-size: 13px;
}

.home-seo-content.box-dic .seo-content-wrapper h1 {
  font-size: 19px;
  margin-bottom: 14px;
  padding-bottom: 9px;
}

.home-seo-content.box-dic .seo-content-wrapper h2,
.home-seo-content.box-dic .seo-content-wrapper h3,
.home-seo-content.box-dic .seo-content-wrapper h4 {
  font-size: 16px;
  margin: 16px 0 9px;
  padding-right: 10px;
}

.home-seo-content.box-dic .seo-content-wrapper p {
  font-size: 13px;
  line-height: 1.85;
  margin-bottom: 10px;
}

.home-seo-content.box-dic .seo-content-wrapper ul,
.home-seo-content.box-dic .seo-content-wrapper ol {
  margin: 10px 0;
}

.home-seo-content.box-dic .seo-content-wrapper li {
  font-size: 13px;
  margin-bottom: 6px;
  padding-right: 27px;
}

.home-seo-content.box-dic .seo-content-wrapper li::before {
  font-size: 14px;
  top: 2px;
}

.home-seo-content .seo-content-wrapper.is-collapsed {
  max-height: 136px;
}

.home-seo-content .seo-content-wrapper.is-expanded {
  max-height: none;
}

.home-seo-content .seo-gradient-overlay {
  height: 62px;
}

.home-seo-content .seo-toggle-wrap {
  padding-top: 0;
}

.home-seo-content .seo-toggle-btn {
  margin-top: 8px;
  padding: 7px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .page-season .season-filter__pill > .season-filter__pill-content,
  .page-season .season-filter__option {
    transition: none;
  }
}

/*
 * AniPlus 2026 visual system
 * One source of truth for dark surfaces on public pages, profiles and the user panel.
 * Compiled into front/app.css via resources/assets/app.scss.
 */

:root {
  --ani-accent: #eca108;
  --ani-accent-strong: #c98300;
  --ani-radius: 18px;
}

body.dark {
  /* Neutral, layered dark surfaces. Warm accents remain the only strong color. */
  --ani-canvas: #101113;
  --ani-surface: #1b1d20;
  --ani-surface-raised: #25272b;
  --ani-surface-hover: #303237;
  --ani-border: #383b40;
  --ani-text: #f5f5f4;
  --ani-text-soft: #d8d9dc;
  --ani-muted: #aaadb5;
  --ani-accent: #f7b842;
  --ani-accent-strong: #ffd07a;
  --ani-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  --ap-blue: var(--ani-accent);
  --ap-tag-quality-bg: #303237;
  --ap-tag-quality-text: #d8d9dc;
  --ap-tag-hardsub-green-bg: #19372e;
  --ap-tag-hardsub-green-text: #9ce2bc;
  --ap-background-color: var(--ani-canvas);
  --ap-card-background: var(--ani-surface);
  --ap-text-color: var(--ani-text-soft);
  --ap-text-muted: var(--ani-muted);
  --ap-border-color: var(--ani-border);
  --ap-section-primary: var(--ani-accent);
  --ap-section-title-color: var(--ani-text);
  --ap-section-button-hover-text: #111b28;
  --bg: var(--ani-canvas);
  --surface: var(--ani-surface);
  --soft: var(--ani-surface-raised);
  --line: var(--ani-border);
  --text: var(--ani-text);
  --muted: var(--ani-muted);
  background: var(--ani-canvas);
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark :is(input, textarea, select) {
  color-scheme: dark;
}

body.dark .box-card .section-header,
body.dark .box-card .section-header__title {
  color: var(--ani-text);
  border-color: var(--ani-border);
}

body.dark .box-card .section-header__button {
  color: var(--ani-accent);
}

body.dark :is(.main-header, .mobile-header, .main-nav, .notification-panel, .search-overlay .search-body) {
  --bg: var(--ani-surface);
  --surface: var(--ani-surface);
  --line: var(--ani-border);
  --text: var(--ani-text);
  --muted: var(--ani-muted);
  border-color: var(--ani-border);
}

body.dark .main-header,
body.dark .mobile-header {
  background-color: var(--ani-surface);
}

body.dark .box-card .post-anime,
body.dark .box-card .post-anime a {
  color: var(--ani-text-soft);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, .uk-button-default) {
  background-color: var(--ani-surface-raised);
  color: var(--ani-text);
  border-color: var(--ani-border);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea):focus {
  border-color: var(--ani-accent);
  outline-color: var(--ani-accent);
}

body.dark :is(.uk-modal-dialog, .uk-dropdown, .uk-card-default, .uk-offcanvas-bar) {
  background-color: var(--ani-surface);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark :is(.uk-modal-title, .uk-card-title, .uk-heading-small) {
  color: var(--ani-text);
}

body.dark a:focus-visible,
body.dark button:focus-visible,
body.dark summary:focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

/* Public profile: same surfaces and typographic contrast as the main site. */

body.dark .user-profile-page {
  --profile-bg: var(--ani-canvas);
  --profile-card: var(--ani-surface);
  --profile-raised: var(--ani-surface-raised);
  --profile-border: var(--ani-border);
  --profile-text: var(--ani-text);
  --profile-muted: var(--ani-muted);
  color: var(--ani-text-soft);
}

body.dark .user-profile-page .user-profile-container > .bg-white,
body.dark .user-profile-page .bg-white,
body.dark .user-profile-page .resourceFriends > .bg-white,
body.dark .user-profile-page .resourceBookmark .bg-white {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  box-shadow: var(--ani-shadow) !important;
}

body.dark .user-profile-page :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100) {
  background: var(--ani-surface-raised) !important;
}

body.dark .user-profile-page :is(.text-slate-800, .text-gray-900, .text-gray-800, .text-slate-700) {
  color: var(--ani-text) !important;
}

body.dark .user-profile-page :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) {
  color: var(--ani-muted) !important;
}

body.dark .user-profile-page .user-profile-tabs {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border);
}

body.dark .user-profile-page .user-profile-tab.uk-active > a {
  background: var(--ani-surface-hover) !important;
  color: var(--ani-accent-strong) !important;
  border-color: var(--ani-border) !important;
  box-shadow: none !important;
}

body.dark .user-profile-page .resourceBookmark :is(input[type=search], .animo-pagination__jump-input),
body.dark .user-profile-page .favorite-anime-showcase__editor input {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text) !important;
}

body.dark .user-profile-page .resourceBookmark .absolute.bg-white,
body.dark .user-profile-page .resourceBookmark .absolute.left-0 {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

/* Compact, deliberate favorite anime showcase; independent of Tailwind availability. */

.user-profile-page .favorite-anime-showcase {
  padding: clamp(16px, 2.4vw, 26px);
  border: 1px solid #e8edf3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 9px 30px rgba(25, 40, 62, 0.045);
}

.user-profile-page .favorite-anime-showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #edf0f5;
}

.user-profile-page .favorite-anime-showcase__heading {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: #202c3e;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.7;
}

.user-profile-page .favorite-anime-showcase__heading::before {
  content: "";
  flex: none;
  width: 4px;
  height: 19px;
  background: var(--ani-accent);
  border-radius: 6px;
}

.user-profile-page .favorite-anime-showcase__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: #8290a4;
}

.user-profile-page .favorite-anime-showcase__grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.5vw, 18px) !important;
}

.user-profile-page .favorite-anime-showcase__item {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  transition: transform 0.2s ease;
}

.user-profile-page .favorite-anime-showcase__item:hover {
  transform: translateY(-4px);
}

.user-profile-page .favorite-anime-showcase__poster {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  background: #ecf0f6;
  border: 1px solid #e8edf3;
  border-radius: 13px;
}

.user-profile-page .favorite-anime-showcase__poster img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.user-profile-page .favorite-anime-showcase__item:hover img {
  transform: scale(1.045);
}

.user-profile-page .favorite-anime-showcase__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 9px 2px 0;
  line-height: 1.65;
  min-height: 2.9em;
  font-size: 12px;
  font-weight: 750;
  color: #3b495f;
  overflow-wrap: anywhere;
}

.user-profile-page .favorite-anime-showcase__empty {
  padding: 30px 12px;
  text-align: center;
  color: #8391a5;
  font-size: 13px;
  border: 1px dashed #dfe5ee;
  border-radius: 14px;
  background: #fafbfe;
}

.user-profile-page .favorite-anime-showcase__editor {
  margin-top: 18px;
  border: 1px solid #e4e9f1;
  border-radius: 14px;
  padding: 14px;
  background: #f9fafc;
}

.user-profile-page .favorite-anime-showcase__editor > summary {
  cursor: pointer;
  color: #a66b00;
  font-weight: 800;
  font-size: 12px;
}

.user-profile-page .favorite-anime-showcase__editor[open] > summary {
  margin-bottom: 14px;
}

body.dark .user-profile-page .favorite-anime-showcase {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  box-shadow: var(--ani-shadow) !important;
}

body.dark .user-profile-page .favorite-anime-showcase__head {
  border-color: var(--ani-border);
}

body.dark .user-profile-page .favorite-anime-showcase__heading {
  color: var(--ani-text);
}

body.dark .user-profile-page .favorite-anime-showcase__hint,
body.dark .user-profile-page .favorite-anime-showcase__title {
  color: var(--ani-text-soft);
}

body.dark .user-profile-page .favorite-anime-showcase__poster {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .user-profile-page .favorite-anime-showcase__empty,
body.dark .user-profile-page .favorite-anime-showcase__editor {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-muted);
}

body.dark .user-profile-page .favorite-anime-showcase__editor > summary {
  color: var(--ani-accent-strong);
}

@media (max-width: 1024px) {
  .user-profile-page .favorite-anime-showcase__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .user-profile-page .favorite-anime-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .user-profile-page .favorite-anime-showcase__heading {
    font-size: 14px;
  }

  .user-profile-page .favorite-anime-showcase__hint {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .user-profile-page .favorite-anime-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* User dashboard renewal hero and shared panel visual tokens. */

#leo_app .dashboard-buy--compact {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #e5eaf1;
  border-radius: 21px;
  background: linear-gradient(115deg, #fff 50%, #fff7e6);
  box-shadow: 0 12px 34px rgba(29, 42, 64, 0.06);
  padding: 24px 28px;
}

#leo_app .dashboard-buy--compact::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--ani-accent);
}

#leo_app .dashboard-buy--compact .dashboard-buy__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  position: relative;
  z-index: 1;
}

#leo_app .dashboard-buy--compact .dashboard-buy__copy {
  flex: 1 1 260px;
  min-width: 0;
}

#leo_app .dashboard-buy--compact .dashboard-buy__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #af780f;
  margin-bottom: 7px;
}

#leo_app .dashboard-buy--compact .dashboard-buy__title {
  display: block;
  font-size: clamp(17px, 1.65vw, 21px);
  font-weight: 900;
  line-height: 1.55;
  color: #18273b;
  margin: 0;
}

#leo_app .dashboard-buy--compact .dashboard-buy__subtitle {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.9;
  color: #697991;
}

#leo_app .dashboard-buy--compact .dashboard-buy__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 45px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 0;
  background: #eea511;
  color: #1c2431;
  font-weight: 850;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(221, 147, 10, 0.16);
  text-decoration: none;
  cursor: pointer;
}

#leo_app .dashboard-buy--compact .dashboard-buy__action:not(.disabled):hover {
  background: #f6b733;
  color: #172032;
}

#leo_app .dashboard-buy--compact .dashboard-buy__action.disabled {
  cursor: not-allowed;
  box-shadow: none;
  background: #e7eaf0;
  color: #768395;
}

#leo_app .dashboard-buy--compact .dashboard-buy__button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#leo_app .dashboard-buy--compact .dashboard-buy__button-content svg {
  width: 19px;
  height: 19px;
}

body.dark #leo_app {
  --panel-canvas: var(--ani-canvas);
  --panel-sidebar: var(--ani-surface);
  --panel-card: var(--ani-surface);
  --panel-raised: var(--ani-surface-raised);
  --panel-hover: var(--ani-surface-hover);
  --panel-stroke: var(--ani-border);
  --panel-stroke-strong: #43546b;
  --panel-title: var(--ani-text);
  --panel-text: var(--ani-text-soft);
  --panel-muted: var(--ani-muted);
  --panel-accent: var(--ani-accent);
  --dash-surface: var(--ani-surface);
  --dash-bg: var(--ani-surface-raised);
  --dash-border: var(--ani-border);
  --dash-ink: var(--ani-text);
  --dash-muted: var(--ani-muted);
  color: var(--ani-text-soft);
}

body.dark #leo_app.leo-app-shell {
  background: var(--ani-canvas);
}

body.dark #leo_app .leo-sidebar-col,
body.dark #leo_app .leo-sidebar,
body.dark #leo_app .leo-sidebar .sidebar-content,
body.dark #leo_app .leo-mobile-header,
body.dark #leo_app .leo-mobile-nav {
  background: var(--ani-surface);
  border-color: var(--ani-border);
}

body.dark #leo_app .ap-dashboard {
  --dash-surface: var(--ani-surface);
  --dash-bg: var(--ani-surface-raised);
  --dash-border: var(--ani-border);
  --dash-ink: var(--ani-text);
  --dash-muted: var(--ani-muted);
  --dash-shadow: var(--ani-shadow);
}

body.dark #leo_app :is(.ap-requests, .ap-edit-profile) {
  --rq-bg: var(--ani-surface);
  --rq-ink: var(--ani-text);
  --rq-muted: var(--ani-muted);
  --rq-line: var(--ani-border);
  --rq-soft: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.ap-requests__hero, .ap-requests__panel, .ap-edit-profile__card) {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  box-shadow: var(--ani-shadow);
}

body.dark #leo_app :is(.ap-edit-profile__field, .ap-requests__panel .resourceTable th) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app .dashboard-buy--compact {
  background: linear-gradient(115deg, var(--ani-surface) 55%, #2b281f) !important;
  border-color: var(--ani-border) !important;
  box-shadow: var(--ani-shadow);
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__title {
  color: var(--ani-text) !important;
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__subtitle {
  color: var(--ani-muted) !important;
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__eyebrow {
  color: var(--ani-accent-strong);
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__action:not(.disabled) {
  background: var(--ani-accent);
  color: #142030 !important;
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__action.disabled {
  background: var(--ani-surface-hover);
  color: var(--ani-muted);
}

@media (max-width: 640px) {
  #leo_app .dashboard-buy--compact {
    padding: 19px;
    border-radius: 17px;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__action {
    width: 100%;
    min-width: 0;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__copy {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-anime-showcase__item,
  .favorite-anime-showcase__poster img {
    transition: none !important;
  }
}

/* Existing listing, detail, discovery, editorial and community pages inherit
   the same surfaces instead of the former mix of charcoal and navy. */

body.dark :is(.page-anime .box-anime,
.page-schedule .box-anime,
.page-year-index .decade-group,
.studio-directory__card,
.box-search .body,
.box-search-studios,
.anime-single .box-3 .box,
.anime-single .box-1 .anime-single-box-data .body,
.box-select .dropdownBody,
.box-form-l-r .uk-card-default,
.commentBody .bodyComment,
.comments.form) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.page-year-index .decade-header,
.page-schedule .schedule-hub,
.page-schedule .schedule-hub__filters,
.page-season .season-filter__bar,
.page-season .season-filter__modal,
.page-season .season-filter__trigger,
.box-form-l-r .data-left,
.comments.form .spoiler,
.commentBody .bodyComment .data-bottom .comments.form) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__trigger:hover,
body.dark .box-select .dropdownBody .item:hover,
body.dark .page-year-index .decade-header:hover {
  background: var(--ani-surface-hover);
}

body.dark .page-season .season-filter__trigger.is-active {
  background: var(--ani-accent);
  color: #111b28;
}

body.dark :is(.page-anime .box-anime .title,
.page-schedule .box-anime .title,
.anime-single h1,
.anime-single h2,
.page-season .season-filter__title,
.page-schedule .schedule-hub__title,
.page-year-index .decade-header,
.box-form-l-r .data-left .title) {
  color: var(--ani-text);
}

body.dark .commentBody .bodyComment .dic,
body.dark .comments.form textarea,
body.dark .commentBody .bodyComment .reply {
  color: var(--ani-text-soft);
}

body.dark .commentBody .bodyComment span.show-more-comment {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

body.dark .custom-footer {
  background: var(--ani-surface);
  border-top: 1px solid var(--ani-border);
}

body.dark .custom-footer .footer-main-grid {
  border-bottom-color: var(--ani-border);
}

body.dark .custom-footer :is(.footer-intro h3, .footer-links-section h3) {
  color: var(--ani-text);
}

body.dark .custom-footer :is(.footer-intro__content, .footer-links-section a, .footer-copyright) {
  color: var(--ani-muted);
}

body.dark .custom-footer .action-button {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .custom-footer :is(.footer-intro__content a, .footer-links-section a:hover) {
  color: var(--ani-accent-strong);
}

/* Public profile gift entry: first-party AniPlus palette, powered by existing recipient-aware Sharing checkout. */

.user-profile-page .ap-profile-gift-wrap {
  width: 100%;
  min-width: min(100%, 280px);
}

.user-profile-page .ap-profile-gift-wrap .box-sharing {
  display: block;
  width: 100%;
}

.user-profile-page .ap-profile-gift-wrap .sharing-trigger {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: right;
}

.user-profile-page .ap-profile-gift {
  display: flex;
  position: relative;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(115deg, #fff 35%, #fff8e9 100%);
  border: 1px solid #e8e8e8;
  box-shadow: 0 14px 36px rgba(31, 41, 55, 0.06);
  text-align: right;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.user-profile-page .ap-profile-gift--present {
  background: linear-gradient(115deg, #fff 30%, #fff1d5 100%);
}

.user-profile-page .ap-profile-gift:not(.ap-profile-gift--disabled)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #eaa00a;
}

.user-profile-page .sharing-trigger:hover .ap-profile-gift {
  transform: translateY(-2px);
  border-color: #f6d58f;
  box-shadow: 0 17px 38px rgba(31, 41, 55, 0.1);
}

.user-profile-page .ap-profile-gift__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  color: #ae6f00;
  border-radius: 19px;
  background: #fff4d8;
  border: 1px solid #f8dda0;
}

.user-profile-page .ap-profile-gift__icon svg {
  width: 32px;
  height: 32px;
}

.user-profile-page .ap-profile-gift__body {
  flex: 1 1 220px;
  min-width: 0;
  position: relative;
}

.user-profile-page .ap-profile-gift__eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #a96b07;
}

.user-profile-page .ap-profile-gift__title {
  margin: 0;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
  line-height: 1.7;
  color: #1d2939;
}

.user-profile-page .ap-profile-gift__description {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 2;
  font-weight: 550;
  color: #607084;
}

.user-profile-page .ap-profile-gift__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: none;
  border-radius: 13px;
  padding: 13px 19px;
  min-width: 144px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  background: #eca108;
  color: #202b3c !important;
  transition: background 0.2s ease;
}

.user-profile-page .ap-profile-gift__action:hover {
  background: #ffc044;
}

.user-profile-page .ap-profile-gift__action span {
  font-size: 18px;
}

.user-profile-page .ap-profile-gift--disabled {
  opacity: 0.8;
}

.user-profile-page .ap-profile-gift-wrap .sharing-trigger:focus-visible {
  outline: 3px solid #eca108;
  outline-offset: 3px;
}

body.dark .user-profile-page .ap-profile-gift {
  background: linear-gradient(115deg, var(--ani-surface), #30291b);
  border-color: var(--ani-border);
  box-shadow: var(--ani-shadow);
}

body.dark .user-profile-page .ap-profile-gift__icon {
  color: #f6be4b;
  background: #3a301d;
  border-color: #67502d;
}

body.dark .user-profile-page .ap-profile-gift__eyebrow {
  color: #f6be4b;
}

body.dark .user-profile-page .ap-profile-gift__title {
  color: var(--ani-text);
}

body.dark .user-profile-page .ap-profile-gift__description {
  color: var(--ani-muted);
}

@media (max-width: 680px) {
  .user-profile-page .ap-profile-gift {
    gap: 12px;
    padding: 17px;
  }

  .user-profile-page .ap-profile-gift__icon {
    width: 49px;
    height: 49px;
    border-radius: 14px;
  }

  .user-profile-page .ap-profile-gift__icon svg {
    width: 26px;
    height: 26px;
  }

  .user-profile-page .ap-profile-gift__body {
    flex-basis: calc(100% - 70px);
  }

  .user-profile-page .ap-profile-gift__action {
    width: 100%;
  }
}

/* Anime comparison — independent of uncompiled utility classes, supports light and dark. */

.ap-compare {
  --compare-surface: #fff;
  --compare-canvas: #f6f8fb;
  --compare-ink: #1e293b;
  --compare-muted: #78869c;
  --compare-line: #e7ecf3;
  --compare-raised: #f8fafc;
  --compare-gold: #eba10a;
  --compare-blue: #597aa6;
  min-height: 70vh;
  padding: 24px 16px 70px;
  color: var(--compare-ink);
  font-family: Vazirmatn, var(--font-family), sans-serif;
}

.ap-compare__container {
  max-width: 1110px;
  margin: 0 auto;
}

.ap-compare__breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 17px;
  font-size: 12px;
  color: var(--compare-muted);
}

.ap-compare__breadcrumb a {
  color: #ae710b;
  text-decoration: none;
  font-weight: 800;
}

.ap-compare__breadcrumb a:hover {
  color: var(--compare-gold);
}

.ap-compare__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(108deg, #fff9ed, #fff 75%);
  border: 1px solid #f2dfbc;
  border-radius: 26px;
  padding: clamp(22px, 4vw, 45px);
}

.ap-compare__hero-decoration {
  position: absolute;
  left: -70px;
  top: -160px;
  z-index: -1;
  pointer-events: none;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 55px solid rgba(237, 174, 52, 0.07);
}

.ap-compare__section-tag {
  color: #9a6715;
  font-weight: 850;
  font-size: 11px;
  letter-spacing: 0.015em;
}

.ap-compare__hero h1 {
  color: #192639;
  font-size: clamp(23px, 3.1vw, 35px);
  font-weight: 950;
  margin: 11px 0 8px;
  line-height: 1.55;
}

.ap-compare__hero p {
  margin: 0;
  color: #687a90;
  font-size: 13px;
  line-height: 2.1;
  max-width: 590px;
}

.ap-compare__people {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 29px;
}

.ap-compare__person {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #efe9dd;
  border-radius: 15px;
  padding: 8px 14px 8px 20px;
  min-width: min(215px, 100%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}

.ap-compare__person img {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #e7ebf0;
}

.ap-compare__person small {
  display: block;
  font-size: 10px;
  color: #8a96a7;
  margin-bottom: 4px;
}

.ap-compare__person strong {
  display: block;
  color: #22324a;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ap-compare__versus {
  color: #b77b13;
  font-weight: 900;
  font-size: 12px;
  background: #fff1d2;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.ap-compare__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 17px 0 24px;
}

.ap-compare__stat {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 20px 21px;
  background: var(--compare-surface);
  border: 1px solid var(--compare-line);
  border-radius: 19px;
  box-shadow: 0 5px 22px rgba(20, 40, 75, 0.03);
}

.ap-compare__stat-icon {
  width: 41px;
  height: 41px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #ac730b;
  background: #fff6e4;
}

.ap-compare__stat small {
  display: block;
  font-size: 11px;
  color: var(--compare-muted);
  line-height: 1.8;
}

.ap-compare__stat strong {
  display: block;
  margin-top: 2px;
  font-weight: 900;
  font-size: 24px;
  color: var(--compare-ink);
}

.ap-compare__content {
  border: 1px solid var(--compare-line);
  background: var(--compare-surface);
  border-radius: 25px;
  padding: clamp(18px, 3vw, 30px);
}

.ap-compare__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--compare-line);
  margin-bottom: 20px;
}

.ap-compare__toolbar h2 {
  font-size: 20px;
  color: var(--compare-ink);
  font-weight: 900;
  margin: 7px 0 3px;
}

.ap-compare__toolbar p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--compare-muted);
  margin: 0;
}

.ap-compare__search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(100%, 315px);
  padding: 11px 13px;
  border: 1px solid var(--compare-line);
  border-radius: 13px;
  background: var(--compare-raised);
  color: var(--compare-muted);
}

.ap-compare__search:focus-within {
  border-color: var(--compare-gold);
}

.ap-compare__search svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.ap-compare__search input {
  min-width: 0;
  flex: 1;
  width: 100%;
  font: inherit;
  font-size: 12px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--compare-ink);
}

.ap-compare__search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ap-compare__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ap-compare__anime {
  min-width: 0;
  border: 1px solid var(--compare-line);
  background: var(--compare-raised);
  border-radius: 17px;
  padding: clamp(15px, 2vw, 21px);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ap-compare__anime:hover {
  border-color: #efcf91;
  box-shadow: 0 12px 26px rgba(23, 37, 55, 0.045);
}

.ap-compare__anime[hidden],
.ap-compare__no-match[hidden] {
  display: none !important;
}

.ap-compare__anime-top {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--compare-line);
}

.ap-compare__anime-number {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 29px;
  height: 29px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ffefd0;
  color: #9d680e;
  font-size: 11px;
  font-weight: 900;
}

.ap-compare__anime h3 {
  flex: 1 1 145px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 850;
  color: var(--compare-ink);
  margin: 0;
  line-height: 1.9;
}

.ap-compare__difference {
  flex: none;
  background: #f1e9e3;
  color: #9b583e;
  font-size: 10px;
  font-weight: 850;
  padding: 5px 9px;
  border-radius: 9px;
}

.ap-compare__difference--close {
  background: #e8f4ec;
  color: #26824d;
}

.ap-compare__scores {
  display: grid;
  gap: 17px;
}

.ap-compare__score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ap-compare__score-head > span {
  font-size: 11px;
  font-weight: 750;
  color: var(--compare-muted);
  overflow-wrap: anywhere;
}

.ap-compare__score-head strong {
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  color: #bd7b04;
}

.ap-compare__score-head small {
  font-size: 10px;
  color: var(--compare-muted);
}

.ap-compare__track {
  direction: ltr;
  height: 7px;
  background: #e6eaf0;
  border-radius: 10px;
  overflow: hidden;
}

.ap-compare__track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f7bf55, #e79b0a);
  border-radius: inherit;
}

.ap-compare__score--mine .ap-compare__score-head strong {
  color: var(--compare-blue);
}

.ap-compare__score--mine .ap-compare__track span {
  background: linear-gradient(90deg, #82a2ce, #5778a9);
}

.ap-compare__empty {
  text-align: center;
  border: 1px dashed var(--compare-line);
  border-radius: 18px;
  padding: 50px 24px;
  background: var(--compare-raised);
}

.ap-compare__empty > span {
  display: block;
  margin-bottom: 10px;
  font-size: 44px;
  color: var(--compare-gold);
}

.ap-compare__empty h3 {
  font-size: 17px;
  color: var(--compare-ink);
  margin: 0 0 8px;
  font-weight: 900;
}

.ap-compare__empty p {
  font-size: 12px;
  line-height: 2;
  color: var(--compare-muted);
}

.ap-compare__empty a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 11px;
  background: #eca108;
  color: #1e293b;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.ap-compare__no-match {
  font-size: 12px;
  color: var(--compare-muted);
  padding: 24px;
  text-align: center;
}

.ap-compare__bottom {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--compare-muted);
}

.ap-compare__pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0;
  list-style: none;
}

.ap-compare__pagination li {
  padding: 0;
}

.ap-compare__pagination li a,
.ap-compare__pagination li span {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--compare-line);
  color: var(--compare-ink);
  background: var(--compare-surface);
  border-radius: 9px;
  text-decoration: none;
  font-weight: 800;
}

.ap-compare__pagination .active span,
.ap-compare__pagination .uk-active span {
  background: #eca108;
  border-color: #eca108;
  color: #1c2738;
}

body.dark .ap-compare {
  --compare-surface: var(--ani-surface);
  --compare-canvas: var(--ani-canvas);
  --compare-ink: var(--ani-text);
  --compare-muted: var(--ani-muted);
  --compare-line: var(--ani-border);
  --compare-raised: var(--ani-surface-raised);
  --compare-blue: #93b8e8;
  background: transparent;
}

body.dark .ap-compare__hero {
  background: linear-gradient(110deg, #30291c, var(--ani-surface) 80%);
  border-color: var(--ani-border);
}

body.dark .ap-compare__hero h1,
body.dark .ap-compare__person strong {
  color: var(--ani-text);
}

body.dark .ap-compare__hero p,
body.dark .ap-compare__person small {
  color: var(--ani-muted);
}

body.dark .ap-compare__section-tag {
  color: #f1ba58;
}

body.dark .ap-compare__person {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .ap-compare__stat-icon,
body.dark .ap-compare__anime-number,
body.dark .ap-compare__versus {
  background: #42351e;
  color: #ffc05e;
}

body.dark .ap-compare__difference {
  background: #513b32;
  color: #ffb59b;
}

body.dark .ap-compare__difference--close {
  background: #233f32;
  color: #85d5a7;
}

body.dark .ap-compare__track {
  background: #34435a;
}

body.dark .ap-compare__score-head strong {
  color: #f7bc52;
}

body.dark .ap-compare__score--mine .ap-compare__score-head strong {
  color: #93b8e8;
}

@media (max-width: 800px) {
  .ap-compare__stats {
    grid-template-columns: 1fr 1fr;
  }

  .ap-compare__stat:first-child {
    grid-column: span 2;
  }

  .ap-compare__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ap-compare {
    padding: 16px 12px 45px;
  }

  .ap-compare__hero {
    padding: 23px 18px;
  }

  .ap-compare__people {
    gap: 8px;
  }

  .ap-compare__person {
    flex: 1 1 calc(50% - 32px);
    min-width: 0;
    padding: 9px;
  }

  .ap-compare__person img {
    width: 33px;
    height: 33px;
  }

  .ap-compare__person strong {
    font-size: 11px;
  }

  .ap-compare__versus {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .ap-compare__stats {
    gap: 9px;
  }

  .ap-compare__stat {
    padding: 14px;
  }

  .ap-compare__stat-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .ap-compare__stat strong {
    font-size: 20px;
  }

  .ap-compare__stat small {
    font-size: 10px;
  }

  .ap-compare__search {
    width: 100%;
  }

  .ap-compare__toolbar {
    align-items: stretch;
  }

  .ap-compare__content {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-profile-page .ap-profile-gift,
  .ap-compare__anime {
    transition: none;
  }
}

/* Center both compared accounts as a balanced, responsive pair. */

.ap-compare__hero {
  text-align: center;
}

.ap-compare__hero h1 {
  margin-top: 0;
}

.ap-compare__hero p {
  margin-inline: auto;
}

.ap-compare__people {
  justify-content: center;
  gap: clamp(9px, 2.6vw, 22px);
  margin-inline: auto;
}

.ap-compare__person {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 208px;
  min-width: 0;
  min-height: 136px;
  padding: 16px 12px;
  gap: 9px;
}

.ap-compare__person > div {
  min-width: 0;
  max-width: 100%;
}

.ap-compare__person img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -o-object-position: center;
     object-position: center;
}

.ap-compare__person small {
  line-height: 1.6;
}

.ap-compare__person strong {
  line-height: 1.7;
}

.ap-compare__versus {
  flex: none;
}

@media (max-width: 520px) {
  .ap-compare__people {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 7px;
  }

  .ap-compare__person {
    width: 100%;
    min-width: 0;
    min-height: 120px;
    padding: 12px 6px;
    gap: 8px;
  }

  .ap-compare__person img {
    width: 42px;
    height: 42px;
  }

  .ap-compare__person strong {
    font-size: 11px;
  }

  .ap-compare__versus {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 360px) {
  .ap-compare__hero {
    padding-inline: 12px;
  }

  .ap-compare__person {
    padding-inline: 4px;
  }

  .ap-compare__person img {
    width: 36px;
    height: 36px;
  }

  .ap-compare__person small {
    font-size: 9px;
  }
}

/*
 * Dark mode refresh. These rules are intentionally applied after legacy Sass
 * to replace its navy surfaces without changing the light theme or card layout.
 */

body.dark {
  background-color: var(--ani-canvas);
  scrollbar-color: #505359 var(--ani-canvas);
}

/* Keep section wrappers unboxed; only the actual SEO panel is a card. */

body.dark .home-seo-content.box-dic {
  --seo-background: var(--ani-surface-raised);
  --seo-text-color: var(--ani-text);
  --seo-subtle-text: var(--ani-muted);
  --seo-border-color: var(--ani-border);
  --seo-shadow: none;
  --seo-fade-bg: var(--ani-surface-raised);
}

body.dark .home-seo-content.box-dic > .body {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  border-radius: 16px;
  box-shadow: none;
  color: var(--ani-text-soft);
}

body.dark .home-seo-content.box-dic .seo-gradient-overlay {
  background: linear-gradient(to top, var(--ani-surface-raised) 8%, transparent 100%);
}

body.dark .home-seo-content.box-dic .seo-toggle-btn {
  background: var(--ani-surface-hover);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .home-seo-content.box-dic .seo-toggle-btn:hover {
  background: #383b40;
}

body.dark .box-card .section-header,
body.dark .box-card > .title {
  border-color: var(--ani-border);
}

body.dark :is(.box-card .section-header__title, .box-card > .title h1, .box-card > .title h2, .box-card > .title h3, .box-card > .title h4) {
  color: var(--ani-text);
  text-shadow: none;
}

body.dark :is(.box-card .section-header__button, .box-card > .title .more) {
  border-color: var(--ani-accent);
  color: var(--ani-accent-strong);
}

body.dark :is(.box-card .section-header__button, .box-card > .title .more):hover {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #1a1711;
  box-shadow: 0 5px 15px rgba(247, 184, 66, 0.12);
}

body.dark .box-card .section-header__title .ap-home-heading-icon {
  color: var(--ani-accent-strong);
  background: #362a1a;
  border-color: #594425;
}

/* Poster cards are neutral charcoal rather than navy/teal gradients. */

body.dark .post-anime .anime-card {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .post-anime .anime-card:hover {
  border-color: #555a61;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18);
}

body.dark .post-anime a.anime-card:focus-visible {
  border-color: #737c87;
  outline: 2px solid #737c87 !important;
  outline-offset: 2px;
}

body.dark .post-anime .card-image-container {
  background: #1b1d20;
}

body.dark .post-anime .card-content {
  background: var(--ani-surface-raised);
}

body.dark .post-anime .countdown-overlay {
  background: linear-gradient(to top, rgba(15, 16, 18, 0.96), rgba(15, 16, 18, 0.72) 62%, transparent);
}

body.dark .post-anime .summary-overlay {
  background: linear-gradient(to top, rgba(15, 16, 18, 0.96), rgba(15, 16, 18, 0.81) 53%, rgba(15, 16, 18, 0.18));
}

body.dark .post-anime .glass-meta-divider {
  background: linear-gradient(90deg, transparent, #48494c 50%, transparent);
  box-shadow: none;
}

body.dark .post-anime .glass-meta-divider::before {
  background: #7a6544;
}

body.dark .post-anime .meta-tags {
  border-bottom-color: var(--ani-border);
}

body.dark .post-anime .card-stats {
  border-top-color: var(--ani-border);
  color: var(--ani-muted);
}

body.dark .post-anime .anime-title {
  color: var(--ani-text);
}

body.dark .post-anime :is(.stat-year, .stat-episode .episode-label) {
  color: var(--ani-muted);
}

body.dark .post-anime .stat-views .icon {
  color: var(--ani-muted);
  fill: currentColor;
}

body.dark .post-anime :is(.tag, .genre-chip) {
  background: #303237;
  border-color: #46484d;
  color: var(--ani-text-soft);
}

body.dark .post-anime .tag.tag-hardsub-green {
  background: var(--ap-tag-hardsub-green-bg);
  border-color: #32614b;
  color: var(--ap-tag-hardsub-green-text);
}

body.dark .post-anime .status-tag.status-airing {
  --ap-status-badge-bg: #167657;
  --ap-status-badge-border: #329878;
}

body.dark .post-anime .status-tag.status-finished {
  --ap-status-badge-bg: #43464d;
  --ap-status-badge-border: #686b72;
}

body.dark .post-anime .status-tag.status-not-uploaded {
  --ap-status-badge-bg: #a43b46;
  --ap-status-badge-border: #cd6570;
}

body.dark .post-anime .status-tag {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Header, menus, notifications and search use the same surface scale. */

body.dark :is(.animo-desktop-header, .animo-mobile-header),
#theme-toggle:checked ~ .site-wrapper :is(.animo-desktop-header, .animo-mobile-header) {
  background: var(--ani-surface-raised, #25272b);
  border-color: var(--ani-border, #383b40);
  box-shadow: none;
}

body.dark :is(.animo-dropdown, .animo-notification-dropdown, .animo-profile-dropdown, .animo-mobile-drawer) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

body.dark :is(.animo-main-nav, .animo-nav-link, .animo-profile-dropdown a, .animo-profile-dropdown button, .animo-dropdown--type span, .animo-dropdown--status b, .animo-mega a, .animo-drawer-links a) {
  color: var(--ani-text-soft);
}

body.dark :is(.animo-nav-link:hover, .animo-nav-link.is-active, .animo-nav-link--home) {
  color: var(--ani-accent-strong);
}

body.dark :is(.animo-nav-link.is-active, .animo-nav-link--home) {
  background: #332a1d;
}

body.dark .animo-nav-link svg {
  color: var(--ani-muted);
}

body.dark :is(.animo-search-pill, .animo-toolbox, .animo-mobile-btn, .animo-drawer-close, .animo-drawer-links > a, .animo-drawer-links .grid a) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.animo-search-pill:hover, .animo-tool-btn:hover, .animo-dropdown a:hover, .animo-mega a:hover, .animo-profile-dropdown a:hover, .animo-notification-item:hover) {
  background: var(--ani-surface-hover);
}

body.dark :is(.animo-dropdown--status small, .animo-mega strong, .animo-notification-item small, .animo-search-pill span) {
  color: var(--ani-muted);
}

body.dark :is(.animo-notification-title, .animo-dropdown-title, .animo-notification-item span) {
  color: var(--ani-text);
}

body.dark :is(.animo-toolbox, .animo-avatar) {
  border-color: var(--ani-border);
}

body.dark .custom-footer {
  background: var(--ani-surface);
  border-color: var(--ani-border);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, .uk-button-default, .box-card .box-search-cart input[type=search]) {
  background: var(--ani-surface-raised);
  color: var(--ani-text);
  border-color: var(--ani-border);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, .box-card .box-search-cart input[type=search]):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Compare scores preserve two distinguishable accents without blue surfaces. */

body.dark .ap-compare__hero {
  background: linear-gradient(115deg, #29251e, var(--ani-surface) 68%);
  border-color: var(--ani-border);
}

body.dark .ap-compare__person {
  box-shadow: none;
}

body.dark .ap-compare__track {
  background: #393b40;
}

body.dark .ap-compare__score--mine .ap-compare__score-head strong {
  color: #e5d0a5;
}

body.dark .ap-compare__score--mine .ap-compare__track span {
  background: linear-gradient(90deg, #cfb27a, #ac8749);
}

body.dark .ap-compare__stat {
  box-shadow: none;
}

body.dark .ap-compare__anime:hover {
  border-color: #806639;
}

/* Reduced animation where requested; focus visibility is retained in both themes. */

body.dark :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ani-accent) !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.dark .post-anime .anime-card,
  body.dark :is(.animo-nav-link, .animo-search-pill, .box-card .section-header__button) {
    transition: none;
  }
}

/* Compact one-action private-domain access under the subscription card. */

#leo_app .dashboard-buy--compact .dashboard-buy__private {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e7dfd0;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #926516;
  background: #fff1cc;
  border: 1px solid #f5dca4;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-icon svg {
  width: 20px;
  height: 20px;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-copy {
  flex: 1 1 220px;
  min-width: 0;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 850;
  color: #293b54;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-copy small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.65;
  color: #78869a;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-actions form {
  margin: 0;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #23344d;
  border-radius: 11px;
  background: #23344d;
  color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-link:hover {
  background: #314969;
  color: #fff;
  transform: translateY(-1px);
}

#leo_app .dashboard-buy--compact .dashboard-buy__private-link:focus-visible {
  outline: 3px solid #de9b14;
  outline-offset: 2px;
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__private {
  border-color: var(--ani-border);
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__private-icon {
  background: rgba(238, 165, 17, 0.12);
  border-color: rgba(238, 165, 17, 0.28);
  color: #f2bb58;
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__private-copy strong {
  color: var(--ani-text);
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__private-copy small {
  color: var(--ani-muted);
}

body.dark #leo_app .dashboard-buy--compact .dashboard-buy__private-link {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #172032;
}

@media (max-width: 720px) {
  #leo_app .dashboard-buy--compact .dashboard-buy__private {
    gap: 7px;
    margin-top: 11px;
    padding-top: 11px;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-icon svg {
    width: 17px;
    height: 17px;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-copy {
    flex: 1 1 calc(100% - 44px);
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-copy strong {
    font-size: 12px;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-copy small {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.5;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-actions {
    width: 100%;
    gap: 6px;
    margin-inline-start: 0;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-actions form {
    flex: 1 1 100%;
  }

  #leo_app .dashboard-buy--compact .dashboard-buy__private-link {
    width: 100%;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .dashboard-buy--compact .dashboard-buy__private-link {
    transition: none;
  }
}

/*
 * AniPlus footer styles (compiled into the versioned front/app.css).
 */

body .aniplus-footer {
  --af-bg: #f5f6f8;
  --af-surface: #fff;
  --af-card: #fff;
  --af-line: #e5e9ee;
  --af-text: #202833;
  --af-muted: #627184;
  --af-accent: #c78509;
  --af-accent-soft: #fff5df;
  direction: rtl;
  isolation: isolate;
  margin-top: clamp(56px, 7vw, 100px);
  padding: clamp(18px, 3vw, 34px) 22px 0;
  border-top: 1px solid var(--af-line);
  background: linear-gradient(180deg, var(--af-bg), var(--af-surface));
  color: var(--af-text);
  font-family: inherit;
  line-height: 1.85;
}

body.dark .aniplus-footer {
  --af-bg: #111315;
  --af-surface: #17191c;
  --af-card: #202226;
  --af-line: #36383d;
  --af-text: #f5f5f4;
  --af-muted: #aeb3bc;
  --af-accent: #f7b842;
  --af-accent-soft: #30281b;
  border-top-color: var(--af-line);
  background: linear-gradient(180deg, var(--af-bg), var(--af-surface));
}

body .aniplus-footer .aniplus-footer__container {
  max-width: 1220px;
  margin-inline: auto;
}

body .aniplus-footer a {
  text-decoration: none;
}

body .aniplus-footer a:focus-visible {
  outline: 3px solid var(--af-accent);
  outline-offset: 4px;
}

body .aniplus-footer .aniplus-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.12fr);
  gap: clamp(22px, 3.6vw, 45px);
  padding: clamp(12px, 2vw, 28px) 5px clamp(32px, 4vw, 48px);
}

body .aniplus-footer .aniplus-footer__main > * {
  min-width: 0;
}

body .aniplus-footer .aniplus-footer__main h3 {
  position: relative;
  margin: 0 0 18px;
  padding-right: 13px;
  color: var(--af-text);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 900;
}

body .aniplus-footer .aniplus-footer__main h3::before {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  width: 4px;
  height: 18px;
  border-radius: 10px;
  background: var(--af-accent);
}

body .aniplus-footer .footer-intro__content {
  color: var(--af-muted);
  font-size: 12px;
  line-height: 2.15;
  text-align: right;
}

body .aniplus-footer .footer-intro__content p {
  margin: 0 0 11px;
}

body .aniplus-footer .footer-intro__content a {
  color: var(--af-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .aniplus-footer .aniplus-footer__links ul {
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  -moz-column-count: unset;
       column-count: unset;
  -moz-columns: auto;
       columns: auto;
}

body .aniplus-footer .aniplus-footer__links li {
  margin: 0;
  -moz-column-break-inside: auto;
       break-inside: auto;
}

body .aniplus-footer .aniplus-footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 0 9px;
  color: var(--af-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.85;
  transition: color 0.22s ease, transform 0.22s ease;
}

body .aniplus-footer .aniplus-footer__links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 26px;
  height: 2px;
  border-radius: 99px;
  background: var(--af-accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

body .aniplus-footer .aniplus-footer__links a:hover,
body .aniplus-footer .aniplus-footer__links a:focus-visible {
  color: var(--af-accent);
  transform: translateY(-2px);
}

body .aniplus-footer .aniplus-footer__links a:hover::after,
body .aniplus-footer .aniplus-footer__links a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

body .aniplus-footer .aniplus-footer__community > p {
  margin: 0 0 15px;
  color: var(--af-muted);
  font-size: 12px;
  line-height: 2.1;
}

body .aniplus-footer .aniplus-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body .aniplus-footer .aniplus-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--af-line);
  border-radius: 10px;
  background: var(--af-card);
  color: var(--af-text);
  font-size: 11px;
  font-weight: 750;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .aniplus-footer .aniplus-footer__socials a svg {
  width: 16px;
  height: 16px;
  color: var(--af-accent);
}

body .aniplus-footer .aniplus-footer__socials a:hover {
  border-color: var(--af-accent);
  background: var(--af-accent-soft);
  color: var(--af-text);
}

/* Keep back-to-top aligned with Telegram, rather than isolated in a bottom strip. */

body .aniplus-footer .aniplus-footer__socials .aniplus-footer__back {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 11px;
  margin: 0;
  box-shadow: none;
  background: var(--af-accent-soft);
  color: var(--af-accent);
  border-color: color-mix(in srgb, var(--af-accent) 34%, var(--af-line));
}

body .aniplus-footer .aniplus-footer__socials .aniplus-footer__back:hover,
body .aniplus-footer .aniplus-footer__socials .aniplus-footer__back:focus-visible {
  background: var(--af-card);
  border-color: var(--af-accent);
  color: var(--af-accent);
}

body .aniplus-footer .aniplus-footer__socials .aniplus-footer__back-icon,
body .aniplus-footer .aniplus-footer__socials .aniplus-footer__back-icon svg {
  width: 20px;
  height: 20px;
}

body .aniplus-footer .aniplus-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 21px 5px 26px;
  border-top: 1px solid var(--af-line);
  color: var(--af-muted);
  font-size: 11px;
  text-align: right;
}

body .aniplus-footer .aniplus-footer__bottom p {
  margin: 0;
  color: inherit;
}

body .aniplus-footer .aniplus-footer__copyright,
body .aniplus-footer .aniplus-footer__note {
  width: auto;
  display: block;
  font-size: inherit;
  text-align: inherit;
  font-weight: 500;
}

body .aniplus-footer .aniplus-footer__note span {
  color: var(--af-accent);
}

body .aniplus-footer .aniplus-footer__back {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--af-line);
  border-radius: 13px;
  background: var(--af-card);
  color: var(--af-text);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

body .aniplus-footer .aniplus-footer__back-icon,
body .aniplus-footer .aniplus-footer__back-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

body .aniplus-footer .aniplus-footer__back:hover {
  transform: translateY(-3px);
  border-color: var(--af-accent);
  background: var(--af-accent-soft);
  color: var(--af-accent);
}

@media (max-width: 1050px) {
  body .aniplus-footer .aniplus-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 720px) {
  body .aniplus-footer {
    padding: 18px 15px 0;
    margin-top: 54px;
  }

  body .aniplus-footer .aniplus-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding: 16px 2px 32px;
  }

  body .aniplus-footer .aniplus-footer__about,
  body .aniplus-footer .aniplus-footer__community {
    grid-column: 1/-1;
  }

  body .aniplus-footer .aniplus-footer__bottom {
    padding: 20px 2px 24px;
  }
}

@media (max-width: 420px) {
  body .aniplus-footer .aniplus-footer__main {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 14px;
         column-gap: 14px;
  }

  body .aniplus-footer .aniplus-footer__main h3 {
    font-size: 13px;
  }

  body .aniplus-footer .aniplus-footer__links a {
    font-size: 11px;
  }

  body .aniplus-footer .aniplus-footer__note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .aniplus-footer a,
  body .aniplus-footer .aniplus-footer__links a::after {
    transition: none !important;
  }
}

/* AniPlus request center and panel feedback – scoped and bundled into front/app.css. */

#leo_app .ap-requests {
  --rq-bg: #ffffff;
  --rq-ink: #192436;
  --rq-muted: #76859a;
  --rq-line: #e7edf3;
  --rq-soft: #f7f9fc;
  --rq-gold: #f6a504;
  --rq-shadow: 0 12px 32px rgba(24, 39, 67, .045);
  direction: rtl;
  width: 100%;
  min-width: 0;
  color: var(--rq-ink);
  font-family: Vazirmatn, Vazir, Tahoma, sans-serif;
}

#leo_app .ap-requests *,
#leo_app .ap-requests *::before,
#leo_app .ap-requests *::after {
  box-sizing: border-box;
}

#leo_app .ap-requests__hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 27px 30px;
  background: linear-gradient(116deg, #fff 49%, #fff8ea 100%);
  border: 1px solid var(--rq-line);
  border-radius: 22px;
  box-shadow: var(--rq-shadow);
}

#leo_app .ap-requests__hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -74px;
  top: -96px;
  width: 275px;
  height: 275px;
  border-radius: 50%;
  border: 46px solid rgba(246, 165, 4, 0.07);
  pointer-events: none;
}

#leo_app .ap-requests__intro,
#leo_app .ap-requests__actions {
  position: relative;
  z-index: 1;
}

#leo_app .ap-requests__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 9px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fff3d9;
  color: #a46c09;
  font-size: 11px;
  font-weight: 850;
}

#leo_app .ap-requests__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rq-gold);
}

#leo_app .ap-requests__title-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

#leo_app .ap-requests__mark {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  border: 1px solid #f5dfb2;
  border-radius: 15px;
  background: #fff6e5;
  color: #b77c0d;
}

#leo_app .ap-requests__mark svg {
  width: 24px;
  height: 24px;
}

#leo_app .ap-requests__hero h1 {
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.55;
  font-weight: 900;
  margin: 0;
  color: var(--rq-ink);
}

#leo_app .ap-requests__hero p {
  margin: 8px 0 0;
  color: var(--rq-muted);
  font-size: 13px;
  line-height: 2;
}

#leo_app .ap-requests__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#leo_app .ap-requests__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 19px;
  border: 1px solid #e9a222;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffc451, #f5a00c);
  color: #322407;
  box-shadow: 0 9px 20px rgba(245, 160, 12, 0.18);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#leo_app .ap-requests__create:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(245, 160, 12, 0.25);
}

#leo_app .ap-requests__create svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

#leo_app .ap-requests__create:focus-visible,
#leo_app .ap-requests__tab:focus-visible {
  outline: 3px solid rgba(246, 165, 4, 0.42);
  outline-offset: 3px;
}

#leo_app .ap-requests__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

#leo_app .ap-requests__toolbar-title {
  margin: 0;
  color: var(--rq-ink);
  font-size: 15px;
  font-weight: 900;
}

#leo_app .ap-requests__toolbar-hint {
  font-size: 11px;
  color: var(--rq-muted);
  line-height: 1.9;
}

#leo_app .ap-requests__switcher {
  padding: 7px;
  border: 1px solid var(--rq-line);
  border-radius: 17px;
  background: var(--rq-bg);
  box-shadow: var(--rq-shadow);
  margin-bottom: 17px;
}

#leo_app .ap-requests__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#leo_app .ap-requests__tabs--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#leo_app .ap-requests__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #68788d;
  text-align: right;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

#leo_app .ap-requests__tab:hover {
  background: #f7f9fc;
  color: var(--rq-ink);
}

#leo_app .ap-requests__tab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 11px;
  background: #f0f3f8;
  color: #8897aa;
}

#leo_app .ap-requests__tab-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

#leo_app .ap-requests__tab-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#leo_app .ap-requests__tab-copy strong {
  font-size: 12px;
  font-weight: 850;
  color: inherit;
}

#leo_app .ap-requests__tab-copy small {
  font-size: 10px;
  line-height: 1.6;
  color: var(--rq-muted);
  white-space: normal;
}

#leo_app .ap-requests__tab.is-active {
  background: #fff8e9;
  border-color: #f1d8a7;
  color: #97610a;
  box-shadow: inset 0 0 0 1px rgba(246, 165, 4, 0.04);
}

#leo_app .ap-requests__tab.is-active .ap-requests__tab-icon {
  background: #f6a504;
  color: #fff;
}

#leo_app .ap-requests__tab.is-active .ap-requests__tab-copy small {
  color: #a68550;
}

#leo_app .ap-requests__panel[hidden] {
  display: none !important;
}

#leo_app .ap-requests__panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--rq-line);
  border-radius: 20px;
  background: var(--rq-bg);
  box-shadow: var(--rq-shadow);
}

#leo_app .ap-requests__panel-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 17px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rq-line);
}

#leo_app .ap-requests__panel-heading svg {
  width: 19px;
  height: 19px;
  color: #dc9a20;
}

#leo_app .ap-requests__panel-heading h2 {
  font-size: 14px;
  color: var(--rq-ink);
  margin: 0;
  font-weight: 900;
}

#leo_app .ap-requests__panel-heading p {
  font-size: 11px;
  margin: 3px 0 0;
  color: var(--rq-muted);
}

#leo_app .ap-requests__panel .resourceIndex,
#leo_app .ap-requests__panel .resourceIndexBody {
  min-width: 0;
}

#leo_app .ap-requests__panel .resourceIndex > h1 {
  display: none;
}

#leo_app .ap-requests__panel .resourceIndexHeader,
#leo_app .ap-requests__panel .resourceIndexBodyHeader {
  border-radius: 13px;
}

#leo_app .ap-requests__panel .resourceTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#leo_app .ap-requests__panel .resourceTable th {
  background: var(--rq-soft);
  color: #697b91;
  border-color: var(--rq-line);
  font-size: 12px;
}

#leo_app .ap-requests__panel .resourceTable td {
  border-color: var(--rq-line);
  font-size: 12px;
}

#leo_app .ap-requests__panel .resourceTable tr:hover td {
  background: rgba(246, 165, 4, 0.025);
}

#leo_app .ap-requests__panel .resourceCreateItem {
  border-radius: 11px;
}

#leo_app .ap-requests__panel .uk-alert {
  border-radius: 12px;
  border: 1px solid #f5dfb2;
  background: #fffbf3;
  color: #966421;
  padding: 13px 16px;
  font-size: 12px;
  line-height: 2;
}

#leo_app .ap-requests__panel .uk-alert-danger {
  background: #fff7f6;
  border-color: #f5d3ce;
  color: #a74b42;
}

/* Compact form dialog; the real resource modals use the same panel cap. */

#leo_app #leo-request-modal .ap-request-dialog {
  width: min(100% - 28px, 450px) !important;
  max-width: 450px !important;
  max-height: min(88dvh, 700px) !important;
  margin-inline: auto;
  border-radius: 20px !important;
  border: 1px solid #e8edf3;
  background: #fff;
  box-shadow: 0 25px 75px rgba(15, 23, 42, 0.18);
}

#leo_app .ap-request-dialog__header {
  padding: 21px 22px 8px !important;
}

#leo_app .ap-request-dialog__header h3 {
  font-size: 18px !important;
  line-height: 1.65;
}

#leo_app .ap-request-dialog__header p {
  font-size: 11px !important;
  line-height: 1.85;
}

#leo_app .ap-request-dialog__body {
  padding: 12px 22px 16px !important;
  gap: 12px;
  min-height: 0;
}

#leo_app .ap-request-dialog__types {
  border-radius: 11px !important;
  padding: 4px !important;
}

#leo_app .ap-request-dialog__types button {
  min-height: 39px;
  padding: 8px !important;
  font-size: 11px !important;
  border-radius: 9px !important;
}

#leo_app .ap-request-dialog__field {
  gap: 5px !important;
}

#leo_app .ap-request-dialog__field input {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 12px !important;
}

#leo_app .ap-request-dialog__field textarea {
  font-size: 12px !important;
}

#leo_app .ap-request-dialog__footer {
  padding: 13px 22px 20px !important;
}

#leo_app .ap-request-dialog__submit {
  padding: 11px 14px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

body.ap-requests-page .uk-modal:not(.ap-premium-modal):not(#leo-buy-subscription-modal):not(#leo-subscription-reminder-modal) > .uk-modal-dialog {
  width: min(100% - 24px, 540px);
  max-width: 540px;
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 18px;
}

body.ap-requests-page .uk-modal:not(.ap-premium-modal) .leo-modal__dialog {
  max-width: 490px;
  border-radius: 18px;
}

body.ap-requests-page .uk-modal:not(.ap-premium-modal) .leo-modal__header {
  padding: 20px 22px 10px;
}

body.ap-requests-page .uk-modal:not(.ap-premium-modal) .leo-modal__body {
  padding: 0 22px 15px;
  gap: 12px;
}

body.ap-requests-page .uk-modal:not(.ap-premium-modal) .leo-modal__footer {
  padding: 13px 22px 18px;
}

/* Saved-settings flash (and other panel success messages) as a compact status card. */

#leo_app .leo-content > .uk-container > .message.success {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 50px;
  margin: 0 0 18px auto;
  padding: 11px 51px 11px 20px;
  border: 1px solid #bcead4;
  border-radius: 13px;
  background: linear-gradient(115deg, #ffffff, #effbf4);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.07);
  color: #176847;
  font-size: 12px;
  line-height: 2;
  font-weight: 800;
  text-align: right;
}

#leo_app .leo-content > .uk-container > .message.success::before {
  content: "\2713";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: #fff;
  background: #17a66b;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

body.dark #leo_app .ap-requests {
  --rq-bg: #101b2d;
  --rq-ink: #f8fafc;
  --rq-muted: #a3b3c8;
  --rq-line: rgba(148,163,184,.2);
  --rq-soft: #17253b;
  --rq-shadow: 0 13px 30px rgba(0,0,0,.14);
}

body.dark #leo_app .ap-requests__hero {
  background: linear-gradient(115deg, #101b2d, #241f1c);
}

body.dark #leo_app .ap-requests__eyebrow {
  background: #3a2c16;
  color: #efbf68;
}

body.dark #leo_app .ap-requests__mark {
  background: #352a1a;
  border-color: #705222;
  color: #f1bd63;
}

body.dark #leo_app .ap-requests__tab {
  color: #a8b5c7;
}

body.dark #leo_app .ap-requests__tab:hover {
  background: #1b2a40;
  color: #f8fafc;
}

body.dark #leo_app .ap-requests__tab-icon {
  background: #1b2b42;
  color: #a3b3c8;
}

body.dark #leo_app .ap-requests__tab.is-active {
  background: #392d1a !important;
  border-color: #8f682d;
  color: #f3c779 !important;
  box-shadow: none;
}

body.dark #leo_app .ap-requests__tab.is-active .ap-requests__tab-copy small {
  color: #d1ae72;
}

body.dark #leo_app .ap-requests__tab.is-active .ap-requests__tab-icon {
  background: #d6951b;
  color: #101b2d;
}

body.dark #leo_app .ap-requests__panel .resourceTable th {
  background: #17253b;
  color: #c2cee1;
  border-color: var(--rq-line);
}

body.dark #leo_app .ap-requests__panel .resourceTable td {
  border-color: var(--rq-line);
}

body.dark #leo_app .ap-requests__panel .resourceTable tr:hover td {
  background: #1a2940;
}

body.dark #leo_app .ap-requests__panel .uk-alert {
  background: #30281d;
  border-color: #684c2e;
  color: #f2ca83;
}

body.dark #leo_app .ap-requests__panel .uk-alert-danger {
  background: #3b2229;
  border-color: #743c45;
  color: #f3b5bd;
}

body.dark #leo_app #leo-request-modal .ap-request-dialog {
  background: #101b2d;
  border-color: rgba(148, 163, 184, 0.25);
}

body.dark #leo_app .leo-content > .uk-container > .message.success {
  background: linear-gradient(115deg, #122e2b, #14273a);
  border-color: #226a57;
  color: #abefcf;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.14);
}

@media (max-width: 920px) {
  #leo_app .ap-requests__hero {
    padding: 22px;
  }

  #leo_app .ap-requests__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #leo_app .ap-requests__hero {
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    padding: 19px;
    border-radius: 17px;
  }

  #leo_app .ap-requests__hero::after {
    width: 200px;
    height: 200px;
    top: -115px;
  }

  #leo_app .ap-requests__mark {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 12px;
  }

  #leo_app .ap-requests__hero p {
    font-size: 12px;
  }

  #leo_app .ap-requests__actions,
  #leo_app .ap-requests__create {
    width: 100%;
  }

  #leo_app .ap-requests__toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  #leo_app .ap-requests__switcher {
    padding: 5px;
    border-radius: 14px;
  }

  #leo_app .ap-requests__tabs {
    gap: 5px;
  }

  #leo_app .ap-requests__tab {
    gap: 8px;
    padding: 9px 8px;
    min-height: 57px;
  }

  #leo_app .ap-requests__tab-icon {
    flex-basis: 31px;
    height: 31px;
    border-radius: 9px;
  }

  #leo_app .ap-requests__tab-icon svg {
    width: 16px;
    height: 16px;
  }

  #leo_app .ap-requests__tab-copy strong {
    font-size: 11px;
  }

  #leo_app .ap-requests__tab-copy small {
    font-size: 9px;
  }

  #leo_app .ap-requests__panel {
    padding: 14px 11px;
    border-radius: 15px;
  }

  #leo_app .ap-requests__panel .resourceIndexBodyContent {
    padding-inline: 0;
  }

  #leo_app .ap-requests__panel .resourceTable {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  #leo_app #leo-request-modal .ap-request-dialog {
    width: calc(100% - 18px) !important;
    max-height: 88dvh !important;
    border-radius: 16px !important;
  }

  #leo_app .ap-request-dialog__header {
    padding: 17px 16px 5px !important;
  }

  #leo_app .ap-request-dialog__body {
    padding: 10px 16px 12px !important;
  }

  #leo_app .ap-request-dialog__footer {
    padding: 11px 16px 16px !important;
  }

  #leo_app .leo-content > .uk-container > .message.success {
    max-width: 100%;
    width: 100%;
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-requests__create,
  #leo_app .ap-requests__tab {
    transition: none;
  }

  #leo_app .ap-requests__create:hover {
    transform: none;
  }
}

/* 2026 user-panel refinement: compact native-sized controls and profile. */

#leo_app .ap-requests__hero {
  padding: 16px 20px;
  gap: 14px;
  margin-bottom: 14px;
  border-radius: 15px;
}

#leo_app .ap-requests__hero::after {
  width: 150px;
  height: 150px;
  top: -80px;
  border-width: 25px;
}

#leo_app .ap-requests__title-row {
  gap: 10px;
}

#leo_app .ap-requests__mark {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
}

#leo_app .ap-requests__mark svg {
  width: 19px;
  height: 19px;
}

#leo_app .ap-requests__hero h1 {
  font-size: 19px;
}

#leo_app .ap-requests__create {
  min-height: 37px;
  padding: 7px 13px;
  gap: 6px;
  font-size: 11px;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(245, 160, 12, 0.12);
}

#leo_app .ap-requests__create svg {
  width: 15px;
  height: 15px;
}

#leo_app .ap-requests__toolbar {
  margin-bottom: 10px;
}

#leo_app .ap-requests__switcher {
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 12px;
}

#leo_app .ap-requests__tab {
  min-height: 49px;
  padding: 7px 10px;
  gap: 8px;
  border-radius: 9px;
}

#leo_app .ap-requests__tab-icon {
  flex-basis: 29px;
  height: 29px;
  border-radius: 8px;
}

#leo_app .ap-requests__tab-icon svg {
  width: 16px;
  height: 16px;
}

#leo_app .ap-requests__panel {
  padding: 16px;
  border-radius: 14px;
}

#leo_app .ap-requests__panel-heading {
  margin-bottom: 12px;
  padding-bottom: 11px;
}

#leo_app .ap-requests__panel .resourceCreateItem,
#leo_app .ap-requests__panel .resourceBtnSave,
#leo_app .ap-requests__panel .uk-button,
#leo_app .ap-requests__panel button:not(.ap-requests__tab):not(.btn-status) {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 9px;
}

#leo_app .ap-requests__panel .resourceCreateItem {
  display: inline-flex;
  align-items: center;
  width: auto;
}

#leo_app .ap-requests__panel .resourceCreateItem svg {
  width: 16px;
  height: 16px;
}

#leo-request-modal .ap-request-dialog {
  border-radius: 15px !important;
}

#leo-request-modal .ap-request-dialog__header {
  padding: 16px 18px 6px !important;
}

#leo-request-modal .ap-request-dialog__header h3 {
  font-size: 16px !important;
}

#leo-request-modal .ap-request-dialog__body {
  padding: 10px 18px 13px !important;
}

#leo-request-modal .ap-request-dialog__types button {
  min-height: 34px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
}

#leo-request-modal .ap-request-dialog__field input {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 36px;
}

#leo-request-modal .ap-request-dialog__footer {
  padding: 11px 18px 15px !important;
}

#leo-request-modal .ap-request-dialog__submit {
  padding: 9px 13px !important;
  min-height: 37px !important;
  font-size: 12px !important;
  box-shadow: none;
}

#leo_app .ap-requests__panel .friend .box {
  border: 1px solid var(--rq-line);
  border-radius: 11px;
  padding: 11px 13px;
  margin-bottom: 8px;
}

#leo_app .ap-requests__panel .friend .btn-status {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  margin: 2px;
  white-space: nowrap;
}

#leo_app .ap-edit-profile {
  max-width: 850px;
  margin-inline: auto;
  direction: rtl;
  font-family: Vazirmatn, Vazir, Tahoma, sans-serif;
  color: #243247;
}

#leo_app .ap-edit-profile * {
  box-sizing: border-box;
}

#leo_app .ap-edit-profile__heading {
  margin-bottom: 14px;
}

#leo_app .ap-edit-profile__heading h1 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 900;
  color: #192436;
}

#leo_app .ap-edit-profile__heading p {
  margin: 0;
  font-size: 12px;
  color: #8190a4;
}

#leo_app .ap-edit-profile__card {
  padding: 22px 24px;
  border: 1px solid #e8edf3;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(24, 39, 67, 0.035);
}

#leo_app .ap-edit-profile__avatar-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

#leo_app .ap-edit-profile__avatar-frame {
  width: 82px;
  height: 82px;
  padding: 3px;
  border: 1px solid #f0dba9;
  border-radius: 17px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#leo_app .ap-edit-profile__avatar-frame img {
  border-radius: 13px;
}

#leo_app .ap-edit-profile__camera {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
}

#leo_app .ap-edit-profile__camera svg {
  width: 15px;
  height: 15px;
}

#leo_app .ap-edit-profile__identity {
  text-align: center;
  margin-bottom: 18px;
}

#leo_app .ap-edit-profile__identity h2 {
  font-size: 17px;
}

#leo_app .ap-edit-profile__identity p {
  font-size: 11px;
  overflow-wrap: anywhere;
}

#leo_app .ap-edit-profile__sections {
  display: grid;
  gap: 18px;
}

#leo_app .ap-edit-profile__sections > div {
  min-width: 0;
}

#leo_app .ap-edit-profile__field {
  padding: 9px 12px;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

#leo_app .ap-edit-profile__field:focus-within {
  border-color: #eeb245;
  box-shadow: 0 0 0 3px rgba(246, 165, 4, 0.12);
}

#leo_app .ap-edit-profile__field label {
  font-size: 11px;
  margin-bottom: 5px;
}

#leo_app .ap-edit-profile__field input,
#leo_app .ap-edit-profile__field select,
#leo_app .ap-edit-profile__field textarea {
  min-height: 29px;
  width: 100%;
  border: 0 !important;
  padding: 2px 0 !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none !important;
  outline: none;
}

#leo_app .ap-edit-profile__field textarea {
  min-height: 75px;
  resize: vertical;
}

#leo_app .ap-edit-profile__field--disabled:focus-within {
  border-color: #e6ebf1;
  box-shadow: none;
}

#leo_app .ap-edit-profile__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 9px;
  border-top: 1px solid #edf0f5;
}

#leo_app .ap-edit-profile__submit {
  width: auto;
  min-width: 135px;
  min-height: 38px;
  padding: 9px 19px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(246, 165, 4, 0.12);
  cursor: pointer;
}

#leo_app .ap-edit-profile__submit:focus-visible,
#leo_app .ap-edit-profile input:focus-visible,
#leo_app .ap-edit-profile select:focus-visible,
#leo_app .ap-edit-profile textarea:focus-visible {
  outline: 2px solid #f6a504;
  outline-offset: 3px;
}

#leo_app .ap-settings-toast {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 22px;
  z-index: 11000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, 100vw - 28px);
  min-height: 47px;
  padding: 9px 13px;
  border: 1px solid #bcead4;
  border-radius: 12px;
  background: #f5fcf8;
  color: #176847;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 800;
  direction: rtl;
  animation: ap-toast-in 0.22s ease-out;
}

#leo_app .ap-settings-toast__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: #17a66b;
  color: #fff;
  font-size: 16px;
}

#leo_app .ap-settings-toast button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  margin-right: 8px;
}

#leo_app .ap-settings-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

@keyframes ap-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.dark #leo_app .ap-edit-profile {
  color: #dce5f2;
}

body.dark #leo_app .ap-edit-profile__card {
  background: #111c2d;
  border-color: #334155;
  box-shadow: none;
}

body.dark #leo_app .ap-edit-profile__heading h1 {
  color: #f8fafc;
}

body.dark #leo_app .ap-edit-profile__heading p {
  color: #a3b3c8;
}

body.dark #leo_app .ap-edit-profile__avatar-frame {
  background: #1a293d;
  border-color: #334155;
}

body.dark #leo_app .ap-edit-profile__camera {
  border-color: #111c2d;
}

body.dark #leo_app .ap-edit-profile__field {
  background: #1a293d !important;
  border-color: #334155;
}

body.dark #leo_app .ap-edit-profile__field:focus-within {
  border-color: #d99d2c;
}

body.dark #leo_app .ap-edit-profile__field input,
body.dark #leo_app .ap-edit-profile__field select,
body.dark #leo_app .ap-edit-profile__field textarea {
  background: transparent !important;
  color: #f1f5f9 !important;
  color-scheme: dark;
}

body.dark #leo_app .ap-edit-profile__identity h2,
body.dark #leo_app .ap-edit-profile h3 {
  color: #f1f5f9;
}

body.dark #leo_app .ap-edit-profile__identity p,
body.dark #leo_app .ap-edit-profile__field label {
  color: #a3b3c8;
}

body.dark #leo_app .ap-edit-profile__actions {
  border-color: #334155;
}

body.dark #leo_app .ap-settings-toast {
  background: #122e2b;
  border-color: #226a57;
  color: #abefcf;
}

body.dark #leo_app .ap-requests__panel .friend .box {
  background: #17253b;
  border-color: #334155;
}

@media (max-width: 600px) {
  #leo_app .ap-requests__hero {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 13px;
    border-radius: 12px;
  }

  #leo_app .ap-requests__hero h1 {
    font-size: 17px;
  }

  #leo_app .ap-requests__actions,
  #leo_app .ap-requests__create {
    width: auto;
  }

  #leo_app .ap-requests__tab {
    padding: 7px;
    gap: 6px;
    min-height: 45px;
  }

  #leo_app .ap-requests__panel {
    padding: 12px;
  }

  #leo_app .ap-edit-profile__card {
    padding: 15px 13px;
    border-radius: 13px;
  }

  #leo_app .ap-edit-profile__heading h1 {
    font-size: 18px;
  }

  #leo_app .ap-edit-profile__avatar-frame {
    width: 72px;
    height: 72px;
  }

  #leo_app .ap-edit-profile__actions {
    justify-content: stretch;
  }

  #leo_app .ap-edit-profile__submit {
    width: 100%;
  }

  #leo_app .ap-settings-toast {
    left: 14px;
    bottom: calc(77px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-settings-toast {
    animation: none;
  }

  #leo_app .ap-settings-toast.is-leaving {
    transition: none;
  }
}

/* Shared floating feedback for user-panel forms and settings. */

#leo_app .ap-panel-toasts {
  position: fixed;
  inset: auto 0 calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  pointer-events: none;
  direction: rtl;
}

#leo_app .ap-panel-toast {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  max-width: min(440px, 100%);
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #bcead4;
  border-radius: 12px;
  background: #f5fcf8;
  color: #176847;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.17);
  font-family: Vazirmatn, Vazir, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.9;
  pointer-events: auto;
  animation: ap-toast-in 0.22s ease-out;
}

#leo_app .ap-panel-toast__icon {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #17a66b;
  color: #fff;
  font-size: 16px;
}

#leo_app .ap-panel-toast__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

#leo_app .ap-panel-toast__close {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: auto;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

#leo_app .ap-panel-toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

#leo_app .ap-panel-toast__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#leo_app .ap-panel-toast--warning {
  background: #fffbf0;
  border-color: #f6db94;
  color: #896019;
}

#leo_app .ap-panel-toast--warning .ap-panel-toast__icon {
  background: #d79719;
}

#leo_app .ap-panel-toast--error {
  background: #fff4f4;
  border-color: #ffc5c5;
  color: #a33535;
}

#leo_app .ap-panel-toast--error .ap-panel-toast__icon {
  background: #d34646;
}

#leo_app .ap-panel-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
}

body.dark #leo_app .ap-panel-toast {
  background: #122e2b;
  border-color: #226a57;
  color: #abefcf;
}

body.dark #leo_app .ap-panel-toast--warning {
  background: #382f1a;
  border-color: #705523;
  color: #ffdc93;
}

body.dark #leo_app .ap-panel-toast--error {
  background: #3c2428;
  border-color: #79444b;
  color: #ffc5c5;
}

#leo_app .ap-requests__actions {
  flex: 0 0 auto;
}

#leo_app .ap-requests__create {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  min-height: 36px !important;
  padding: 7px 13px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

#leo_app #leo-request-modal .ap-request-dialog__footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
}

#leo_app #leo-request-modal .ap-request-dialog__submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100%;
  min-width: 125px;
  min-height: 37px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-family: Vazirmatn, Vazir, Tahoma, sans-serif;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 12px rgba(246, 165, 4, 0.14) !important;
}

@media (max-width: 600px) {
  #leo_app .ap-panel-toasts {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  #leo_app .ap-panel-toast {
    width: 100%;
    max-width: 380px;
  }

  #leo_app .ap-requests__create {
    min-height: 35px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .ap-panel-toast {
    animation: none;
  }

  #leo_app .ap-panel-toast.is-leaving {
    transition: none;
  }
}

/*
 * Site-wide dark mode parity with the AniPlus 2026 homepage.
 *
 * Source only. Imported LAST by resources/assets/app.scss and compiled by the
 * project's own Laravel Mix pipeline; no public/front build artifacts belong
 * in this change. The darkmode cookie / body.dark class remains authoritative.
 *
 * Do not change light mode, dimensions, responsive layouts or admin styles.
 * Use existing --ani-* homepage tokens, not another competing navy palette.
 */

/* Canonical surfaces and aliases used by older templates and modules. */

body.dark {
  --ap-background-color: var(--ani-canvas);
  --ap-card-background: var(--ani-surface);
  --ap-text-color: var(--ani-text-soft);
  --ap-text-muted: var(--ani-muted);
  --ap-border-color: var(--ani-border);
  --ap-blue: var(--ani-accent);
  --ap-section-primary: var(--ani-accent);
  --ap-section-title-color: var(--ani-text);
  --dark-card: var(--ani-surface);
  --dark-raised: var(--ani-surface-raised);
  background-color: var(--ani-canvas);
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark :is(.uk-text-muted, .uk-text-meta, .text-muted) {
  color: var(--ani-muted) !important;
}

body.dark :is(.uk-card-default, .uk-modal-dialog, .uk-dropdown, .uk-offcanvas-bar) {
  background-color: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.uk-card-title, .uk-modal-title, .uk-heading-small, .uk-heading-medium) {
  color: var(--ani-text);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, .uk-button-default,
input[type=search], input[type=text], input[type=email],
input[type=password], input[type=number], textarea, select) {
  color-scheme: dark;
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, .uk-button-default) {
  background-color: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, input, textarea)::-moz-placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, input, textarea)::placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark :is(.uk-input, .uk-select, .uk-textarea, input, textarea, select):focus-visible {
  border-color: var(--ani-accent);
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

body.dark :is(.uk-pagination, .uk-tab, .uk-table, .uk-list-divider) {
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .uk-pagination > * > :is(a, span),
body.dark .uk-tab > * > a {
  color: var(--ani-muted);
}

body.dark .uk-pagination > .uk-active > :is(a, span),
body.dark .uk-tab > .uk-active > a {
  color: var(--ani-accent-strong);
  border-color: var(--ani-accent);
}

body.dark .uk-table-divider > tr:not(:first-child),
body.dark .uk-table-divider > :not(:first-child) > tr,
body.dark .uk-table-divider > :first-child > tr:not(:first-child) {
  border-color: var(--ani-border);
}

body.dark .uk-table-striped tbody tr:nth-of-type(odd) {
  background: var(--ani-surface-raised);
}

body.dark .uk-table-hover tbody tr:hover {
  background: var(--ani-surface-hover);
}

body.dark :is(.uk-alert-primary, .uk-alert-warning) {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--ani-accent);
}

/* The header and footer are shared components on every public route. */

body.dark :is(.animo-desktop-header, .animo-mobile-header),
body.dark .animo-header-shell :is(.animo-dropdown, .animo-notification-dropdown, .animo-profile-dropdown, .animo-mobile-drawer) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .animo-header-shell :is(.animo-search-pill, .animo-toolbox, .animo-mobile-btn,
.animo-drawer-links > a, .animo-drawer-links .grid a, .animo-drawer-close) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .animo-header-shell :is(.animo-notification-item, .animo-profile-dropdown a,
.animo-profile-dropdown button, .animo-nav-link) {
  color: var(--ani-text-soft);
}

body.dark .animo-header-shell :is(.animo-notification-item, .animo-profile-dropdown a,
.animo-profile-dropdown button, .animo-dropdown a, .animo-tool-btn):hover {
  background-color: var(--ani-surface-hover);
}

body.dark .animo-header-shell :is(.animo-nav-link.is-active, .animo-nav-link--home) {
  color: var(--ani-accent-strong);
  background: #332a1d;
}

body.dark .animo-header-shell :is(.animo-dropdown-title, .animo-notification-title) {
  color: var(--ani-text);
}

body.dark footer.aniplus-footer {
  --af-bg: var(--ani-surface-raised);
  --af-surface: var(--ani-surface-raised);
  --af-card: var(--ani-surface);
  --af-line: var(--ani-border);
  --af-text: var(--ani-text);
  --af-muted: var(--ani-muted);
  --af-accent: var(--ani-accent);
  --af-accent-soft: #332a1d;
  background: var(--ani-surface-raised);
  border-top: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark footer.aniplus-footer :is(.footer-intro__content, .aniplus-footer__community > p,
.aniplus-footer__bottom, .aniplus-footer__links a) {
  color: var(--ani-muted);
}

body.dark footer.aniplus-footer :is(.aniplus-footer__main h3, .aniplus-footer__back) {
  color: var(--ani-text);
}

body.dark footer.aniplus-footer :is(.aniplus-footer__socials a, .aniplus-footer__bottom) {
  border-color: var(--ani-border);
}

body.dark footer.aniplus-footer .aniplus-footer__socials a {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
}

body.dark footer.aniplus-footer :is(.aniplus-footer__links a, .aniplus-footer__back,
.aniplus-footer__socials a):hover {
  color: var(--ani-accent-strong);
}

/* Archive, related posts, recommendations, producer/studio/year, manga and search. */

body.dark :is(.page-anime .box-anime:not(.box-card),
.page-schedule .box-anime:not(.box-card),
.studio-directory__card, .page-year-index .decade-group,
.box-search-studios, .box-search .body,
.box-select .dropdownBody, .box-comment,
.post-anime .anime-card, .post-manga .manga-card,
.manga-single .box-1, .manga-single .box-3 .box) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.box-search-studios input, .page-year-index .search-input,
.box-select .select, .search-widget-2 .input-text .input,
.box-search .uk-input) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark :is(.page-year-index .decade-header, .page-schedule .schedule-hub,
.page-schedule .schedule-hub__filters, .box-select .dropdownBody .item,
.studio-letter__header) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.page-year-index .decade-header:hover, .box-select .dropdownBody .item:hover,
.studio-letter__item a:hover) {
  background: var(--ani-surface-hover);
}

body.dark :is(.page-year-index .year-tag, .page-schedule .schedule-hub__filter-btn,
.box-search .filter-item) {
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.page-year-index .year-tag.active, .page-schedule .uk-active > .schedule-hub__filter-btn) {
  background: #332a1d;
  border-color: var(--ani-accent);
  color: var(--ani-accent-strong);
}

body.dark .page-anime .box-anime:not(.box-card) .title,
body.dark .page-schedule .box-anime:not(.box-card) .title {
  border-color: var(--ani-border);
}

body.dark :is(.post-anime .anime-title, .box-card .section-header__title,
.page-year-index .decade-header, .studio-letter__title) {
  color: var(--ani-text);
}

/* Seasonal filters include portaled desktop menus and mobile bottom sheets. */

body.dark .page-season .season-filter {
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__header {
  background: linear-gradient(115deg, rgba(247, 184, 66, 0.11), transparent 70%);
  border-color: var(--ani-border);
}

body.dark .page-season :is(.season-filter__bar--desktop, .season-filter__modal,
.season-filter__mobile-trigger, .season-filter__year, .season-filter__option-box,
.season-filter__season, .season-filter__sort-card) {
  background: var(--ani-surface);
  background-image: none;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-season :is(.season-filter__trigger, .season-filter__modal-close,
.season-filter__pill span, .season-filter__later, .season-filter__sort-icon,
.season-filter__mobile-trigger-icon, .season-filter__later-icon,
.season-filter__sort-mark) {
  background: var(--ani-surface-raised);
  background-image: none;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season :is(.season-filter__year-title, .season-filter__modal-header,
.season-filter__modal-footer, .season-filter__mobile-section) {
  background: transparent;
  border-color: var(--ani-border);
}

body.dark .page-season :is(.season-filter__title, .season-filter__year-title,
.season-filter__modal-title, .season-filter__mobile-section h4,
.season-filter__sort-label, .season-filter__option-label) {
  color: var(--ani-text);
}

body.dark .page-season :is(.season-filter__trigger:hover, .season-filter__season:hover,
.season-filter__pill span:hover, .season-filter__later:hover,
.season-filter__sort-option:hover .season-filter__sort-card) {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
}

body.dark .page-season :is(.season-filter__trigger.is-active, .season-filter__season.is-selected,
.season-filter__pill input:checked + span, .season-filter__sort-option input:checked + .season-filter__sort-card,
.season-filter__option input:checked + .season-filter__option-box,
.season-filter__apply) {
  background: var(--ani-accent);
  background-image: none;
  border-color: var(--ani-accent);
  color: #1a1711;
  box-shadow: none;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-label,
body.dark .page-season .season-filter__trigger.is-active :is(.season-filter__trigger-icon, .season-filter__trigger-label) {
  color: #1a1711;
}

body.dark .page-season .season-filter__later.is-selected {
  background: #332a1d;
  color: var(--ani-accent-strong);
  border-color: var(--ani-accent);
}

body.dark .page-season .season-filter__mobile-count,
body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-icon {
  background: #332a1d;
  color: var(--ani-accent-strong);
}

body.dark .page-season .season-filter__bar--mobile {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Anime details, download lists, cast, comments and the shared people tab UI. */

body.dark .anime-detail-page {
  --anime-card-bg: var(--ani-surface);
  --anime-border-color: var(--ani-border);
  --anime-text-primary: var(--ani-text);
  --anime-text-secondary: var(--ani-text-soft);
  --anime-muted-bg: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page :is(.anime-tabs-card .tabs-nav-container, .anime-tabs-card .tab-content,
.anime-info-pane .anime-synopsis-card, .anime-info-pane .anime-info-overview,
.anime-info-pane .anime-technical-specs, .anime-relation-rail,
.anime-poster-card, .anime-scores-card, .anime-bottom-tags,
.anime-sidebar-update, .anime-tracker-progress, .anime-detail-modal__dialog,
.anime-info-pane .anime-description-list, .anime-info-pane .anime-production-list) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page :is(.anime-tabs-card .tabs-nav, .anime-tracker-progress__tabs,
.anime-info-pane .anime-quick-facts > div, .anime-scores-card .rating-item,
.anime-relation-rail__item, .anime-technical-specs__list) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .anime-detail-page :is(.anime-tabs-card .tab-link, .anime-tracker-progress__tab) {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page :is(.anime-tabs-card .tab-link:hover, .anime-tracker-progress__tab:hover) {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active,
body.dark .anime-detail-page .anime-tracker-progress__tab.is-active {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #1a1711;
}

body.dark .anime-detail-page :is(.anime-genre-chips a, .anime-bottom-tags .anime-chip,
.anime-other-names-trigger, .anime-relation-rail__total, .anime-tabs-card .tab-count,
.anime-producers__preview) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page :is(.anime-synopsis-card .synopsis-toggle-button,
.anime-sidebar-update__quality) {
  background: var(--ani-surface-hover);
  border-color: var(--ani-border);
  color: var(--ani-accent-strong);
}

body.dark :is(.anime-detail-modal__dialog, .anime-detail-modal__header,
.anime-other-names-list, .anime-detail-modal__close) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-single .anime-tabs-card {
  --anime-tab-text: var(--ani-text-soft);
  --anime-tab-text-active: #1a1711;
  --anime-tab-container-bg: var(--ani-surface-raised);
  --anime-tab-border: var(--ani-border);
  --anime-card-bg: var(--ani-surface);
  --anime-card-border: rgba(0, 0, 0, .15);
  --anime-surface-contrast: var(--ani-text);
  --anime-muted: var(--ani-muted);
}

body.dark .anime-single :is(.anime-detail-card.anime-tabs-card, .people-card,
.theme-card, .people-card__section-body, .tab-pane-section) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-single :is(.people-card__role, .people-card__subtitle,
.tab-section-subtitle, .tab-section-meta) {
  color: var(--ani-muted);
}

body.dark .anime-single :is(.people-card__name, .people-card__anime-title,
.theme-card__title, .tab-section-title) {
  color: var(--ani-text);
}

/* Character list + archive, and profile-styles injected AFTER app.css. The
 * extra body.dark ancestor wins over the inline .character-profile-page rule. */

body.dark .character-profile-page {
  --cp-ink: var(--ani-text);
  --cp-strong: var(--ani-text);
  --cp-body: var(--ani-text-soft);
  --cp-muted: var(--ani-muted);
  --cp-subtle: var(--ani-muted);
  --cp-divider: var(--ani-border);
  --cp-accent-ink: var(--ani-accent-strong);
  --cp-accent-text: var(--ani-accent-strong);
  --cp-warning: var(--ani-accent);
  --cp-accent: var(--ani-accent);
  --cp-image-bg: var(--ani-surface-raised);
  --cp-surface: var(--ani-surface-raised);
  --cp-page: var(--ani-surface-raised);
  --cp-card: var(--ani-surface);
  --cp-accent-soft: #332a1d;
  --cp-accent-hover: #493820;
  --cp-border: var(--ani-border);
  --cp-border-soft: var(--ani-border);
  --cp-border-image: var(--ani-border);
  --cp-row: var(--ani-surface-raised);
  --cp-fact: var(--ani-surface-raised);
  --cp-accent-border: #63502e;
  --cp-accent-button-border: #806331;
  --cp-pagination-border: var(--ani-border);
  background: var(--ani-canvas);
  color: var(--ani-text-soft);
}

body.dark .character-profile-page :is(.cp-card, .cp-work, .cp-person, .cp-fact) {
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .character-profile-page .cp-mic {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .character-profile-page :is(.cp-portrait, .cp-work img) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .anime-character-archive :is(.character-hero, .character-archive-card,
.character-empty, .character-archive-section) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-character-archive :is(.character-hero__title, .character-archive__title,
.character-archive-card__name) {
  color: var(--ani-text);
}

body.dark .anime-character-archive :is(.character-hero__synopsis, .character-archive-card__role,
.character-archive-card__meta) {
  color: var(--ani-muted);
}

body.dark .box-character-index .character-card {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .box-character-index :is(.character-name, .character-followers .value) {
  color: var(--ani-text);
}

body.dark :is(.character-section .character-card, .staff-section .staff-card,
.character-section .empty-state, .staff-section .empty-state) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

/* The whole user area inherits homepage neutrals, even where later panel
 * polish introduced literal navy colors or Tailwind utility backgrounds. */

body.dark #leo_app {
  --panel-canvas: var(--ani-canvas);
  --panel-sidebar: var(--ani-surface);
  --panel-card: var(--ani-surface);
  --panel-raised: var(--ani-surface-raised);
  --panel-hover: var(--ani-surface-hover);
  --panel-stroke: var(--ani-border);
  --panel-stroke-strong: #55585d;
  --panel-title: var(--ani-text);
  --panel-text: var(--ani-text-soft);
  --panel-muted: var(--ani-muted);
  --panel-accent: var(--ani-accent);
  --panel-ink: #1a1711;
  --panel-shadow: var(--ani-shadow);
  --dash-surface: var(--ani-surface);
  --dash-bg: var(--ani-surface-raised);
  --dash-border: var(--ani-border);
  --dash-ink: var(--ani-text);
  --dash-muted: var(--ani-muted);
  --rq-bg: var(--ani-surface);
  --rq-soft: var(--ani-surface-raised);
  --rq-line: var(--ani-border);
  --rq-ink: var(--ani-text);
  --rq-muted: var(--ani-muted);
  background: var(--ani-canvas);
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.ap-edit-profile__field, .ap-requests__panel .resourceTable th,
.bookmark-pagination, .leo-tabs__switcher, .leo-tabs__list,
.user-dashboard-tabs .tabs, .friend .box,
.ap-requests__tab-icon, .ap-edit-profile__avatar-frame) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app :is(.ap-requests__tab:hover, .ap-requests__panel .resourceTable tr:hover td) {
  background: var(--ani-surface-hover) !important;
  color: var(--ani-text);
}

body.dark #leo_app .ap-requests__tab:not(.is-active) {
  color: var(--ani-muted);
}

body.dark #leo_app .ap-requests__tab.is-active {
  background: #332a1d !important;
  border-color: #806331 !important;
  color: var(--ani-accent-strong) !important;
}

body.dark #leo_app .ap-requests__tab.is-active .ap-requests__tab-icon {
  background: var(--ani-accent) !important;
  color: #1a1711;
}

body.dark #leo_app .ap-requests__panel .resourceTable th {
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.ap-edit-profile__field input, .ap-edit-profile__field textarea,
.ap-edit-profile__field select, .leo-modal__input) {
  background: transparent !important;
  color: var(--ani-text) !important;
}

body.dark #leo_app :is(.ap-edit-profile__identity h2, .ap-edit-profile h3,
.ap-edit-profile__heading h1, .resourceTitle, .panel > .title) {
  color: var(--ani-text) !important;
}

body.dark #leo_app :is(.ap-edit-profile__heading p, .ap-edit-profile__identity p,
.ap-edit-profile__field label, .ap-requests__tab-copy small) {
  color: var(--ani-muted);
}

body.dark #leo_app :is(.leo-modal, .leo-modal__content, .uk-modal-dialog,
.leo-logout-modal__card, .ap-request-dialog, .resourceModal .panel) {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.resourceTable td, .resourceTable th, .bookmark-table td,
.bookmark-table th, .leo-content .panel) {
  border-color: var(--ani-border);
}

body.dark #leo_app :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50,
.bg-slate-100) {
  background-color: var(--ani-surface) !important;
}

body.dark #leo_app :is(.bg-gray-50\/50, .bg-gray-100\/50,
.bg-slate-50\/50) {
  background-color: var(--ani-surface-raised) !important;
}

/* Public profiles, auth, articles, comments, community and shared dialogs. */

body.dark .user-profile-page {
  --profile-bg: var(--ani-canvas);
  --profile-card: var(--ani-surface);
  --profile-raised: var(--ani-surface-raised);
  --profile-border: var(--ani-border);
  --profile-text: var(--ani-text);
  --profile-muted: var(--ani-muted);
}

body.dark .user-profile-page :is(.resourceBookmark .bg-white,
.resourceFriends .bg-white, .user-profile-tabs, .favorite-anime-showcase,
.favorite-anime-showcase__editor) {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
}

body.dark .user-profile-page :is(.favorite-anime-showcase__poster,
.resourceBookmark input[type=search], .favorite-anime-showcase__empty) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

body.dark :is(.box-form-l-r .uk-card-default, .box-form-l-r .data-left,
.commentBody .bodyComment, .comments.form,
.comments.form textarea, .commentBody .bodyComment .reply,
.box-search .search-suggestion, .search-widget-2 .search-suggestion) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.commentBody .bodyComment .data-bottom .comments.form,
.comments.form .spoiler, .commentBody .bodyComment span.show-more-comment) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.box-form-l-r h1, .box-form-l-r h2, .box-comment h3,
.commentBody .bodyComment strong) {
  color: var(--ani-text);
}

body.dark :is(.uk-modal-dialog, .uk-dropdown, .uk-card-default, #leo_app .resourceModal) {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  body.dark :is(.season-filter__trigger, .season-filter__season,
  .character-archive-card, .character-profile-page .cp-work,
  .aniplus-footer a) {
    transition: none !important;
  }
}

/* Search filters, discoveries and recommendations still used navy literals. */

body.dark .page-box-filters :is(.filter-toolbar, .filter-modal__dialog,
.filter-option, .filter-chip__button, .filter-toggle, .filter-toggle__thumb) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-box-filters :is(.filter-chip__button, .filter-option):hover {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
}

body.dark .page-box-filters :is(.filter-chip__button.is-active, .filter-option.is-active) {
  background: #332a1d;
  border-color: var(--ani-accent);
  color: var(--ani-accent-strong);
}

body.dark .page-box-filters :is(.filter-chip__label, .filter-chip__value,
.filter-chip__icon, .filter-option__text, .filter-modal__title,
.filter-toggle__label) {
  color: var(--ani-text-soft);
}

body.dark .page-box-filters :is(.filter-modal__header, .filter-modal__footer) {
  border-color: var(--ani-border);
}

body.dark :is(.recommendation-archive .recommendation-hero, .anime-search-empty__card,
.anime-search-empty__wrapper, .anime-search-empty__recent) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-search-empty :is(.anime-search-empty__title, .anime-search-empty__recent-title) {
  color: var(--ani-text);
}

body.dark .anime-search-empty :is(.anime-search-empty__description, .anime-search-empty__tags) {
  color: var(--ani-muted);
}

/* Anime themes, OP/ED audio lists and editorial cards share the same scale. */

body.dark :is(.theme-page, .theme-hero) {
  background-color: var(--ani-canvas);
}

body.dark .anime-theme :is(.theme-card, .theme-info-block,
.theme-meta-item, .theme-audio) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-theme :is(.theme-pill, .theme-chip) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-theme :is(.theme-title, .theme-info-header h4,
.theme-audio__title, .theme-meta-item .value) {
  color: var(--ani-text);
}

body.dark .anime-theme :is(.theme-description, .theme-info-sub,
.theme-audio__subtitle, .theme-meta-item .label) {
  color: var(--ani-muted);
}

body.dark .anime-theme audio {
  background: var(--ani-surface-raised);
}

body.dark .op-ed-section :is(.op-ed-header, .media-hub__body, .media-song,
.op-ed-search, .op-ed-empty) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .op-ed-section :is(.op-ed-search-input, .media-song__action) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .op-ed-section :is(.op-ed-title, .media-song__title) {
  color: var(--ani-text);
}

body.dark .op-ed-section :is(.op-ed-subtitle, .media-song__artist, .media-song__episodes) {
  color: var(--ani-muted);
}

body.dark :is(.page-blog .blog-card, .blog-page__search, .blog-page__empty,
.blog-single .blog-single__card, .blog-single .blog-single__related-card,
.blog-single__download, .blog-anime, .blog-anime a) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark :is(.blog-page__category, .blog-card__meta,
.blog-card__cta, .blog-single__genre-tag, .blog-single__staff-tag,
.blog-anime .blog-anime-title, .blog-box-dic blockquote) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(.blog-page__title, .blog-card__title, .blog-single__title,
.blog-single__related-header h2, .blog-single__related-card h3) {
  color: var(--ani-text);
}

body.dark :is(.blog-card__excerpt, .blog-card__stats, .blog-single__staff-label) {
  color: var(--ani-muted);
}

body.dark .blog-single .blog-box-dic blockquote {
  border-color: var(--ani-border);
}

body.dark .blog-single .blog-box-dic a {
  color: var(--ani-accent-strong);
}

/* Descendant variables have precedence over tokens inherited from #leo_app. */

body.dark #leo_app :is(.ap-requests, .ap-edit-profile) {
  --rq-bg: var(--ani-surface);
  --rq-ink: var(--ani-text);
  --rq-muted: var(--ani-muted);
  --rq-line: var(--ani-border);
  --rq-soft: var(--ani-surface-raised);
  --rq-shadow: var(--ani-shadow);
}

body.dark #leo_app .ap-dashboard {
  --dash-surface: var(--ani-surface);
  --dash-bg: var(--ani-surface-raised);
  --dash-border: var(--ani-border);
  --dash-ink: var(--ani-text);
  --dash-muted: var(--ani-muted);
}

body.dark #leo_app :is(.bg-slate-800, .bg-slate-700, .bg-slate-900, .bg-gray-900,
.user-dashboard-tabs-modern__segmented, .user-dashboard-tabs-modern__payment-card,
.user-dashboard-tabs-modern__login-card, .leo-modal__toggle,
.leo-modal__counter, .leo-modal__counter-controls) {
  background-color: var(--ani-surface-raised) !important;
  border-color: var(--ani-border);
}

body.dark #leo_app :is(.leo-modal__input, .leo-modal__text-input,
.leo-modal__textarea, .bookmark-search__input, select option) {
  background-color: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark #leo_app :is(.ap-requests__panel .resourceTable tr:hover td,
.bookmark-anime-row:hover) {
  background-color: var(--ani-surface-hover);
}

/* AniPlus mobile account panel: floating launcher, bottom sheet, and footer CTA. */

.animo-mobile-drawer .animo-drawer-user {
  min-width: 0;
  text-decoration: none;
  border-radius: 14px;
  padding: 7px;
  margin: -7px;
  transition: background 0.2s ease;
}

.animo-mobile-drawer .animo-drawer-user:hover,
.animo-mobile-drawer .animo-drawer-user:focus-visible {
  background: rgba(246, 165, 4, 0.1);
}

.animo-drawer-user__arrow {
  margin-right: auto;
  color: #e5a008;
  flex-shrink: 0;
}

.leo-panel-sheet__head {
  display: none;
}

@media (max-width: 1024px) {
  #leo_app .leo-mobile-nav {
    display: flex;
    justify-content: center;
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    border: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    z-index: 90;
  }

  #leo_app .leo-mobile-nav__items {
    box-sizing: border-box;
    width: min(420px, 100%);
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.19);
    backdrop-filter: blur(20px);
    pointer-events: auto;
  }

  #leo_app .leo-mobile-nav__item--menu {
    box-sizing: border-box;
    width: 100%;
    min-height: 59px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 18px;
    background: linear-gradient(120deg, #f6a504, #f2bc46);
    color: #291d08;
    text-align: right;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #leo_app .leo-mobile-nav__item--menu:hover,
  #leo_app .leo-mobile-nav__item--menu:focus-visible {
    color: #291d08;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(246, 165, 4, 0.23);
  }

  #leo_app .leo-mobile-nav__item--menu:focus-visible,
  #leo_app .leo-panel-sheet__close:focus-visible {
    outline: 3px solid #b77b08;
    outline-offset: 3px;
  }

  #leo_app .leo-mobile-nav__menu-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 12px;
  }

  #leo_app .leo-mobile-nav__menu-icon svg {
    width: 23px;
    height: 23px;
  }

  #leo_app .leo-mobile-nav__menu-copy {
    display: grid;
    gap: 1px;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  #leo_app .leo-mobile-nav__menu-copy strong {
    font-size: 13px;
    font-weight: 900;
  }

  #leo_app .leo-mobile-nav__menu-copy small {
    font-size: 10px;
    font-weight: 650;
    opacity: 0.8;
  }

  #leo_app .leo-mobile-nav__menu-chevron {
    display: grid;
    place-items: center;
  }

  #leo_app .leo-mobile-nav__menu-chevron svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
  }

  #leo_app [aria-expanded=true] .leo-mobile-nav__menu-chevron svg {
    transform: rotate(180deg);
  }

  #leo_app .leo-sidebar-overlay {
    z-index: 76;
    background: rgba(9, 16, 31, 0.65);
    backdrop-filter: blur(4px);
  }

  #leo_app .leo-sidebar-col,
  #leo_app .leo-sidebar-col.is-closed {
    box-sizing: border-box;
    position: fixed;
    top: auto;
    right: 12px;
    left: 12px;
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: min(480px, 100vw - 24px);
    max-width: none;
    height: min(72dvh, 680px);
    min-height: 270px;
    margin-inline: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(calc(100% + 130px)) scale(0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 84;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.25s, visibility 0s linear 0.32s;
  }

  #leo_app .leo-sidebar-col.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.25s;
  }

  #leo_app .leo-panel-sheet__head {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 22px 18px 13px;
    border-bottom: 1px solid #f1f2f6;
  }

  #leo_app .leo-panel-sheet__handle {
    position: absolute;
    width: 44px;
    height: 4px;
    border-radius: 99px;
    background: #dce1ea;
    top: 9px;
    right: calc(50% - 22px);
  }

  #leo_app .leo-panel-sheet__heading {
    flex: 1;
    display: grid;
    gap: 3px;
  }

  #leo_app .leo-panel-sheet__heading strong {
    color: #1f2937;
    font-size: 15px;
    font-weight: 900;
  }

  #leo_app .leo-panel-sheet__heading small {
    color: #8793a6;
    font-size: 10px;
    font-weight: 700;
  }

  #leo_app .leo-panel-sheet__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    color: #526174;
    background: #f1f3f8;
    cursor: pointer;
  }

  #leo_app .leo-panel-sheet__close svg {
    width: 18px;
    height: 18px;
  }

  #leo_app .leo-sidebar {
    position: relative;
    flex: 1;
    min-height: 0;
    height: auto;
  }

  #leo_app .leo-sidebar .sidebar-content {
    height: 100%;
    padding: 6px 13px 12px;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #leo_app .leo-sidebar__brand {
    display: none;
  }

  #leo_app .leo-sidebar__menu ul.menu-list > li {
    border-radius: 14px;
  }

  #leo_app .leo-sidebar__menu ul.menu-list > li > a {
    padding: 10px 12px;
  }

  #leo_app .leo-app-user {
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
  }

  body.dark #leo_app .leo-mobile-nav__items {
    background: var(--ani-surface);
    border-color: var(--ani-border);
  }

  body.dark #leo_app .leo-sidebar-col {
    background: var(--ani-surface);
    border-color: var(--ani-border);
  }

  body.dark #leo_app .leo-panel-sheet__head {
    border-bottom-color: var(--ani-border);
  }

  body.dark #leo_app .leo-panel-sheet__heading strong {
    color: var(--ani-text);
  }

  body.dark #leo_app .leo-panel-sheet__heading small {
    color: var(--ani-muted);
  }

  body.dark #leo_app .leo-panel-sheet__close {
    color: var(--ani-text);
    background: var(--ani-surface-raised);
  }

  body.dark #leo_app .leo-sidebar .sidebar-content {
    background: var(--ani-surface);
  }
}

@media (max-width: 430px) {
  #leo_app .leo-sidebar-col {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }

  #leo_app .leo-mobile-nav__item--menu {
    min-height: 55px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leo_app .leo-sidebar-col,
  #leo_app .leo-sidebar-col.is-open,
  #leo_app .leo-mobile-nav__item--menu,
  #leo_app .leo-mobile-nav__menu-chevron svg {
    transition: none !important;
  }
}

/* Compact icon-only back-to-top button. */

body .aniplus-footer .aniplus-footer__back {
  display: inline-grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--af-line);
  border-radius: 15px;
  background: var(--af-card);
  color: var(--af-text);
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body .aniplus-footer .aniplus-footer__back:hover {
  transform: translateY(-2px);
  background: var(--af-accent-soft);
  color: var(--af-accent);
  border-color: var(--af-accent);
  box-shadow: 0 11px 24px rgba(15, 23, 42, 0.13);
}

body .aniplus-footer .aniplus-footer__back:active {
  transform: translateY(0);
}

body .aniplus-footer .aniplus-footer__back:focus-visible {
  outline: 2px solid var(--af-accent);
  outline-offset: 3px;
}

body .aniplus-footer .aniplus-footer__back-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

body .aniplus-footer .aniplus-footer__back-icon svg {
  width: 23px;
  height: 23px;
  transition: transform 0.2s ease;
}

body .aniplus-footer .aniplus-footer__back:hover svg {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  body .aniplus-footer .aniplus-footer__back,
  body .aniplus-footer .aniplus-footer__back svg {
    transition: none;
  }
}

/*
 * AniPlus panel & archive UI polish.
 * Keeps the homepage's neutral charcoal surfaces and warm amber accent.
 * Import after the existing panel/mobile styles to avoid legacy overrides.
 */

.ap-panel-collection {
  --ap-list-bg: #fff;
  --ap-list-soft: #f7f8fa;
  --ap-list-line: #e7e9ef;
  --ap-list-text: #202634;
  --ap-list-muted: #778397;
  --ap-list-accent: #eaa11a;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  color: var(--ap-list-text);
  font-family: Vazirmatn, Vazir, Tahoma, sans-serif;
}

.ap-panel-collection *,
.ap-panel-collection *::before,
.ap-panel-collection *::after {
  box-sizing: border-box;
}

.ap-panel-collection__hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  margin-bottom: 24px;
  background: linear-gradient(115deg, #fff 55%, #fff5e2);
  border: 1px solid var(--ap-list-line);
  border-radius: 24px;
  box-shadow: 0 13px 38px rgba(23, 33, 48, 0.055);
}

.ap-panel-collection__hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -90px;
  width: 280px;
  height: 280px;
  border: 44px solid rgba(234, 161, 26, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.ap-panel-collection__hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border: 1px solid #f0d598;
  border-radius: 19px;
  color: #a96d08;
  background: linear-gradient(145deg, #fff3d5, #ffe6ab);
}

.ap-panel-collection__hero-icon svg {
  width: 30px;
  height: 30px;
}

.ap-panel-collection__hero-text {
  position: relative;
  flex: 1 1 210px;
  min-width: 0;
}

.ap-panel-collection__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #b17b13;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ap-panel-collection__hero h1 {
  margin: 0;
  color: var(--ap-list-text);
  font-size: clamp(21px, 2.6vw, 29px);
  font-weight: 900;
}

.ap-panel-collection__hero p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 2;
  color: var(--ap-list-muted);
}

.ap-panel-collection__total,
.ap-panel-collection__disabled {
  padding: 9px 13px;
  border: 1px solid var(--ap-list-line);
  border-radius: 11px;
  background: var(--ap-list-bg);
  color: var(--ap-list-muted);
  font-size: 12px;
  font-weight: 800;
}

.ap-panel-collection__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 17px;
  border-radius: 12px;
  border: 1px solid #e6a525;
  background: linear-gradient(135deg, #ffd173, #f2a618);
  color: #3b290d;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(234, 161, 26, 0.18);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}

.ap-panel-collection__primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(234, 161, 26, 0.27);
  color: #30220b;
}

.ap-panel-collection__primary svg {
  width: 17px;
  height: 17px;
}

.ap-panel-collection__list {
  display: grid;
  gap: 16px;
}

.ap-panel-collection__card {
  min-width: 0;
  border: 1px solid var(--ap-list-line);
  border-radius: 20px;
  padding: 20px;
  background: var(--ap-list-bg);
  box-shadow: 0 9px 30px rgba(23, 33, 48, 0.04);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.ap-panel-collection__card:hover {
  border-color: rgba(234, 161, 26, 0.46);
  transform: translateY(-2px);
  box-shadow: 0 15px 36px rgba(23, 33, 48, 0.08);
}

.ap-comment-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.ap-comment-card__media {
  flex: 0 0 84px;
  height: 104px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--ap-list-soft);
}

.ap-comment-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ap-comment-card__content {
  min-width: 0;
  flex: 1;
}

.ap-comment-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ap-comment-card__titles {
  min-width: 0;
}

.ap-comment-card__eyebrow {
  display: block;
  font-size: 11px;
  color: var(--ap-list-muted);
  margin-bottom: 2px;
}

.ap-comment-card__titles h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 900;
  color: var(--ap-list-text);
  overflow-wrap: anywhere;
}

.ap-panel-collection__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 900;
  white-space: nowrap;
}

.ap-panel-collection__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ap-panel-collection__status--success {
  background: #e9f8f1;
  color: #13855d;
  border-color: #c7eddc;
}

.ap-panel-collection__status--pending {
  background: #fff6e4;
  color: #98600b;
  border-color: #f5dfb0;
}

.ap-panel-collection__status--info {
  background: #ebf4ff;
  color: #2474bd;
  border-color: #cfe4ff;
}

.ap-panel-collection__status--muted {
  background: #f1f2f5;
  color: #7e8897;
  border-color: #e5e8ee;
}

.ap-comment-card__body {
  margin: 11px 0 13px;
  padding: 12px 14px;
  border: 1px solid var(--ap-list-line);
  border-right: 3px solid var(--ap-list-accent);
  border-radius: 12px 4px 4px 12px;
  background: var(--ap-list-soft);
  color: #475266;
  line-height: 2;
  font-size: 12px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ap-comment-card__footer,
.ap-ticket-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--ap-list-line);
  padding-top: 12px;
}

.ap-panel-collection__date {
  font-size: 11px;
  color: var(--ap-list-muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
}

.ap-comment-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-comment-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 33px;
  padding: 6px 10px;
  border: 1px solid var(--ap-list-line);
  border-radius: 9px;
  background: var(--ap-list-bg);
  color: #59677c;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ap-comment-card__action svg {
  width: 16px;
  height: 16px;
}

.ap-comment-card__action:hover {
  background: #fff6e6;
  color: #9c640c;
  border-color: #f0d69e;
}

.ap-comment-card__action--danger:hover {
  background: #fff0f0;
  color: #c94b4b;
  border-color: #f4caca;
}

.ap-panel-collection__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 52px 18px;
  border: 1px dashed var(--ap-list-line);
  border-radius: 20px;
  background: var(--ap-list-bg);
}

.ap-panel-collection__empty-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: #fff3de;
  color: #bc7e13;
}

.ap-panel-collection__empty-icon svg {
  width: 30px;
  height: 30px;
}

.ap-panel-collection__empty h2 {
  margin: 0 0 5px;
  font-size: 17px;
  color: var(--ap-list-text);
  font-weight: 900;
}

.ap-panel-collection__empty p {
  margin: 0;
  color: var(--ap-list-muted);
  font-size: 12px;
  line-height: 1.9;
}

.ap-panel-collection__pagination {
  margin: 25px 0 10px;
  display: flex;
  justify-content: center;
}

.ap-my-tickets__summary {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 0 4px 14px;
  font-size: 13px;
  color: var(--ap-list-text);
}

.ap-my-tickets__summary-icon {
  color: var(--ap-list-accent);
  font-size: 13px;
}

.ap-my-tickets__summary > span:last-child {
  margin-right: auto;
  color: var(--ap-list-muted);
  font-size: 11px;
}

.ap-my-tickets__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.ap-ticket-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 22px;
  border: 1px solid var(--ap-list-line);
  border-radius: 20px;
  background: var(--ap-list-bg);
  color: var(--ap-list-text);
  text-decoration: none;
  box-shadow: 0 9px 30px rgba(23, 33, 48, 0.045);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ap-ticket-card:hover {
  color: var(--ap-list-text);
  border-color: rgba(234, 161, 26, 0.52);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(23, 33, 48, 0.09);
}

.ap-ticket-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ap-ticket-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff1d3;
  color: #b47710;
}

.ap-ticket-card__icon svg {
  width: 23px;
  height: 23px;
}

.ap-ticket-card__title {
  font-size: 15px;
  font-weight: 900;
  color: inherit;
  margin: 0;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.ap-ticket-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ap-list-muted);
  font-size: 11px;
  font-weight: 750;
}

.ap-ticket-card__department {
  padding: 4px 10px;
  background: var(--ap-list-soft);
  border: 1px solid var(--ap-list-line);
  border-radius: 8px;
}

.ap-ticket-card__number {
  font-variant-numeric: tabular-nums;
}

.ap-ticket-card__preview {
  margin: 0;
  color: #6e7989;
  font-size: 12px;
  line-height: 1.9;
  min-height: 44px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-ticket-card__footer {
  margin-top: auto;
}

.ap-ticket-card__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 900;
  color: #ac761b;
}

.ap-ticket-card__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.ap-ticket-card:hover .ap-ticket-card__go svg {
  transform: translateX(-3px);
}

.ap-panel-collection :is(a, button):focus-visible {
  outline: 3px solid rgba(234, 161, 26, 0.45);
  outline-offset: 3px;
}

/* On the dark theme, all panel surfaces use the same tokens as the homepage. */

body.dark #leo_app .ap-panel-collection {
  --ap-list-bg: var(--ani-surface);
  --ap-list-soft: var(--ani-surface-raised);
  --ap-list-line: var(--ani-border);
  --ap-list-text: var(--ani-text);
  --ap-list-muted: var(--ani-muted);
  --ap-list-accent: var(--ani-accent);
}

body.dark #leo_app .ap-panel-collection__hero {
  background: linear-gradient(115deg, var(--ani-surface) 52%, #332b20);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.17);
}

body.dark #leo_app .ap-panel-collection__hero-icon,
body.dark #leo_app .ap-ticket-card__icon,
body.dark #leo_app .ap-panel-collection__empty-icon {
  background: #3c3120;
  color: var(--ani-accent);
  border-color: #66502d;
}

body.dark #leo_app .ap-panel-collection__eyebrow,
body.dark #leo_app .ap-ticket-card__go {
  color: var(--ani-accent);
}

body.dark #leo_app :is(.ap-panel-collection__card, .ap-ticket-card, .ap-panel-collection__empty, .ap-panel-collection__total, .ap-comment-card__action) {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
  box-shadow: var(--ani-shadow);
}

body.dark #leo_app :is(.ap-comment-card__body, .ap-ticket-card__department) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark #leo_app .ap-comment-card__body {
  border-right-color: var(--ani-accent);
}

body.dark #leo_app :is(.ap-panel-collection__hero h1, .ap-comment-card__titles h2, .ap-ticket-card__title, .ap-panel-collection__empty h2) {
  color: var(--ani-text);
}

body.dark #leo_app .ap-ticket-card__preview {
  color: var(--ani-muted);
}

body.dark #leo_app :is(.ap-comment-card__footer, .ap-ticket-card__footer) {
  border-color: var(--ani-border);
}

body.dark #leo_app :is(.ap-comment-card__action:hover, .ap-ticket-card:hover, .ap-panel-collection__card:hover) {
  background: var(--ani-surface-hover);
  border-color: #a47b39;
  color: var(--ani-text);
}

body.dark #leo_app .ap-panel-collection__status--success {
  background: #17392f;
  color: #91e5b8;
  border-color: #2b6550;
}

body.dark #leo_app .ap-panel-collection__status--pending {
  background: #45361e;
  color: #ffd18b;
  border-color: #755429;
}

body.dark #leo_app .ap-panel-collection__status--info {
  background: #1d364b;
  color: #9ad1fb;
  border-color: #355e80;
}

body.dark #leo_app .ap-panel-collection__status--muted {
  background: #303237;
  color: #c0c3ca;
  border-color: #4c4e55;
}

/* Modern dark pagination shared by anime listing, anime archive and panel pages. */

body.dark :is(.page-anime, .page-season, #leo_app, .user-profile-page) .animo-pagination__item,
body.dark :is(.page-anime, .page-season, #leo_app, .user-profile-page) .animo-pagination__item--ellipsis {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
}

body.dark :is(.page-anime, .page-season, #leo_app, .user-profile-page) .animo-pagination__item:hover {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  color: var(--ani-accent);
}

body.dark :is(.page-anime, .page-season, #leo_app, .user-profile-page) .animo-pagination__item--active,
body.dark :is(.page-anime, .page-season, #leo_app, .user-profile-page) .animo-pagination__item--active:hover {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #291d09;
  box-shadow: 0 7px 24px rgba(247, 184, 66, 0.15);
}

body.dark .animo-pagination__item--disabled {
  opacity: 0.38;
}

body.dark :is(.page-anime, .page-season, #leo_app) :is(.animo-pagination__jump, .animo-pagination__jump-arrow) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark :is(.page-anime, .page-season, #leo_app) .animo-pagination__jump-input {
  background: var(--ani-canvas);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark :is(.page-anime, .page-season, #leo_app) .animo-pagination__jump-input:focus {
  border-color: var(--ani-accent);
  outline: 2px solid var(--ani-accent);
}

body.dark :is(.page-anime, .page-season, #leo_app) .animo-pagination__jump-submit {
  background: var(--ani-accent);
  color: #2c200a;
}

body.dark .modern-pagination :is(.modern-pagination__bar, .page-link, .page-link--ghost, .page-link--jump, .page-jump-input) {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .modern-pagination :is(.page-item.active .page-link, .page-link:hover) {
  background: var(--ani-accent);
  color: #241a0a;
  border-color: var(--ani-accent);
}

body.dark #leo_app .ap-panel-collection__pagination :is(.pagination, .uk-pagination) a {
  color: var(--ani-text-soft);
}

/* Existing panels, cards, profile and utilities. */

body.dark #leo_app :is(.leo-app-shell__main, .leo-app-user, .leo-main, .leo-content) {
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.panel-page-header, .panel-page-header h1, .panel-page-header p) {
  color: var(--ani-text);
}

body.dark #leo_app .panel-page-header p {
  color: var(--ani-muted);
}

body.dark #leo_app :is(.panel-secondary-btn, .panel-action-btn, .leo-mobile-header, .leo-sidebar__content) {
  border-color: var(--ani-border);
  color: var(--ani-text);
  background-color: var(--ani-surface);
}

body.dark #leo_app :is(.panel-action-btn:hover, .panel-secondary-btn:hover) {
  color: #29200c;
  background: var(--ani-accent);
  border-color: var(--ani-accent);
}

body.dark #leo_app :is(.bg-white, .bg-gray-50, .bg-slate-50, .dark\:bg-slate-900) {
  border-color: var(--ani-border);
}

body.dark #leo_app :is(.text-gray-800, .text-gray-900, .text-slate-800, .text-slate-900) {
  color: var(--ani-text) !important;
}

body.dark #leo_app :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500) {
  color: var(--ani-muted) !important;
}

body.dark #leo_app :is(.bg-gray-100, .bg-gray-50, .bg-slate-100, .bg-slate-800) {
  background-color: var(--ani-surface-raised) !important;
}

body.dark #leo_app .leo-sidebar-col :is(a, button):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Full request dialog: buttons, segmented tabs, input wrappers, titles and footer. */

body.dark #leo-request-modal .ap-request-dialog {
  background: var(--ani-surface) !important;
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

body.dark #leo-request-modal .ap-request-dialog :is(h3, .text-gray-800, .text-gray-700) {
  color: var(--ani-text) !important;
}

body.dark #leo-request-modal .ap-request-dialog :is(p, label, .text-gray-400, .text-gray-500) {
  color: var(--ani-muted) !important;
}

body.dark #leo-request-modal .ap-request-dialog [data-request-type-list] {
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border);
}

body.dark #leo-request-modal .ap-request-dialog [data-request-type] {
  color: var(--ani-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark #leo-request-modal .ap-request-dialog [data-request-type].bg-white {
  background: #403322 !important;
  color: var(--ani-accent) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

body.dark #leo-request-modal .ap-request-dialog .ap-request-dialog__field > div {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo-request-modal .ap-request-dialog .ap-request-dialog__field > div:focus-within {
  border-color: var(--ani-accent) !important;
}

body.dark #leo-request-modal .ap-request-dialog :is(input, textarea) {
  color: var(--ani-text) !important;
  background: transparent !important;
  color-scheme: dark;
}

body.dark #leo-request-modal .ap-request-dialog :is(input, textarea)::-moz-placeholder {
  color: var(--ani-muted) !important;
}

body.dark #leo-request-modal .ap-request-dialog :is(input, textarea)::placeholder {
  color: var(--ani-muted) !important;
}

body.dark #leo-request-modal .ap-request-dialog :is(.ap-request-dialog__footer, .uk-modal-close) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border);
  color: var(--ani-text-soft) !important;
}

body.dark #leo-request-modal .ap-request-dialog .ap-request-dialog__submit {
  background: var(--ani-accent) !important;
  color: #291d0b !important;
  border-color: transparent !important;
}

body.dark #leo-request-modal .ap-request-dialog__body {
  scrollbar-color: var(--ani-border) var(--ani-surface);
}

/* Panel mobile launcher and account bottom sheet: charcoal, never blue or bright gold. */

@media (max-width: 1024px) {
  body.dark #leo_app .leo-mobile-nav__items {
    background: rgba(27, 29, 32, 0.97);
    border-color: var(--ani-border);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
  }

  body.dark #leo_app .leo-mobile-nav__item--menu {
    background: var(--ani-surface-raised);
    background-image: none;
    border: 1px solid var(--ani-border);
    color: var(--ani-text);
    box-shadow: none;
  }

  body.dark #leo_app .leo-mobile-nav__item--menu:hover,
  body.dark #leo_app .leo-mobile-nav__item--menu:focus-visible {
    background: var(--ani-surface-hover);
    border-color: #80653d;
    color: var(--ani-text);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22);
  }

  body.dark #leo_app .leo-mobile-nav__item--menu[aria-expanded=true] {
    background: #343028;
    border-color: #8b6b3c;
    color: var(--ani-text);
  }

  body.dark #leo_app .leo-mobile-nav__item--menu:focus-visible {
    outline: 2px solid var(--ani-accent);
    outline-offset: 3px;
  }

  body.dark #leo_app .leo-mobile-nav__menu-icon {
    background: var(--ani-surface-hover);
    color: var(--ani-accent);
    border: 1px solid var(--ani-border);
  }

  body.dark #leo_app .leo-mobile-nav__menu-copy small {
    color: var(--ani-muted);
    opacity: 1;
  }

  body.dark #leo_app .leo-mobile-nav__menu-chevron {
    color: var(--ani-muted);
  }

  body.dark #leo_app .leo-sidebar-col,
  body.dark #leo_app .leo-sidebar-col.is-open {
    background: var(--ani-surface);
    border-color: var(--ani-border);
    box-shadow: 0 25px 75px rgba(0, 0, 0, 0.6);
  }

  body.dark #leo_app .leo-panel-sheet__head {
    background: var(--ani-surface);
    border-color: var(--ani-border);
  }

  body.dark #leo_app .leo-panel-sheet__heading strong {
    color: var(--ani-text);
  }

  body.dark #leo_app .leo-panel-sheet__heading small {
    color: var(--ani-muted);
  }

  body.dark #leo_app .leo-panel-sheet__handle {
    background: var(--ani-border);
  }

  body.dark #leo_app .leo-panel-sheet__close {
    background: var(--ani-surface-raised);
    color: var(--ani-text);
  }

  body.dark #leo_app .leo-sidebar-col .sidebar-content {
    background: var(--ani-surface) !important;
    color: var(--ani-text-soft);
  }

  /* Remove the legacy navy fill behind the actual menu entries. */

  body.dark #leo_app .leo-sidebar-col :is(.leo-sidebar__menu, .leo-sidebar__menu-list, ul.menu-list) {
    background: transparent !important;
    background-image: none !important;
  }

  body.dark #leo_app .leo-sidebar-col .leo-sidebar__menu ul.menu-list > li {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a {
    color: var(--ani-text-soft);
    border-radius: 12px;
  }

  body.dark #leo_app .leo-sidebar-overlay {
    background: rgba(0, 0, 0, 0.76);
  }

  /* Public mobile header and drawer */

  body.dark .animo-mobile-header {
    background: rgba(27, 29, 32, 0.96);
    border-bottom: 1px solid var(--ani-border);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(18px);
  }

  body.dark .animo-mobile-header .animo-mobile-btn {
    color: var(--ani-text);
    background: var(--ani-surface-raised);
    border: 1px solid var(--ani-border);
    border-radius: 12px;
  }

  body.dark .animo-mobile-header .animo-mobile-btn:hover,
  body.dark .animo-mobile-header .animo-mobile-btn:focus-visible {
    color: var(--ani-accent);
    border-color: var(--ani-accent);
  }

  body.dark .animo-mobile-drawer {
    background: var(--ani-surface);
    border-color: var(--ani-border);
    color: var(--ani-text-soft);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.4);
  }

  body.dark .animo-mobile-drawer :is(.animo-drawer-head, .animo-drawer-links) {
    background: var(--ani-surface);
    border-color: var(--ani-border);
  }

  body.dark .animo-mobile-drawer .animo-drawer-user {
    background: var(--ani-surface-raised);
    color: var(--ani-text);
  }

  body.dark .animo-mobile-drawer .animo-drawer-user small {
    color: var(--ani-muted);
  }

  body.dark .animo-mobile-drawer .animo-drawer-close {
    background: var(--ani-surface-raised);
    color: var(--ani-text);
  }

  body.dark .animo-mobile-drawer .animo-drawer-links strong {
    color: var(--ani-muted);
    border-color: var(--ani-border);
  }

  body.dark .animo-mobile-drawer .animo-drawer-links a {
    color: var(--ani-text-soft);
    background: var(--ani-surface-raised);
    border: 1px solid transparent;
    border-radius: 10px;
  }

  body.dark .animo-mobile-drawer .animo-drawer-links a:hover,
  body.dark .animo-mobile-drawer .animo-drawer-links a.active {
    background: #403321;
    color: var(--ani-accent);
    border-color: #684f2c;
  }

  body.dark .animo-mobile-drawer .animo-drawer-logout {
    background: var(--ani-surface-raised);
    color: var(--ani-text);
    border-color: var(--ani-border);
  }
}

body.dark .animo-mobile-drawer :is(a, button, label):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Footer back-to-top follows the same subdued dark surfaces. */

body.dark .aniplus-footer .aniplus-footer__back {
  background: var(--ani-surface-raised);
  background-image: none;
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.25);
}

body.dark .aniplus-footer .aniplus-footer__back:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent);
  border-color: #8b6b3c;
  box-shadow: 0 11px 26px rgba(0, 0, 0, 0.35);
}

body.dark .aniplus-footer .aniplus-footer__back-icon {
  background: transparent;
}

/* Notifications: clear read/unread distinction and feedback. */

#leo_app .ap-notifications__feedback {
  display: inline-block;
  color: #15845d;
  font-size: 12px;
  font-weight: 750;
  min-height: 20px;
}

#leo_app .ap-notifications__feedback.is-error {
  color: #d65c60;
}

body.dark #leo_app .ap-notifications__card {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft);
}

body.dark #leo_app .ap-notifications__card.is-unread {
  border-right: 3px solid var(--ani-accent) !important;
}

body.dark #leo_app .ap-notifications__card.is-read {
  opacity: 0.78;
}

body.dark #leo_app .ap-notifications__card .text-gray-700 {
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .ap-notifications__feedback {
  color: #91e5b8;
}

body.dark #leo_app .ap-notifications__feedback.is-error {
  color: #ffb2b5;
}

/* Mobile season filter: segmented categories, no more scrolling past dozens of years. */

.page-season .season-filter__mobile-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 12px;
  margin: -2px 0 14px;
  scrollbar-width: thin;
  scrollbar-color: #d9dce1 transparent;
  background: #fff;
  overscroll-behavior-x: contain;
}

.page-season .season-filter__mobile-nav button {
  flex: 0 0 auto;
  padding: 9px 13px;
  min-height: 40px;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  background: #f3f5f7;
  color: #637084;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.page-season .season-filter__mobile-nav button.is-active {
  background: #fff1d6;
  color: #87580d;
  border-color: #ecc47b;
}

.page-season .season-filter__mobile-nav button:focus-visible {
  outline: 2px solid #f3a303;
  outline-offset: 2px;
}

.page-season .season-filter__modal-content--all .season-filter__mobile-section {
  margin-bottom: 8px;
}

.page-season .season-filter__years--mobile {
  max-height: min(43dvh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.dark .page-season .season-filter__mobile-nav {
  background: var(--ani-surface);
  scrollbar-color: var(--ani-border) transparent;
}

body.dark .page-season .season-filter__mobile-nav button {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__mobile-nav button.is-active {
  background: #45351d;
  border-color: #88642e;
  color: var(--ani-accent);
}

body.dark .page-season :is(.season-filter__modal--mobile-all, .season-filter__modal-header, .season-filter__modal-footer, .season-filter__modal-content--all) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season :is(.season-filter__mobile-section, .season-filter__year, .season-filter__sort-card, .season-filter__pill-content, .season-filter__option, .season-filter__mobile-trigger) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season :is(.season-filter__modal-title, .season-filter__mobile-section h4, .season-filter__year-title) {
  color: var(--ani-text);
}

body.dark .page-season :is(.season-filter__season, .season-filter__later) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season :is(.season-filter__season.is-selected, .season-filter__pill input:checked + .season-filter__pill-content, .season-filter__option input:checked ~ .season-filter__option-label) {
  color: var(--ani-accent);
  border-color: var(--ani-accent);
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card {
  background: #45351d;
  border-color: #88642e;
  color: var(--ani-accent);
}

body.dark .page-season .season-filter__reset {
  color: var(--ani-accent);
}

body.dark .page-season .season-filter__apply {
  background: var(--ani-accent);
  color: #291c08;
}

@media (max-width: 768px) {
  .ap-panel-collection__hero {
    padding: 18px;
    border-radius: 18px;
    gap: 12px;
  }

  .ap-panel-collection__hero-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .ap-panel-collection__hero-icon svg {
    width: 24px;
    height: 24px;
  }

  .ap-panel-collection__primary {
    width: 100%;
  }

  .ap-my-tickets__grid {
    grid-template-columns: 1fr;
  }

  .ap-comment-card {
    gap: 11px;
    padding: 14px;
  }

  .ap-comment-card__media {
    flex-basis: 58px;
    height: 82px;
    border-radius: 11px;
  }

  .ap-comment-card__heading {
    flex-wrap: wrap;
    gap: 6px;
  }

  .ap-comment-card__titles h2 {
    font-size: 13px;
  }

  .ap-comment-card__body {
    padding: 10px;
    font-size: 11px;
  }

  .ap-comment-card__footer {
    flex-wrap: wrap;
  }

  .ap-ticket-card {
    padding: 17px;
  }

  .page-season .season-filter__modal--mobile-all {
    max-height: 90dvh;
  }

  .page-season .season-filter__modal-content--all {
    padding: 12px;
  }

  .page-season .season-filter__mobile-nav {
    margin-top: -12px;
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-panel-collection :is(.ap-panel-collection__card, .ap-ticket-card, .ap-panel-collection__primary) {
    transition: none;
  }
}

/*
 * Single-anime dark mode: use the same neutral charcoal palette as the home
 * page, rather than the legacy blue/navy surfaces in related and comments.
 * Imported after the shared dark-mode styles; light mode is unaffected.
 */

body.dark .anime-detail-page {
  --apc-text: var(--ani-text);
  --apc-muted: var(--ani-muted);
  --apc-stroke: var(--ani-border);
  --apc-canvas: var(--ani-surface-raised);
  --apc-surface: var(--ani-surface);
}

/* Keep the common tab canvas consistent when switching between sections. */

body.dark .anime-detail-page .anime-tabs-card .tab-content {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

/* Related and recommended anime: no isolated midnight-blue panel. */

body.dark .anime-detail-page .anime-related-card {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-related-card__header {
  background: var(--ani-surface-raised);
  border-bottom-color: var(--ani-border);
}

body.dark .anime-detail-page .anime-related-card__title {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-related-card__description,
body.dark .anime-detail-page .anime-related-card__section-title {
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-related-card__pane,
body.dark .anime-detail-page .anime-related-card .related-items {
  background: transparent;
}

body.dark .anime-detail-page .anime-related-card .related-tabs-toggle {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn:hover,
body.dark .anime-detail-page .anime-related-card .related-toggle-btn:focus-visible {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-related-card .related-toggle-btn.active {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-related-card .related-items__list > .post-anime .anime-card,
body.dark .anime-detail-page .anime-related-card .related-items__list > .post-anime .card-content {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-related-card .anime-title {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-related-card .card-stats {
  border-color: var(--ani-border);
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-related-card .anime-tab-empty-state {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

/* The comment component still ships a separate navy palette: rebind its
 * surfaces only inside anime details, including the empty and loading states. */

body.dark .anime-detail-page #comment-pane .ap-comments,
body.dark .anime-detail-page #comment-pane .ap-comments__header {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page #comment-pane .ap-comments__list {
  background: transparent;
}

body.dark .anime-detail-page #comment-pane .ap-comments__empty {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  border-radius: 16px;
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page #comment-pane .ap-comments__empty-sub,
body.dark .anime-detail-page #comment-pane .ap-comment-card__meta {
  color: var(--ani-muted);
}

body.dark .anime-detail-page #comment-pane .ap-comments__filter-btn,
body.dark .anime-detail-page #comment-pane .ap-comment-composer__icon-btn,
body.dark .anime-detail-page #comment-pane .ap-comment-card__menu-btn {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page #comment-pane .ap-comments__filter-btn:hover,
body.dark .anime-detail-page #comment-pane .ap-comment-composer__icon-btn:hover,
body.dark .anime-detail-page #comment-pane .ap-comment-composer__icon-btn.is-active,
body.dark .anime-detail-page #comment-pane .ap-comment-card__menu-btn:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page #comment-pane .ap-comments__filter-btn.active {
  background: #3b3020;
  border-color: #755526;
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__card,
body.dark .anime-detail-page #comment-pane .ap-comment-reply__form .ap-comment-composer__card {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__textarea {
  background: transparent;
  color: var(--ani-text);
  caret-color: var(--ani-accent);
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__textarea::-moz-placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__textarea::placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__footer,
body.dark .anime-detail-page #comment-pane .ap-comment-card,
body.dark .anime-detail-page #comment-pane .ap-comment-card__header {
  border-color: var(--ani-border);
}

body.dark .anime-detail-page #comment-pane .ap-comment-toggle,
body.dark .anime-detail-page #comment-pane .ap-comment-composer__spoiler-message,
body.dark .anime-detail-page #comment-pane .ap-comment-card__text,
body.dark .anime-detail-page #comment-pane .ap-comment-card__body {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page #comment-pane .ap-comment-card__name {
  color: var(--ani-text);
}

body.dark .anime-detail-page #comment-pane .ap-comment-card__badge-link a,
body.dark .anime-detail-page #comment-pane .ap-comment-card__menu-items,
body.dark .anime-detail-page #comment-pane .ap-comment-children__dialog,
body.dark .anime-detail-page #comment-pane .ap-comment-children__parent {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page #comment-pane .ap-comment-card__replies-btn,
body.dark .anime-detail-page #comment-pane .ap-comment-reply__btn {
  color: var(--ani-muted);
}

body.dark .anime-detail-page #comment-pane .ap-comment-card__replies-btn:hover,
body.dark .anime-detail-page #comment-pane .ap-comment-reply__btn:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__submit {
  background: var(--ani-accent);
  color: #1a1711;
}

body.dark .anime-detail-page #comment-pane .ap-comment-composer__submit:hover:not(:disabled) {
  background: var(--ani-accent-strong);
}

body.dark .anime-detail-page #comment-pane :is(button, a, textarea, input):focus-visible,
body.dark .anime-detail-page .anime-related-card :is(button, a):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/*
 * Anime detail, account preferences and seasonal browser: dark-mode legibility.
 *
 * Loaded after the legacy, unified and inline-facing Sass overrides in app.scss.
 * Deliberately scoped to body.dark to keep the existing light theme unchanged.
 * Use homepage tokens so the UI does not switch between navy and charcoal.
 */

/* Related anime: the poster cards have inline SVG artwork whose default fill
 * is black; inheriting the card text color makes eye/score icons visible. */

body.dark .anime-detail-page .anime-related-card {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
}

body.dark .anime-detail-page .anime-related-card__title-icon,
body.dark .anime-detail-page .anime-related-card__title-icon i,
body.dark .anime-detail-page .anime-related-card :is(.related-toggle-btn, .anime-related-card__archive) i {
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .anime-related-card .related-items__list .anime-card {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-related-card .related-items__list .card-content {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-related-card .related-items__list .card-stats {
  border-color: var(--ani-border);
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-related-card .related-items__list .card-stats .icon {
  color: var(--ani-muted);
  fill: currentColor;
}

body.dark .anime-detail-page .anime-related-card .related-items__list .meta-tags .star-icon {
  color: #f7b842;
  fill: currentColor;
}

body.dark .anime-detail-page .anime-related-card .related-items__list .rating .score,
body.dark .anime-detail-page .anime-related-card .related-items__list .anime-title {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-related-card :is(a, button):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

/* Unrated MAL tiles were still caught by the light-mode :nth-child(2) rule.
 * Override that exact selector, not only the more general .rating-item--mal. */

body.dark .anime-detail-page .anime-info-pane .anime-scores-card .rating-item,
body.dark .anime-detail-page .anime-info-pane .anime-scores-card .rating-item:nth-child(2) {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-info-pane .anime-scores-card .rating-item--mal {
  border-color: rgba(123, 173, 241, 0.36);
}

body.dark .anime-detail-page .anime-scores-card .rating-item :is(header b, .rating-score strong, footer b) {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-scores-card .rating-item :is(.rating-score span, footer span) {
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-scores-card .rating-item--mal .rating-item__source,
body.dark .anime-detail-page .anime-scores-card .rating-item--mal .rating-score em {
  background: #263b53;
  border-color: #395a7a;
  color: #c4ddff;
}

body.dark .anime-detail-page .anime-scores-card .rating-item--mal .rating-item__track {
  background: #374151;
}

/* Quality label: no light patch behind 1080p; do not suppress its value. */

body.dark .anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update--quality {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update--quality .anime-sidebar-update__icon {
  background: #393123;
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update--quality .anime-sidebar-update__quality {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update__label {
  color: var(--ani-muted);
}

/* Empty comments: one compact message card, without the unused list
 * padding or a second blank container. Vue adds .is-empty to the root. */

body.dark .anime-detail-page #comment-pane .ap-comments.is-empty {
  margin: 12px auto 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}

body.dark .anime-detail-page #comment-pane .ap-comments.is-empty .ap-comments__empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 112px;
  padding: 20px 16px;
  margin: 0;
  border: 1px solid var(--ani-border);
  border-radius: 14px;
  background: var(--ani-surface-raised);
  color: var(--ani-text);
}

body.dark .anime-detail-page #comment-pane .ap-comments.is-empty .ap-comments__empty p {
  margin: 0;
  color: var(--ani-text-soft);
  line-height: 1.8;
}

body.dark .anime-detail-page #comment-pane .ap-comments.is-empty .ap-comments__empty .ap-comments__empty-sub {
  color: var(--ani-muted);
}

/* User list popup: its fixed overlay lives within the anime details but its
 * surfaces are separate from the card. Cover ALL states and footer controls. */

body.dark .anime-list-panel__backdrop {
  background: rgba(8, 9, 12, 0.78);
}

body.dark .anime-list-panel__body {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

body.dark .anime-list-panel__header,
body.dark .anime-list-panel__footer {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .anime-list-panel__header h4,
body.dark .anime-list-panel__section h5,
body.dark .anime-list-panel__rating-heading h5 {
  color: var(--ani-text);
}

body.dark .anime-list-panel__header p,
body.dark .anime-list-panel__progress-copy,
body.dark .anime-list-panel__presets,
body.dark .anime-list-panel__rating-feedback {
  color: var(--ani-muted);
}

body.dark .anime-list-panel__badge {
  background: #42331f;
  color: #ffd28a;
}

body.dark .anime-list-panel__close,
body.dark .anime-list-panel__tabs,
body.dark .anime-list-panel__progress-top > b,
body.dark .anime-list-panel__stepper button,
body.dark .anime-list-panel__presets button {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .anime-list-panel__close:hover,
body.dark .anime-list-panel__stepper button:hover:not(:disabled),
body.dark .anime-list-panel__presets button:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .anime-list-panel__progress,
body.dark .anime-list-panel__status-card,
body.dark .anime-list-panel__rating-grid button,
body.dark .anime-list-panel__rating-feedback {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .anime-list-panel__status-card:hover,
body.dark .anime-list-panel__rating-grid button:hover {
  background: var(--ani-surface-hover);
  border-color: #84704e;
}

body.dark .anime-list-panel__status-card.is-selected {
  box-shadow: inset 0 0 0 1px currentColor;
}

body.dark .anime-list-panel__status-card--emerald.is-selected {
  background: #1e3930;
  border-color: #3d9573;
  color: #abf4d3;
}

body.dark .anime-list-panel__status-card--blue.is-selected {
  background: #203a54;
  border-color: #558ecc;
  color: #c4dfff;
}

body.dark .anime-list-panel__status-card--amber.is-selected {
  background: #45351e;
  border-color: #c38b32;
  color: #ffe0a0;
}

body.dark .anime-list-panel__status-card--rose.is-selected {
  background: #4b2835;
  border-color: #c8768e;
  color: #ffd0dd;
}

body.dark .anime-list-panel__status-card--violet.is-selected {
  background: #352b50;
  border-color: #9d84d4;
  color: #e0d2ff;
}

body.dark .anime-list-panel__status-card.is-selected > span i,
body.dark .anime-list-panel__status-card.is-selected > .anime-list-panel__check {
  color: inherit;
  opacity: 1;
}

body.dark .anime-list-panel__tabs button {
  color: var(--ani-text-soft);
}

body.dark .anime-list-panel__tabs button.is-active {
  background: #483821;
  color: #ffda91;
}

body.dark .anime-list-panel__progress-bar {
  background: #414141;
}

body.dark .anime-list-panel__progress-copy strong {
  color: #a9e4bc;
}

body.dark .anime-list-panel__rating-grid button.is-lower {
  background: #3c3020;
  border-color: #72552b;
  color: #f8d093;
}

body.dark .anime-list-panel__rating-grid button.is-selected {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #241808;
}

body.dark .anime-list-panel__rating-feedback strong {
  color: #ffd28a;
}

body.dark .anime-list-panel__rating-heading > button {
  color: var(--ani-text-soft);
}

body.dark .anime-list-panel__rating-heading > button:hover {
  color: #ffabb8;
}

body.dark .anime-list-panel__cancel {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .anime-list-panel__remove {
  background: #3d252a;
  border-color: #7a414e;
  color: #ffbfc9;
}

body.dark .anime-list-panel__save {
  background: var(--ani-accent);
  color: #291d0c;
}

body.dark .anime-list-panel__save:hover {
  background: var(--ani-accent-strong);
}

body.dark .anime-list-panel__scrollable {
  scrollbar-color: #666158 transparent;
}

body.dark .anime-list-panel__body :is(button, input):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Copy links modal, SVG icon and dropdown. */

body.dark .anime-detail-page .btn-copy__toggle,
body.dark .anime-detail-page .js-copy-dropdown {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .btn-copy__icon svg {
  color: var(--ani-text-soft);
  stroke: currentColor;
}

body.dark .anime-detail-page .js-copy-dropdown :is(a, .label) {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .js-copy-dropdown a:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .copy-links-modal .anime-detail-modal__dialog,
body.dark .copy-links-modal .anime-detail-modal__body {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .copy-links-modal .anime-detail-modal__header {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark .copy-links-modal :is(h4, .copy-links__title, label) {
  color: var(--ani-text);
}

body.dark .copy-links-modal :is(p, .copy-links__title b) {
  color: var(--ani-muted);
}

body.dark .copy-links-modal .copy-links__range-grid input {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
  color-scheme: dark;
}

body.dark .copy-links-modal .copy-links__submit {
  background: var(--ani-accent);
  color: #241808;
}

body.dark .copy-links-modal :is(button, input):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

/* Account defaults, preferences and SVG controls. Existing components take
 * colors from --ap-* variables, so reset them here rather than per-element hacks. */

body.dark #leo_app .ap-preferences {
  --ap-line: var(--ani-border);
  --ap-surface: var(--ani-surface);
  --ap-subtle: var(--ani-surface-raised);
  --ap-title: var(--ani-text);
  --ap-muted: var(--ani-muted);
  --ap-accent: var(--ani-accent);
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark #leo_app .ap-preferences__section {
  background: var(--ap-surface);
  border-color: var(--ap-line);
  box-shadow: none;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice, .ap-preferences__topic) {
  background: var(--ap-subtle);
  border-color: var(--ap-line);
  color: var(--ap-title);
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice, .ap-preferences__topic):has(input:checked) {
  background: #41331e;
  border-color: #b58a41;
  box-shadow: inset 0 0 0 1px #6a502e;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice-icon, .ap-preferences__topic-icon) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: #f2c578;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice-icon, .ap-preferences__topic-icon) svg {
  display: block;
  stroke: currentColor;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice-tick, .ap-preferences__topic-check) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: transparent;
}

body.dark #leo_app .ap-preferences .ap-preferences__choice:has(input:checked) .ap-preferences__choice-tick,
body.dark #leo_app .ap-preferences .ap-preferences__topic:has(input:checked) .ap-preferences__topic-check {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #251909;
}

body.dark #leo_app .ap-preferences__switch > span {
  background: #514c44;
}

body.dark #leo_app .ap-preferences__switch input:checked + span {
  background: var(--ani-accent);
}

body.dark #leo_app .ap-preferences__footer button {
  background: var(--ani-accent);
  color: #251909;
}

body.dark #leo_app .ap-preferences :is(label, button):focus-within {
  outline-color: var(--ani-accent);
}

/* Seasonal archive: fix the selected age badge that disappeared because the
 * older '.season-filter__pill span' selector restyled *nested* icon and text
 * spans, including the selected label, as dark backgrounds. */

body.dark .page-season .season-filter {
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__title,
body.dark .page-season .season-filter__modal-title,
body.dark .page-season .season-filter__year-title {
  color: var(--ani-text);
}

body.dark .page-season :is(.season-filter__bar--desktop, .season-filter__modal, .season-filter__year, .season-filter__mobile-trigger) {
  background: var(--ani-surface);
  background-image: none;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-season :is(.season-filter__trigger, .season-filter__season, .season-filter__sort-card, .season-filter__option-box, .season-filter__pill-content) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__pill .season-filter__pill-content > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  box-shadow: none;
  pointer-events: none;
}

body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #251909;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content > span,
body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content .season-filter__pill-icon {
  background: transparent;
  border: 0;
  color: #251909;
}

body.dark .page-season .season-filter__season.is-selected {
  background: #47351b;
  border-color: var(--ani-accent);
  color: #ffdb9d;
  box-shadow: inset 0 0 0 1px #9a7231;
}

body.dark .page-season .season-filter__season.is-selected .season-filter__season-icon,
body.dark .page-season .season-filter__season.is-selected svg {
  color: inherit;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card {
  background: #47351b;
  border-color: var(--ani-accent);
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-label,
body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-icon {
  color: #ffdb9d;
}

body.dark .page-season .season-filter__option input:checked ~ .season-filter__option-label {
  color: #ffdb9d;
}

body.dark .page-season .season-filter__option input:focus-visible + .season-filter__option-box,
body.dark .page-season .season-filter__pill input:focus-visible + .season-filter__pill-content,
body.dark .page-season .season-filter__sort-option input:focus-visible + .season-filter__sort-card {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

body.dark .page-season .season-filter__option-label,
body.dark .page-season .season-filter__sort-label,
body.dark .page-season .season-filter__mobile-section h4 {
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__apply {
  background: var(--ani-accent);
  color: #251909;
}

body.dark .page-season .season-filter__modal-close {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__modal-close:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .page-season .box-anime.box-card {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  border-radius: 20px;
  box-shadow: none;
}

body.dark .page-season .box-anime.box-card .section-header {
  border-color: var(--ani-border);
}

body.dark .page-season .seasonal-grid .anime-card,
body.dark .page-season .seasonal-grid .card-content {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .seasonal-grid .anime-title {
  color: var(--ani-text);
}

body.dark .page-season .seasonal-grid .card-stats {
  border-color: var(--ani-border);
  color: var(--ani-muted);
}

body.dark .page-season .seasonal-grid .card-stats .icon {
  color: var(--ani-muted);
  fill: currentColor;
}

body.dark .page-season .seasonal-grid .star-icon {
  color: #f7b842;
  fill: currentColor;
}

body.dark .page-season .seasonal-grid .tag-quality {
  background: #453521;
  color: #ffdda0;
  border-color: #87652f;
}

body.dark .page-season :is(button, a, label):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  body.dark .page-season .season-filter__dropdown--mobile .season-filter__modal--mobile-all {
    background: var(--ani-surface);
    border-color: var(--ani-border);
  }

  body.dark .page-season .season-filter__mobile-nav button.is-active {
    background: #47351b;
    border-color: var(--ani-accent);
    color: #ffdb9d;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dark .anime-list-panel__body,
  body.dark .page-season .season-filter__trigger,
  body.dark .page-season .season-filter__season {
    animation: none;
    transition: none;
  }
}

/*
 * Public-page dark-mode parity with the AniPlus homepage.
 * Shared neutral --ani-* colors are defined in aniplus-2026-theme.scss.
 * Loaded after legacy dark mode so navy backgrounds cannot leak into public UI.
 * All layout/spacing stays untouched; shadows are removed only where requested.
 */

/* The selected detail tab is indicated by its orange underline, not a filled card. */

.anime-detail-page .anime-tabs-card .tab-link.active,
.anime-detail-page .anime-tabs-card .tab-link.active:hover,
body.dark .anime-detail-page .anime-tabs-card .tab-link.active,
body.dark .anime-detail-page .anime-tabs-card .tab-link.active:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom-color: #ed9000;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active {
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .anime-tabs-card .tab-link:hover {
  background: transparent;
  color: var(--ani-accent);
}

/* "Add to my list" must remain readable on hover (label and helper line). */

body.dark .anime-detail-page .anime-list-panel__summary {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-list-panel__summary:hover,
body.dark .anime-detail-page .anime-list-panel__summary:focus-visible {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-list-panel__summary :is(.anime-list-panel__summary-text, .anime-list-panel__summary-help, .anime-list-panel__arrow) {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-list-panel__summary:hover :is(.anime-list-panel__summary-text, .anime-list-panel__summary-help, .anime-list-panel__arrow),
body.dark .anime-detail-page .anime-list-panel__summary:focus-visible :is(.anime-list-panel__summary-text, .anime-list-panel__summary-help, .anime-list-panel__arrow) {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-list-panel__summary .anime-list-panel__summary-icon {
  background: #43351f;
  color: var(--ani-accent);
}

/* Every part of the download panel inherits charcoal rather than navy. */

body.dark .anime-detail-page .download-modern {
  --download-primary: var(--ani-accent);
  --download-primary-dark: #d99a26;
  --download-surface: var(--ani-surface-raised);
  --download-background: var(--ani-surface);
  --download-border: var(--ani-border);
  --download-text: var(--ani-text);
  --download-muted: var(--ani-muted);
  --download-hover: var(--ani-surface-hover);
  color: var(--ani-text);
  color-scheme: dark;
}

body.dark .anime-detail-page .download-modern :is(.download-series-panel, .download-card, .download-card__info, .download-series-panel__empty) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page .download-modern :is(.download-card, .download-series-panel):hover {
  box-shadow: none;
}

body.dark .anime-detail-page .download-modern :is(.download-card__title, .download-card__title .value) {
  color: var(--ani-text);
}

body.dark .anime-detail-page .download-modern :is(.download-card__title .label, .download-card__info) {
  color: var(--ani-muted);
}

body.dark .anime-detail-page .download-modern :is(.download-card__play-btn, .download-card__helper-btn, .download-card__unavailable) {
  background: var(--ani-surface-hover);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .anime-detail-page .download-modern :is(.download-card__play-btn, .download-card__helper-btn):hover {
  background: #43351f;
  color: var(--ani-accent-strong);
  border-color: var(--ani-accent);
}

body.dark .anime-detail-page .download-modern .download-card__download:not(.download-card__download--disabled):not([aria-disabled=true]) {
  background: var(--ani-accent);
  color: #2b1b08;
}

body.dark .anime-detail-page .download-modern .download-card__download:not(.download-card__download--disabled):not([aria-disabled=true]):hover {
  background: var(--ani-accent-strong);
  color: #2b1b08;
}

body.dark .anime-detail-page .download-modern .download-card__download--disabled,
body.dark .anime-detail-page .download-modern .download-card__download[aria-disabled=true] {
  background: var(--ani-surface-hover);
  color: var(--ani-muted);
}

body.dark .anime-detail-page .download-modern :is(input, select, button):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Header dropdowns, under-menu panels and generic episode dialogs. */

body.dark .animo-header-shell :is(.animo-dropdown, .animo-notification-dropdown, .animo-profile-dropdown, .animo-mobile-drawer) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .animo-header-shell :is(.animo-dropdown a, .animo-profile-dropdown a, .animo-notification-item):hover {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .anime-detail-page :is(.anime-detail-modal__close, .anime-mobile-tabs-modal .anime-detail-modal__close),
body.dark .copy-links-modal .anime-detail-modal__close {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-detail-modal__close:hover,
body.dark .copy-links-modal .anime-detail-modal__close:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

/* Comment report and poll dialogs are portal-mounted outside the detail page. */

body.dark :is(.ap-report-modal, .ap-comment-poll__modal) {
  background: rgba(7, 8, 10, 0.8);
}

body.dark :is(.ap-report-modal__dialog, .ap-comment-poll__dialog) {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

body.dark :is(.ap-report-modal__header-copy h2, .ap-comment-poll__title, .ap-comment-poll__label, .ap-comment-poll__toggle-title) {
  color: var(--ani-text);
}

body.dark :is(.ap-report-modal__header-copy p, .ap-comment-poll__subtitle, .ap-comment-poll__toggle-desc) {
  color: var(--ani-muted);
}

body.dark :is(.ap-report-modal__option, .ap-comment-poll__toggle, .ap-comment-poll__input, .ap-comment-poll__textarea) {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .ap-report-modal__option:hover,
body.dark .ap-comment-poll__toggle:hover {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
}

body.dark .ap-report-modal__option.is-active {
  background: #42331f;
  border-color: var(--ani-accent);
  box-shadow: none;
}

body.dark .ap-report-modal__option span,
body.dark .ap-report-modal__option.is-active span {
  color: var(--ani-text);
}

body.dark .ap-report-modal__footer {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
}

body.dark :is(.ap-report-modal__close, .ap-comment-poll__close, .ap-report-modal__btn--ghost) {
  background: var(--ani-surface-hover);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark :is(.ap-report-modal__close, .ap-comment-poll__close, .ap-report-modal__btn--ghost):hover:not([disabled]) {
  background: #403321;
  color: var(--ani-accent-strong);
}

body.dark :is(.ap-report-modal__btn--primary, .ap-comment-poll__submit) {
  background: var(--ani-accent);
  color: #251a0b;
  box-shadow: none;
}

body.dark :is(.ap-report-modal__btn--primary, .ap-comment-poll__submit):hover:not([disabled]) {
  background: var(--ani-accent-strong);
}

/* Weekly broadcast schedule: no day-selection shadow or shadowed anime cards. */

body.dark .page-schedule :is(.schedule-hub, .schedule-hub__filters, .schedule-hub__filters--solo) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-schedule :is(.schedule-hub__title, .box-anime .title h4 span) {
  color: var(--ani-text);
}

body.dark .page-schedule .schedule-hub__announcement {
  color: var(--ani-muted);
}

body.dark .page-schedule .schedule-hub__announcement::after {
  background: linear-gradient(to top, var(--ani-surface), transparent);
}

body.dark .page-schedule .schedule-hub__divider {
  background: var(--ani-border);
}

body.dark .page-schedule .schedule-hub__filter-btn {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .page-schedule .schedule-hub__filter-btn:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
}

body.dark .page-schedule .uk-active > .schedule-hub__filter-btn {
  background: var(--ani-accent);
  background-image: none;
  color: #281a08;
}

.page-schedule .uk-active > .schedule-hub__filter-btn,
.page-schedule .schedule-hub__filter-btn,
.page-schedule .schedule-hub,
.page-schedule .schedule-hub__filters--solo,
.page-schedule .box-anime,
.page-schedule .box-anime .anime-card,
.page-schedule .post-anime,
.page-schedule .anime-card {
  box-shadow: none !important;
}

.page-schedule :is(.box-anime .anime-card, .post-anime, .anime-card):hover {
  box-shadow: none !important;
}

body.dark .page-schedule :is(.box-anime.box-card, .anime-card, .post-anime) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

/* The OP/ED archive is the "latest themes" page, not the general video archive. */

.op-ed-section--archive :is(.media-hub, .media-hub__header, .media-hub__body, .media-song, .op-ed-search, .media-song__action),
.op-ed-section--archive :is(.media-song, .media-song__action):hover {
  box-shadow: none !important;
}

body.dark .op-ed-section--archive :is(.media-hub, .media-hub__header, .media-hub__body, .media-song, .op-ed-search) {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

/* Studio directory and studio/producer profile use the homepage surfaces. */

.studio-directory :is(.studio-directory__card, .studio-letter__item, .studio-letter__item a),
.studio-directory :is(.studio-letter__item, .studio-letter__item a):hover,
.producer-directory :is(.producer-directory__card, .producer-card, .producer-card__monogram),
.producer-directory .producer-card:hover,
.studio-profile-section :is(.studio-profile-card, .studio-profile__frame) {
  box-shadow: none !important;
}

body.dark .studio-directory .studio-directory__card,
body.dark .producer-directory .producer-directory__card,
body.dark .studio-profile-section .studio-profile-card {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .studio-directory :is(.studio-letter__header, .studio-letter__title, .studio-letter__grid),
body.dark .producer-directory :is(.producer-letter__header, .producer-letter__title) {
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .studio-directory .studio-letter__item a,
body.dark .producer-directory .producer-card {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  transform: none;
}

body.dark .studio-directory .studio-letter__item a:hover,
body.dark .studio-directory .studio-letter__item a:focus-visible,
body.dark .producer-directory .producer-card:hover,
body.dark .producer-directory .producer-card:focus-visible {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  color: var(--ani-text);
  box-shadow: none;
  transform: none;
}

body.dark .producer-directory :is(.producer-directory__title, .producer-card__name) {
  color: var(--ani-text);
}

body.dark .producer-directory .producer-directory__subtitle {
  color: var(--ani-muted);
}

body.dark .producer-directory .producer-card__monogram,
body.dark .studio-profile-section :is(.studio-profile__frame, .studio-profile__badge) {
  background: var(--ani-surface-hover);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .producer-directory .producer-card:hover .producer-card__monogram {
  background: #44351f;
  color: var(--ani-accent-strong);
}

body.dark .studio-profile-section :is(.studio-profile__title, .studio-profile__placeholder) {
  color: var(--ani-text);
}

body.dark .studio-profile-section :is(.studio-profile__subtitle, .studio-profile__badge-row) {
  color: var(--ani-muted);
}

body.dark :is(.studio-directory, .producer-directory) .box-search-studios {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark :is(.studio-directory, .producer-directory) .box-search-studios:focus-within {
  border-color: var(--ani-accent);
  box-shadow: 0 0 0 2px rgba(247, 184, 66, 0.18);
}

body.dark :is(.studio-directory, .producer-directory) .box-search-studios input {
  color: var(--ani-text);
}

body.dark :is(.studio-directory, .producer-directory) .box-search-studios input::-moz-placeholder {
  color: var(--ani-muted);
}

body.dark :is(.studio-directory, .producer-directory) .box-search-studios input::placeholder {
  color: var(--ani-muted);
}

/* Genre and anime type collections: bright content on neutral charcoal. */

body.dark .page-genre .genres.genre-selector-card,
body.dark .anime-type-page .anime-type-page__inner {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-genre .genre-selector-card__title,
body.dark .anime-type-page .anime-type-page__title {
  color: var(--ani-text);
}

body.dark .page-genre .genre-selector-card__search {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .page-genre .genre-selector-card__search:focus-within {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
}

body.dark .page-genre .genre-selector-card__search input::-moz-placeholder {
  color: var(--ani-text-soft);
}

body.dark .page-genre .genre-selector-card__search input,
body.dark .page-genre .genre-selector-card__search input::placeholder {
  color: var(--ani-text-soft);
}

body.dark .page-genre .genre-selector-card__search input::-moz-placeholder {
  color: var(--ani-muted);
}

body.dark .page-genre .genre-selector-card__search input::placeholder {
  color: var(--ani-muted);
}

body.dark .page-genre .genre-tag,
body.dark .anime-type-page .anime-type-card {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
  transform: none;
}

body.dark .page-genre .genre-tag:hover,
body.dark .page-genre .genre-tag:focus-visible,
body.dark .anime-type-page .anime-type-card:hover,
body.dark .anime-type-page .anime-type-card:focus-visible {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  color: var(--ani-text);
  transform: none;
  box-shadow: none;
}

body.dark .anime-type-page {
  --type-primary: var(--ani-accent);
  --type-primary-shadow: transparent;
  --type-surface: var(--ani-surface);
  --type-border: var(--ani-border);
  --type-text: var(--ani-text);
  --type-text-muted: var(--ani-muted);
  --type-icon-bg: var(--ani-surface-hover);
}

body.dark .anime-type-page :is(.anime-type-card__name, .anime-type-card__badge) {
  color: var(--ani-text-soft);
}

body.dark .anime-type-page .anime-type-card:hover .anime-type-card__name {
  color: var(--ani-accent-strong);
}

body.dark .anime-type-page .anime-type-card:hover .anime-type-card__icon {
  background: #44351f;
  color: var(--ani-accent-strong);
}

body.dark .anime-type-page .anime-type-card__icon {
  background: var(--ani-surface-hover);
  color: var(--ani-accent);
}

/* Copy-range, episode-number and download settings popups have a separate
 * close control from the shared anime-detail dialogs. */

body.dark .anime-detail-page .download-modern__modal {
  background: rgba(7, 8, 10, 0.78);
}

body.dark .anime-detail-page .download-modern__modal-card {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

body.dark .anime-detail-page .download-modern__modal-header h3,
body.dark .anime-detail-page .download-modern__modal-range p,
body.dark .anime-detail-page .download-modern__modal-label {
  color: var(--ani-text);
}

body.dark .anime-detail-page :is(.download-modern__modal-close, .download-modern__modal-secondary, .download-modern__modal-action) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page :is(.download-modern__modal-close, .download-modern__modal-secondary, .download-modern__modal-action):hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .download-modern__modal-primary {
  background: var(--ani-accent);
  color: #281a08;
}

body.dark .anime-detail-page .download-modern__modal-range-inputs input {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .page-genre .genre-tag .material-icons {
  color: var(--ani-accent);
}

/*
 * Dark-mode contrast & surface parity for the public AniPlus experience.
 * Loaded LAST by app.scss to resolve conflicts between legacy SCSS, inline
 * page styles, and the 2026 homepage theme. Light mode remains untouched
 * except for the requested compact producer cards.
 */

/* Make the producer directory denser on all screen sizes. */

.producer-directory .producer-letter__grid {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px;
}

.producer-directory .producer-card {
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  transform: none;
}

.producer-directory .producer-card__monogram {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.producer-directory .producer-card__name {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.producer-directory .producer-letter {
  gap: 12px;
}

.producer-directory .producer-directory__letters {
  gap: 25px;
}

@media (max-width: 640px) {
  .producer-directory .producer-letter__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .producer-directory .producer-card {
    padding: 9px;
    gap: 8px;
  }

  .producer-directory .producer-card__monogram {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

/* Single anime: tracker user count used a legacy !important pale badge. */

body.dark .anime-detail-page .anime-scores-card {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-tracker-heading {
  border-bottom-color: var(--ani-border);
}

body.dark .anime-detail-page .anime-tracker-heading h3 {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-tracker-heading p {
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-tracker-heading__count {
  background: #3c321f !important;
  border: 1px solid #766037;
  color: #ffdb92 !important;
  font-size: 0.72rem;
  line-height: 1.55;
  padding: 5px 10px;
}

/* Alternate anime titles: the trigger, card and sheet share homepage tokens. */

body.dark .anime-detail-page .anime-info-pane .anime-info-card--names {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-info-card--names .anime-card-title {
  color: var(--ani-text);
}

body.dark .anime-detail-page .anime-other-names-icon {
  background: #42341f;
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .anime-info-pane .anime-info-card--names .anime-other-names-trigger {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .anime-detail-page .anime-info-pane .anime-info-card--names .anime-other-names-trigger:is(:hover, :focus-visible) {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  color: var(--ani-accent-strong);
}

body.dark .anime-info-card--names .anime-detail-modal {
  background: rgba(8, 9, 11, 0.82);
}

body.dark .anime-info-card--names .anime-detail-modal__dialog {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  color-scheme: dark;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
}

body.dark .anime-info-card--names .anime-detail-modal__header {
  background: var(--ani-surface);
  border-color: var(--ani-border);
}

body.dark .anime-info-card--names .anime-detail-modal__header h4 {
  color: var(--ani-text);
}

body.dark .anime-info-card--names .anime-detail-modal__header p {
  color: var(--ani-muted);
}

body.dark .anime-info-card--names .anime-detail-modal__close {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
}

body.dark .anime-info-card--names .anime-detail-modal__close:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

body.dark .anime-info-card--names .anime-detail-modal__handle {
  background: #64676e;
}

body.dark .anime-detail-page .anime-info-card--names .anime-other-names-list {
  background: var(--ani-surface);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .anime-info-card--names .anime-other-names-list > div {
  padding: 12px 14px;
  border: 1px solid var(--ani-border);
  border-radius: 12px;
  background: var(--ani-surface-raised);
}

body.dark .anime-detail-page .anime-info-card--names .anime-other-names-list strong {
  color: var(--ani-muted);
}

body.dark .anime-detail-page .anime-info-card--names .anime-other-names-list__value {
  color: var(--ani-text);
  overflow-wrap: anywhere;
}

/* Portal-mounted poll/quiz: cover inputs, answer control, actions and footer. */

body.dark .ap-comment-poll__modal,
body.dark .ap-report-modal {
  background: rgba(8, 9, 11, 0.84);
}

body.dark .ap-comment-poll__dialog,
body.dark .ap-report-modal__dialog {
  background: var(--ani-surface);
  background-image: none;
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  color-scheme: dark;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.48);
}

body.dark .ap-comment-poll__header-icon,
body.dark .ap-report-modal__header-icon {
  background: #46351d;
  border-color: #70502a;
  color: var(--ani-accent-strong);
}

body.dark .ap-comment-poll__title,
body.dark .ap-comment-poll__label,
body.dark .ap-comment-poll__toggle-title,
body.dark .ap-report-modal__header-copy h2 {
  color: var(--ani-text);
}

body.dark .ap-comment-poll__subtitle,
body.dark .ap-comment-poll__toggle-desc,
body.dark .ap-report-modal__header-copy p {
  color: var(--ani-muted);
}

body.dark .ap-comment-poll__input,
body.dark .ap-comment-poll__textarea,
body.dark .ap-comment-poll__toggle,
body.dark .ap-report-modal__option {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .ap-comment-poll__input::-moz-placeholder, body.dark .ap-comment-poll__textarea::-moz-placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .ap-comment-poll__input::placeholder,
body.dark .ap-comment-poll__textarea::placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .ap-comment-poll__input:focus,
body.dark .ap-comment-poll__textarea:focus {
  border-color: var(--ani-accent);
  box-shadow: 0 0 0 3px rgba(247, 184, 66, 0.14);
}

body.dark .ap-comment-poll__toggle:hover,
body.dark .ap-report-modal__option:hover {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
}

body.dark .ap-comment-poll__option-prefix,
body.dark .ap-comment-poll__add-option {
  color: var(--ani-accent-strong);
}

body.dark .ap-comment-poll__add-option:hover {
  color: #ffe1a4;
}

body.dark .ap-comment-poll__option-control,
body.dark .ap-report-modal__option input {
  background: var(--ani-surface-raised);
  border-color: #8a8d96;
  color-scheme: dark;
}

body.dark .ap-comment-poll__option-control:checked {
  border-color: var(--ani-accent);
}

body.dark .ap-comment-poll__option-control:checked::after {
  background: var(--ani-accent);
}

body.dark .ap-report-modal__option input:checked {
  background: var(--ani-surface-raised);
  border-color: var(--ani-accent);
}

body.dark .ap-comment-poll__option-remove {
  background: #482b30;
  color: #ffc2c8;
}

body.dark .ap-comment-poll__close,
body.dark .ap-report-modal__close,
body.dark .ap-report-modal__btn--ghost {
  background: var(--ani-surface-hover);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .ap-comment-poll__close:hover,
body.dark .ap-report-modal__close:hover:not([disabled]),
body.dark .ap-report-modal__btn--ghost:hover:not([disabled]) {
  background: #44351f;
  color: var(--ani-accent-strong);
}

body.dark .ap-comment-poll__footer,
body.dark .ap-report-modal__footer {
  background: var(--ani-surface);
  background-image: none;
  border-color: var(--ani-border);
}

body.dark .ap-report-modal__option.is-active {
  background: #42341f;
  border-color: var(--ani-accent);
}

body.dark .ap-report-modal__option span,
body.dark .ap-report-modal__option.is-active span {
  color: var(--ani-text);
}

body.dark .ap-comment-poll__submit:not([disabled]),
body.dark .ap-report-modal__btn--primary:not([disabled]) {
  background: var(--ani-accent);
  background-image: none;
  border: 1px solid var(--ani-accent);
  color: #251909;
  box-shadow: none;
}

body.dark .ap-comment-poll__submit:hover:not([disabled]),
body.dark .ap-report-modal__btn--primary:hover:not([disabled]) {
  background: var(--ani-accent-strong);
  color: #251909;
  box-shadow: none;
}

body.dark .ap-comment-poll__submit[disabled],
body.dark .ap-report-modal__btn--primary[disabled] {
  background: #49413a;
  background-image: none;
  color: #d9d3cb;
  border: 1px solid #62584e;
  opacity: 1;
  box-shadow: none;
}

/* Producer/studio search: remove the old pale/striped input backgrounds. */

body.dark :is(.producer-directory, .studio-directory) .box-search-studios {
  background: var(--ani-surface-raised);
  background-image: none;
  border: 1px solid var(--ani-border);
  box-shadow: none;
  color: var(--ani-text-soft);
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios:focus-within {
  background: var(--ani-surface-hover);
  border-color: var(--ani-accent);
  box-shadow: 0 0 0 3px rgba(247, 184, 66, 0.12);
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios input {
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  color: var(--ani-text);
  caret-color: var(--ani-accent);
  color-scheme: dark;
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios input::-moz-placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios input::placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .producer-directory .box-search-studios__icon {
  background: #43341d;
}

body.dark .producer-directory .producer-card__name {
  color: var(--ani-text-soft);
}

body.dark .producer-directory .producer-card:hover .producer-card__name,
body.dark .producer-directory .producer-card:focus-visible .producer-card__name {
  color: var(--ani-text);
}

/* Season controls: guaranteed contrasting labels/icons for every state. */

body.dark .page-season .season-filter {
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__bar--desktop,
body.dark .page-season .season-filter__modal,
body.dark .page-season .season-filter__year,
body.dark .page-season .season-filter__mobile-trigger {
  background: var(--ani-surface);
  background-image: none;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-season .season-filter__year-title,
body.dark .page-season .season-filter__modal-title,
body.dark .page-season .season-filter__title {
  color: var(--ani-text);
}

body.dark .page-season .season-filter__year-title::after {
  background: var(--ani-border);
}

body.dark .page-season .season-filter__trigger,
body.dark .page-season .season-filter__season,
body.dark .page-season .season-filter__sort-card,
body.dark .page-season .season-filter__pill-content {
  background: var(--ani-surface-raised);
  background-image: none;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  box-shadow: none;
}

body.dark .page-season .season-filter__trigger .season-filter__trigger-icon,
body.dark .page-season .season-filter__trigger .season-filter__trigger-label,
body.dark .page-season .season-filter__season .season-filter__season-icon,
body.dark .page-season .season-filter__season > span,
body.dark .page-season .season-filter__sort-label {
  color: inherit;
}

body.dark .page-season .season-filter__trigger:hover,
body.dark .page-season .season-filter__season:hover,
body.dark .page-season .season-filter__sort-card:hover {
  background: var(--ani-surface-hover);
  border-color: #806638;
  color: var(--ani-text);
}

body.dark .page-season .season-filter__trigger.is-active,
body.dark .page-season .season-filter__trigger.is-active:hover,
body.dark .page-season .season-filter__season.is-selected,
body.dark .page-season .season-filter__season.is-selected:hover {
  background: var(--ani-accent);
  background-image: none;
  border-color: var(--ani-accent);
  color: #261a08;
  box-shadow: inset 0 0 0 1px rgba(45, 31, 8, 0.18);
  font-weight: 800;
  transform: none;
}

body.dark .page-season .season-filter__trigger.is-active :is(.season-filter__trigger-label, .season-filter__trigger-icon),
body.dark .page-season .season-filter__season.is-selected > span,
body.dark .page-season .season-filter__season.is-selected .season-filter__season-icon,
body.dark .page-season .season-filter__season.is-selected svg {
  color: #261a08;
  stroke: currentColor;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card,
body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content {
  background: var(--ani-accent);
  background-image: none;
  border-color: var(--ani-accent);
  color: #261a08;
  box-shadow: none;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card :is(.season-filter__sort-label, .season-filter__sort-icon),
body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content,
body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content > span {
  color: #261a08;
}

body.dark .page-season .season-filter__option input:checked ~ .season-filter__option-label {
  color: var(--ani-accent-strong);
}

body.dark .page-season .season-filter__modal :is(button, a, input):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 3px;
}

body.dark .page-season .season-filter__apply {
  background: var(--ani-accent);
  border-color: var(--ani-accent);
  color: #261a08;
}

body.dark .page-season .season-filter__apply:hover {
  background: var(--ani-accent-strong);
}

/* Remove ONLY the extra section shell around serial/movie groups, not cards. */

body.dark .page-season .box-anime.box-card {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 18px;
}

body.dark .page-season .box-anime.box-card .section-header {
  background: transparent;
  border-color: var(--ani-border);
  box-shadow: none;
}

body.dark .page-season .box-anime.box-card .section-header__title {
  color: var(--ani-text);
}

/* Cards continue to provide separation from the unframed section. */

body.dark .page-season .seasonal-grid .anime-card,
body.dark .page-season .seasonal-grid .card-content {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  body.dark .page-season .season-filter__season,
  body.dark .page-season .season-filter__trigger {
    transition: none;
  }
}

/*
 * Final dark-mode adjustments for viewport dialogs, seasonal filters and
 * download/search surfaces. Keep light mode unchanged.
 */

/* Detail dialogs are moved to <body> at runtime, so ancestor-dependent
 * selectors such as .anime-info-card--names .anime-detail-modal no longer match. */

body.dark .anime-detail-modal {
  background: rgba(8, 9, 11, 0.84);
}

body.dark .anime-detail-modal__dialog {
  background: var(--ani-surface);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark .anime-detail-modal__header {
  background: var(--ani-surface);
  border-bottom-color: var(--ani-border);
}

body.dark .anime-detail-modal__header h4,
body.dark .anime-other-names-list__value {
  color: var(--ani-text);
}

body.dark .anime-detail-modal__header p,
body.dark .anime-other-names-list strong {
  color: var(--ani-muted);
}

body.dark .anime-detail-modal__body,
body.dark .anime-other-names-list {
  background: transparent;
  color: var(--ani-text-soft);
}

body.dark .anime-other-names-list > div {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-modal__close {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
}

body.dark .anime-detail-modal__close:hover {
  background: var(--ani-surface-hover);
  color: var(--ani-accent-strong);
}

/* The poll component is portal-mounted, but its white scrollable content
 * was never themed. Match the homepage from backdrop to inner form. */

body.dark .ap-comment-poll__modal {
  background: rgba(8, 9, 11, 0.84);
}

body.dark .ap-comment-poll__dialog,
body.dark .ap-comment-poll__content {
  background: var(--ani-surface);
  background-image: none;
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark .ap-comment-poll__dialog {
  border: 1px solid var(--ani-border);
}

body.dark .ap-comment-poll__section {
  background: transparent;
}

body.dark .ap-comment-poll__input,
body.dark .ap-comment-poll__textarea,
body.dark .ap-comment-poll__toggle {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .ap-comment-poll__input::-moz-placeholder, body.dark .ap-comment-poll__textarea::-moz-placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .ap-comment-poll__input::placeholder,
body.dark .ap-comment-poll__textarea::placeholder {
  color: var(--ani-muted);
  opacity: 1;
}

body.dark .ap-comment-poll__option-field {
  min-width: 0;
}

body.dark .ap-comment-poll__option-control {
  color-scheme: dark;
}

body.dark .ap-comment-poll__add-option {
  background: transparent;
  color: var(--ani-accent-strong);
  border-color: var(--ani-border);
}

body.dark .ap-comment-poll__add-option:hover {
  background: var(--ani-surface-hover);
}

body.dark .ap-comment-poll__footer {
  background: var(--ani-surface);
}

body.dark .ap-comment-poll__loading {
  background: rgba(27, 29, 32, 0.85);
}

body.dark .ap-comment-poll__content :is(button, input, textarea):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Search fields should not have a second filled panel behind the input text. */

body.dark .producer-directory .box-search-studios,
body.dark .studio-directory .box-search-studios,
body.dark .producer-directory .box-search-studios:focus-within,
body.dark .studio-directory .box-search-studios:focus-within {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

body.dark .producer-directory .box-search-studios input,
body.dark .studio-directory .box-search-studios input,
body.dark .producer-directory .box-search-studios input:focus,
body.dark .studio-directory .box-search-studios input:focus {
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--ani-text);
}

body.dark .producer-directory .box-search-studios__icon {
  background: transparent;
  color: var(--ani-accent-strong);
}

/* Seasonal filters: all desktop/mobile popup surfaces and secondary controls. */

body.dark .page-season .season-filter__dropdown,
body.dark .page-season .season-filter__modal,
body.dark .page-season .season-filter__modal-content,
body.dark .page-season .season-filter__modal-content--sort,
body.dark .page-season .season-filter__modal-content--all {
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__modal {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  color-scheme: dark;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
}

body.dark .page-season .season-filter__modal-header,
body.dark .page-season .season-filter__modal-footer,
body.dark .page-season .season-filter__mobile-section {
  background: transparent;
  border-color: var(--ani-border);
}

body.dark .page-season .season-filter__year {
  background: var(--ani-surface-raised);
  background-image: none;
  border: 1px solid var(--ani-border);
}

body.dark .page-season .season-filter__trigger.is-active,
body.dark .page-season .season-filter__trigger.is-active:hover {
  background: #3b3020;
  background-image: none;
  border: 1px solid var(--ani-accent);
  color: var(--ani-text);
  box-shadow: none;
}

body.dark .page-season .season-filter__trigger.is-active .season-filter__trigger-label {
  color: var(--ani-text);
}

body.dark .page-season .season-filter__trigger.is-active .season-filter__trigger-icon,
body.dark .page-season .season-filter__trigger.is-active svg {
  color: var(--ani-accent-strong);
  stroke: currentColor;
}

body.dark .page-season .season-filter__trigger-label,
body.dark .page-season .season-filter__sort-label,
body.dark .page-season .season-filter__option-label,
body.dark .page-season .season-filter__season > span {
  color: inherit;
}

body.dark .page-season .season-filter__sort-card {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__sort-icon,
body.dark .page-season .season-filter__sort-icon svg,
body.dark .page-season .season-filter__season-icon,
body.dark .page-season .season-filter__season-icon svg {
  color: var(--ani-accent-strong);
}

/* Remove the leftover cream background from sort icon tiles. */

body.dark .page-season .season-filter__sort-card .season-filter__sort-icon {
  background: #3b3020;
  color: var(--ani-accent-strong);
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-icon {
  background: #785923;
  color: #ffdc9c;
}

body.dark .page-season .season-filter__later-icon,
body.dark .page-season .season-filter__mobile-trigger-icon,
body.dark .page-season .season-filter__mobile-count {
  background: #3b3020;
  color: var(--ani-accent-strong);
}

body.dark .page-season .season-filter__sort-mark {
  background: transparent;
  border-color: var(--ani-muted);
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card,
body.dark .page-season .season-filter__season.is-selected {
  background: #46361d;
  border-color: var(--ani-accent);
  color: #ffdc9c;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-label,
body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-icon,
body.dark .page-season .season-filter__season.is-selected > span,
body.dark .page-season .season-filter__season.is-selected .season-filter__season-icon,
body.dark .page-season .season-filter__season.is-selected svg {
  color: #ffdc9c;
}

body.dark .page-season .season-filter__pill-content,
body.dark .page-season .season-filter__mobile-nav button,
body.dark .page-season .season-filter__option-box,
body.dark .page-season .season-filter__modal-close {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__pill-content > span {
  background: transparent;
  color: inherit;
}

body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content,
body.dark .page-season .season-filter__mobile-nav button.is-active {
  background: #46361d;
  border-color: var(--ani-accent);
  color: #ffdc9c;
}

body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content > span {
  color: #ffdc9c;
}

body.dark .page-season .season-filter__modal :is(input, button, a):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

body.dark .page-season .season-filter__reset,
body.dark .page-season .season-filter__later-copy small {
  color: var(--ani-muted);
}

body.dark .page-season .season-filter__later {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text);
}

body.dark .page-season .season-filter__later :is(strong, svg) {
  color: var(--ani-text);
}

body.dark .page-season .season-filter__later:hover {
  background: var(--ani-surface-hover);
}

/* Strip the unnecessary shell behind download cards; preserve each actual
 * file card and put light icons on dark controls, not black-on-black icons. */

body.dark .anime-detail-page .download-modern,
body.dark .anime-detail-page .download-modern__surface,
body.dark .anime-detail-page .download-modern__content,
body.dark .anime-detail-page .download-modern .tabs-content,
body.dark .anime-detail-page .download-modern .tab-content,
body.dark .anime-detail-page .download-modern .download-series-panel {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

body.dark .anime-detail-page .download-modern .download-series-panel {
  border: 0;
}

body.dark .anime-detail-page .download-modern .download-card {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .download-modern .download-card__info {
  background: transparent;
  color: var(--ani-muted);
}

body.dark .anime-detail-page .download-modern :is(.download-modern__filters-buttons, .download-modern__filters-tabs, .download-modern__filters-panels) {
  background: transparent;
  background-image: none;
}

body.dark .anime-detail-page .download-modern :is(.download-modern__icon-btn, .download-card__play-btn, .download-card__helper-btn) {
  background: var(--ani-surface-raised);
  border: 1px solid var(--ani-border);
  color: var(--ani-accent-strong);
}

body.dark .anime-detail-page .download-modern :is(.download-modern__icon-btn svg, .download-modern__filters-icon, .download-card__play-btn svg, .download-card__helper-btn svg) {
  color: var(--ani-accent-strong);
  fill: currentColor;
}

body.dark .anime-detail-page .download-modern :is(.download-modern__icon-btn, .download-card__play-btn, .download-card__helper-btn):hover {
  background: var(--ani-surface-hover);
  color: var(--ani-text);
  border-color: var(--ani-accent);
}

body.dark .anime-detail-page .download-modern :is(.download-modern__pill, .download-modern__link) {
  color: var(--ani-text-soft);
}

body.dark .anime-detail-page .download-modern :is(.download-modern__pill.is-active, .download-modern__link.is-active) {
  background: #46361d;
  color: #ffdc9c;
  border-color: var(--ani-accent);
}

body.dark .anime-detail-page .download-modern .download-card__download:not([aria-disabled=true]):not(.download-card__download--disabled) {
  background: var(--ani-accent);
  color: #281b09;
}

body.dark .anime-detail-page .download-modern .download-card__download:not([aria-disabled=true]):not(.download-card__download--disabled) :is(svg, span, i) {
  color: inherit;
}

/* Vue portal content needs the same download variables outside .anime-detail-page. */

.download-modern--modal-portal {
  display: contents;
}

body.dark .download-modern--modal-portal {
  --download-surface: var(--ani-surface);
  --download-background: var(--ani-surface);
  --download-border: var(--ani-border);
  --download-text: var(--ani-text);
  --download-muted: var(--ani-muted);
  --download-hover: var(--ani-surface-hover);
  --download-primary: var(--ani-accent);
}

body.dark .download-modern--modal-portal .download-modern__modal {
  background: rgba(8, 9, 11, 0.82);
}

body.dark .download-modern--modal-portal .download-modern__modal-card {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft);
  color-scheme: dark;
}

body.dark .download-modern--modal-portal :is(.download-modern__modal-header h3, .download-modern__modal-label, .download-modern__modal-range p) {
  color: var(--ani-text);
}

body.dark .download-modern--modal-portal :is(.download-modern__modal-close, .download-modern__modal-action, .download-modern__modal-secondary) {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
  border-color: var(--ani-border);
}

body.dark .download-modern--modal-portal .download-modern__modal-primary {
  background: var(--ani-accent);
  color: #281b09;
}

body.dark .download-modern--modal-portal .download-modern__modal-range-inputs input {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
}

body.dark .download-modern--modal-portal :is(button, input, select):focus-visible {
  outline: 2px solid var(--ani-accent);
  outline-offset: 2px;
}

/* Portal overlays must stack above sticky navigation once moved into body. */

.download-modern--modal-portal .download-modern__modal {
  position: fixed;
  inset: 0;
  z-index: 12020;
}

/*
 * Targeted dark-mode interaction fixes. Match the neutral homepage palette.
 * Imported last to override the older blue/navy interaction styles.
 */

/* Download copy/settings dialogs are portal-mounted outside the download tab.
 * Keep the scrim anchored to the viewport regardless of the active tab. */

.download-modern--modal-portal {
  display: contents;
}

.download-modern--modal-portal .download-modern__modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 12020 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  box-sizing: border-box;
}

.download-modern--modal-portal .download-modern__modal-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

/* A dynamically registered download component injects its CSS after app.css.
 * These more specific variables keep the portal's controls charcoal. */

body.dark .download-modern.download-modern--modal-portal {
  --download-surface: var(--ani-surface);
  --download-background: var(--ani-surface);
  --download-border: var(--ani-border);
  --download-text: var(--ani-text);
  --download-muted: var(--ani-muted);
  --download-hover: var(--ani-surface-hover);
  --download-primary: var(--ani-accent);
  --download-primary-dark: #d99a32;
}

body.dark .download-modern--modal-portal .download-modern__modal-card :is(select, input) {
  background: var(--ani-surface-raised);
  border-color: var(--ani-border);
  color: var(--ani-text);
  color-scheme: dark;
}

body.dark .download-modern--modal-portal .download-modern__modal-primary:is(:hover, :focus-visible) {
  background: #d99a32;
  color: #241809;
}

body.dark .download-modern--modal-portal :is(.download-modern__modal-action, .download-modern__modal-secondary, .download-modern__modal-close):hover {
  background: var(--ani-surface-hover);
}

/* Report actions should never switch to light/orange gradients on selection. */

body.dark .ap-report-modal .ap-report-modal__btn--primary:not(:disabled) {
  background: #554022 !important;
  background-image: none !important;
  border: 1px solid #916d34 !important;
  color: #ffe4b0 !important;
  box-shadow: none !important;
  opacity: 1;
}

body.dark .ap-report-modal .ap-report-modal__btn--primary:is(:hover, :focus-visible):not(:disabled) {
  background: #674e28 !important;
  background-image: none !important;
  border-color: var(--ani-accent) !important;
  color: #fff0cf !important;
}

body.dark .ap-report-modal .ap-report-modal__btn--primary:disabled {
  background: var(--ani-surface-raised) !important;
  background-image: none !important;
  border: 1px solid var(--ani-border) !important;
  color: var(--ani-muted) !important;
  box-shadow: none !important;
  opacity: 1;
}

/* Desktop header: remove the blue-gray fill behind search and tools. */

@media (min-width: 1024px) {
  body.dark .animo-header-shell .animo-search-pill,
  body.dark .animo-header-shell .animo-toolbox {
    background: var(--ani-surface) !important;
    border-color: var(--ani-border) !important;
    color: var(--ani-text-soft);
    box-shadow: none;
  }

  body.dark .animo-header-shell .animo-tool-btn {
    background: transparent !important;
    color: var(--ani-text-soft);
  }

  body.dark .animo-header-shell .animo-search-pill:is(:hover, :focus-visible),
  body.dark .animo-header-shell .animo-tool-btn:is(:hover, :focus-visible),
  body.dark .animo-header-shell .animo-nav-link:hover,
  body.dark .animo-header-shell :is(.animo-dropdown a, .animo-mega a, .animo-notification-item, .animo-profile-dropdown a, .animo-profile-dropdown button):hover {
    background: var(--ani-surface-hover) !important;
    color: var(--ani-text) !important;
  }

  body.dark .animo-header-shell .animo-nav-link:is(.is-active, .animo-nav-link--home) {
    background: #332a1d !important;
    color: var(--ani-accent-strong) !important;
  }

  body.dark .animo-header-shell :is(.animo-dropdown, .animo-notification-dropdown, .animo-profile-dropdown) {
    background: var(--ani-surface) !important;
    border-color: var(--ani-border);
  }
}

/* Detail tabs and submenus use the same graphite hover as the homepage. */

body.dark .anime-detail-page .anime-tabs-card .tab-link:not(.active):is(:hover, :focus-visible),
body.dark .anime-detail-page .anime-tabs-card .submenu a:hover {
  background: var(--ani-surface-hover) !important;
  color: var(--ani-text) !important;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link:not(.active):hover .tab-icon,
body.dark .anime-detail-page .anime-tabs-card .tab-count {
  background: var(--ani-surface-raised);
  color: var(--ani-text-soft);
}

/* Mobile drawer: remove the added tiles behind the profile, close and links.
 * Preserve the charcoal drawer surface and readable text/focus states. */

@media (max-width: 1023px) {
  /* The legacy #theme-toggle selector has higher specificity than body.dark,
   * so it could repaint the entire drawer navy even with the shared palette. */

  body.dark .animo-header-shell .animo-mobile-drawer,
  #theme-toggle:checked ~ .site-wrapper .animo-mobile-drawer {
    background: var(--ani-surface, #1b1d20) !important;
    background-image: none !important;
    border-color: var(--ani-border, #383b40);
    color: var(--ani-text-soft, #d8d9dc);
  }

  body.dark .animo-mobile-drawer :is(.animo-drawer-head, .animo-drawer-links strong),
  #theme-toggle:checked ~ .site-wrapper .animo-mobile-drawer :is(.animo-drawer-head, .animo-drawer-links strong) {
    border-color: var(--ani-border, #383b40);
  }

  body.dark .animo-mobile-drawer :is(.animo-drawer-head, .animo-drawer-links, .animo-drawer-user, .animo-drawer-close),
  body.dark .animo-mobile-drawer :is(.animo-drawer-links > a, .animo-drawer-links .grid a, .animo-drawer-links strong, .animo-drawer-logout),
  body.dark .animo-mobile-drawer .animo-drawer-links a:is(:hover, :focus-visible, .active) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body.dark .animo-mobile-drawer .animo-drawer-links a {
    border-color: transparent !important;
    color: var(--ani-text-soft);
  }

  body.dark .animo-mobile-drawer .animo-drawer-close {
    border-color: transparent !important;
    color: var(--ani-text);
  }

  body.dark .animo-mobile-drawer .animo-drawer-links a:is(:hover, :focus-visible, .active) {
    color: var(--ani-accent-strong) !important;
  }
}

/* Image scale and the opaque caption surface must not expose a raster seam.
 * Only the dark card interaction is changed; card geometry stays intact. */

body.dark .post-anime .anime-card {
  isolation: isolate;
}

body.dark .post-anime .card-image-container {
  background: var(--ani-surface-raised);
  isolation: isolate;
  backface-visibility: hidden;
}

body.dark .post-anime .poster-img {
  display: block;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

body.dark .post-anime .anime-card:hover .poster-img {
  transform: translate3d(0, 0, 0) scale(1.05);
}

body.dark .post-anime .card-content {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  background: var(--ani-surface-raised);
  background-image: none;
}

body.dark .post-anime .glass-meta-divider::before {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  body.dark .post-anime .poster-img {
    transition: none !important;
  }
}

/*
 * Search, studio profile and seasonal filters: one charcoal palette shared
 * with the homepage. Scoped dark selectors do not change light mode.
 */

/* Studio/producer page uses the same flat cards and spacing as anime archives. */

.studio-profile-section {
  padding: clamp(20px, 3vw, 32px) 0;
}

.studio-profile-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

.studio-profile {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 30px);
}

.studio-profile__media {
  display: flex;
  justify-content: center;
}

.studio-profile__frame {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f4f4f4;
}

.studio-profile__frame img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.studio-profile__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #868686;
  font-weight: 800;
}

.studio-profile__content {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.studio-profile__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: #717171;
  font-size: 13px;
}

.studio-profile__badge {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f1f1;
  border: 1px solid #e4e4e4;
  color: #494949;
  font-weight: 700;
}

.studio-profile__title {
  margin: 0;
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.5;
  color: #212121;
  overflow-wrap: anywhere;
}

.studio-profile__titles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-profile__title-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  direction: auto;
  padding: 6px 10px;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  background: #f9f9f9;
  color: #4c4c4c;
  unicode-bidi: -moz-plaintext;
  unicode-bidi: plaintext;
  font-size: 12px;
}

.studio-profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.studio-profile__stat {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fafafa;
}

.studio-profile__stat-label {
  font-size: 12px;
  color: #777;
}

.studio-profile__stat-value {
  font-weight: 800;
  font-size: 18px;
  color: #242424;
}

.studio-profile__about {
  max-width: 85ch;
  line-height: 2;
  color: #444;
  overflow-wrap: anywhere;
}

.studio-profile__about h2 {
  font-size: 18px;
  font-weight: 800;
  color: #252525;
  margin: 0 0 10px;
}

.studio-profile__about p {
  margin: 0;
  white-space: normal;
}

@media (max-width: 700px) {
  .studio-profile {
    grid-template-columns: 1fr;
  }

  .studio-profile__frame {
    width: min(100%, 180px);
  }

  .studio-profile__stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* Remove the secondary painted rectangle inside directory search fields. */

body.dark :is(.producer-directory, .studio-directory) .box-search-studios,
body.dark :is(.producer-directory, .studio-directory) .box-search-studios:focus-within {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: var(--ani-border);
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios:focus-within {
  border-color: var(--ani-accent);
}

body.dark :is(.producer-directory, .studio-directory) .box-search-studios input,
body.dark :is(.producer-directory, .studio-directory) .box-search-studios input:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--ani-text);
}

body.dark .producer-directory .box-search-studios__icon {
  background: transparent !important;
}

/* Search popup and its chips use charcoal, not the old navy/steel-blue UI. */

body.dark #modal-global-search,
body.dark #modal-global-search .uk-modal-dialog,
body.dark #modal-global-search .search-global-main,
body.dark #modal-global-search .search-suggestion,
body.dark .search-widget-2 .search-suggestion {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft);
}

body.dark #modal-global-search {
  background: rgba(10, 10, 12, 0.78) !important;
}

body.dark #modal-global-search .uk-modal-dialog,
body.dark .search-widget-2 .search-suggestion {
  border: 1px solid var(--ani-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.search-widget-2-body, .input-text, .items-search-body,
.box-group-title, .title-search-group, .global-search__advanced,
.global-search__advanced-inner, .global-search__advanced-placeholder) {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft);
}

body.dark :is(#modal-global-search, .search-widget-2) :is(input[type=text], input.input) {
  background: transparent !important;
  background-image: none !important;
  color: var(--ani-text);
  border-color: var(--ani-border);
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.title-search, .box-group-title, .trending-title, .noItems) {
  color: var(--ani-text) !important;
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.item-search, .trending-item, .global-search__advanced-close) {
  background: transparent !important;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.item-search, .trending-item, .global-search__advanced-close):hover {
  background: var(--ani-surface-hover) !important;
  color: var(--ani-text);
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.items-search-body .more, .global-search-meta__history) {
  background: var(--ani-surface-raised) !important;
  color: var(--ani-accent-strong);
  border: 1px solid var(--ani-border);
  border-radius: 8px;
}

body.dark :is(#modal-global-search, .search-widget-2) .item-search img {
  border-radius: 8px;
}

body.dark :is(#modal-global-search, .search-widget-2) :is(.search-icon, .advanced-search-toggle, .global-search__advanced-close) {
  color: var(--ani-accent-strong);
}

/* Seasonal age rating and anime type popups: remove leftover blue panels. */

body.dark .page-season .season-filter__dropdown :is(.season-filter__modal, .season-filter__modal-content,
.season-filter__modal-content--all, .season-filter__modal-content--sort,
.season-filter__modal-header, .season-filter__modal-footer) {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border);
  color: var(--ani-text-soft);
}

body.dark .page-season .season-filter__pill :is(span, .season-filter__pill-content),
body.dark .page-season .season-filter__option-box,
body.dark .page-season .season-filter__sort-card,
body.dark .page-season .season-filter__mobile-nav button {
  background: var(--ani-surface-raised) !important;
  background-image: none !important;
  border: 1px solid var(--ani-border);
  color: var(--ani-text-soft) !important;
  box-shadow: none !important;
}

body.dark .page-season .season-filter__pill input:checked + :is(span, .season-filter__pill-content),
body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card,
body.dark .page-season .season-filter__mobile-nav button.is-active {
  background: #43351f !important;
  background-image: none !important;
  border-color: var(--ani-accent) !important;
  color: var(--ani-accent-strong) !important;
}

body.dark .page-season .season-filter__pill input:checked + .season-filter__pill-content > span {
  background: transparent !important;
  border: 0;
  color: var(--ani-accent-strong) !important;
}

body.dark .page-season .season-filter__modal :is(.season-filter__sort-label, .season-filter__option-label) {
  color: inherit;
}

/*
 * Dark-mode parity for the actual Blade UI (not the separate Ionic application).
 * Imported after legacy and per-page Sass; only body.dark is changed.
 * Reuse the homepage --ani-* palette instead of introducing a new blue theme.
 */

/* Seasonal sorting: the selected card used to inherit dark text on a dark tile. */

body.dark .page-season .season-filter__sort-option .season-filter__sort-card {
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark .page-season .season-filter__sort-option .season-filter__sort-card :is(.season-filter__sort-label, .season-filter__sort-description) {
  color: var(--ani-text-soft) !important;
}

body.dark .page-season .season-filter__sort-option .season-filter__sort-card .season-filter__sort-icon {
  background: #382d1d !important;
  color: #ffd487 !important;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card {
  background: #44351f !important;
  border-color: var(--ani-accent) !important;
  color: #ffe2ad !important;
  box-shadow: inset 0 0 0 1px rgba(255, 190, 69, 0.12) !important;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card :is(.season-filter__sort-label, .season-filter__sort-description, .season-filter__sort-icon) {
  color: #ffe2ad !important;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-icon {
  background: #785622 !important;
}

body.dark .page-season .season-filter__sort-option input:focus-visible + .season-filter__sort-card {
  outline: 2px solid var(--ani-accent) !important;
  outline-offset: 3px;
}

body.dark .page-season .season-filter__sort-mark {
  background: transparent !important;
  border-color: #747474 !important;
}

body.dark .page-season .season-filter__sort-option input:checked + .season-filter__sort-card .season-filter__sort-mark {
  border-color: #f8f8f8 !important;
  background: #f8f8f8 !important;
  box-shadow: 0 0 0 4px #232323 !important;
}

/* Producer and studio pages: the previously unstyled white stat box. */

body.dark .page-anime .studio-profile-section .studio-profile-card {
  background: var(--ani-surface) !important;
  border: 1px solid var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
  box-shadow: none !important;
}

body.dark .page-anime .studio-profile__frame,
body.dark .page-anime .studio-profile__placeholder {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark .page-anime .studio-profile__badge-row {
  color: var(--ani-muted) !important;
}

body.dark .page-anime .studio-profile__badge,
body.dark .page-anime .studio-profile__title-badge {
  background: #382d1d !important;
  border: 1px solid #65502c !important;
  color: #ffdb9a !important;
}

body.dark .page-anime .studio-profile__title,
body.dark .page-anime .studio-profile__title-badge :is(span, small) {
  color: var(--ani-text) !important;
}

body.dark .page-anime .studio-profile__stat {
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border) !important;
  box-shadow: none !important;
}

body.dark .page-anime .studio-profile__stat-label {
  color: var(--ani-muted) !important;
}

body.dark .page-anime .studio-profile__stat-value {
  color: var(--ani-text) !important;
}

body.dark .page-anime .studio-profile__about,
body.dark .page-anime .studio-profile__about p {
  color: var(--ani-text-soft) !important;
}

body.dark .page-anime .studio-profile__about h2 {
  color: var(--ani-text) !important;
}

/* View-all link in the desktop notification dropdown. */

body.dark .animo-header-shell .animo-notification-all {
  display: block;
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border) !important;
  border-radius: 10px;
  color: #ffd17b !important;
  text-align: center;
}

body.dark .animo-header-shell .animo-notification-all:hover,
body.dark .animo-header-shell .animo-notification-all:focus-visible {
  background: #40331f !important;
  border-color: var(--ani-accent) !important;
  color: #ffe3aa !important;
}

body.dark .animo-header-shell :is(.animo-notification-empty, .animo-notification-item small) {
  color: var(--ani-muted) !important;
}

/* User panel: flatten the painted/navy background and carry the homepage palette. */

body.dark #leo_app.leo-app-shell {
  --panel-canvas: var(--ani-canvas);
  --panel-sidebar: var(--ani-surface);
  --panel-card: var(--ani-surface);
  --panel-raised: var(--ani-surface-raised);
  --panel-hover: var(--ani-surface-hover);
  --panel-stroke: var(--ani-border);
  --panel-title: var(--ani-text);
  --panel-text: var(--ani-text-soft);
  --panel-muted: var(--ani-muted);
  --panel-accent: var(--ani-accent);
  --dash-surface: var(--ani-surface);
  --dash-bg: var(--ani-surface-raised);
  --dash-border: var(--ani-border);
  background: var(--ani-canvas) !important;
  background-image: none !important;
  color: var(--ani-text-soft);
}

body.dark #leo_app :is(.leo-app-shell__layout, .leo-app-shell__main, .leo-app-user,
.leo-main, .leo-content, .ap-dashboard, .ap-dashboard__body, .user-content) {
  background: transparent !important;
  background-image: none !important;
}

body.dark #leo_app :is(.leo-sidebar-col, .leo-sidebar, .leo-sidebar .sidebar-content,
.leo-mobile-header, .leo-mobile-nav) {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a,
body.dark #leo_app .leo-app-user ul.menu-list > li > a,
body.dark #leo_app .leo-sidebar__menu :is(.menu-item, .content, svg, i),
body.dark #leo_app .leo-mobile-nav :is(a, svg, i) {
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a,
body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a :is(.content, svg, i) {
  color: #1f180e !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li:not(.active) > a:hover {
  background: var(--ani-surface-hover) !important;
  color: var(--ani-text) !important;
}

body.dark #leo_app :is(.leo-sidebar-profile, .panel-page-header, .panel,
.resourceIndexBody, .resourceDetail) {
  border-color: var(--ani-border) !important;
}

body.dark #leo_app :is(.panel-page-header h1, .panel-page-header h2,
.resourceTitle, .leo-sidebar-profile__name) {
  color: var(--ani-text) !important;
}

body.dark #leo_app :is(.panel-page-header p, .leo-sidebar-profile__email) {
  color: var(--ani-muted) !important;
}

/* Dashboard / purchase-renewal card and help tile. */

body.dark #leo_app .ap-dashboard :is(.dashboard-buy, .ap-stat, .ap-dashboard__security,
.user-dashboard-tabs-modern, .user-dashboard-tabs-modern__payment-card) {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-dashboard .dashboard-buy::before {
  display: none !important;
}

body.dark #leo_app .ap-dashboard .dashboard-buy__eyebrow {
  color: var(--ani-accent-strong) !important;
}

body.dark #leo_app .ap-dashboard :is(.dashboard-buy__title, .ap-stat__value, .ap-dashboard__title) {
  color: var(--ani-text) !important;
}

body.dark #leo_app .ap-dashboard :is(.dashboard-buy__subtitle, .ap-stat__caption, .ap-stat__foot) {
  color: var(--ani-muted) !important;
}

body.dark #leo_app .ap-dashboard .ap-stat--support {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app .ap-dashboard :is(.ap-stat__icon, .ap-stat__pill) {
  background: #40311a !important;
  color: #ffd27f !important;
}

body.dark #leo_app .ap-dashboard .dashboard-buy__action:not(.disabled),
body.dark #leo_app .ap-dashboard .dashboard-buy__action.btn:not(.disabled),
body.dark #leo_app :is(.ap-ticket-create__actions button, .ap-preferences__footer button,
.ap-request-dialog__submit, .ap-requests__create) {
  background: var(--ani-accent) !important;
  background-image: none !important;
  border: 1px solid var(--ani-accent) !important;
  color: #211806 !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-dashboard .dashboard-buy__action:not(.disabled) :is(span, svg),
body.dark #leo_app :is(.ap-ticket-create__actions button, .ap-preferences__footer button,
.ap-request-dialog__submit, .ap-requests__create) :is(span, svg) {
  color: #211806 !important;
  stroke: currentColor;
}

body.dark #leo_app .ap-dashboard .dashboard-buy__action:hover:not(.disabled),
body.dark #leo_app :is(.ap-ticket-create__actions button, .ap-preferences__footer button,
.ap-request-dialog__submit, .ap-requests__create):hover:not(:disabled) {
  background: #ffd071 !important;
  border-color: #ffd071 !important;
}

body.dark #leo_app .ap-dashboard .ap-stat__action {
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border) !important;
  color: var(--ani-text) !important;
}

/* Tailwind utilities in the public profile and notifications did not pick up
 * the same charcoal tokens as the Blade/Sass components. */

body.dark #leo_app :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-900,
.bg-slate-800, .bg-slate-700, .bg-blue-50) {
  background-color: var(--ani-surface) !important;
  background-image: none !important;
}

body.dark #leo_app :is(.border-gray-100, .border-gray-200, .border-slate-800,
.border-slate-700) {
  border-color: var(--ani-border) !important;
}

body.dark #leo_app :is(.text-gray-700, .text-gray-800, .text-slate-100,
.text-slate-200, .text-slate-300) {
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app :is(.text-gray-400, .text-gray-500, .text-slate-400,
.text-slate-500) {
  color: var(--ani-muted) !important;
}

body.dark #leo_app :is(.text-blue-600, .text-blue-300) {
  color: #ffcf77 !important;
}

body.dark #leo_app .ap-dashboard .ap-stat__head svg {
  stroke: currentColor;
}

/* Anime watchlist: remove blue panels from filters, cards and edit dialogs. */

body.dark #leo_app .ap-watchlist {
  --wl-surface: var(--ani-surface);
  --wl-canvas: var(--ani-surface-raised);
  --wl-line: var(--ani-border);
  --wl-text: var(--ani-text);
  --wl-muted: var(--ani-muted);
  --wl-accent: var(--ani-accent);
  --wl-soft: #40321e;
  --wl-shadow: none;
  color: var(--ani-text-soft);
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__intro, .ap-watchlist__tools,
.ap-watchlist__section, .ap-watchlist__card, .ap-watchlist__empty,
.ap-watchlist__dialog, .ap-watchlist__filter) {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__search, .ap-watchlist__tag,
.ap-watchlist__progress-track, .ap-watchlist__quick-stat, .ap-watchlist__status,
.ap-watchlist__dialog-body, .ap-watchlist__rating-field) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__anime-title,
.ap-watchlist__section-heading, .ap-watchlist__dialog-head h3) {
  color: var(--ani-text) !important;
}

body.dark #leo_app .ap-watchlist :is(input, select, textarea) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text) !important;
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__overview,
.ap-watchlist__metric, .ap-watchlist__filter-options button, .ap-watchlist__status-options span,
.ap-watchlist__stepper-control, .ap-watchlist__dialog-close, .ap-watchlist__page,
.ap-watchlist__page-arrow) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__overview-icon,
.ap-watchlist__section-symbol, .ap-watchlist__empty-icon) {
  background: #40311e !important;
  color: #ffcf81 !important;
}

body.dark #leo_app .ap-watchlist__card:hover {
  background: var(--ani-surface-hover) !important;
}

body.dark #leo_app .ap-watchlist__loading {
  background: rgba(24, 25, 28, 0.9) !important;
}

body.dark #leo_app .ap-watchlist__edit {
  background: #40321e !important;
  border-color: #73582e !important;
  color: #ffcf81 !important;
}

body.dark #leo_app .ap-watchlist__save {
  background: var(--ani-accent) !important;
  border-color: var(--ani-accent) !important;
  color: #211806 !important;
}

body.dark #leo_app .ap-watchlist__filter-options button.is-selected,
body.dark #leo_app .ap-watchlist__status-options input:checked + span {
  background: #44351f !important;
  border-color: var(--ani-accent) !important;
  color: #ffe0a0 !important;
}

body.dark #leo_app .ap-watchlist :is(.ap-watchlist__filter.is-selected, .ap-watchlist__page.is-current) {
  background: #43351e !important;
  border-color: var(--ani-accent) !important;
  color: #ffe1a6 !important;
}

/* Settings: radios, toggles, labels and the save button. */

body.dark #leo_app .ap-preferences {
  --ap-surface: var(--ani-surface);
  --ap-subtle: var(--ani-surface-raised);
  --ap-line: var(--ani-border);
  --ap-title: var(--ani-text);
  --ap-muted: var(--ani-muted);
  --ap-accent: var(--ani-accent);
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice, .ap-preferences__topic,
.ap-preferences__row) {
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice-icon, .ap-preferences__topic-icon,
.ap-preferences__icon) {
  background: #3b2e19 !important;
  color: #ffca70 !important;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__row-copy strong,
.ap-preferences__choice strong, .ap-preferences__topics h3) {
  color: var(--ani-text) !important;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__row-copy small,
.ap-preferences__footer > span) {
  color: var(--ani-muted) !important;
}

body.dark #leo_app .ap-preferences :is(.ap-preferences__choice, .ap-preferences__topic):has(input:checked) {
  background: #40321e !important;
  border-color: var(--ani-accent) !important;
}

body.dark #leo_app .ap-preferences__footer button:focus-visible {
  outline: 2px solid #ffe0a0;
  outline-offset: 3px;
}

/* Ticket form and request popup: same surface, no saturated navy/blue. */

body.dark #leo_app .ap-ticket-create {
  --surface: var(--ani-surface);
  --subtle: var(--ani-surface-raised);
  --line: var(--ani-border);
  --title: var(--ani-text);
  --muted: var(--ani-muted);
  --accent: var(--ani-accent);
}

body.dark #leo_app .ap-ticket-create :is(.ap-ticket-create__form, .ap-ticket-create__notice,
.ap-ticket-create__tip, .ap-ticket-create__department-option) {
  background: var(--ani-surface) !important;
  background-image: none !important;
  border-color: var(--ani-border) !important;
}

body.dark #leo_app .ap-ticket-create :is(.ap-ticket-create__field input,
.ap-ticket-create__field textarea, .ap-ticket-create__attachment) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text) !important;
}

body.dark #leo_app .ap-ticket-create .ap-ticket-create__department-option:has(input:checked) {
  background: #42331e !important;
  border-color: var(--ani-accent) !important;
}

body.dark #leo_app .ap-ticket-create :is(.ap-ticket-create__department-icon,
.ap-ticket-create__attachment-icon) {
  background: #3d301c !important;
  color: #ffcc76 !important;
}

body.dark #leo_app .ap-ticket-create :is(.ap-ticket-create__field > span,
.ap-ticket-create__department-copy strong, .ap-ticket-create__attachment strong) {
  color: var(--ani-text) !important;
}

body.dark #leo_app #leo-request-modal .ap-request-dialog {
  background: var(--ani-surface) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft);
}

body.dark #leo_app #leo-request-modal :is(.ap-request-dialog__types,
.ap-request-dialog__field > div, .ap-request-dialog__field > div input,
.ap-request-dialog__field > div textarea, .ap-request-dialog__footer) {
  background: var(--ani-surface-raised) !important;
  border-color: var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app #leo-request-modal .ap-request-dialog__types button {
  background: transparent !important;
  color: var(--ani-muted) !important;
  box-shadow: none !important;
}

body.dark #leo_app #leo-request-modal .ap-request-dialog__types button.bg-white {
  background: #42341f !important;
  color: #ffdc9c !important;
}

body.dark #leo_app #leo-request-modal :is(.ap-request-dialog__header h3,
.ap-request-dialog__field label) {
  color: var(--ani-text) !important;
}

body.dark #leo_app #leo-request-modal .ap-request-dialog__header p {
  color: var(--ani-muted) !important;
}

/* Notifications: both empty and populated states, and read-all action. */

body.dark #leo_app .ap-notifications__card,
body.dark #leo_app .ap-notifications__card.is-read,
body.dark #leo_app .ap-notifications__card.is-unread {
  background: var(--ani-surface) !important;
  border: 1px solid var(--ani-border) !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-notifications__card.is-unread {
  border-inline-start: 3px solid var(--ani-accent) !important;
}

body.dark #leo_app .ap-notifications__icon {
  background: #41321d !important;
  border-color: #65502c !important;
  color: #ffd17e !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-notifications__icon :is(svg, i) {
  color: #ffd17e !important;
}

body.dark #leo_app .ap-notifications__card p {
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .ap-notifications__card .text-gray-400 {
  color: var(--ani-muted) !important;
}

body.dark #leo_app .panel-secondary-btn {
  background: var(--ani-surface-raised) !important;
  border: 1px solid var(--ani-border) !important;
  color: var(--ani-text-soft) !important;
}

body.dark #leo_app .panel-secondary-btn:hover:not(:disabled) {
  border-color: var(--ani-accent) !important;
  color: #ffda98 !important;
}

body.dark #leo_app .panel-secondary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.dark #leo_app .ap-notifications__feedback {
  color: #b9e7c4 !important;
}

body.dark #leo_app .ap-notifications__feedback.is-error {
  color: #ffb6b6 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.dark #leo_app :is(.dashboard-buy__action, .ap-ticket-create__actions button,
  .ap-preferences__footer button, .ap-request-dialog__submit) {
    transition: none;
  }
}

/*
 * User panel only: a restrained, homepage-matched charcoal dark mode.
 * Imported after legacy panel styles. Light mode remains untouched.
 */

/* The dashboard itself is a layout wrapper, never a painted card. */

body.dark #leo_app :is(.ap-dashboard, .ap-dashboard__body) {
  background: transparent !important;
  background-image: none !important;
}

/* Sidebar: calm selection instead of the old glowing gold bar. */

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a,
body.dark #leo_app .leo-app-user ul.menu-list > li > a {
  color: var(--ani-text-soft, #d1d3d6) !important;
  border: 1px solid transparent;
  box-shadow: none;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li:not(.active):not(.menu-item-logout) > a:hover,
body.dark #leo_app .leo-app-user ul.menu-list > li:not(.active):not(.menu-item-logout) > a:hover {
  background: var(--ani-surface-hover, #303237) !important;
  border-color: var(--ani-border, #383b40);
  color: var(--ani-text, #f5f5f5) !important;
  box-shadow: none !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a,
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a {
  background: #373023 !important;
  background-image: none !important;
  border: 1px solid #675333 !important;
  color: #f1cd90 !important;
  box-shadow: inset 3px 0 0 #bd8b40 !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a :is(.content, svg, i),
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a :is(.content, svg, i) {
  color: #f1cd90 !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a:hover,
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a:hover {
  background: #443927 !important;
  color: #ffe0ab !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li.active > a:hover :is(.content, svg, i),
body.dark #leo_app .leo-app-user ul.menu-list > li.active > a:hover :is(.content, svg, i) {
  color: #ffe0ab !important;
}

body.dark #leo_app .leo-sidebar__menu ul.menu-list > li > a:focus-visible,
body.dark #leo_app .leo-app-user ul.menu-list > li > a:focus-visible {
  outline: 2px solid #cba15b;
  outline-offset: 2px;
}

body.dark #leo_app .leo-mobile-nav__item.is-active:not(.leo-mobile-nav__item--menu) {
  background: #373023 !important;
  color: #f1cd90 !important;
  border-color: #675333 !important;
  box-shadow: none !important;
}

/* Anime list & resource pagination: remove the bright white full-width rail. */

body.dark #leo_app .modern-pagination,
body.dark #leo_app .modern-pagination__bar,
body.dark #leo_app .modern-pagination__list {
  background: var(--ani-surface, #1b1d20) !important;
  background-image: none !important;
  border-color: var(--ani-border, #383b40) !important;
  box-shadow: none !important;
}

body.dark #leo_app .modern-pagination :is(.page-link, .page-link--ghost, .page-link--jump,
.page-jump-input, .modern-pagination__arrow-btn) {
  background: var(--ani-surface-raised, #25272b) !important;
  border: 1px solid var(--ani-border, #383b40) !important;
  color: var(--ani-text-soft, #d1d3d6) !important;
  box-shadow: none !important;
}

body.dark #leo_app .modern-pagination :is(.page-link, .page-link--ghost, .modern-pagination__arrow-btn):hover:not(:disabled) {
  background: var(--ani-surface-hover, #303237) !important;
  border-color: #8b6b3c !important;
  color: #f5d6a0 !important;
}

body.dark #leo_app .modern-pagination .page-item.active .page-link {
  background: #44351f !important;
  border-color: #9c753b !important;
  color: #ffda99 !important;
  box-shadow: none !important;
}

body.dark #leo_app .modern-pagination :is(.page-item.disabled, .page-link[aria-disabled=true],
.modern-pagination__arrow-btn--disabled) {
  opacity: 0.43;
  pointer-events: none;
}

body.dark #leo_app .modern-pagination :is(.page-jump-input, .page-link--jump):focus-within {
  outline: 2px solid #b78a48;
  outline-offset: 2px;
}

body.dark #leo_app :is(.resourceIndexBody, .ap-panel-collection__pagination) .pagination,
body.dark #leo_app :is(.resourceIndexBody, .ap-panel-collection__pagination) .uk-pagination {
  background: transparent !important;
  color: var(--ani-text-soft, #d1d3d6) !important;
}

body.dark #leo_app :is(.resourceIndexBody, .ap-panel-collection__pagination) .uk-pagination > * > :is(a, span) {
  background: var(--ani-surface-raised, #25272b);
  border: 1px solid var(--ani-border, #383b40);
  border-radius: 10px;
  color: var(--ani-text-soft, #d1d3d6) !important;
}

body.dark #leo_app :is(.resourceIndexBody, .ap-panel-collection__pagination) .uk-pagination > .uk-active > :is(a, span) {
  background: #44351f;
  border-color: #9c753b;
  color: #ffda99 !important;
}

/* New ticket: a readable dark action, not a bright yellow flare. */

body.dark #leo_app .ap-my-tickets .ap-panel-collection__primary {
  background: #3c3020 !important;
  background-image: none !important;
  border: 1px solid #8a6939 !important;
  color: #f5d49b !important;
  box-shadow: none !important;
  text-decoration: none;
}

body.dark #leo_app .ap-my-tickets .ap-panel-collection__primary :is(svg, span) {
  color: inherit !important;
  stroke: currentColor;
}

body.dark #leo_app .ap-my-tickets .ap-panel-collection__primary:hover {
  background: #51402a !important;
  border-color: #b38a4b !important;
  color: #ffe3b3 !important;
  transform: none;
}

body.dark #leo_app .ap-my-tickets .ap-panel-collection__primary:focus-visible {
  outline: 2px solid #d3ac6a;
  outline-offset: 3px;
}

/* Notifications: preserve template icons when present; always show a
 * native SVG fallback if an icon identifier is unknown or Vue hasn't mounted. */

#leo_app .ap-notifications__icon .ap-notifications__fallback {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
}

#leo_app .ap-notifications__icon:has(.ap-notifications__glyph svg) > .ap-notifications__fallback {
  display: none;
}

body.dark #leo_app .ap-notifications__icon {
  background: #40331f !important;
  border-color: #75603d !important;
  color: #f4cb87 !important;
}

body.dark #leo_app .ap-notifications__icon .ap-notifications__glyph,
body.dark #leo_app .ap-notifications__icon .ap-notifications__glyph svg,
body.dark #leo_app .ap-notifications__icon .ap-notifications__fallback {
  width: 24px;
  height: 24px;
  color: #f4cb87 !important;
  visibility: visible;
  opacity: 1;
}

/* Compact anime release timer — scoped to the anime detail sidebar. */

.anime-detail-page .anime-release-summary .anime-poster-timer {
  padding: 12px 13px;
  border: 1px solid #e6d8bc;
  border-radius: 14px;
  background: #faf7f0;
  text-align: right;
  box-shadow: none;
}

.anime-detail-page .anime-poster-timer .anime-countdown__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  margin-bottom: 10px;
}

.anime-detail-page .anime-poster-timer .anime-countdown-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #403426;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .anime-countdown__icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: #9a702f;
}

.anime-detail-page .anime-poster-timer .anime-countdown-week {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #e8d5b0;
  border-radius: 7px;
  background: #f4ebd8;
  color: #886029;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .countdown {
  width: 100%;
  min-width: 0;
}

.anime-detail-page .anime-poster-timer .countdown-timer {
  display: grid !important;
  /* UIkit flex utilities are present on the component. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.anime-detail-page .anime-poster-timer .countdown-unit {
  min-width: 0;
  margin: 0;
  padding: 7px 3px 6px;
  border: 1px solid #e9e1d4;
  border-radius: 9px;
  background: #fffefa;
  text-align: center;
}

.anime-detail-page .anime-poster-timer .countdown-unit :is(.uk-countdown-days, .uk-countdown-hours, .uk-countdown-minutes, .uk-countdown-seconds) {
  display: block;
  color: #423326;
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer .countdown-unit .uk-countdown-label {
  display: block;
  margin-top: 3px;
  color: #8a8072;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  text-shadow: none;
}

.anime-detail-page .anime-poster-timer > span {
  color: #8c642e;
  font-size: 12px;
  line-height: 1.8;
  text-shadow: none;
}

body.dark .anime-detail-page .anime-release-summary .anime-poster-timer {
  border-color: #514631;
  background: #22211f;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-poster-timer .anime-countdown-title {
  color: #e9e5df;
}

body.dark .anime-detail-page .anime-poster-timer .anime-countdown__icon {
  color: #c79c5a;
}

body.dark .anime-detail-page .anime-poster-timer .anime-countdown-week {
  border-color: #635135;
  background: #363023;
  color: #e1bd84;
}

body.dark .anime-detail-page .anime-poster-timer .countdown-unit {
  border-color: #373737;
  background: #292a2b;
}

body.dark .anime-detail-page .anime-poster-timer .countdown-unit :is(.uk-countdown-days, .uk-countdown-hours, .uk-countdown-minutes, .uk-countdown-seconds) {
  color: #f2f0ec;
}

body.dark .anime-detail-page .anime-poster-timer .countdown-unit .uk-countdown-label {
  color: #aeb0b3;
}

body.dark .anime-detail-page .anime-poster-timer > span {
  color: #d5ba92;
}

@media (max-width: 480px) {
  .anime-detail-page .anime-release-summary .anime-poster-timer {
    padding: 10px;
  }

  .anime-detail-page .anime-poster-timer .anime-countdown-title {
    font-size: 11px;
  }

  .anime-detail-page .anime-poster-timer .countdown-timer {
    gap: 5px;
  }

  .anime-detail-page .anime-poster-timer .countdown-unit {
    padding: 7px 2px 6px;
  }

  .anime-detail-page .anime-poster-timer .countdown-unit .uk-countdown-label {
    font-size: 9px;
  }
}

/* Dark-mode parity for the checkout component and the personal anime list.
   The homepage uses charcoal surfaces with a quiet amber accent, not slate blue. */

body.dark #leo_app .ap-watchlist {
  --wl-surface: var(--ani-surface, #1b1d20);
  --wl-canvas: var(--ani-surface-raised, #25272b);
  --wl-line: var(--ani-border, #383b40);
  --wl-text: var(--ani-text, #f5f5f5);
  --wl-muted: var(--ani-muted, #adafb4);
  --wl-accent: #b88943;
  --wl-soft: #363024;
  --wl-shadow: none;
}

body.dark #leo_app .ap-watchlist__pagination {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 60px;
  gap: 7px;
  margin: 20px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--ani-border, #383b40);
  border-radius: 14px;
  background: var(--ani-surface, #1b1d20) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-watchlist__pagination :is(.ap-watchlist__page, .ap-watchlist__page-arrow) {
  width: 38px;
  height: 38px;
  background: var(--ani-surface-raised, #25272b) !important;
  border: 1px solid var(--ani-border, #383b40) !important;
  color: var(--ani-text-soft, #d1d3d6) !important;
  box-shadow: none !important;
}

body.dark #leo_app .ap-watchlist__pagination :is(.ap-watchlist__page, .ap-watchlist__page-arrow):hover:not(:disabled):not(.is-current) {
  background: var(--ani-surface-hover, #303237) !important;
  border-color: #80633e !important;
  color: #e3bf89 !important;
}

body.dark #leo_app .ap-watchlist__pagination .ap-watchlist__page.is-current,
body.dark #leo_app .ap-watchlist__pagination .ap-watchlist__page.is-current:hover {
  background: #43351f !important;
  border-color: #947141 !important;
  color: #f3d09c !important;
}

body.dark #leo_app .ap-watchlist__pagination :is(.ap-watchlist__page, .ap-watchlist__page-arrow):disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

body.dark #leo_app .ap-watchlist__pagination .ap-watchlist__page-dots {
  color: #aaa6a1 !important;
}

body.dark #leo_app .ap-watchlist__pagination :is(button, a):focus-visible {
  outline: 2px solid #c19a60;
  outline-offset: 2px;
}

/* The same list can use the reusable paginator on legacy panel routes. */

body.dark #leo_app .modern-pagination__bar {
  background: var(--ani-surface, #1b1d20) !important;
  background-image: none !important;
  border-color: var(--ani-border, #383b40) !important;
  box-shadow: none !important;
}

body.dark .js-box-sharing-model .uk-modal-dialog {
  background: #1b1d20;
  color: #e8e7e5;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

body.dark .js-box-sharing-model .model-box-sharing {
  background: #1b1d20;
  color: #e8e7e5;
}

body.dark .js-box-sharing-model .sharing-modal__header h3,
body.dark .js-box-sharing-model :is(.sharing-plan__title, .sharing-plan__price-main, .sharing-total span:last-child) {
  color: #f2f1ee;
}

body.dark .js-box-sharing-model :is(.sharing-modal__header p, .sharing-modal__title, .sharing-plan__days, .sharing-plan__price-old, .sharing-total span:first-child, .sharing-terms) {
  color: #b4b5b7;
}

body.dark .js-box-sharing-model :is(.sharing-modal__close, .sharing-gateway, .sharing-discount__input, .sharing-discount input, .sharing-receipt-upload) {
  background: #25272b;
  border-color: #3a3b3e;
  color: #dedfdf;
}

body.dark .js-box-sharing-model .sharing-modal__handle {
  background: #515153;
}

body.dark .js-box-sharing-model .sharing-gateway__item {
  color: #c8c6c2;
}

body.dark .js-box-sharing-model .sharing-gateway__item.active {
  background: #373126;
  color: #f0d2a2;
  box-shadow: none;
}

body.dark .js-box-sharing-model .sharing-plan {
  background: #25272b;
  border-color: #3a3b3e;
  color: #e9e6e0;
  box-shadow: none;
}

body.dark .js-box-sharing-model .sharing-plan.active {
  background: #343026;
  border-color: #997748;
}

body.dark .js-box-sharing-model .sharing-plan__radio {
  background: #25272b;
  border-color: #686057;
}

body.dark .js-box-sharing-model .sharing-plan.active .sharing-plan__radio {
  border-color: #c49d62;
}

body.dark .js-box-sharing-model .sharing-discount input::-moz-placeholder {
  color: #97999e;
}

body.dark .js-box-sharing-model .sharing-discount input::placeholder {
  color: #97999e;
}

body.dark .js-box-sharing-model .sharing-receipt-upload input {
  color: #dedfdf;
  color-scheme: dark;
}

body.dark .js-box-sharing-model .sharing-discount__btn,
body.dark .js-box-sharing-model .sharing-pay:not(:disabled) {
  background: #43351f;
  color: #f3d2a0;
  border: 1px solid #81633a;
  box-shadow: none;
}

body.dark .js-box-sharing-model :is(.sharing-discount__btn, .sharing-pay):hover:not(:disabled) {
  background: #514027;
  border-color: #a17d49;
  color: #ffe0b3;
}

body.dark .js-box-sharing-model .sharing-modal__footer {
  background: #1b1d20;
  border-top-color: #383b40;
  box-shadow: none;
}

body.dark .js-box-sharing-model .sharing-terms a {
  color: #dbb57e;
}

body.dark .js-box-sharing-model :is(button, a, input):focus-visible {
  outline: 2px solid #c49d62;
  outline-offset: 2px;
}

@media (max-width: 440px) {
  body.dark #leo_app .ap-watchlist__pagination {
    gap: 5px;
    padding: 9px 6px;
  }

  body.dark #leo_app .ap-watchlist__pagination :is(.ap-watchlist__page, .ap-watchlist__page-arrow) {
    width: 34px;
    height: 34px;
  }
}

/* Anime detail tab navigation; bundled by Laravel Mix. */

/*
 * Anime details section navigation.
 * Scoped to the anime page so the character/staff inner tabs and other
 * site navigation keep their own styles. Rebuild front/app.css after edits.
 */

.anime-detail-page .anime-detail-card.anime-tabs-card {
  --anime-tab-accent: #d97706;
  --anime-tab-accent-soft: #fffbeb;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.anime-detail-page .anime-tabs-card .tabs-wrapper {
  background: transparent;
  box-shadow: none;
}

.anime-detail-page .anime-tabs-card .tabs-nav-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #e7e5e4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 transparent;
  -webkit-overflow-scrolling: touch;
}

.anime-detail-page .anime-tabs-card .tabs-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anime-detail-page .anime-tabs-card .tabs-nav .slider {
  display: none;
}

.anime-detail-page .anime-tabs-card .tab-item {
  flex: 1 0 auto;
  min-width: -moz-max-content;
  min-width: max-content;
}

.anime-detail-page .anime-tabs-card .tab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  width: 100%;
  padding: 12px 17px 9px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  box-shadow: none;
  color: #57534e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transform: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.anime-detail-page .anime-tabs-card .tab-link .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: #f5f5f4;
  color: #78716c;
  font-size: 14px;
  transform: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.anime-detail-page .anime-tabs-card .tab-link:hover {
  background: #fafaf9;
  color: #92400e;
  box-shadow: none;
  transform: none;
}

.anime-detail-page .anime-tabs-card .tab-link:hover .tab-icon {
  background: #fef3c7;
  color: #b45309;
  transform: none;
}

.anime-detail-page .anime-tabs-card .tab-link.active,
.anime-detail-page .anime-tabs-card .tab-link.active:hover {
  border-color: var(--anime-tab-accent);
  background: transparent;
  box-shadow: none;
  color: #92400e;
  transform: none;
}

.anime-detail-page .anime-tabs-card .tab-link.active .tab-icon,
.anime-detail-page .anime-tabs-card .tab-link.active:hover .tab-icon {
  background: #fef3c7;
  color: #b45309;
  transform: none;
}

.anime-detail-page .anime-tabs-card .tab-count {
  min-width: 23px;
  height: 21px;
  padding: 0 7px;
  border-radius: 7px;
  background: #f5f5f4;
  color: #78716c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.anime-detail-page .anime-tabs-card .tab-link.active .tab-count {
  background: #fde68a;
  color: #78350f;
}

.anime-detail-page .anime-tabs-card .tab-link:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: -4px;
}

.anime-detail-page .anime-tabs-card .tab-content {
  box-shadow: none;
}

body.dark .anime-detail-page .anime-detail-card.anime-tabs-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-tabs-card .tabs-nav-container {
  border: 0;
  border-bottom: 1px solid #374151;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: #475569 transparent;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link {
  background: transparent;
  color: #cbd5e1;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link .tab-icon {
  background: var(--ani-surface-raised, #25272b);
  color: #cbd5e1;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link:hover {
  background: var(--ani-surface-hover, #303237);
  color: #fbbf24;
  transform: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link:hover .tab-icon {
  background: #45351f;
  color: #fbbf24;
  transform: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active,
body.dark .anime-detail-page .anime-tabs-card .tab-link.active:hover {
  border-color: #f59e0b;
  background: transparent;
  color: #fcd34d;
  box-shadow: none;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active .tab-icon,
body.dark .anime-detail-page .anime-tabs-card .tab-link.active:hover .tab-icon {
  background: #49371e;
  color: #fbbf24;
}

body.dark .anime-detail-page .anime-tabs-card .tab-count {
  background: var(--ani-surface-raised, #25272b);
  color: #cbd5e1;
}

body.dark .anime-detail-page .anime-tabs-card .tab-link.active .tab-count {
  background: #49371e;
  color: #fcd34d;
}

@media (min-width: 640px) and (max-width: 1020px) {
  .anime-detail-page .anime-tabs-card .tab-link {
    min-height: 52px;
    gap: 6px;
    padding: 10px 12px 7px;
    font-size: 12px;
  }
}

@media (max-width: 639px) {
  .anime-detail-page .anime-detail-card.anime-tabs-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .anime-detail-page .anime-mobile-tab-selector {
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid #e7e5e4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .anime-detail-page .anime-mobile-tab-selector__trigger {
    min-height: 50px;
    border: 1px solid #fde7c1;
    border-radius: 12px;
    background: #fffbeb;
    color: #78350f;
    box-shadow: none;
  }

  .anime-detail-page .anime-mobile-tab-selector__icon {
    background: #fef3c7;
    color: #b45309;
  }

  .anime-detail-page .anime-mobile-tab-selector__current small {
    color: #a16207;
  }

  .anime-detail-page .anime-mobile-tab-selector__current strong {
    color: #78350f;
  }

  .anime-detail-page .anime-mobile-tab-selector__change {
    background: #fef3c7;
    color: #92400e;
  }

  .anime-detail-page .anime-mobile-tab-selector__all {
    min-width: 46px;
    min-height: 50px;
    border: 1px solid #e7e5e4;
    border-radius: 12px;
    background: #fafaf9;
    box-shadow: none;
  }

  .anime-detail-page .anime-tabs-card .anime-tabs-card__content {
    box-shadow: none;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector {
    border: 0;
    border-bottom: 1px solid #374151;
    background: transparent;
    box-shadow: none;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__trigger {
    border-color: #554329;
    background: #30291e;
    color: #fcd34d;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__icon,
  body.dark .anime-detail-page .anime-mobile-tab-selector__change {
    background: #49371e;
    color: #fbbf24;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__current small {
    color: #d6bd92;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__current strong {
    color: #fcd34d;
  }

  body.dark .anime-detail-page .anime-mobile-tab-selector__all {
    border-color: #374151;
    background: #202a3a;
    color: #e2e8f0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anime-detail-page .anime-tabs-card .tab-link,
  .anime-detail-page .anime-tabs-card .tab-link .tab-icon {
    transition: none;
  }
}

/*
 * AniPlus anime detail — compact 2026 refresh.
 * Source styles for the single anime page. Built into front/app.css via
 * resources/assets/app.scss, not linked as a separate public asset.
 */

.anime-detail-page {
  --ad-surface: #fff;
  --ad-surface-soft: #fafaf9;
  --ad-stroke: #e7e5e4;
  --ad-ink: #292524;
  --ad-muted: #78716c;
  --ad-accent: #d97706;
  --ad-accent-bg: #fffbeb;
  --ad-shadow: 0 8px 24px rgba(41, 37, 36, .045);
}

body.dark .anime-detail-page {
  --ad-surface: #1c1917;
  --ad-surface-soft: #292524;
  --ad-stroke: rgba(214, 211, 209, .18);
  --ad-ink: #fafaf9;
  --ad-muted: #a8a29e;
  --ad-accent: #fbbf24;
  --ad-accent-bg: #3b2b18;
  --ad-shadow: none;
}

/* Release metrics: two tiny clear surfaces rather than large plain rows. */

.anime-detail-page .anime-info-pane .anime-release-summary__metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0 0;
}

.anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--ad-stroke);
  border-radius: 14px;
  background: var(--ad-surface);
  box-shadow: var(--ad-shadow);
}

.anime-detail-page .anime-info-pane .anime-sidebar-update:before {
  position: absolute;
  inset-inline-start: 10px;
  top: 0;
  width: 38px;
  height: 2px;
  border-radius: 0 0 8px 8px;
  background: #f59e0b;
  content: "";
}

.anime-detail-page .anime-info-pane .anime-sidebar-update--quality:before {
  background: #10b981;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
  order: 0;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 10px;
  background: var(--ad-accent-bg);
  color: var(--ad-accent);
  font-size: 13px;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update--quality .anime-sidebar-update__icon {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

body.dark .anime-detail-page .anime-info-pane .anime-sidebar-update--quality .anime-sidebar-update__icon {
  color: #6ee7b7;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update > div {
  order: 1;
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: right;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update__label {
  color: var(--ad-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.55;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update strong,
.anime-detail-page .anime-info-pane .anime-sidebar-update__quality {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ad-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.anime-detail-page .anime-info-pane .anime-sidebar-update--quality strong {
  color: #059669;
}

body.dark .anime-detail-page .anime-info-pane .anime-sidebar-update--quality strong {
  color: #6ee7b7;
}

/* Two score tiles stay readable without four vertical rows on phones. */

.anime-detail-page .anime-info-pane .anime-scores-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.anime-detail-page .anime-info-pane .anime-scores-grid .rating-item {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--ad-surface-soft);
  border: 1px solid var(--ad-stroke);
  box-shadow: none;
}

.anime-detail-page .anime-scores-grid .rating-item header {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
}

.anime-detail-page .anime-scores-grid .rating-item header b {
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-scores-grid .rating-item header i {
  margin-inline-start: auto;
  font-size: 11px;
}

.anime-detail-page .anime-scores-grid .rating-item__source {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: 9px;
  font-weight: 950;
}

.anime-detail-page .anime-scores-grid .rating-item--mal .rating-item__source {
  background: #e0e7ff;
  color: #3730a3;
}

body.dark .anime-detail-page .anime-scores-grid .rating-item__source {
  background: #493619;
  color: #fde68a;
}

body.dark .anime-detail-page .anime-scores-grid .rating-item--mal .rating-item__source {
  background: #28304a;
  color: #c7d2fe;
}

.anime-detail-page .anime-scores-grid .rating-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 3px;
  margin: 5px 0 3px;
}

.anime-detail-page .anime-scores-grid .rating-score strong {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 950;
}

.anime-detail-page .anime-scores-grid .rating-score span {
  font-size: 10px;
}

.anime-detail-page .anime-scores-grid .rating-score em {
  font-size: 9px;
  font-style: normal;
}

.anime-detail-page .anime-scores-grid .rating-item footer {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}

.anime-detail-page .anime-scores-grid .rating-item footer b {
  font-size: 10px;
}

.anime-detail-page .anime-scores-grid .rating-item__track {
  height: 4px;
  margin: 7px 0;
}

/* Related: stylish compact landscape cards, not huge vertical posters. */

.anime-detail-page #related-pane .anime-related-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ad-stroke);
  border-radius: 18px;
  background: var(--ad-surface);
  color: var(--ad-ink);
  box-shadow: var(--ad-shadow);
}

.anime-detail-page #related-pane .anime-related-card__header {
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--ad-stroke);
  background: linear-gradient(110deg, var(--ad-accent-bg), var(--ad-surface) 62%);
}

.anime-detail-page #related-pane .anime-related-card__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ad-ink);
  font-size: 14px;
  font-weight: 950;
}

.anime-detail-page #related-pane .anime-related-card__title-icon {
  display: grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 10px;
  background: var(--ad-accent-bg);
  color: var(--ad-accent);
}

.anime-detail-page #related-pane .anime-related-card__description {
  margin: 4px 0 0;
  color: var(--ad-muted);
  font-size: 10px;
}

.anime-detail-page #related-pane .related-tabs-toggle {
  display: flex;
  flex: 0 1 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ad-stroke);
  border-radius: 10px;
  background: var(--ad-surface-soft);
}

.anime-detail-page #related-pane .related-toggle-btn {
  gap: 5px;
  padding: 7px 9px;
  min-height: 30px;
  border-radius: 8px;
  color: var(--ad-muted);
  font-size: 10px;
  font-weight: 850;
}

.anime-detail-page #related-pane .related-toggle-btn.active {
  background: var(--ad-surface);
  color: var(--ad-accent);
  box-shadow: 0 1px 5px rgba(41, 37, 36, 0.08);
}

.anime-detail-page #related-pane .anime-related-card__pane {
  padding: 12px 13px 14px;
}

.anime-detail-page #related-pane .related-items__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anime-detail-page #related-pane .related-items__list > .post-anime {
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.anime-detail-page #related-pane .related-items__list > .post-anime .anime-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  height: 108px;
  min-height: 0;
  padding: 7px;
  border: 1px solid var(--ad-stroke);
  border-radius: 13px;
  background: var(--ad-surface-soft);
  box-shadow: none;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.anime-detail-page #related-pane .related-items__list > .post-anime .anime-card:hover,
.anime-detail-page #related-pane .related-items__list > .post-anime .anime-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.55);
  background: var(--ad-accent-bg);
}

.anime-detail-page #related-pane .related-items__list .card-image-container {
  position: relative;
  width: 72px;
  height: 92px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #e7e5e4;
  aspect-ratio: auto;
}

.anime-detail-page #related-pane .related-items__list .poster-img {
  position: static;
  width: 100%;
  height: 100%;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.anime-detail-page #related-pane .related-items__list .summary-overlay,
.anime-detail-page #related-pane .related-items__list .countdown-overlay {
  display: none;
}

.anime-detail-page #related-pane .related-items__list .status-tag {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  max-width: calc(100% - 6px);
  padding: 2px 4px;
  font-size: 8px;
  line-height: 1.3;
}

.anime-detail-page #related-pane .related-items__list .card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.anime-detail-page #related-pane .related-items__list .anime-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  color: var(--ad-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.65;
  text-overflow: ellipsis;
}

.anime-detail-page #related-pane .related-items__list .meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.anime-detail-page #related-pane .related-items__list .rating {
  font-size: 10px;
}

.anime-detail-page #related-pane .related-items__list .rating .star-icon {
  width: 12px;
  height: 12px;
}

.anime-detail-page #related-pane .related-items__list .tags-side {
  display: none;
}

.anime-detail-page #related-pane .related-items__list .card-stats {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 7px;
  min-height: 0;
  margin: 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--ad-stroke);
  color: var(--ad-muted);
  font-size: 9px;
}

.anime-detail-page #related-pane .related-items__list .card-stats svg {
  width: 12px;
  height: 12px;
}

.anime-detail-page #related-pane .related-items__list .card-stats > * {
  min-width: 0;
  white-space: nowrap;
}

/* Tighter technical metadata and inline links for phones. */

.anime-detail-page .anime-info-pane .anime-technical-specs__item {
  box-sizing: border-box;
  min-height: 40px;
  padding-block: 7px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dt {
  gap: 7px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item-icon {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 11px;
  border-radius: 7px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--official-site .anime-official-site {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  min-height: 27px;
  padding: 4px 8px;
  gap: 5px;
  text-decoration: none;
  font-size: 10px;
}

.anime-detail-page .anime-official-site__host {
  display: block;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.anime-detail-page .anime-info-pane .anime-producers__preview {
  min-width: 0;
  max-width: 185px;
}

.anime-detail-page .anime-info-pane .anime-producers__toggle {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 10px;
}

/* Gallery thumbnails plus full-size modal use the same charcoal/amber tokens. */

.anime-detail-page #media-pane .media-hub {
  margin: 0;
  padding: 15px;
  border: 1px solid var(--ad-stroke);
  border-radius: 18px;
  background: var(--ad-surface);
  box-shadow: var(--ad-shadow);
}

.anime-detail-page #media-pane .media-hub__body {
  margin-top: 12px;
}

.anime-detail-page #media-pane .media-hub__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
}

.anime-detail-page #media-pane .media-hub__tab {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 11px;
}

.anime-detail-page #media-pane .media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
  gap: 10px;
  -moz-column-count: auto;
       column-count: auto;
}

.anime-detail-page #media-pane .media-gallery__item {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ad-stroke);
  border-radius: 12px;
  background: var(--ad-surface-soft);
  box-shadow: none;
  cursor: zoom-in;
  -moz-column-break-inside: auto;
       break-inside: auto;
}

.anime-detail-page #media-pane .media-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.anime-detail-page #media-pane .media-gallery__item:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

.anime-media-modal {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 14, 12, 0.83);
  backdrop-filter: blur(12px);
}

.anime-media-modal.is-visible {
  display: flex;
}

.anime-media-modal .media-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 980px);
  max-width: 980px;
  max-height: calc(100dvh - 40px);
  padding: 15px;
  border: 1px solid #e7e5e4;
  border-radius: 19px;
  background: #fff;
  color: #292524;
  box-shadow: 0 24px 100px rgba(0, 0, 0, 0.3);
}

body.dark .anime-media-modal .media-modal__content {
  background: #1c1917;
  color: #fafaf9;
  border-color: #44403c;
}

.anime-media-modal__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding-inline-end: 99px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.anime-media-modal__heading i {
  color: #f59e0b;
}

.anime-media-modal__figure {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0;
}

.anime-media-modal .media-modal__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 150px);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  background: #292524;
}

.anime-media-modal figcaption {
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #78716c;
  font-size: 11px;
}

body.dark .anime-media-modal figcaption {
  color: #a8a29e;
}

.anime-media-modal .media-modal__close,
.anime-media-modal .media-modal__download {
  top: 15px;
  width: 34px;
  height: 34px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: #fafaf9;
  color: #292524;
}

body.dark .anime-media-modal .media-modal__close,
body.dark .anime-media-modal .media-modal__download {
  background: #292524;
  border-color: #57534e;
  color: #fafaf9;
}

.anime-media-modal .media-modal__close:hover,
.anime-media-modal .media-modal__download:hover {
  color: #d97706;
  background: #fffbeb;
}

.anime-media-modal .media-modal__close svg,
.anime-media-modal .media-modal__download svg {
  width: 17px;
  height: 17px;
}

body.media-modal-open {
  overflow: hidden;
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-release-summary__metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .anime-detail-page .anime-info-pane .anime-release-summary .anime-sidebar-update {
    min-height: 57px;
    padding: 7px;
    gap: 6px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update__label {
    font-size: 9px;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update strong {
    font-size: 12px;
  }

  .anime-detail-page .anime-info-pane .anime-scores-card {
    padding: 10px;
  }

  .anime-detail-page .anime-scores-grid .rating-item {
    padding: 8px;
    gap: 3px;
  }

  .anime-detail-page .anime-scores-grid .rating-score strong {
    font-size: 19px;
  }

  .anime-detail-page .anime-scores-grid .rating-score em {
    font-size: 9px;
  }

  .anime-detail-page .anime-scores-grid .rating-item footer {
    font-size: 9px;
  }

  .anime-detail-page .anime-info-pane .anime-scores-grid .rating-item header {
    font-size: 10px;
  }

  /* The genres section and the relation rail can no longer touch or overlap. */

  .anime-detail-page .anime-info-pane .anime-info-overview {
    display: block;
    margin: 0 0 16px !important;
    padding-bottom: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-info-overview__genres {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .anime-detail-page .anime-info-pane .anime-genre-chips {
    margin-bottom: 2px;
  }

  .anime-detail-page .anime-relation-rail {
    margin: 12px 0 16px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs {
    padding: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__list {
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item {
    display: grid;
    grid-template-columns: minmax(94px, 44%) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 7px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dt {
    flex: initial;
    gap: 5px;
    font-size: 10px;
    line-height: 1.6;
    white-space: normal;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item-icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    font-size: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dd {
    grid-column: 2;
    justify-self: stretch;
    text-align: start;
    direction: ltr;
    font-size: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dd a {
    font-size: inherit;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers {
    display: grid;
    flex-wrap: initial;
    align-items: center;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dt {
    padding: 0;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dd {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    flex: initial;
  }

  .anime-detail-page .anime-info-pane .anime-producers summary {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
  }

  .anime-detail-page .anime-info-pane .anime-producers__preview {
    display: block;
    min-width: 0;
    max-width: 100%;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .anime-detail-page .anime-info-pane .anime-producers__toggle {
    min-height: 24px;
    padding: 3px 5px;
    gap: 3px;
    font-size: 9px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers:has(.anime-producers[open]) > dd {
    grid-column: 1/-1;
    flex-basis: auto;
  }

  .anime-detail-page .anime-info-pane .anime-producers__drawer {
    direction: rtl;
    text-align: right;
  }

  .anime-detail-page .anime-info-pane .anime-producers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .anime-detail-page .anime-info-pane .anime-producers__card {
    padding: 5px;
  }

  .anime-detail-page .anime-info-pane .anime-producers__card-icon {
    display: none;
  }

  .anime-detail-page .anime-info-pane .anime-producers__card-name {
    font-size: 9px;
  }

  .anime-detail-page .anime-info-pane .anime-official-site {
    max-width: 100%;
    min-width: 0;
    padding: 4px 6px;
    overflow: hidden;
  }

  .anime-detail-page .anime-official-site__host {
    max-width: 100%;
  }

  .anime-detail-page #related-pane .anime-related-card__header {
    align-items: stretch;
    flex-direction: column;
    padding: 11px;
    gap: 9px;
  }

  .anime-detail-page #related-pane .related-tabs-toggle {
    width: 100%;
  }

  .anime-detail-page #related-pane .related-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 6px;
    font-size: 10px;
  }

  .anime-detail-page #related-pane .anime-related-card__pane {
    padding: 9px;
  }

  .anime-detail-page #related-pane .related-items__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .anime-detail-page #related-pane .related-items__list > .post-anime .anime-card {
    grid-template-columns: 65px minmax(0, 1fr);
    height: 96px;
    padding: 6px;
    gap: 8px;
  }

  .anime-detail-page #related-pane .related-items__list .card-image-container {
    width: 65px;
    height: 82px;
  }

  .anime-detail-page #related-pane .related-items__list .anime-title {
    font-size: 10.5px;
  }

  .anime-detail-page #media-pane .media-hub {
    padding: 10px;
  }

  .anime-detail-page #media-pane .media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .anime-media-modal {
    padding: 9px;
  }

  .anime-media-modal .media-modal__content {
    width: 100%;
    max-height: calc(100dvh - 18px);
    padding: 10px;
    border-radius: 14px;
  }

  .anime-media-modal .media-modal__image {
    max-height: calc(100dvh - 120px);
  }

  .anime-media-modal .media-modal__close,
  .anime-media-modal .media-modal__download {
    top: 9px;
    width: 31px;
    height: 31px;
  }

  .anime-media-modal__heading {
    min-height: 32px;
    font-size: 11px;
  }
}

@media (max-width: 359px) {
  .anime-detail-page .anime-info-pane .anime-release-summary__metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update__icon {
    display: none;
  }

  .anime-detail-page .anime-info-pane .anime-sidebar-update strong {
    font-size: 11px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item {
    grid-template-columns: minmax(90px, 47%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anime-detail-page #related-pane .anime-card,
  .anime-detail-page #media-pane .media-gallery__item {
    transition: none;
    transform: none;
  }
}

/*
 * Compact information-tab layout. Imported after the base anime detail
 * styles so the Laravel Mix build preserves the intended override order.
 */

.anime-detail-page .anime-info-pane .anime-info-main > .anime-info-overview {
  margin-top: 16px;
  margin-bottom: 16px;
}

.anime-detail-page .anime-info-pane .anime-info-main > .anime-relation-rail {
  margin-top: 14px;
  margin-bottom: 16px;
}

/* Two-up metadata tiles keep labels close to their values on wide screens. */

.anime-detail-page .anime-info-pane .anime-technical-specs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  overflow: visible;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item,
.anime-detail-page .anime-info-pane .anime-technical-specs__item:last-child {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 9px;
  border: 1px solid var(--ad-stroke, #e7e5e4);
  border-radius: 10px;
  background: var(--ad-surface, #fff);
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dt {
  min-width: 0;
  flex: initial;
  white-space: normal;
  line-height: 1.7;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item dd {
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-self: stretch;
  direction: rtl;
  text-align: start;
  line-height: 1.7;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers {
  grid-column: 1/-1;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  align-items: center;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dd {
  width: 100%;
  min-width: 0;
  flex: initial;
}

.anime-detail-page .anime-info-pane .anime-producers summary {
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 0;
}

.anime-detail-page .anime-info-pane .anime-producers__preview {
  max-width: 100%;
  min-width: 0;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers:has(.anime-producers[open]) > dd {
  flex-basis: auto;
}

.anime-detail-page .anime-info-pane .anime-official-site__host {
  max-width: 100%;
}

/* A bounded vertical list handles 1 or 20+ related entries without a
 * page-wide horizontal strip. Long original MAL titles can wrap safely. */

.anime-detail-page .anime-relation-rail {
  min-width: 0;
  padding: 12px;
}

.anime-detail-page .anime-relation-rail__header {
  gap: 8px;
  margin-bottom: 9px;
}

.anime-detail-page .anime-relation-rail__icon {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
}

.anime-detail-page .anime-relation-rail__header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anime-detail-page .anime-relation-rail__scroll {
  max-width: 100%;
  padding: 0;
  overflow: visible;
}

.anime-detail-page .anime-relation-rail--scrollable .anime-relation-rail__scroll {
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-inline-end: 3px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a8a29e transparent;
}

.anime-detail-page .anime-relation-rail--scrollable .anime-relation-rail__scroll:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 3px;
  border-radius: 8px;
}

.anime-detail-page .anime-relation-rail__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 7px;
}

.anime-detail-page .anime-relation-rail__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: none;
  min-height: 55px;
  padding: 8px 10px;
  border-color: var(--ad-stroke, #e7e5e4);
  background: var(--ad-surface-soft, #fafaf9);
}

.anime-detail-page .anime-relation-rail__badge {
  max-width: 100%;
  font-size: 0.6rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.anime-detail-page .anime-relation-rail__link {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.anime-detail-page .anime-relation-rail__link--unavailable {
  color: var(--ad-muted, #78716c);
}

.anime-detail-page .anime-relation-rail__more {
  margin: 8px 0 0;
  color: var(--ad-muted, #78716c);
  font-size: 0.66rem;
  line-height: 1.6;
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item,
body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item:last-child,
body.dark .anime-detail-page .anime-relation-rail__item {
  border-color: rgba(214, 211, 209, 0.16);
  background: #292524;
}

body.dark .anime-detail-page .anime-relation-rail__link--unavailable,
body.dark .anime-detail-page .anime-relation-rail__more {
  color: #a8a29e;
}

body.dark .anime-detail-page .anime-relation-rail--scrollable .anime-relation-rail__scroll {
  scrollbar-color: #78716c transparent;
}

body.dark .anime-detail-page .anime-info-pane .anime-producers__preview {
  color: #f5f5f4;
}

@media (max-width: 639px) {
  /* Restore a visible gap: earlier mobile overrides removed section spacing. */

  .anime-detail-page .anime-info-pane .anime-info-main > .anime-synopsis-card {
    margin-bottom: 0;
  }

  .anime-detail-page .anime-info-pane .anime-info-main > .anime-info-overview {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  .anime-detail-page .anime-info-pane .anime-info-main > .anime-relation-rail {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .anime-detail-page .anime-info-pane .anime-info-main > .anime-info-cards {
    padding-top: 0;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    overflow: visible;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item,
  .anime-detail-page .anime-info-pane .anime-technical-specs__item:last-child {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(105px, 37%) minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 7px;
    border: 1px solid var(--ad-stroke, #e7e5e4);
    border-radius: 9px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dt {
    min-width: 0;
    font-size: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item dd,
  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers > dd {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding: 0;
    direction: rtl;
    text-align: start;
    overflow: visible;
    white-space: normal;
    line-height: 1.65;
    text-overflow: clip;
  }

  .anime-detail-page .anime-info-pane .anime-producers summary {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .anime-detail-page .anime-info-pane .anime-producers__preview {
    max-width: 100%;
    white-space: normal;
    text-align: start;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers:has(.anime-producers[open]) > dd {
    grid-column: 1/-1;
  }

  .anime-detail-page .anime-info-pane .anime-producers__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .anime-detail-page .anime-relation-rail__header {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
  }

  .anime-detail-page .anime-relation-rail__header h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .anime-detail-page .anime-relation-rail__total {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    white-space: nowrap;
  }

  .anime-detail-page .anime-relation-rail__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .anime-detail-page .anime-relation-rail__item {
    min-height: 46px;
    padding: 7px 9px;
  }

  .anime-detail-page .anime-relation-rail--scrollable .anime-relation-rail__scroll {
    max-height: 300px;
  }
}

@media (max-width: 359px) {
  .anime-detail-page .anime-info-pane .anime-technical-specs__item,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item {
    grid-template-columns: minmax(93px, 40%) minmax(0, 1fr);
  }

  .anime-detail-page .anime-relation-rail__header {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .anime-detail-page .anime-relation-rail__total {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 3px;
  }
}

/* Producer accordion: keep the count/close control in the same header row,
 * and render producer links only in the expanded drawer below the divider. */

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable,
.anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item--producers-expandable {
  display: block;
  grid-column: 1/-1;
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable > .anime-producers {
  display: block;
  width: 100%;
  min-width: 0;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers summary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  width: 100%;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__heading {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #57534e;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.7;
}

.anime-detail-page .anime-info-pane .anime-producers__heading > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__drawer {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--ad-stroke, #e7e5e4);
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__heading {
  color: #d6d3d1;
}

body.dark .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__drawer {
  border-color: rgba(214, 211, 209, 0.16);
}

@media (max-width: 639px) {
  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable,
  .anime-detail-page .anime-tabs-card .anime-info-section--technical .anime-technical-specs__item--producers-expandable {
    display: block;
    padding: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers summary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 7px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__heading {
    gap: 6px;
    font-size: 10px;
  }

  .anime-detail-page .anime-info-pane .anime-technical-specs__item--producers-expandable .anime-producers__drawer {
    margin-top: 9px;
    padding-top: 9px;
  }
}

/* Subscription purchase popup styles; bundled by Laravel Mix. */

#leo-buy-subscription-modal .ap-buy-dialog {
  width: calc(100% - 1.5rem);
  max-width: 26rem;
  padding: 0;
  border-radius: 1.75rem;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.3333333333);
  direction: rtl;
  text-align: right;
}

#leo-buy-subscription-modal .ap-buy-header {
  position: relative;
  padding: 1.5rem 2rem;
  background: #f8f9fa;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
}

#leo-buy-subscription-modal .ap-buy-header h3 {
  margin: 0;
  color: inherit;
  font-size: 1.35rem;
  font-weight: 900;
}

#leo-buy-subscription-modal .ap-buy-close {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: #fff;
  color: #64748b;
  border: 0;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

#leo-buy-subscription-modal .ap-buy-body {
  padding: 1.5rem 2rem;
  overflow: auto;
  min-height: 0;
}

#leo-buy-subscription-modal .ap-buy-label {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
}

#leo-buy-subscription-modal .ap-buy-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#leo-buy-subscription-modal .ap-buy-plan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  position: relative;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  text-align: right;
  transition: border-color 0.2s, background 0.2s;
}

#leo-buy-subscription-modal .ap-buy-plan.is-active {
  border-color: #f59e0b;
  background: #fffbeb;
}

#leo-buy-subscription-modal .ap-buy-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

#leo-buy-subscription-modal .ap-buy-plan-title {
  font-weight: 900;
}

#leo-buy-subscription-modal .ap-buy-check {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  color: transparent;
  flex-shrink: 0;
}

#leo-buy-subscription-modal .is-active .ap-buy-check {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

#leo-buy-subscription-modal .ap-buy-days {
  font-size: 0.8rem;
  color: #64748b;
}

#leo-buy-subscription-modal .ap-buy-price {
  font-size: 1.2rem;
  font-weight: 900;
}

#leo-buy-subscription-modal .ap-buy-unit {
  font-size: 0.7rem;
  color: #64748b;
  margin-right: 0.25rem;
}

#leo-buy-subscription-modal .ap-buy-recommend {
  font-size: 0.65rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 0.35rem;
  padding: 0.15rem 0.35rem;
}

#leo-buy-subscription-modal .ap-buy-discount {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

#leo-buy-subscription-modal .ap-buy-input {
  min-width: 0;
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font: inherit;
  background: #f8fafc;
  color: #0f172a;
}

#leo-buy-subscription-modal .ap-buy-code {
  border: 0;
  border-radius: 0.75rem;
  background: #1e293b;
  color: #fff;
  padding: 0.75rem 1rem;
  font: inherit;
  cursor: pointer;
}

#leo-buy-subscription-modal .ap-buy-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
  font-size: 0.8rem;
  line-height: 2;
  color: #475569;
}

#leo-buy-subscription-modal .ap-buy-terms input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  border: 2px solid #94a3b8;
  border-radius: 0.35rem;
  background: #fff;
  cursor: pointer;
}

#leo-buy-subscription-modal .ap-buy-terms input:checked {
  border-color: #f59e0b;
  background: #f59e0b;
}

#leo-buy-subscription-modal .ap-buy-terms input:checked::after {
  content: "\2713";
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
}

#leo-buy-subscription-modal .ap-buy-terms label {
  cursor: pointer;
  min-width: 0;
}

#leo-buy-subscription-modal .ap-buy-terms a {
  color: #b45309;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 800;
}

.dark #leo-buy-subscription-modal .ap-buy-terms {
  background: #1e293b;
  border-color: #334155;
}

.dark #leo-buy-subscription-modal .ap-buy-terms a {
  color: #fbbf24;
}

#leo-buy-subscription-modal .ap-buy-footer {
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

#leo-buy-subscription-modal .ap-buy-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

#leo-buy-subscription-modal [data-buy-total] {
  font-weight: 900;
  font-size: 1.2rem;
}

#leo-buy-subscription-modal .ap-buy-submit {
  display: flex;
  justify-content: center;
  padding: 0.9rem;
  border-radius: 0.9rem;
  background: #f6a504;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

#leo-buy-subscription-modal [aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}

#leo-buy-subscription-modal .ap-buy-status {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: #92400e;
}

#leo-buy-subscription-modal [hidden] {
  display: none !important;
}

#leo-buy-subscription-modal button:focus-visible,
#leo-buy-subscription-modal a:focus-visible,
#leo-buy-subscription-modal input:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 3px;
}

.dark #leo-buy-subscription-modal .ap-buy-header,
.dark #leo-buy-subscription-modal .ap-buy-dialog,
.dark #leo-buy-subscription-modal .ap-buy-plan {
  background: #0f172a;
  color: #e2e8f0;
}

.dark #leo-buy-subscription-modal .ap-buy-footer,
.dark #leo-buy-subscription-modal .ap-buy-input,
.dark #leo-buy-subscription-modal .ap-buy-close {
  background: #1e293b;
  color: #e2e8f0;
}

.dark #leo-buy-subscription-modal .ap-buy-plan.is-active {
  background: #422d15;
}

.dark #leo-buy-subscription-modal .ap-buy-days,
.dark #leo-buy-subscription-modal .ap-buy-unit,
.dark #leo-buy-subscription-modal .ap-buy-terms {
  color: #cbd5e1;
}

/* Homepage charcoal palette for the actual subscription purchase popup. */

body.dark #leo-buy-subscription-modal .ap-buy-dialog {
  background: #1b1d20 !important;
  color: #edeae5;
  border: 1px solid #383b40;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

body.dark #leo-buy-subscription-modal :is(.ap-buy-header, .ap-buy-footer) {
  background: #222326;
  color: #e9e6e0;
  border-color: #383b40;
}

body.dark #leo-buy-subscription-modal :is(.ap-buy-header h3, .ap-buy-label, .ap-buy-plan-title, .ap-buy-price, [data-buy-total]) {
  color: #f1f0ed;
}

body.dark #leo-buy-subscription-modal .ap-buy-close {
  background: #303134;
  color: #d0cdc9;
  border: 1px solid #434447;
}

body.dark #leo-buy-subscription-modal .ap-buy-close:hover {
  background: #3a3b3f;
  color: #fff;
}

body.dark #leo-buy-subscription-modal .ap-buy-plan {
  background: #25272b;
  color: #edeae5;
  border-color: #3c3d40;
  box-shadow: none;
}

body.dark #leo-buy-subscription-modal .ap-buy-plan:is(:hover, :focus-visible) {
  border-color: #81643d;
  background: #302c26;
}

body.dark #leo-buy-subscription-modal .ap-buy-plan.is-active {
  border-color: #b28b53;
  background: #383024;
}

body.dark #leo-buy-subscription-modal .ap-buy-check {
  background: #25272b;
  border-color: #72706b;
}

body.dark #leo-buy-subscription-modal .is-active .ap-buy-check {
  background: #a17b43;
  border-color: #a17b43;
  color: #fff3dd;
}

body.dark #leo-buy-subscription-modal :is(.ap-buy-days, .ap-buy-unit, .ap-buy-summary, .ap-buy-terms, .ap-buy-terms label) {
  color: #bfc0c2;
}

body.dark #leo-buy-subscription-modal .ap-buy-recommend {
  background: #473821;
  color: #eed1a6;
}

body.dark #leo-buy-subscription-modal .ap-buy-input {
  background: #25272b;
  color: #f0eeeb;
  border-color: #46474a;
}

body.dark #leo-buy-subscription-modal .ap-buy-input::-moz-placeholder {
  color: #aaa9a8;
}

body.dark #leo-buy-subscription-modal .ap-buy-input::placeholder {
  color: #aaa9a8;
}

body.dark #leo-buy-subscription-modal .ap-buy-terms {
  background: #25272b;
  border-color: #414246;
}

body.dark #leo-buy-subscription-modal .ap-buy-terms input {
  background: #1b1d20;
  border-color: #88817a;
}

body.dark #leo-buy-subscription-modal .ap-buy-terms input:checked {
  background: #967140;
  border-color: #967140;
}

body.dark #leo-buy-subscription-modal .ap-buy-terms a {
  color: #dfbd8b;
}

body.dark #leo-buy-subscription-modal .ap-buy-code,
body.dark #leo-buy-subscription-modal .ap-buy-submit {
  background: #43351f;
  color: #f1d1a2;
  border: 1px solid #84643a;
  box-shadow: none;
}

body.dark #leo-buy-subscription-modal :is(.ap-buy-code, .ap-buy-submit):hover:not([aria-disabled=true]) {
  background: #513e24;
  color: #ffe0b1;
  border-color: #a27c48;
}

body.dark #leo-buy-subscription-modal [aria-disabled=true] {
  opacity: 0.46;
}

body.dark #leo-buy-subscription-modal .ap-buy-status {
  color: #d3aa72;
}

body.dark #leo-buy-subscription-modal :is(button, a, input):focus-visible {
  outline: 2px solid #c39a60;
  outline-offset: 3px;
}

@media (min-width: 640px) {
  #leo-buy-subscription-modal .ap-buy-dialog {
    width: 30%;
  }
}

@media (max-width: 420px) {
  #leo-buy-subscription-modal .ap-buy-header,
  #leo-buy-subscription-modal .ap-buy-body,
  #leo-buy-subscription-modal .ap-buy-footer {
    padding: 1.25rem;
  }

  #leo-buy-subscription-modal .ap-buy-plans {
    grid-template-columns: 1fr;
  }
}

/* Compact mobile subscription sheet: controls stay reachable on short screens. */

@media (max-width: 639px) {
  #leo-buy-subscription-modal {
    padding: 10px 0;
  }

  #leo-buy-subscription-modal .ap-buy-dialog {
    box-sizing: border-box;
    width: calc(100% - 20px);
    max-width: 440px;
    max-height: calc(100dvh - 20px);
    margin: auto;
    border-radius: 16px;
  }

  #leo-buy-subscription-modal .ap-buy-header {
    flex: 0 0 auto;
    padding: 13px 15px 12px 48px;
  }

  #leo-buy-subscription-modal .ap-buy-header h3 {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  #leo-buy-subscription-modal .ap-buy-close {
    top: 11px;
    left: 12px;
    width: 31px;
    height: 31px;
    font-size: 21px;
  }

  #leo-buy-subscription-modal .ap-buy-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 11px 13px 13px;
  }

  #leo-buy-subscription-modal .ap-buy-label {
    margin-bottom: 8px;
    font-size: 0.76rem;
  }

  #leo-buy-subscription-modal .ap-buy-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #leo-buy-subscription-modal .ap-buy-plan {
    box-sizing: border-box;
    min-width: 0;
    min-height: 96px;
    gap: 5px;
    padding: 9px;
    border-width: 1px;
    border-radius: 11px;
  }

  #leo-buy-subscription-modal .ap-buy-plan-top {
    min-width: 0;
    gap: 4px;
  }

  #leo-buy-subscription-modal .ap-buy-plan-title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  #leo-buy-subscription-modal .ap-buy-check {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    font-size: 0.7rem;
  }

  #leo-buy-subscription-modal .ap-buy-days {
    font-size: 0.69rem;
  }

  #leo-buy-subscription-modal .ap-buy-price {
    font-size: 1rem;
  }

  #leo-buy-subscription-modal .ap-buy-unit {
    font-size: 0.65rem;
  }

  #leo-buy-subscription-modal .ap-buy-recommend {
    align-self: flex-start;
    font-size: 0.58rem;
    padding: 1px 5px;
  }

  #leo-buy-subscription-modal .ap-buy-discount {
    gap: 7px;
    margin-top: 11px;
  }

  #leo-buy-subscription-modal .ap-buy-input,
  #leo-buy-subscription-modal .ap-buy-code {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.78rem;
    border-radius: 9px;
  }

  #leo-buy-subscription-modal .ap-buy-terms {
    gap: 8px;
    margin-top: 9px;
    padding: 9px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.65;
  }

  #leo-buy-subscription-modal .ap-buy-terms input {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  #leo-buy-subscription-modal .ap-buy-footer {
    flex: 0 0 auto;
    padding: 10px 13px max(12px, env(safe-area-inset-bottom));
  }

  #leo-buy-subscription-modal .ap-buy-summary {
    flex-wrap: wrap;
    gap: 5px 9px;
    margin-bottom: 9px;
    font-size: 0.73rem;
    line-height: 1.6;
  }

  #leo-buy-subscription-modal [data-buy-total] {
    font-size: 1.04rem;
    white-space: nowrap;
  }

  #leo-buy-subscription-modal .ap-buy-submit {
    box-sizing: border-box;
    min-height: 44px;
    align-items: center;
    padding: 10px;
    font-size: 0.84rem;
    border-radius: 10px;
  }

  #leo-buy-subscription-modal .ap-buy-status {
    margin-top: 8px;
    font-size: 0.73rem;
  }
}

@media (max-width: 359px) {
  #leo-buy-subscription-modal .ap-buy-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  #leo-buy-subscription-modal .ap-buy-plan {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 0;
  }

  #leo-buy-subscription-modal .ap-buy-plan-top {
    flex: 1 1 52%;
  }

  #leo-buy-subscription-modal .ap-buy-plan .ap-buy-recommend {
    margin-inline-start: auto;
  }

  #leo-buy-subscription-modal .ap-buy-summary {
    align-items: flex-start;
  }

  #leo-buy-subscription-modal [data-buy-total] {
    white-space: normal;
  }
}

/* AniPlus theme archive/detail styles, bundled in the site's versioned app.css. */

.atm {
  --atm-card: #fff;
  --atm-card-soft: #f7f8fb;
  --atm-ink: #1c2330;
  --atm-muted: #6b7282;
  --atm-border: #e4e7ed;
  --atm-accent: #d68b22;
  --atm-accent-soft: #fff0d6;
  --atm-action: #202837;
  --atm-shadow: 0 16px 45px -34px rgba(33, 43, 63, .45);
  isolation: isolate;
  position: relative;
  min-height: 60vh;
  padding: 30px 0 68px;
  direction: rtl;
  text-align: right;
  color: var(--atm-ink);
  background: none;
}

body.dark .atm {
  --atm-card: #1b222d;
  --atm-card-soft: #252d39;
  --atm-ink: #f3f5f9;
  --atm-muted: #adb7c7;
  --atm-border: #343e4e;
  --atm-accent: #ffbd62;
  --atm-accent-soft: #3e3225;
  --atm-action: #f4f6f9;
  --atm-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8);
}

.atm,
.atm * {
  box-sizing: border-box;
}

.atm__container {
  max-width: 1250px;
}

.atm a {
  color: inherit;
  text-decoration: none;
}

.atm a:focus-visible,
.atm button:focus-visible,
.atm input:focus-visible {
  outline: 3px solid var(--atm-accent);
  outline-offset: 3px;
}

.atm-archive-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 30px;
  padding: 23px 26px;
  margin-bottom: 20px;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
  border-radius: 24px;
  box-shadow: var(--atm-shadow);
  overflow: hidden;
}

.atm-archive-head__identity {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  position: relative;
}

.atm-archive-head__mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #eeb655, #cd7921);
  color: #2e2112;
  border-radius: 17px;
  box-shadow: 0 12px 24px -15px rgba(158, 93, 18, 0.8);
}

.atm-archive-head__mark svg {
  width: 28px;
  height: 28px;
}

.atm-archive-head h1 {
  color: var(--atm-ink);
  font-weight: 900;
  letter-spacing: -0.6px;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.35;
  margin: 0 0 5px;
}

.atm-archive-head p {
  color: var(--atm-muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

.atm-search {
  position: relative;
  flex: 0 1 425px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--atm-card-soft);
  border: 1px solid var(--atm-border);
  border-radius: 15px;
  padding: 6px;
}

.atm-search__icon {
  width: 18px;
  height: 18px;
  margin-inline: 8px 1px;
  flex: 0 0 18px;
  color: var(--atm-muted);
}

.atm-search input {
  width: 100%;
  min-width: 0;
  height: 35px;
  border: 0;
  outline: 0;
  color: var(--atm-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  padding: 0;
}

.atm-search input::-moz-placeholder {
  color: var(--atm-muted);
  opacity: 0.88;
}

.atm-search input::placeholder {
  color: var(--atm-muted);
  opacity: 0.88;
}

.atm-search button {
  flex: 0 0 auto;
  min-height: 37px;
  padding: 0 17px;
  cursor: pointer;
  color: #22180d;
  background: linear-gradient(135deg, #ffce79, #e8a13e);
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-weight: 850;
  font-size: 12px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.atm-search button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.atm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.atm-track {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
  border-radius: 19px;
  box-shadow: var(--atm-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.atm-track:hover {
  transform: translateY(-3px);
  border-color: var(--atm-accent);
  box-shadow: 0 24px 40px -28px rgba(41, 41, 41, 0.38);
}

.atm-track__main {
  display: flex;
  align-items: stretch;
  gap: 13px;
  padding: 13px;
  flex: 1 1 auto;
  min-height: 115px;
}

.atm-track__art {
  display: block;
  position: relative;
  flex: 0 0 83px;
  width: 83px;
  height: 105px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--atm-card-soft);
}

.atm-track__art img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.atm-track__art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.atm-track__art-play {
  position: absolute;
  inset-inline-start: 6px;
  inset-block-end: 7px;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  color: #18212b;
}

.atm-track__art-play svg {
  width: 13px;
  height: 13px;
}

.atm-track__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.atm-track__headline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}

.atm-track__title {
  color: var(--atm-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.65;
  margin: -3px 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.atm-track__title a {
  transition: color 0.2s ease;
}

.atm-track__title a:hover {
  color: var(--atm-accent);
}

.atm-track__badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--atm-accent-soft);
  color: #895213;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.2px;
  direction: ltr;
}

.atm-track__badge--ed {
  color: #0d8d87;
  background: #dcf7f4;
}

body.dark .atm-track__badge--ed {
  color: #6fe3d5;
  background: #1d3c3e;
}

body.dark .atm-track__badge--op {
  color: #ffcb82;
}

.atm-track__people,
.atm-track__anime {
  color: var(--atm-muted);
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atm-track__people a {
  color: var(--atm-ink);
  font-weight: 750;
}

.atm-track__people a:hover {
  color: var(--atm-accent);
}

.atm-track__anime {
  margin-top: auto;
}

.atm-track__footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  padding: 7px 13px;
  border-top: 1px solid var(--atm-border);
  background: var(--atm-card-soft);
}

.atm-track__episodes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--atm-muted);
  font-size: 11px;
}

.atm-track__episodes span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atm-track__episodes svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.atm-track__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.atm-track__action {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--atm-border);
  border-radius: 9px;
  color: var(--atm-ink);
  background: var(--atm-card);
  transition: all 0.18s ease;
}

.atm-track__action svg {
  width: 16px;
  height: 16px;
}

.atm-track__action:hover {
  color: #211a12;
  border-color: #e9ae53;
  background: #fbd18c;
}

.atm-empty {
  margin-top: 18px;
  padding: 20px;
  border: 1px dashed var(--atm-border);
  border-radius: 16px;
  color: var(--atm-muted);
  background: var(--atm-card);
  text-align: center;
}

/* This page uses the shared front.paginator Blade markup.
   Override its inline default styles with scoped selectors (not global pagination). */

.atm .atm-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.atm .atm-pagination .animo-pagination {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 8px 10px;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
  border-radius: 15px;
  box-shadow: var(--atm-shadow);
}

.atm .atm-pagination .animo-pagination__list {
  gap: 5px;
}

.atm .atm-pagination .animo-pagination__item {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--atm-border);
  background: transparent;
  color: var(--atm-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  box-shadow: none;
}

.atm .atm-pagination .animo-pagination__item:hover {
  background: transparent;
  color: var(--atm-accent);
  border-color: var(--atm-accent);
  box-shadow: none;
  transform: none;
}

.atm .atm-pagination .animo-pagination__item--active,
.atm .atm-pagination .animo-pagination__item--active:hover {
  background: transparent;
  border-color: var(--atm-accent);
  color: var(--atm-accent);
  font-weight: 900;
  box-shadow: none;
}

.atm .atm-pagination .animo-pagination__item--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.atm .atm-pagination .animo-pagination__item svg {
  width: 15px;
  height: 15px;
}

.atm .atm-pagination .animo-pagination__jump {
  bottom: 43px;
}

@media (max-width: 700px) {
  .atm .atm-pagination .animo-pagination__list {
    gap: 4px;
  }

  .atm .atm-pagination .animo-pagination__item {
    width: 30px;
    height: 30px;
    font-size: 11px;
    border-radius: 8px;
  }
}

/* Detail: album-style artwork with compact information and native audio controls. */

.atm--detail {
  padding-top: 34px;
}

.atm-detail-sheet {
  position: relative;
  max-width: 1070px;
  margin: 0 auto;
  padding: 26px;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
  border-radius: 26px;
  box-shadow: var(--atm-shadow);
  overflow: hidden;
}

.atm-detail-sheet:before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 4px;
  background: linear-gradient(90deg, #d88832, #ffd484 50%, #d88832);
}

.atm-detail-top {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  align-items: start;
  gap: 25px;
}

.atm-detail-top.atm-detail-top--no-art {
  grid-template-columns: minmax(0, 1fr);
}

.atm-detail-art {
  position: relative;
  aspect-ratio: 3/4;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: var(--atm-card-soft);
  box-shadow: 0 20px 28px -23px rgba(5, 10, 18, 0.8);
}

.atm-detail-art img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.atm-detail-art:after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(13, 16, 22, 0.28));
  pointer-events: none;
}

.atm-detail-intro {
  min-width: 0;
  padding-top: 4px;
}

.atm-detail-flags {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

.atm-detail-badge,
.atm-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  border-radius: 8px;
}

.atm-detail-badge {
  color: #2c200f;
  background: linear-gradient(135deg, #ffd88a, #e6a448);
}

.atm-detail-pill {
  background: var(--atm-card-soft);
  border: 1px solid var(--atm-border);
  color: var(--atm-muted);
}

.atm-detail-title {
  margin: 0 0 15px;
  font-size: clamp(23px, 3vw, 34px);
  color: var(--atm-ink);
  line-height: 1.45;
  letter-spacing: -0.4px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.atm-detail-description {
  color: var(--atm-muted);
  font-size: 13px;
  line-height: 2;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.atm-detail-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 13px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--atm-border);
}

.atm-detail-panel {
  padding: 17px;
  border-radius: 17px;
  border: 1px solid var(--atm-border);
  background: var(--atm-card-soft);
  min-width: 0;
}

.atm-detail-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 7px 12px;
  margin-bottom: 15px;
}

.atm-detail-panel h2 {
  margin: 0;
  color: var(--atm-ink);
  font-weight: 900;
  font-size: 15px;
}

.atm-detail-panel__sub {
  font-size: 11px;
  color: var(--atm-muted);
}

.atm-detail-people {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.atm-detail-person {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  min-height: 34px;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
  color: var(--atm-ink);
  border-radius: 10px;
  font-weight: 750;
  font-size: 12px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.atm-detail-person:hover {
  color: var(--atm-accent);
  border-color: var(--atm-accent);
}

.atm-detail-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.atm-detail-data__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 9px;
  min-width: 0;
  min-height: 65px;
  border-radius: 10px;
  background: var(--atm-card);
  border: 1px solid var(--atm-border);
}

.atm-detail-data__label {
  color: var(--atm-muted);
  font-size: 10px;
}

.atm-detail-data__value {
  color: var(--atm-ink);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.atm-detail-audio {
  margin-top: 13px;
  padding: 14px;
  border-radius: 15px;
  background: var(--atm-card-soft);
  border: 1px solid var(--atm-border);
}

.atm-detail-audio audio {
  width: 100%;
  height: 43px;
  display: block;
  border-radius: 10px;
}

body.dark .atm-detail-audio audio {
  color-scheme: dark;
}

.atm-detail-alert {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--atm-ink);
}

.atm-detail-alert__badge {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--atm-accent-soft);
  color: var(--atm-accent);
  font-size: 12px;
  font-weight: 900;
}

.atm-detail-alert p {
  color: var(--atm-muted);
  margin: 0;
  line-height: 1.8;
  font-size: 12px;
}

@media (max-width: 1090px) {
  .atm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .atm {
    padding: 16px 0 42px;
  }

  .atm-archive-head {
    border-radius: 18px;
    padding: 17px;
    gap: 16px;
  }

  .atm-archive-head__mark {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    border-radius: 13px;
  }

  .atm-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .atm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .atm-track__main {
    min-height: 104px;
    gap: 11px;
    padding: 11px;
  }

  .atm-track__art {
    flex-basis: 74px;
    width: 74px;
    height: 96px;
  }

  .atm-track__footer {
    padding: 7px 11px;
  }

  .atm-detail-sheet {
    padding: 17px;
    border-radius: 19px;
  }

  .atm-detail-top {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
  }

  .atm-detail-art {
    border-radius: 12px;
  }

  .atm-detail-title {
    font-size: clamp(18px, 4vw, 25px);
    margin-bottom: 8px;
  }

  .atm-detail-flags {
    gap: 5px;
    margin-bottom: 9px;
  }

  .atm-detail-badge,
  .atm-detail-pill {
    font-size: 10px;
    padding: 3px 7px;
    min-height: 24px;
  }

  .atm-detail-description {
    font-size: 12px;
    line-height: 1.8;
  }

  .atm-detail-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
  }
}

@media (max-width: 420px) {
  .atm-detail-top {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
  }

  .atm-detail-title {
    font-size: 18px;
  }

  .atm-detail-data {
    gap: 5px;
  }

  .atm-detail-data__item {
    padding: 9px 7px;
  }

  .atm-detail-data__value {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atm-track,
  .atm-track__action,
  .atm-search button,
  .atm-detail-person {
    transition: none;
  }

  .atm-track:hover,
  .atm-search button:hover {
    transform: none;
  }
}

/* Compact mobile archive only; detail view and tablet/desktop stay unchanged. */

@media (max-width: 700px) {
  .atm--archive {
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .atm--archive .atm-archive-head {
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 15px;
  }

  .atm--archive .atm-archive-head__identity {
    gap: 10px;
  }

  .atm--archive .atm-archive-head__mark {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 11px;
  }

  .atm--archive .atm-archive-head__mark svg {
    width: 21px;
    height: 21px;
  }

  .atm--archive .atm-archive-head h1 {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: 0;
    margin-bottom: 3px;
  }

  .atm--archive .atm-archive-head p {
    font-size: 10px;
    line-height: 1.5;
  }

  .atm--archive .atm-search {
    flex-basis: 100%;
    gap: 5px;
    padding: 4px;
    border-radius: 11px;
  }

  .atm--archive .atm-search__icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin-inline: 7px 0;
  }

  .atm--archive .atm-search input {
    height: 30px;
    font-size: 12px;
  }

  .atm--archive .atm-search button {
    min-height: 31px;
    padding: 0 13px;
    font-size: 11px;
    border-radius: 8px;
  }

  .atm--archive .atm-grid {
    gap: 8px;
  }

  .atm--archive .atm-track {
    position: relative;
    padding: 8px;
    border-radius: 13px;
    box-shadow: none;
  }

  .atm--archive .atm-track__main {
    min-height: 85px;
    padding: 0;
    gap: 9px;
    align-items: stretch;
  }

  .atm--archive .atm-track__art {
    flex: 0 0 62px;
    width: 62px;
    height: 85px;
    border-radius: 9px;
  }

  .atm--archive .atm-track__art-play {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    inset-inline-start: 5px;
    inset-block-end: 5px;
  }

  .atm--archive .atm-track__art-play svg {
    width: 12px;
    height: 12px;
  }

  .atm--archive .atm-track__copy {
    min-width: 0;
    min-height: 85px;
    gap: 3px;
    padding: 0 0 32px;
  }

  .atm--archive .atm-track__headline {
    gap: 5px;
  }

  .atm--archive .atm-track__title {
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
  }

  .atm--archive .atm-track__badge {
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 9px;
  }

  .atm--archive .atm-track__people,
  .atm--archive .atm-track__anime {
    font-size: 10px;
    line-height: 1.45;
  }

  /* Keep episode and existing actions on the card, rather than on a tall second row. */

  .atm--archive .atm-track__footer {
    position: absolute;
    inset-inline-start: 79px;
    inset-inline-end: 8px;
    bottom: 8px;
    min-height: 29px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .atm--archive .atm-track__episodes {
    font-size: 10px;
    gap: 4px;
  }

  .atm--archive .atm-track__episodes svg {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .atm--archive .atm-track__actions {
    gap: 5px;
  }

  .atm--archive .atm-track__action {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .atm--archive .atm-track__action svg {
    width: 15px;
    height: 15px;
  }

  .atm--archive .atm-pagination {
    margin-top: 24px;
  }
}

@media (max-width: 380px) {
  .atm--archive .atm-archive-head h1 {
    font-size: 18px;
  }

  .atm--archive .atm-track__art {
    flex-basis: 57px;
    width: 57px;
    height: 78px;
  }

  .atm--archive .atm-track__main {
    min-height: 78px;
    gap: 8px;
  }

  .atm--archive .atm-track__copy {
    min-height: 78px;
  }

  .atm--archive .atm-track__footer {
    inset-inline-start: 73px;
  }

  .atm--archive .atm-track__title {
    font-size: 11.5px;
  }
}

@media (hover: none) and (max-width: 700px) {
  .atm--archive .atm-track:hover {
    transform: none;
  }
}

/* Weekly anime schedule: page-scoped layout, optimized for narrow devices. */

.page-schedule.schedule-compact .schedule-hub {
  opacity: 1;
  transform: none;
  animation: none;
  margin-bottom: 20px;
  border-radius: 16px;
}

.page-schedule.schedule-compact .schedule-hub__content {
  padding: 18px 20px 12px;
}

.page-schedule.schedule-compact .schedule-hub__header {
  margin-bottom: 10px;
  gap: 0;
}

.page-schedule.schedule-compact .schedule-hub__title {
  font-size: 23px;
  line-height: 1.5;
}

.page-schedule.schedule-compact .schedule-hub__subtitle {
  color: #64748b;
  font-size: 12px;
  line-height: 1.8;
  margin: 5px 0 0;
}

.page-schedule.schedule-compact .schedule-hub__announcement {
  font-size: 13px;
  max-height: 67px;
  line-height: 1.85;
}

.page-schedule.schedule-compact .schedule-hub__toggle {
  font-size: 12px;
  margin-top: 7px;
}

.page-schedule.schedule-compact .schedule-hub__filters {
  padding: 12px 20px 15px;
}

.page-schedule.schedule-compact .schedule-hub__filter-list {
  gap: 8px;
}

.page-schedule.schedule-compact .schedule-hub__filter-btn {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}

.page-schedule.schedule-compact .uk-active > .schedule-hub__filter-btn {
  transform: none;
  box-shadow: none;
}

.page-schedule.schedule-compact .schedule-day .box-anime {
  margin-bottom: 20px;
}

.page-schedule.schedule-compact .schedule-day .box-anime .title {
  padding: 12px 8px 8px;
}

.page-schedule.schedule-compact .schedule-day .box-anime .title h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 900;
}

.page-schedule.schedule-compact .schedule-day .box-anime .title h2 span {
  color: #b97312;
  background: transparent;
}

.page-schedule.schedule-compact .schedule-day .box-anime .body {
  padding: 6px 8px 12px;
}

.page-schedule.schedule-compact .schedule-day .box-anime .body > ul {
  gap: 12px;
}

body.dark .page-schedule.schedule-compact .schedule-hub__subtitle {
  color: var(--ani-muted, #a8b3c1);
}

body.dark .page-schedule.schedule-compact .schedule-day .box-anime .title h2 span {
  color: var(--ani-accent, #f3b54a);
}

@media (max-width: 640px) {
  .page-schedule.schedule-compact {
    padding-top: 8px;
  }

  .page-schedule.schedule-compact .uk-container {
    padding-inline: 12px;
  }

  .page-schedule.schedule-compact .schedule-hub {
    margin-bottom: 11px;
    border-radius: 13px;
  }

  .page-schedule.schedule-compact .schedule-hub__content {
    padding: 12px 12px 10px;
  }

  .page-schedule.schedule-compact .schedule-hub__header {
    flex-direction: row;
    text-align: right;
    margin-bottom: 6px;
  }

  .page-schedule.schedule-compact .schedule-hub__title {
    font-size: 18px;
    line-height: 1.45;
  }

  .page-schedule.schedule-compact .schedule-hub__subtitle {
    font-size: 10px;
    line-height: 1.65;
    margin-top: 4px;
  }

  .page-schedule.schedule-compact .schedule-hub__announcement {
    font-size: 11px;
    max-height: 41px;
    line-height: 1.7;
    transition-duration: 0.2s;
  }

  .page-schedule.schedule-compact .schedule-hub__announcement::after {
    height: 15px;
  }

  .page-schedule.schedule-compact .schedule-hub__announcement.is-expanded {
    max-height: 1000px;
  }

  .page-schedule.schedule-compact .schedule-hub__announcement.is-expanded::after {
    opacity: 0;
  }

  .page-schedule.schedule-compact .schedule-hub__toggle {
    margin-top: 5px;
    font-size: 11px;
    gap: 5px;
  }

  .page-schedule.schedule-compact .schedule-hub__toggle svg {
    width: 13px;
    height: 13px;
  }

  .page-schedule.schedule-compact .schedule-hub__filters {
    padding: 9px 10px 11px;
    border-top-width: 1px;
  }

  .page-schedule.schedule-compact .schedule-hub__filter-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
  }

  .page-schedule.schedule-compact .schedule-hub__filter-list > li {
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .page-schedule.schedule-compact .schedule-hub__filter-btn {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 4px 2px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime {
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime .title {
    padding: 6px 2px 5px;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime .title h2 {
    font-size: 14px;
    line-height: 1.5;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime .body {
    padding: 3px 2px 9px;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime .body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
  }

  .page-schedule.schedule-compact .schedule-day .post-anime {
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .page-schedule.schedule-compact .schedule-day .anime-card {
    border-radius: 11px;
    min-width: 0;
  }

  .page-schedule.schedule-compact .schedule-day .card-image-container {
    aspect-ratio: 2/2.36;
  }

  .page-schedule.schedule-compact .schedule-day .card-content {
    padding: 7px;
    gap: 4px;
  }

  .page-schedule.schedule-compact .schedule-day .anime-title {
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 1px;
  }

  .page-schedule.schedule-compact .schedule-day .meta-tags {
    padding-bottom: 0;
    gap: 4px;
  }

  .page-schedule.schedule-compact .schedule-day .rating {
    font-size: 10px;
  }

  .page-schedule.schedule-compact .schedule-day .rating .star-icon {
    width: 13px;
    height: 13px;
  }

  .page-schedule.schedule-compact .schedule-day .tags-side {
    gap: 3px;
  }

  .page-schedule.schedule-compact .schedule-day .tag {
    font-size: 9px;
    padding: 2px 4px;
  }

  .page-schedule.schedule-compact .schedule-day .card-stats {
    margin-top: 1px;
    padding-top: 0;
    font-size: 9px;
    -moz-column-gap: 4px;
         column-gap: 4px;
  }

  .page-schedule.schedule-compact .schedule-day .status-tag {
    font-size: 9px;
    padding: 3px 6px;
    top: 6px;
    inset-inline-start: 6px;
  }
}

@media (max-width: 360px) {
  .page-schedule.schedule-compact .schedule-hub__title {
    font-size: 17px;
  }

  .page-schedule.schedule-compact .schedule-hub__filter-btn {
    font-size: 9.5px;
  }

  .page-schedule.schedule-compact .schedule-day .box-anime .body > ul {
    gap: 7px;
  }

  .page-schedule.schedule-compact .schedule-day .anime-title {
    font-size: 10px;
  }

  .page-schedule.schedule-compact .schedule-day .card-content {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-schedule.schedule-compact .schedule-hub__announcement {
    transition: none;
  }
}

/*
 * Compact app-style announcement dialog; independent from UIkit confirm.
 * Accessible in both the site's cookie-driven light and dark themes.
 */

.ap-site-announcement.uk-modal {
  --notice-bg: #fff;
  --notice-text: #242830;
  --notice-muted: #586271;
  --notice-subtle: #f6f7f9;
  --notice-line: #e7e8ec;
  --notice-brand: #b87913;
  --notice-brand-bg: #fff7e9;
  --notice-accent: #efb346;
  --notice-button-text: #332512;
  box-sizing: border-box;
  padding: 16px !important;
  background: rgba(11, 14, 22, 0.56);
  color-scheme: light;
  backdrop-filter: blur(5px);
}

.ap-site-announcement.uk-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.ap-site-announcement .ap-site-announcement__dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(100%, 468px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--notice-line);
  border-radius: 22px;
  background: var(--notice-bg);
  color: var(--notice-text);
  direction: rtl;
  text-align: right;
  font-family: inherit;
  box-shadow: 0 24px 65px rgba(10, 15, 23, 0.22);
}

.ap-site-announcement .ap-site-announcement__grabber {
  display: none;
}

.ap-site-announcement .ap-site-announcement__header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  padding: 17px 21px;
  background: var(--notice-bg);
  border-bottom: 1px solid var(--notice-line);
}

.ap-site-announcement .ap-site-announcement__icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--notice-brand-bg);
  color: var(--notice-brand);
}

.ap-site-announcement .ap-site-announcement__icon svg {
  width: 21px;
  height: 21px;
}

.ap-site-announcement .ap-site-announcement__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.ap-site-announcement .ap-site-announcement__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--notice-brand);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}

.ap-site-announcement #ap-site-announcement-title {
  margin: 0;
  color: var(--notice-text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.5;
}

.ap-site-announcement .ap-site-announcement__close {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--notice-line);
  border-radius: 11px;
  background: var(--notice-subtle);
  color: var(--notice-muted);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.ap-site-announcement .ap-site-announcement__close svg {
  width: 16px;
  height: 16px;
}

.ap-site-announcement .ap-site-announcement__close:hover {
  background: var(--notice-brand-bg);
  color: var(--notice-brand);
}

.ap-site-announcement .ap-site-announcement__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(43vh, 346px);
  max-height: min(43dvh, 346px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--notice-line) transparent;
  padding: 20px 22px 16px;
  background: var(--notice-bg);
  white-space: normal;
  font-size: 13px;
  line-height: 1.8;
  color: var(--notice-muted);
}

.ap-site-announcement .ap-site-announcement__body > * {
  margin: 0;
}

.ap-site-announcement .ap-site-announcement__body > * + * {
  margin-top: 13px;
}

.ap-site-announcement .ap-site-announcement__lead {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--notice-brand) 18%, var(--notice-line));
  border-radius: 13px;
  background: var(--notice-brand-bg);
  color: var(--notice-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.ap-site-announcement .ap-site-announcement__section-heading {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--notice-text);
}

.ap-site-announcement .ap-site-announcement__paragraph {
  font-size: 13px;
  line-height: 1.85;
  color: var(--notice-muted);
  overflow-wrap: anywhere;
}

.ap-site-announcement .ap-site-announcement__list {
  display: grid;
  gap: 0;
  padding: 2px 0;
  list-style: none;
  border-block: 1px solid var(--notice-line);
}

.ap-site-announcement .ap-site-announcement__list li {
  margin: 0;
  padding: 7px 1px;
  color: var(--notice-text);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.ap-site-announcement .ap-site-announcement__list li + li {
  border-top: 1px solid var(--notice-line);
}

.ap-site-announcement .ap-site-announcement__link {
  direction: ltr;
  text-align: left;
}

.ap-site-announcement .ap-site-announcement__body a {
  color: var(--notice-brand);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.ap-site-announcement .ap-site-announcement__footer {
  flex: 0 0 auto;
  display: flex;
  padding: 13px 21px 17px;
  border-top: 1px solid var(--notice-line);
  background: var(--notice-bg);
}

.ap-site-announcement .ap-site-announcement__acknowledge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  border: 1px solid #d59d39;
  border-radius: 13px;
  background: var(--notice-accent);
  box-shadow: 0 2px 7px rgba(114, 76, 17, 0.12);
  color: var(--notice-button-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 850;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ap-site-announcement .ap-site-announcement__acknowledge svg {
  width: 17px;
  height: 17px;
}

.ap-site-announcement .ap-site-announcement__acknowledge:hover {
  background: #f6c269;
  box-shadow: 0 4px 12px rgba(114, 76, 17, 0.14);
}

.ap-site-announcement .ap-site-announcement__acknowledge:active {
  transform: scale(0.99);
}

.ap-site-announcement :is(button, a, .ap-site-announcement__body):focus-visible {
  outline: 3px solid var(--notice-brand);
  outline-offset: 3px;
}

/* Portal dialog reads the actual site dark-mode class on body/html. */

body.dark .ap-site-announcement.uk-modal,
html.dark .ap-site-announcement.uk-modal {
  --notice-bg: #222428;
  --notice-text: #f4f4f5;
  --notice-muted: #c8cbd2;
  --notice-subtle: #2b2e34;
  --notice-line: #3c4046;
  --notice-brand: #f1bb67;
  --notice-brand-bg: #393123;
  --notice-accent: #eeb14e;
  --notice-button-text: #282014;
  color-scheme: dark;
}

body.dark .ap-site-announcement .ap-site-announcement__dialog,
html.dark .ap-site-announcement .ap-site-announcement__dialog {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56);
}

@media (max-width: 640px) {
  .ap-site-announcement.uk-modal {
    padding: 0 !important;
  }

  .ap-site-announcement.uk-open {
    align-items: flex-end;
  }

  .ap-site-announcement .ap-site-announcement__dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }

  .ap-site-announcement .ap-site-announcement__grabber {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 4px;
    margin: 9px auto 0;
    border-radius: 99px;
    background: var(--notice-line);
  }

  .ap-site-announcement .ap-site-announcement__header {
    padding: 13px 18px 14px;
  }

  .ap-site-announcement .ap-site-announcement__body {
    max-height: min(49vh, 360px);
    max-height: min(49dvh, 360px);
    padding: 16px 18px;
  }

  .ap-site-announcement .ap-site-announcement__footer {
    padding: 11px 18px calc(15px + env(safe-area-inset-bottom, 0px));
  }

  .ap-site-announcement .ap-site-announcement__acknowledge {
    min-height: 48px;
  }
}

@media (max-height: 480px) {
  .ap-site-announcement .ap-site-announcement__body {
    max-height: 38vh;
    max-height: 38dvh;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ap-site-announcement.uk-modal {
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-site-announcement :is(.ap-site-announcement__acknowledge, .ap-site-announcement__close) {
    transition: none !important;
    transform: none !important;
  }
}

/* AniPlus / site-wide copied-link success toast; other notifications unchanged. */

.uk-notification-message.ap-copy-toast,
.uk-notification-message-success:has(.ap-copy-toast__content) {
  --ap-copy-ink: #10543d;
  --ap-copy-bg: #edfff6;
  --ap-copy-end: #dcf9ed;
  --ap-copy-border: #b1e6ce;
  --ap-copy-start: #23c68b;
  --ap-copy-stop: #07865d;
  position: relative;
  box-sizing: border-box;
  width: -moz-max-content;
  width: max-content;
  min-width: 225px;
  max-width: min(380px, 100vw - 32px);
  min-height: 68px;
  margin-top: 10px;
  padding: 12px 40px 12px 16px;
  border-radius: 19px;
  border: 1px solid var(--ap-copy-border);
  background: linear-gradient(120deg, var(--ap-copy-bg), var(--ap-copy-end));
  color: var(--ap-copy-ink);
  text-align: right;
  direction: rtl;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.7;
  font-family: inherit;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(8, 57, 37, 0.14), 0 3px 8px rgba(8, 41, 28, 0.07);
}

.uk-notification-message .ap-copy-toast__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.uk-notification-message .ap-copy-toast__icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ap-copy-start), var(--ap-copy-stop));
  color: #fff;
  border: 4px solid rgba(53, 211, 156, 0.13);
  background-clip: padding-box;
  box-shadow: 0 0 0 4px rgba(53, 211, 153, 0.1);
}

.uk-notification-message .ap-copy-toast__icon svg {
  width: 20px;
  height: 20px;
}

.uk-notification-message .ap-copy-toast__label {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.uk-notification-message.ap-copy-toast .uk-notification-close,
.uk-notification-message:has(.ap-copy-toast__content) .uk-notification-close {
  top: 23px;
  right: auto;
  left: 11px;
  padding: 3px;
  border-radius: 7px;
  color: var(--ap-copy-ink);
  opacity: 0.57;
}

.uk-notification-message.ap-copy-toast .uk-notification-close:hover,
.uk-notification-message:has(.ap-copy-toast__content) .uk-notification-close:hover {
  color: var(--ap-copy-ink);
  background: rgba(7, 134, 93, 0.1);
  opacity: 1;
}

.uk-notification-message.ap-copy-toast .uk-notification-close:focus-visible,
.uk-notification-message:has(.ap-copy-toast__content) .uk-notification-close:focus-visible {
  outline: 2px solid var(--ap-copy-stop);
  outline-offset: 2px;
}

.uk-notification-message.ap-copy-toast::after,
.uk-notification-message-success:has(.ap-copy-toast__content)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 0 0 18px 18px;
  background: rgba(9, 158, 111, 0.4);
  transform-origin: right center;
  animation: ap-copy-timer 3.2s linear forwards;
}

@keyframes ap-copy-timer {
  to {
    transform: scaleX(0);
  }
}

body.dark .uk-notification-message.ap-copy-toast,
html.dark .uk-notification-message.ap-copy-toast,
body.dark .uk-notification-message-success:has(.ap-copy-toast__content),
html.dark .uk-notification-message-success:has(.ap-copy-toast__content) {
  --ap-copy-ink: #e1f8eb;
  --ap-copy-bg: #253630;
  --ap-copy-end: #1c2b28;
  --ap-copy-border: #436d5a;
  --ap-copy-start: #2bc48c;
  --ap-copy-stop: #0a8861;
  color-scheme: dark;
  box-shadow: 0 17px 44px rgba(0, 0, 0, 0.36);
}

@media (max-width: 640px) {
  .uk-notification.uk-notification-bottom-left:has(.ap-copy-toast__content) {
    left: 16px;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }

  .uk-notification-message.ap-copy-toast,
  .uk-notification-message-success:has(.ap-copy-toast__content) {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uk-notification-message.ap-copy-toast::after,
  .uk-notification-message-success:has(.ap-copy-toast__content)::after {
    animation: none;
    transform: none;
  }
}