.animedex-section { padding: 108px 0; background: radial-gradient(circle at 80% 5%, #2a111a 0, #09090e 38%, #050507 100%); }
.animedex-section .title { margin-bottom: 32px; }
.animedex-shell { padding: 24px; border: 1px solid #72303c; border-radius: 22px; background: #0b0b10; box-shadow: 0 28px 80px #0009; }
.animedex-toolbar { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.animedex-toolbar label { display: grid; gap: 7px; min-width: 170px; color: #e3bac2; font: 600 12px/1.3 sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.animedex-toolbar .animedex-search { flex: 1 1 250px; }
.animedex-toolbar input, .animedex-toolbar select, .animedex-stat-header select { box-sizing: border-box; width: 100%; min-height: 42px; padding: 9px 13px; border: 1px solid #62404a; border-radius: 10px; color: #fff; background: #191319; font: 500 15px/1.2 sans-serif; }
.animedex-toolbar input:focus-visible, .animedex-toolbar select:focus-visible, .animedex-stat-header select:focus-visible, .animedex-card:focus-visible { outline: 2px solid #ff5364; outline-offset: 2px; }
#animedex-count { margin-left: auto; padding: 10px 2px; color: #c6a9af; white-space: nowrap; font: 600 13px sans-serif; }
.animedex-layout { display: grid; grid-template-columns: minmax(240px, 35%) minmax(0, 1fr); gap: 22px; align-items: start; }
.animedex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; max-height: 760px; overflow: auto; padding: 3px 8px 3px 3px; scrollbar-color: #8b3a4b #151218; }
.animedex-card { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 80px; padding: 7px; border: 1px solid #342b32; border-radius: 12px; color: #fff; text-align: left; background: #17141a; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.animedex-card:hover { transform: translateY(-2px); border-color: #ab4c5f; }
.animedex-card[aria-pressed="true"] { border-color: #ff5364; background: #311820; box-shadow: inset 3px 0 #ff5364; }
.animedex-card img { width: 58px; height: 64px; flex: none; object-fit: cover; object-position: top; border-radius: 7px; background: #22141a; }
.animedex-card span { display: grid; gap: 5px; min-width: 0; }
.animedex-card strong { font: 700 14px/1.2 sans-serif; overflow-wrap: anywhere; }
.animedex-card small { color: #bfabb0; font: 500 11px/1.3 sans-serif; }
.animedex-detail { min-width: 0; border: 1px solid #44323a; border-radius: 16px; overflow: hidden; background: #121116; }
.animedex-cover { height: clamp(230px, 34vw, 410px); overflow: hidden; background: linear-gradient(130deg, #29131d, #111116); }
.animedex-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.animedex-heading, .animedex-stats-section, .animedex-skills { padding: 22px 25px; }
.animedex-heading small { color: #ff8290; font: 700 12px sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.animedex-heading h3 { margin: 9px 0 14px; color: #fff; font: 800 clamp(29px, 4vw, 48px)/1.1 sans-serif; }
.animedex-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.animedex-tags span { padding: 6px 10px; border: 1px solid #67404a; border-radius: 99px; color: #f1d5d9; background: #271820; font: 600 12px sans-serif; }
.animedex-stats-section { border-top: 1px solid #30252d; }
.animedex-stat-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.animedex-stat-header h4 { margin: 0; color: #fff; font: 700 21px sans-serif; }
.animedex-stat-header label { display: flex; align-items: center; gap: 8px; color: #e0bdc4; font: 600 13px sans-serif; white-space: nowrap; }
.animedex-stat-header select { width: 84px; }
.animedex-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.animedex-stats > div { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid #3b2c35; border-radius: 9px; background: #1d1820; }
.animedex-stats small { color: #c7a9b0; font: 600 11px sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.animedex-stats strong { color: #fff; font: 750 19px sans-serif; }
.animedex-context { margin: 13px 0 0; color: #ad9ba1; font: 12px/1.5 sans-serif; }
.animedex-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
.animedex-skill { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid #633441; border-radius: 12px; background: linear-gradient(145deg, #271720, #171319); }
.animedex-skill small { color: #ff8290; font: 750 11px sans-serif; letter-spacing: .12em; }
.animedex-skill h4 { margin: 10px 0; color: #fff; font: 750 19px/1.2 sans-serif; }
.animedex-skill p { margin: 0 0 15px; color: #e0cbd0; font: 14px/1.5 sans-serif; }
.animedex-skill span { margin-top: auto; color: #ffb1bd; font: 600 12px/1.4 sans-serif; }
.animedex-empty { padding: 25px; color: #dabdc5; font: 15px/1.5 sans-serif; }
@media (max-width: 1050px) { .animedex-layout { grid-template-columns: minmax(200px, 38%) minmax(0, 1fr); } .animedex-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .animedex-section { padding: 65px 0; } .animedex-shell { padding: 15px; } .animedex-toolbar label { min-width: min(42%, 170px); flex: 1; } .animedex-toolbar .animedex-search { flex-basis: 100%; } #animedex-count { width: 100%; margin: 0; padding: 0; } .animedex-layout { grid-template-columns: 1fr; } .animedex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 285px; } .animedex-detail { scroll-margin-top: 80px; } .animedex-cover { height: 320px; } }
@media (max-width: 520px) { .animedex-list { grid-template-columns: 1fr; } .animedex-card { min-height: 65px; } .animedex-card img { height: 52px; width: 52px; } .animedex-heading, .animedex-stats-section, .animedex-skills { padding: 17px; } .animedex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .animedex-skills { grid-template-columns: 1fr; padding-top: 0; } }