/* Anime section: tabs, the controls of each tab, and one list that is a column of rows or a grid of posters. Site tokens, so dark and light follow the theme. */
.ab-main{background:var(--paper); padding:22px 0 64px; min-height:70vh;}
.ab-wrap{width:min(1040px,100% - 32px); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:14px;}
.ab-title{font:800 clamp(24px,4vw,32px)/1.25 'Sora','Inter',sans-serif; color:var(--navy); letter-spacing:-.01em;}
html[lang="ar"] .ab-title,html[lang="ja"] .ab-title{font-family:inherit;}

.ab-tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;}
.ab-tabs::-webkit-scrollbar{display:none;}
.ab-tab{flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:1px solid var(--border-soft); background:var(--white); color:var(--navy-soft); font:600 14px/1 'Inter',sans-serif; text-decoration:none;}
html[lang="ar"] .ab-tab,html[lang="ja"] .ab-tab{font-family:inherit;}
a.ab-tab:hover{color:var(--navy); background:var(--blue-tint);}
.ab-tab.is-on{background:var(--blue); border-color:var(--blue); color:#fff;}
.ab-tab.is-off{opacity:.55; cursor:default;}
.ab-tab small{font:600 10px/1 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase;}

.ab-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.ab-label{font:600 11px/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-soft);}
.ab-view{flex:none; display:inline-flex; padding:3px; border:1px solid var(--border-soft); border-radius:999px; background:var(--white);}
.ab-view button{width:36px; height:32px; border:0; border-radius:999px; background:transparent; color:var(--navy-soft); display:grid; place-items:center; cursor:pointer;}
.ab-view button svg{width:18px; height:18px;}
.ab-view button[aria-pressed="true"]{background:color-mix(in srgb, var(--navy) 10%, transparent); color:var(--navy);}
.ab-view button:focus-visible,.ab-abc a:focus-visible,.ab-chip:focus-visible,.ab-tab:focus-visible,.ab-step:focus-visible,.ab-pick summary:focus-visible,.ab-a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

.ab-abc{display:flex; flex-wrap:wrap; gap:4px;}
.ab-abc a{min-width:34px; height:34px; padding-inline:6px; display:grid; place-items:center; border:1px solid var(--border-soft); border-radius:10px; background:var(--white); color:var(--navy-soft); font:600 13px/1 'JetBrains Mono',monospace; text-decoration:none;}
.ab-abc a:hover{color:var(--navy); background:var(--blue-tint);}
.ab-abc a.is-on{background:var(--navy); border-color:var(--navy); color:var(--paper);}

.ab-chips{flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;}
.ab-chips::-webkit-scrollbar{display:none;}
.ab-chip{flex:none; padding:7px 13px; border-radius:999px; border:1px solid var(--border-soft); background:var(--white); color:var(--navy-soft); font:600 13px/1.2 'Inter',sans-serif; text-decoration:none;}
html[lang="ar"] .ab-chip,html[lang="ja"] .ab-chip{font-family:inherit;}
.ab-chip:hover{color:var(--navy); background:var(--blue-tint);}
.ab-chip.is-on{background:color-mix(in srgb, var(--blue) 16%, transparent); border-color:var(--blue); color:var(--blue-dark);}
.ab-sep{flex:none; align-self:stretch; width:1px; margin:4px 2px; background:var(--border-soft);}

.ab-season{display:flex; align-items:center; gap:8px;}
.ab-step{flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-soft); background:var(--white); color:var(--navy); display:grid; place-items:center; text-decoration:none;}
.ab-step svg{width:18px; height:18px;}
a.ab-step:hover{background:var(--blue-tint);}
.ab-step.is-off{opacity:.35;}
html[dir="rtl"] .ab-step.is-flip svg{transform:scaleX(-1);}
.ab-pick{flex:1; min-width:0; position:relative;}
.ab-pick summary{list-style:none; cursor:pointer; height:48px; border:1px solid var(--border-soft); border-radius:14px; background:var(--white); display:flex; align-items:center; justify-content:center; gap:10px; color:var(--navy);}
.ab-pick summary::-webkit-details-marker{display:none;}
.ab-pick summary b{font:700 17px/1 'Sora','Inter',sans-serif;}
html[lang="ar"] .ab-pick summary b,html[lang="ja"] .ab-pick summary b{font-family:inherit;}
.ab-pick summary i{font:600 11px/1 'JetBrains Mono',monospace; font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-soft);}
.ab-pick summary svg{width:16px; height:16px; color:var(--navy-soft);}
.ab-pick[open] summary svg{transform:rotate(180deg);}
.ab-pick-box{position:absolute; z-index:5; inset-inline:0; top:calc(100% + 6px); padding:14px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px 12px; border:1px solid var(--border-soft); border-radius:14px; background:var(--white); box-shadow:0 12px 32px rgb(0 0 0 / .25);}
.ab-pick-box label{font:600 12px/1 'Inter',sans-serif; color:var(--navy-soft);}
.ab-pick-box select{height:40px; padding-inline:10px; border:1px solid var(--border-soft); border-radius:10px; background:var(--paper); color:var(--navy); font:600 14px 'Inter',sans-serif;}
.ab-pick-box .btn{grid-column:1 / -1; justify-self:end;}

