/* RuMangalist interface layer. Component styling for the RuMangalist interface. */
:root {
    --rm-ink: #29243a;
    --rm-ink-soft: #625d70;
    --rm-paper: #f6f4f8;
    --rm-surface: #ffffff;
    --rm-surface-muted: #efedf3;
    --rm-accent: #7654a5;
    --rm-accent-dark: #593b84;
    --rm-highlight: #ef785f;
    --rm-line: #e3dfeb;
    --rm-success: #39866e;
    --rm-radius-sm: 8px;
    --rm-radius-md: 14px;
    --rm-radius-lg: 20px;
    --rm-space-1: 6px;
    --rm-space-2: 10px;
    --rm-space-3: 16px;
    --rm-space-4: 24px;
    --rm-space-5: 32px;
    --rm-shadow-card: 0 8px 24px rgba(41, 36, 58, .08);
    --rm-shadow-float: 0 14px 36px rgba(41, 36, 58, .14);
    --rm-text-xs: 12px;
    --rm-text-sm: 14px;
    --rm-text-md: 16px;
    --rm-text-lg: 22px;
    --rm-text-xl: 30px;
    --rm-ease: 180ms ease;
}

html { scroll-behavior: smooth; }
body {
    background: var(--rm-paper);
    color: var(--rm-ink);
    font-family: "Montserrat", "Segoe UI", sans-serif;
    line-height: 1.5;
}
body a { color: var(--rm-accent-dark); transition: color var(--rm-ease); }
body a:hover { color: var(--rm-highlight); }
button, input, select, textarea { font: inherit; }

