.theme-toggle{background:#182820;color:#c2dfcc;border:1px solid #466450;border-radius:6px;min-height:36px;padding:8px 12px;font-size:11px;cursor:pointer}.header-options{display:flex;align-items:center;gap:16px}html[data-theme=light]{color-scheme:light;--green:#13843c;--ink:#f5f7f3;--text:#1d3128;--muted:#566b5e;--bg:#f5f7f3;--surface:#fff;--line:#d7e1d9}html[data-theme=light] body{background-color:#f5f7f3;color:#1d3128}html[data-theme=light] :is(button,a,input,select,textarea):focus-visible{outline-color:#13843c}html[data-theme=light] .theme-toggle{background:#edf4ed;color:#264f36;border-color:#bdcfbf}html[data-theme=light] .primary{background:#197a3d;color:#fff}html[data-theme=light] .secondary{border-color:#a8c1b0;background:#fff9;color:#294c37}html[data-theme=light] .brand{color:#15853d}html[data-theme=light] :is(.topbar,footer){background:#f5f7f3;border-color:#d9e3dc}html[data-theme=light] .nav-item{color:#5d6f65}html[data-theme=light] .nav-item.active{color:#1a3726}html[data-theme=light] #list-count{background:#e1eee3;color:#37724d}html[data-theme=light] .account .account-toggle{color:#243a2e}html[data-theme=light] .avatar{background:#cde3d3;color:#245338}html[data-theme=light] .account-chevron{color:#526f5f}html[data-theme=light] .topbar .account-menu{background:#fff;border-color:#c8d8ce;box-shadow:0 15px 40px #27453422}html[data-theme=light] .account-menu :is(a,#logout,.menu-option){color:#304a3b}html[data-theme=light] .account-menu :is(a,#logout,.menu-option):hover{background:#edf5ef;color:#145b2e}html[data-theme=light] .account-menu a span{color:#447458}html[data-theme=light] .account-menu .appearance{border-color:#dce7df}html[data-theme=light] .appearance-label{color:#526e5d}html[data-theme=light] .theme-options{background:#eef3ed}html[data-theme=light] .account-menu .theme-options button{color:#526e5d}html[data-theme=light] .account-menu .theme-options button[aria-pressed=true]{background:#d4e7d7;color:#174f2a}html[data-theme=light] .account-menu a+#logout{border-color:#dce7df}html[data-theme=light] .hero-art{background-image:linear-gradient(90deg,#f5f7f3 5%,#f5f7f3eb 32%,#f5f7f310 88%),linear-gradient(0deg,#f5f7f3,transparent 45%),url('assets/catalog/hero.svg')}html[data-theme=light] :is(.overline,.profile-kicker){color:#3d7551}html[data-theme=light] :is(.featured-meta,.featured-description){color:#466352}html[data-theme=light] .demo-label{color:#4f6c5b}html[data-theme=light] :is(.search,.genre-label select){background:#fff;border-color:#c8d7cd;color:#42594b}html[data-theme=light] .search input{color:#21392b}html[data-theme=light] :is(.search input::placeholder,.search>span){color:#6a7e70}html[data-theme=light] .type-filters button{color:#546a5c}html[data-theme=light] .type-filters button.selected{background:#deeee2;color:#206b39;border-color:#b4d0bd}html[data-theme=light] :is(.genre-label,#result-count,.card p){color:#566e5f}html[data-theme=light] .card{color:#253d2e}html[data-theme=light] .card:hover h3{color:#177738}html[data-theme=light] .catalog-notice{background:#e8f1e7;border-color:#c9dccb}html[data-theme=light] .catalog-notice p{color:#526d58}html[data-theme=light] .catalog-notice strong{color:#274f31}html[data-theme=light] footer :is(p,small){color:#597162}html[data-theme=light] .empty{background:#fff;border-color:#b8cdbf}html[data-theme=light] .empty p{color:#61776a}html[data-theme=light] dialog{background:#fff;color:#223d2d;border-color:#c8d9ce;box-shadow:0 30px 80px #17312444}html[data-theme=light] dialog::backdrop{background:#12271bc4}html[data-theme=light] :is(.details-body p,#details-meta,.unavailable p,dialog p){color:#536f5f}html[data-theme=light] .unavailable{border-color:#d5e2d8}html[data-theme=light] .unavailable strong{color:#355c44}html[data-theme=light] .profile-dialog{background:#fff;color:#233e2d}html[data-theme=light] .profile-dialog .profile-close{color:#3f6650}html[data-theme=light] .profile-field{color:#3c5d47}html[data-theme=light] .profile-field :is(input,textarea){background:#f7faf6;color:#223f2c;border-color:#c1d3c6}html[data-theme=light] :is(.profile-email,.profile-hint,.profile-meta span){color:#5e7967}html[data-theme=light] .avatar-fieldset legend{color:#294e34}html[data-theme=light] .avatar-choice span{color:#56715f}html[data-theme=light] .avatar-choice input:checked~span{color:#1c7038}html[data-theme=light] .avatar-choice input:checked+img{border-color:#16823b}html[data-theme=light] .profile-actions{border-color:#dce6de;background:#fff}html[data-theme=light] .profile-error{background:#fff0f0;color:#8d303c;border-color:#e6afb6}
/* Authentication and the public landing page share the selected appearance. */
html[data-theme=light] .auth-page{background-image:linear-gradient(90deg,#f5f7f3eb,#f5f7f3ee),url('assets/catalog/hero.svg')}html[data-theme=light] .auth-page .auth-card{background:#ffffffed;border-color:#d1e1d5;box-shadow:0 25px 70px #24493214}html[data-theme=light] .auth-page :is(.back,.welcome p,.welcome-note,.subtitle,.footnote,#password-hint){color:#587260}html[data-theme=light] .auth-page :is(.eyebrow,.welcome em){color:#327448}html[data-theme=light] .auth-page .tabs{background:#eaf1e9}html[data-theme=light] .auth-page .tabs button{color:#597362}html[data-theme=light] .auth-page .tabs button[aria-selected=true]{background:#fff;color:#2d5239;box-shadow:0 2px 6px #1b472013}html[data-theme=light] .auth-page input:not([type=checkbox]){background:#f7faf5;border-color:#bfd2c4;color:#23412d}html[data-theme=light] .auth-page :is(.password-wrap button,.text-button){color:#37794b}html[data-theme=light] .auth-page #recovery-code{background:#edf6ec;color:#256539;border-color:#97b99e}html[data-theme=light] .auth-page .error{background:#fae9e9;color:#943841}html[data-theme=light] .landing-page header{background:linear-gradient(#f5f7f3ef,#f5f7f355)}html[data-theme=light] .landing-page .hero{background-image:linear-gradient(#f5f7f3e8,#f5f7f3f2),url('assets/hero-background.png')}html[data-theme=light] .landing-page :is(.quality,.speed,.download,.languages){background:#f5f7f3}html[data-theme=light] .landing-page .download-caption{background:#f5f7f3}html[data-theme=light] .landing-page .sound{background:#e3ede5;color:#376048;border-color:#bfd4c4}html[data-theme=light] .landing-page .section-nav a:after{background:#385b4755}html[data-theme=light] .landing-page .section-nav a.active:after{background:#315c3f}html[data-theme=light] .landing-page .section-nav span{background:#e6f1e9;color:#234d32}html[data-theme=light] .landing-page .down{color:#50705c}html[data-theme=light] .landing-page .platforms>span{color:#52705b}html[data-theme=light] .landing-page .footer-bottom{border-color:#cfded3;color:#5a7262}html[data-theme=light] .landing-page .demo-box{background:#edf4ec}html[data-theme=light] .landing-page .header-join{color:#285d39;background:#e6f3e8}
/* Administrative screens retain the same access rules in both appearances. */
html[data-theme=light] .admin-page .sidebar{background:#edf3ec;border-color:#d0dfd3}html[data-theme=light] .admin-page .sidebar nav button{color:#506d59}html[data-theme=light] .admin-page .sidebar nav button.active{background:#d8e9d9;color:#226e39}html[data-theme=light] .admin-page .sidebar-bottom,html[data-theme=light] .admin-page .sidebar-bottom p{color:#577761}html[data-theme=light] .admin-page :is(.breadcrumb,.breadcrumb strong,#logout,.role-pill,.small-tag,.stat-label,.stat small,.chart-row,.status-line,.eyebrow,.audit small){color:#536e5e}html[data-theme=light] .admin-page :is(.role-pill,.small-tag){border-color:#b8cdbd}html[data-theme=light] .admin-page .chart-row progress,html[data-theme=light] .admin-page progress::-webkit-progress-bar{background:#e0ebe1}html[data-theme=light] .admin-page progress::-webkit-progress-value{background:#49925b}html[data-theme=light] .admin-page :is(.search-label,.access-form label){color:#46674f}html[data-theme=light] .admin-page label :is(input,select){background:#fff;color:#2b4a33;border-color:#b7cfbe}html[data-theme=light] .admin-page :is(th,.permission-guide h3){color:#3b6046}html[data-theme=light] .admin-page th{background:#e6efe5}html[data-theme=light] .admin-page dialog{background:#fff;color:#294d36}html[data-theme=light] .admin-page :is(#error,#confirm-error){background:#f9e6e6;color:#943844}
@media(max-width:700px){.header-options{gap:9px}.theme-toggle{font-size:10px;padding:7px 9px}html[data-theme=light] .hero-art{background-image:linear-gradient(90deg,#f5f7f3ee,#f5f7f3bc),linear-gradient(0deg,#f5f7f3,transparent 70%),url('assets/catalog/hero.svg')}.admin-page .account{flex-wrap:wrap;justify-content:flex-end}.auth-page .header-options{flex-wrap:wrap;justify-content:flex-end}.landing-page header .theme-toggle{font-size:9px;padding:6px;min-height:32px}}

/* Original Caixa Play artwork; the movement plays once per page, without inline styles. */
a.brand.brand-with-logo{display:inline-flex;align-items:center;width:222px;max-width:100%;flex-shrink:0;line-height:1;color:#1cc749}
a.brand .brand-art,a.brand .brand-custom-image{display:block;width:100%;height:auto;aspect-ratio:533/96;object-fit:contain;overflow:visible}
.brand-art .dbm-wordmark{fill:#f5f7fa}
.brand-art .dbm-lid{transform-box:view-box;transform-origin:20px 26px;transform:rotate(-16deg)}
.brand-art .dbm-play{opacity:1;transform-box:view-box;transform-origin:48px 58px;transform:scale(1)}
html[data-theme=light] a.brand.brand-with-logo{color:#13843c}
html[data-theme=light] .brand-art .dbm-wordmark{fill:#243a2e}
.sidebar a.brand.brand-with-logo{width:184px}
footer a.brand.brand-with-logo{width:190px}
@keyframes dorama-logo-open{0%{transform:rotate(0deg)}72%{transform:rotate(-19deg)}100%{transform:rotate(-16deg)}}
@keyframes dorama-logo-play{0%{opacity:0;transform:scale(.78)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .brand-animated .dbm-lid{animation:dorama-logo-open 900ms cubic-bezier(.22,.7,.3,1) 80ms 1 both}
  .brand-animated .dbm-play{animation:dorama-logo-play 420ms ease-out 650ms 1 both}
}
@media(max-width:760px){
  .landing-page header a.brand.brand-with-logo{width:clamp(138px,42vw,195px)}
  .auth-page header a.brand.brand-with-logo{width:clamp(150px,44vw,190px)}
  .auth-page header{gap:12px}
  .auth-page .header-options{min-width:0}
  .catalog-page .topbar a.brand.brand-with-logo{width:clamp(155px,43vw,190px)}
}

/* Profile menu approved 2026-10-20. */

.account .account-toggle {
    border: 2px solid #1cc749;
    border-radius: 999px;
    padding: 5px 11px 5px 6px;
    gap: 9px;
    min-height: 44px;
}
.account-toggle #user-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.account-toggle .account-chevron,
.account-toggle[aria-expanded="true"] .account-chevron {
    display: grid;
    place-items: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: #9db3a8;
    transform: none;
    transition: none;
    animation: none;
}
.account-chevron svg { display: block; }
.account-chevron .chevron-up { display: none; }
.account-toggle[aria-expanded="true"] .chevron-down { display: none; }
.account-toggle[aria-expanded="true"] .chevron-up { display: block; }
html[data-theme=light] .account .account-toggle {
    border-color: #13843c;
}
html[data-theme=light] .account-chevron {
    color: #436b50;
}
@media(max-width:700px) {
    .account .account-toggle { gap: 8px; }
    .account-toggle #user-name { font-size: 13px; }
}

/* Featured series artwork and soft transition, 2026-10-20. */
.featured.has-banner{--hero-base:#0d1013;--hero-fade:13,16,19;background:var(--hero-base);color:#f2f4f5;min-height:620px;isolation:isolate}
.featured.has-banner .hero-art{position:absolute;inset:0;width:100%;height:100%;margin:0;pointer-events:none}
.featured.has-banner .hero-banner{width:65%;height:100%;margin-left:auto;object-fit:cover;object-position:center 12%;opacity:1;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.featured.has-banner .hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hero-base) 0%,rgba(var(--hero-fade),.98) 25%,rgba(var(--hero-fade),.86) 39%,rgba(var(--hero-fade),.42) 57%,rgba(var(--hero-fade),.06) 78%),linear-gradient(0deg,var(--hero-base) 0%,rgba(var(--hero-fade),0) 32%)}
.featured.has-banner .featured-content{position:relative;z-index:1;width:50%;max-width:610px;margin:58px 5% 64px}
.featured.has-banner h1{font-size:clamp(40px,4.7vw,66px);line-height:1.07;letter-spacing:-1.8px;max-width:610px;text-wrap:balance}
.featured.has-banner .featured-description{max-width:460px;color:#bac9c5}
.featured.has-banner .featured-meta,.featured.has-banner .demo-label{color:#9db4a9}
.featured.has-banner .overline{color:#a6d4ba}
.featured.has-banner .art-label{display:none}
html[data-theme=light] .featured.has-banner{--hero-base:#f5f7f3;--hero-fade:245,247,243;background:var(--hero-base);color:#1d3128}
html[data-theme=light] .featured.has-banner .featured-description{color:#405c4c}
html[data-theme=light] .featured.has-banner :is(.featured-meta,.demo-label,.overline){color:#3d7051}
@media(max-width:700px){
 .featured.has-banner{display:block;min-height:0;padding-top:300px}
 .featured.has-banner .hero-art{position:absolute;inset:0 0 auto;width:100%;height:430px;margin:0}
 .featured.has-banner .hero-banner{width:100%;height:100%;object-position:center 12%;mask-image:none}
 .featured.has-banner .hero-art:after{background:linear-gradient(0deg,var(--hero-base) 0%,rgba(var(--hero-fade),.94) 13%,rgba(var(--hero-fade),.55) 30%,rgba(var(--hero-fade),.08) 64%,rgba(var(--hero-fade),.03) 100%)}
 .featured.has-banner .featured-content{width:auto;max-width:none;margin:0;padding:0 24px 38px}
 .featured.has-banner h1{font-size:clamp(34px,9.5vw,46px);max-width:540px;letter-spacing:-1px}
 .featured.has-banner .featured-meta{margin-top:22px}
 .featured.has-banner .featured-description{font-size:14px}
}

/* Approved banner top fade 2026-10-20. */
.featured.has-banner{--hero-top:#0d1419}
.featured.has-banner .hero-banner{object-position:center top}
.featured.has-banner .hero-art:before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:170px;pointer-events:none;background:linear-gradient(180deg,var(--hero-top) 0%,rgba(13,20,25,.94) 14%,rgba(13,20,25,.52) 48%,rgba(13,20,25,0) 100%)}
html[data-theme=light] .featured.has-banner{--hero-top:#f5f7f3}
html[data-theme=light] .featured.has-banner .hero-art:before{background:linear-gradient(180deg,var(--hero-top) 0%,rgba(245,247,243,.94) 14%,rgba(245,247,243,.52) 48%,rgba(245,247,243,0) 100%)}
@media(max-width:700px){.featured.has-banner .hero-art:before{height:110px}.featured.has-banner .hero-banner{object-position:center top}}

/* Approved compact navigation 2026-10-20. */
.catalog-page .topbar{height:64px}
.catalog-page .topbar>nav{align-self:center;align-items:center;height:44px}
.catalog-page .topbar>nav .nav-item{height:44px;line-height:20px;padding:12px 0}
.catalog-page .topbar>nav .nav-item.active:after{bottom:5px;height:3px;border-radius:3px}
@media(min-width:701px){
 .featured.has-banner{min-height:560px}
 .featured.has-banner .featured-content{margin-top:34px;margin-bottom:46px}
 .featured.has-banner .hero-art:before{height:110px}
}
@media(max-width:700px){
 .catalog-page .topbar{height:auto;min-height:0;padding-top:10px;gap:4px 16px}
 .catalog-page .topbar>nav{height:44px}
 .featured.has-banner .hero-art:before{height:90px}
}

/* Approved episode cards 2026-10-20 */
#details{width:min(1000px,calc(100% - 40px));max-height:92dvh;border-radius:20px;border:1px solid #ffffff19;background:#111b20}
#details[open]{display:grid;grid-template-columns:32% 68%;overflow:auto}
#details-poster{width:100%;height:100%;min-height:0;object-fit:contain;object-position:top;background:#0b1318}
#details .details-body{padding:32px 36px 22px}
#details .details-body h2{font-size:32px;margin:12px 0 14px;letter-spacing:-.6px}
#details #details-meta{font-size:11px;color:#97aca3;line-height:1.6;margin-bottom:16px}
#details #details-synopsis{font-size:13px;line-height:1.75;margin-bottom:20px}
#details #detail-save{min-height:38px;padding:9px 16px;border:1px solid #507064;background:transparent;color:#d0e5d9;border-radius:8px;font-weight:500}
#details .episode-area{margin-top:25px;border-top:1px solid #ffffff12;padding-top:21px}
.episodes-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
#details .episodes-heading h3{font:600 18px/1.3 Arial,sans-serif;margin:0;color:#edf5f0}
.episode-count{font-size:11px;color:#8fa59b}
.season-caption{font-size:11px;color:#9cb4a7;letter-spacing:1px;text-transform:uppercase}
.episode-card{display:grid;grid-template-columns:108px minmax(0,1fr) 32px;align-items:center;gap:15px;text-align:left;width:100%;padding:13px;background:#19292a;border:1px solid #365649;border-radius:12px;color:#f2f6f3}
.episode-card:hover{background:#203531;border-color:#5d9f78}
.episode-thumb{position:relative}
.episode-thumb img{display:block;width:108px;height:80px;object-fit:cover;border-radius:7px}
.episode-number{position:absolute;left:6px;top:6px;background:#0a1518dc;color:white;padding:3px 6px;border-radius:4px;font-size:10px}
.episode-copy{display:grid;gap:7px}
.episode-copy strong{font-size:15px;line-height:1.35;font-weight:600}
.episode-copy .summary{font-size:12px;line-height:1.5;color:#b1c3ba}
.episode-copy .runtime{font-size:10px;color:#8ea99a}
.episode-play{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1cc749;color:#05200d}
.episode-play svg{width:13px;height:13px;margin-left:2px}
.episode-footer{display:flex;justify-content:flex-end;margin-top:16px}
.episode-footer .report-link{display:flex;align-items:center;gap:6px;min-height:32px;background:none;border:0;padding:4px 0;color:#8ca198;font-size:11px;font-weight:400;text-decoration:underline;text-underline-offset:3px}
.report-link svg{width:12px;height:12px}
.episode-footer .report-link:hover{color:#dcebe1}
#details .episode-player{margin:0 0 16px;border-radius:10px}
@media(max-width:700px){
 #details{width:calc(100% - 24px);max-height:92dvh}
 #details[open]{display:block}
 #details-poster{height:180px;object-fit:cover;object-position:center 20%}
 #details .details-body{padding:24px 20px 18px}
 #details .details-body h2{font-size:28px}
 .episode-card{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px}
 .episode-thumb img{width:76px;height:82px}
 .episode-play{display:none}
 .episode-copy strong{font-size:13px}
 .episode-copy .summary{font-size:11px}
 .episode-footer{justify-content:flex-end}
}
html[data-theme=light] #details{background:#fff;color:#20392b}
html[data-theme=light] #details .episode-area{border-color:#dce6df}
html[data-theme=light] #details .episodes-heading h3{color:#20392b}
html[data-theme=light] #details .episode-card{background:#f2f7f3;border-color:#c1d7c8;color:#1d3b29}
html[data-theme=light] #details .episode-copy .summary{color:#4c6858}
html[data-theme=light] #details #detail-save{color:#2a5a3d;border-color:#a7c4b0}

.episode-card[aria-pressed=true]{border-color:var(--green)}
#details .episode-status[hidden]{display:none}

/* Offline episode actions */
.offline-save{display:block;margin:-3px 0 16px auto;padding:9px 13px;border:1px solid var(--border,#34443a);border-radius:8px;background:transparent;color:var(--text,#e5eee8);font:600 12px/1.4 inherit;min-height:40px;cursor:pointer}.offline-save:hover{border-color:#21c54b}.offline-save:focus-visible{outline:2px solid #21c54b;outline-offset:3px}

/* Header catalog navigation */
.catalog-page .topbar{gap:32px}.catalog-page .topbar>nav{gap:24px;min-width:0}.catalog-page .topbar>nav .nav-item{white-space:nowrap}.catalog-page .library{scroll-margin-top:20px}.featured[hidden],#curated[hidden]{display:none!important}.catalog-page .account-menu #menu-list{display:flex;align-items:center;justify-content:space-between}
@media(max-width:900px){.catalog-page .topbar{height:auto;min-height:64px;flex-wrap:wrap;padding-top:10px;gap:4px 16px}.catalog-page .topbar>nav{order:3;width:100%;gap:clamp(14px,4vw,26px);overflow-x:auto}.catalog-page .topbar>nav .nav-item{flex-shrink:0;font-size:12px}}

/* Original Dorama Nexo vectors, selected for the current theme. */
a.brand .brand-nexo{display:block;width:100%;aspect-ratio:973.058/168}
a.brand .brand-nexo img{display:block;width:100%;height:auto}
a.brand .brand-nexo .brand-nexo-light{display:none}
html[data-theme=light] a.brand .brand-nexo .brand-nexo-dark{display:none}
html[data-theme=light] a.brand .brand-nexo .brand-nexo-light{display:block}