.ab-list{list-style:none; margin:0; padding:0; background:var(--white); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;}
.ab-list:empty{display:none;}
.ab-item{border-top:1px solid var(--border-soft);}
.ab-item:first-child{border-top:0;}
.ab-a{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; color:inherit; text-decoration:none; transition:background .15s;}
.ab-a:hover{background:color-mix(in srgb, var(--navy) 5%, var(--white)); color:inherit;}
.ab-rank{flex:none; width:30px; padding-top:2px; text-align:center; font:700 15px/1.2 'JetBrains Mono',monospace; color:var(--navy-soft); font-variant-numeric:tabular-nums;}
.ab-rank.is-top{color:#d99a1c;}
.ab-ph{position:relative; flex:none; width:64px; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:linear-gradient(160deg, var(--teal), var(--blue)); display:grid; place-items:center;}
.ab-ph>span{font:700 20px/1 'Sora',sans-serif; color:rgba(255,255,255,.92);}
.ab-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ab-in{min-width:0; display:grid; gap:4px; align-content:start;}
.ab-in b{font-size:15px; line-height:1.3; font-weight:700; color:var(--navy); overflow-wrap:anywhere;}
.ab-meta{display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; color:var(--navy-soft);}
.ab-sc{color:#d99a1c; font-weight:700;}
.ab-gen{font-size:12px; color:var(--navy-soft); line-height:1.4;}

/* grid: the same rows become poster cards */
.ab-list.is-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px 12px; background:transparent; border:0; border-radius:0; overflow:visible;}
.ab-list.is-grid .ab-item{border:0;}
.ab-list.is-grid .ab-a{position:relative; flex-direction:column; gap:8px; padding:0; border-radius:12px;}
.ab-list.is-grid .ab-a:hover{background:transparent;}
.ab-list.is-grid .ab-ph{width:100%; border-radius:12px; border:1px solid var(--border-soft);}
.ab-list.is-grid .ab-ph>span{font-size:34px;}
.ab-list.is-grid .ab-in b{font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ab-list.is-grid .ab-gen{display:none;}
.ab-list.is-grid .ab-rank{position:absolute; z-index:1; top:6px; inset-inline-start:6px; width:auto; min-width:26px; padding:3px 8px; border-radius:999px; background:rgb(0 0 0 / .66); color:#fff; font-size:11px;}
.ab-list.is-grid .ab-rank::before{content:"#";}
.ab-list.is-grid .ab-rank.is-top{background:#d99a1c; color:#201400;}

.ab-empty{text-align:center; padding:48px 16px; color:var(--navy-soft); font-size:15px;}
.ab-empty[hidden]{display:none;}
.ab-more{text-align:center; padding-top:4px;}
.ab-more[hidden]{display:none;}
.ab-error{margin:0; text-align:center; color:#e0495d; font-size:13.5px;}
.ab-error[hidden]{display:none;}

@media (max-width:480px){
  .ab-main{padding-top:14px;}
  .ab-a{padding-inline:12px; gap:10px;}
  .ab-list.is-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px 10px;}
}
@media (prefers-reduced-motion:reduce){ .ab-a{transition:none;} }

/* footer (same look as the other pages) */
.auth-foot{border-top:1px solid var(--border-soft); background:var(--white);}
.auth-foot-in{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:18px; font-size:13.5px; flex-wrap:wrap;}
.auth-foot-links{display:inline-flex; gap:18px;}
.auth-foot a{color:var(--navy-soft); text-decoration:none;}
.auth-foot a:hover{color:var(--navy);}