.rm-site-header { position: relative; z-index: 20; }
.rm-shell {
    max-width: 1280px;
    min-height: 0;
    margin: 18px auto 0;
    padding: 14px 22px 18px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 20px;
    row-gap: 14px;
    overflow: visible;
    background: var(--rm-surface);
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0;
    box-shadow: var(--rm-shadow-card);
}
.rm-site-header__brand { float: none; flex: 0 0 190px; width: auto; height: 48px; margin: 0; }
.rm-site-header__brand a {
    position: static !important;
    color: var(--rm-ink) !important;
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: -.06em;
}
.rm-site-header__brand a span::first-letter { color: var(--rm-highlight); }
.rm-site-header__tools { float: none; flex: 1 1 420px; min-width: 0; width: auto;   gap: 12px; align-items: center; }
.rm-search { position: relative; float: none; flex: 1; min-width: 180px; }
.rm-search form { position: relative; display: flex !important; width: 100%; gap: 12px; align-items: center; }
.rm-search .rm-search__input {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px 0 44px !important;
    color: var(--rm-ink) !important;
    background: var(--rm-surface-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 999px;
    filter: none !important;
    transition: border-color var(--rm-ease), box-shadow var(--rm-ease), background-color var(--rm-ease);
}
.rm-search .rm-search__input:focus { background-color: var(--rm-surface) !important; border-color: var(--rm-accent) !important; box-shadow: 0 0 0 4px rgba(118,84,165,.12); }
.rm-search form::before,
.rm-search form::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.rm-search form::before { left: 16px; top: 13px; width: 12px; height: 12px; border: 2px solid var(--rm-accent); border-radius: 50%; }
.rm-search form::after { left: 28px; top: 27px; width: 8px; height: 2px; border-radius: 2px; background: var(--rm-accent); transform: rotate(45deg); transform-origin: left center; }
.rm-search #toggle { flex: 0 0 38px; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; cursor: pointer; opacity: .72; filter: grayscale(1); border-radius: 50%; transition: background-color var(--rm-ease), opacity var(--rm-ease); }
.rm-search #toggle:hover { opacity: 1; background: var(--rm-surface-muted); }
#search_result { border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); box-shadow: var(--rm-shadow-float); }
#search_result ul, #search_result ul li, #search_result div#search-footer { background-color: var(--rm-surface); }
#search_result ul li { border-color: var(--rm-line); transition: background-color var(--rm-ease); }
#search_result ul li:hover, #search_result ul li.selected { background: var(--rm-surface-muted); color: var(--rm-ink); }
#search_result div#search-footer { color: var(--rm-ink-soft); }
.rm-navigation { clear: both; flex: 1 0 100%; width: 100%; max-width: 1280px; margin: 0 auto; }
.rm-navigation__list {
    float: none;
    display: flex;
    min-height: 48px;
  
    align-items: center;
    gap: 4px;
    background: var(--rm-ink) !important;
    border-radius: 0 0 var(--rm-radius-lg) var(--rm-radius-lg);
}
.rm-navigation__list .rm-navigation__item { float: none; }
.rm-navigation__list .rm-navigation__item a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--rm-radius-sm);
    color: #eeeaf5;
    font-size: var(--rm-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    transition: background-color var(--rm-ease), color var(--rm-ease), transform var(--rm-ease);
}
.rm-navigation__list .rm-navigation__item a:hover { color: #fff; background: rgba(255,255,255,.12); transform: translateY(-1px); }
.rm-site-header .btn-login, .rm-site-header .btn-register, .rm-site-header .mobile-menu,
body .btn-chapterlist, body .btn-login, body .btn-register {
    border: 0;
    border-radius: 999px;
    padding: 10px 17px;
    background: var(--rm-accent);
    color: #fff;
    font-weight: 700;
    transition: background-color var(--rm-ease), transform var(--rm-ease), box-shadow var(--rm-ease);
}
body .btn-login:hover, body .btn-register:hover, body .btn-chapterlist:hover { color: #fff; background: var(--rm-accent-dark); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(89,59,132,.2); }

.container-main, .container-header, .container-silder { max-width: 1280px; }
.panel-breadcrumb { border: 0; border-radius: var(--rm-radius-md); background: var(--rm-accent); box-shadow: var(--rm-shadow-card); }
.panel-breadcrumb h1, .panel-breadcrumb a { color: #fff; }
.panel-content-homepage .content-homepage-item,
.panel-content-genres .content-genres-item,
.panel-search-story .search-story-item,
.rm-title-card {
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius-md);
    background: var(--rm-surface);
    box-shadow: 0 3px 12px rgba(41,36,58,.045);
    transition: transform var(--rm-ease), box-shadow var(--rm-ease), border-color var(--rm-ease);
}
.panel-content-homepage .content-homepage-item:hover,
.panel-content-genres .content-genres-item:hover,
.panel-search-story .search-story-item:hover,
.rm-title-card:hover { transform: translateY(-3px); border-color: #cfc3df; box-shadow: var(--rm-shadow-card); }
.rm-title-card { padding: 10px; }
.rm-title-card img { border-radius: var(--rm-radius-sm); }
.item-rate, .genres-item-rate { border-radius: 999px; background: rgba(41,36,58,.88); padding: 4px 8px; font-style: normal; font-weight: 700; }
.item-hot, .item-ss { border-radius: 999px; padding: 3px 8px; background: var(--rm-highlight); font-weight: 700; }
.tag, .genres-select, .story-info-right a { border-radius: 999px; }

.rm-title-detail, .rm-chapter-list, .rm-title-detail-description, .comment-block,
#comments .data { border-color: var(--rm-line); border-radius: var(--rm-radius-md); }
.rm-title-detail { overflow: hidden; padding: clamp(14px, 2vw, 26px); background: var(--rm-surface); box-shadow: var(--rm-shadow-card); }
.rm-title-detail h1, .rm-title-detail h2, .rm-title-detail h3, .panel-content-homepage h2, .panel-content-genres h2 {
    color: var(--rm-ink);
    font-weight: 700;
    letter-spacing: -.025em;
}
.rm-chapter-list { margin-top: var(--rm-space-4); padding: var(--rm-space-3); background: var(--rm-surface); }
.rm-chapter-list .chapter-name { color: var(--rm-accent-dark); }
.rm-chapter-list .a-h:hover, .rm-title-detail .a-h:hover { color: var(--rm-highlight); }
.comment-block { margin-bottom: var(--rm-space-3); padding: var(--rm-space-3); background: var(--rm-surface); box-shadow: 0 3px 12px rgba(41,36,58,.04); }
#comments textarea, #comments input[type="text"] { border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm); padding: 10px 12px; }

.rm-reader-page { background: var(--rm-paper); }
.rm-reader-page__pages img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.rm-reader-page__toolbar { border-radius: var(--rm-radius-md); }
.rm-site-footer { margin-top: 44px; border-top: 1px solid var(--rm-line); background: var(--rm-ink); }
.rm-site-footer__content { float: none; width: 100%; box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 20px; color: #dcd6e6; }
.rm-site-footer__inner { padding: 22px !important; border-radius: var(--rm-radius-md); background: transparent !important; color: #dcd6e6 !important; }
.rm-site-footer a { color: #fff; }

@media (max-width: 800px) {
    .rm-shell { margin: 0 auto; padding: 12px 14px; gap: 10px; flex-wrap: wrap; border-radius: 0; }
    .rm-site-header__brand { flex: 1 0 100%; height: 38px; }
    .rm-site-header__brand a { font-size: 22px !important; }
    .rm-site-header__tools { width: 100%; flex: 1 0 100%; flex-wrap: wrap; }
    .rm-search { flex: 1 1 100%; }
    .rm-search .rm-search__input { height: 42px !important; }
    .rm-search form::before { top: 12px; }
    .rm-search form::after { top: 26px; }
    .rm-navigation__list { display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; max-height: calc(100vh - 190px); overflow-y: auto; padding: 8px; border-radius: 0 0 var(--rm-radius-md) var(--rm-radius-md); }
    .rm-navigation__list.is-open { display: flex; }
    .rm-navigation__list .rm-navigation__item { width: 100%; }
    .rm-navigation__list .rm-navigation__item a { padding: 12px 14px; font-size: var(--rm-text-sm); }
    .container-main { padding-right: 10px; padding-left: 10px; }
    .panel-content-homepage .content-homepage-item, .panel-content-genres .content-genres-item, .panel-search-story .search-story-item { border-radius: var(--rm-radius-sm); }
    .rm-title-detail { padding: 14px; }
    .rm-site-footer__content { padding: 14px; }
    .rm-site-footer__inner > div:first-child { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.rm-title-card__cover img { border-radius: var(--rm-radius-sm); }
.rm-search__result-cover { border-radius: 5px; }

/* Genre filter block */
.rm-genre-filter { overflow: hidden; border: 1px solid var(--rm-line); border-top: 3px solid var(--rm-accent); border-radius: var(--rm-radius-md); background: var(--rm-surface); box-shadow: var(--rm-shadow-card); }
.rm-genre-filter__title { float: none; display: inline-flex; margin: 0; padding: 10px 16px; border-radius: 0 0 var(--rm-radius-sm) 0; background: var(--rm-accent); color: #fff; font-size: var(--rm-text-sm); font-weight: 700; letter-spacing: .05em; }
.rm-genre-filter__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rm-genre-filter__row { border-bottom: 1px solid var(--rm-line); }
.rm-genre-filter__row:last-child { border-bottom: 0; }
.rm-genre-filter__cell { padding: 4px 12px; }
.rm-genre-filter__link { display: block; overflow: hidden; padding: 8px 10px; border-radius: var(--rm-radius-sm); color: var(--rm-ink-soft); font-size: var(--rm-text-sm); line-height: 1.35; text-overflow: ellipsis; transition: background-color var(--rm-ease), color var(--rm-ease); }
.rm-genre-filter__link:hover { background: var(--rm-surface-muted); color: var(--rm-accent-dark); }
.rm-genre-filter__link--active { background: rgba(118,84,165,.1); color: var(--rm-accent-dark); font-weight: 700; }
@media (max-width: 600px) { .rm-genre-filter__cell { padding: 3px 4px; } .rm-genre-filter__link { padding: 8px 6px; font-size: var(--rm-text-xs); } }

/* Recommendation cards */
.rm-recommendation-grid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 18px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 0;
}
.rm-recommendation-item { min-width: 0; padding: 0 12px}
.rm-recommendation-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius-md);
    background: var(--rm-surface);
    box-shadow: 0 4px 14px rgba(41,36,58,.06);
    transition: transform var(--rm-ease), border-color var(--rm-ease), box-shadow var(--rm-ease);
}
.rm-recommendation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(118,84,165,.38);
    box-shadow: var(--rm-shadow-float);
}
.rm-recommendation-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-recommendation-card__cover {
    position: relative;
    overflow: hidden;
 
    aspect-ratio: 2 / 3;
    background: var(--rm-surface-muted);
}
.rm-recommendation-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}
.rm-recommendation-card:hover .rm-recommendation-card__image { transform: scale(1.035); }
.rm-recommendation-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    padding: 12px 11px 13px;
}
.rm-recommendation-card__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rm-ink);
    font-size: var(--rm-text-sm);
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.rm-recommendation-card__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.rm-recommendation-card__meter {
    flex: 1;
    overflow: hidden;
    height: 6px;
    max-width: 96px;
    border-radius: 999px;
    background: var(--rm-surface-muted);
}
.rm-recommendation-card__meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rm-accent), #a17dc9);
}
.rm-recommendation-card__score {
    flex: 0 0 auto;
    color: var(--rm-ink-soft);
    font-size: var(--rm-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rm-recommendation-card__score::before { content: "★"; margin-right: 4px; color: var(--rm-highlight); }
@media (max-width: 600px) {
    .rm-recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 0; }
    .rm-recommendation-card__body { min-height: 84px; padding: 10px; }
}