:root,html[data-accent=forest]{--theme-from:#086347!important;--theme-to:#08734f!important;--accent:#8be6b7;--accent-ink:#08734f;--accent-soft:#123a2b;--accent-edge:#367f5c;--surface:#102019;--readable-text:#eef7f1;--readable-muted:#b2c9be;accent-color:#08734f;color-scheme:dark}
html.light[data-accent=forest]{--accent:#075c40;--accent-ink:#086347;--accent-soft:#e2f3e9;--accent-edge:#31845c;--surface:#fff;--readable-text:#172e22;--readable-muted:#415c4b;color-scheme:light}
html.dark body{background:#07120e!important;color:#eef7f1}html.light body{background:#f2f8f4!important;color:#172e22}
html[data-accent] .theme-accent-text,html.light[data-accent] .theme-accent-text{color:var(--accent)!important}
html[data-accent] .theme-solid,html.light[data-accent] .theme-solid{background-color:var(--accent-ink)!important}
html[data-accent] .theme-solid.text-white,html.light[data-accent] .theme-solid.text-white{color:#fff!important}
html[data-accent] .theme-soft,html.light[data-accent] .theme-soft{background-color:var(--accent-soft)!important}
html[data-accent] .theme-accent-border{border-color:var(--accent-edge)!important}
html[data-accent] .theme-hover-text:hover,html[data-accent] .group:hover .theme-group-text{color:var(--accent)!important}
html[data-accent] .theme-hover-bg:hover{background-color:var(--accent-soft)!important}html[data-accent] .theme-hover-border:hover{border-color:var(--accent-edge)!important}
html[data-accent] .theme-shadow{--tw-shadow-color:#168c5540!important;box-shadow:0 8px 24px #15925820!important}
html[data-accent] .theme-gradient{--tw-gradient-from:#075f44!important;--tw-gradient-to:#0a7a52!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;background-image:linear-gradient(110deg,#075f44,#0a7a52)!important}
html[data-accent] .theme-gradient.bg-clip-text{background-image:linear-gradient(110deg,#8be6b7,#e3b560)!important}html.light[data-accent] .theme-gradient.bg-clip-text{background-image:linear-gradient(110deg,#075c40,#91450d)!important}
html[data-accent] .theme-gradient.bg-clip-text{color:transparent!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
html[data-accent] .theme-gradient.text-white,html.light[data-accent] .theme-gradient.text-white{color:#fff!important}html[data-accent] .theme-gradient .text-white,html.light[data-accent] .theme-gradient .text-white{color:#fff!important}
html[data-accent] .theme-control{accent-color:var(--accent-ink)!important}
html[data-accent] .form-input:focus{border-color:var(--accent-ink)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-ink) 30%,transparent)!important}
html[data-accent] input::placeholder,html[data-accent] textarea::placeholder{color:#a2bdac!important;opacity:1}html.light[data-accent] input::placeholder,html.light[data-accent] textarea::placeholder{color:#526b5b!important;opacity:1}
html[data-accent] [class*="focus:ring-purple"]:focus,html[data-accent] [class*="focus:ring-indigo"]:focus{--tw-ring-color:var(--accent-edge)!important}
html[data-accent] :focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}html[data-accent] .action-button:hover{color:var(--accent)!important;border-color:var(--accent-edge)!important}
html[data-accent] header.glass-panel{background:#0a1a13f2!important;border-color:#2c4237!important}html.light[data-accent] header.glass-panel{background:#fffffff5!important;border-color:#cbded0!important}
html[data-accent] .site-brand__domain{color:#a7ebc6!important}html.light[data-accent] .site-brand__domain{color:#086347!important}html.light[data-accent] .site-brand__name{color:#163823!important}
html[data-accent] .story-card:not(.home-featured-story)>div:last-child{background:linear-gradient(#13251b,#0c1912)!important}html.light[data-accent] .story-card:not(.home-featured-story)>div:last-child{background:linear-gradient(#fff,#f0f7f2)!important}
html[data-accent] .story-card-title:not(.home-featured-title){color:var(--readable-text)!important}html[data-accent] .story-card:hover .story-card-title:not(.home-featured-title){color:var(--accent)!important}html[data-accent] .home-featured-title{color:#fff!important}
html.light[data-accent] .premium-price{color:#85450f!important;-webkit-text-fill-color:#85450f!important}
html[data-accent] .checkout-page{--pay-bg:#0e1b15;--pay-border:#30493a;--pay-fg:#f1f8f3;--pay-muted:#b0c8ba}html.light[data-accent] .checkout-page{--pay-bg:#fff;--pay-border:#c9ddd0;--pay-fg:#172e22;--pay-muted:#415c4b}
html[data-accent] .checkout-banner{background:linear-gradient(110deg,#075c40,#09734d)!important}html[data-accent] .checkout-bank{background:linear-gradient(165deg,#193e2b,var(--pay-bg) 40%)!important}html.light[data-accent] .checkout-bank{background:linear-gradient(165deg,#e1f4e8,#fff 45%)!important}
html[data-accent] .checkout-heading span,html[data-accent] .payment-placeholder{color:var(--accent)!important}html[data-accent] .payment-amount{background:#0a713d10;border-color:var(--accent-edge)}html[data-accent] .payment-amount:before{background:#21a86a}html[data-accent] .payment-amount .payment-label{color:var(--accent)!important}html[data-accent] .payment-amount .payment-copy{background:#085c3c;color:#fff}
html[data-accent] .checkout-instructions li>span{background:var(--accent-soft);color:var(--accent)}html[data-accent] .payment-download{color:var(--accent)}html[data-accent] .payment-confirm{background:#086347;border-color:#26865b}html[data-accent] .payment-confirm:hover{background:#064d35}
html[data-accent] .admin-primary{background:#086347!important;border-color:#26865b!important}html[data-accent] .admin-stat{background:linear-gradient(140deg,#133623,#102019);border-color:#34543e}html.light[data-accent] .admin-stat{background:linear-gradient(140deg,#e4f3e8,#fff);border-color:#bfd5c6}
html[data-accent] .admin-link,html[data-accent] .admin-method summary{color:var(--accent)}html[data-accent] .admin-section-heading h2,html[data-accent] .admin-subheading,html[data-accent] .admin-stat strong{color:var(--readable-text)}html[data-accent] .admin-bar-space>span{background:linear-gradient(#2fbb76,#086347)}html[data-accent] .admin-bar-column:hover .admin-bar-space>span{background:#c66c15}
html[data-accent] .password-reset-notice{background:#086347}html[data-accent] footer{background:#091710!important;border-color:#30493a!important}html.light[data-accent] footer{background:#f8fbf9!important;border-color:#ccdcd2!important}html[data-accent] footer a:hover{color:var(--accent)!important;text-decoration:underline;text-underline-offset:4px}
html[data-accent] footer h4{color:var(--readable-text)!important}html.light[data-accent] .border-gray-800{border-color:#ccddd2!important}html.light[data-accent] .border-gray-700{border-color:#a8c4b2!important}
.home-wide-section{max-width:1400px;margin:0 auto 72px;padding:0 32px}.home-trending-content{width:100%;min-width:0}.home-story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.home-member-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:28px;align-items:stretch;margin-bottom:80px}.home-premium-card{border:1px solid #39734f;border-radius:24px;padding:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(130deg,#143d27,#0c2116);box-shadow:0 16px 48px #0002}
.home-premium-card>div.absolute{display:none}.home-premium-card h2{font-size:clamp(25px,2.5vw,32px);line-height:1.5;text-align:center;max-width:100%;color:#fff!important}.home-premium-card p{font-size:15px;line-height:1.9;text-align:center;max-width:680px;color:#d4e7da!important}.home-premium-card>div:last-child{flex-wrap:wrap;justify-content:center;width:100%}.home-premium-card a{font-size:13px;padding:13px 18px}
.home-premium-card a:first-child{background:#fff!important;color:#075b3c!important}.home-weekly-ranking{min-width:0}.home-weekly-ranking>div{height:100%;display:flex;flex-direction:column}.home-weekly-ranking h2{font-size:clamp(18px,1.65vw,23px);line-height:1.5}.home-weekly-ranking>div>div:last-child{flex:1;background:#102019!important;border-color:#34543e!important;box-shadow:none}
html[data-accent] .story-card .story-thumb-play,html.light[data-accent] .story-card .story-thumb-play{border:0!important;box-shadow:none!important;outline:none;background:#08734f!important;color:#fff!important}
html.light[data-accent] #cta-premium{background:linear-gradient(130deg,#e0f2e6,#f6fbf7)!important;border-color:#aacfb7!important}html.light[data-accent] #cta-premium h2{color:#183824!important}html.light[data-accent] #cta-premium p{color:#31563e!important}html.light[data-accent] .home-weekly-ranking>div>div:last-child{background:#fff!important;border-color:#c5d9cb!important}
html.light[data-accent] #cta-premium .bg-white\/10{background:#d9eddf!important;border-color:#8ebb9b!important}html.light[data-accent] #cta-premium .border-white\/20{border-color:#8ebb9b!important;color:#183824!important}
html[data-accent=forest] body .theme-gradient.theme-gradient,html.light[data-accent=forest] body .theme-gradient.theme-gradient{background-image:linear-gradient(110deg,#075f44,#0a7a52)!important}
html[data-accent=forest] body .theme-gradient.bg-clip-text{background-image:linear-gradient(110deg,#8be6b7,#e3b560)!important}html.light[data-accent=forest] body .theme-gradient.bg-clip-text{background-image:linear-gradient(110deg,#075c40,#91450d)!important}
html[data-accent=forest] body .bg-white.theme-accent-text,html.light[data-accent=forest] body .bg-white.theme-accent-text{color:#075c40!important}
html[data-accent] .theme-gradient .theme-accent-text,html.light[data-accent] .theme-gradient .theme-accent-text{color:#e6f6ec!important}
@media(max-width:1023px){.home-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-member-row{grid-template-columns:minmax(0,1fr)}.home-premium-card{padding:30px}.home-wide-section{padding-left:24px;padding-right:24px}}
@media(max-width:639px){.home-wide-section{padding:0 16px;margin-bottom:48px}.home-story-grid{grid-template-columns:minmax(0,1fr);gap:20px}.home-premium-card{padding:24px}.home-member-row{gap:24px}.home-premium-card h2{font-size:25px}.home-weekly-ranking h2{font-size:23px}}
@media(max-width:420px){.mobile-header-actions>a[aria-label="Mua Premium"]{font-size:0;gap:0;padding:0;width:32px;justify-content:center;flex-shrink:0}}
/* Keep guest account controls visible on smaller laptop/tablet widths. */
@media (min-width:768px) and (max-width:1279px){
 html[data-accent] header .h-16 > .md\:flex{display:none!important}
 html[data-accent] header .h-16 > .mobile-header-actions{display:flex!important}
 html[data-accent] header > .md\:hidden{display:block}
}
/* Dark preview: amber identifies interaction; deep green remains the solid action color. */
html.dark[data-accent=forest]{--hover-accent:#ffd166;--hover-surface:#302819;--hover-edge:#e9b949;--accent:#ffd166;--accent-soft:#302819;--accent-edge:#947534}
html.dark[data-accent=forest] .theme-hover-text:is(:hover,:focus-visible),
html.dark[data-accent=forest] .group:is(:hover,:focus-within) .theme-group-text,
html.dark[data-accent=forest] .action-button:is(:hover,:focus-visible){color:var(--hover-accent)!important}
html.dark[data-accent=forest] .story-card:is(:hover,:focus-visible) .story-card-title:not(.home-featured-title){color:var(--hover-accent)!important}
html.dark[data-accent=forest] :is(.theme-hover-border,.story-card,.action-button):is(:hover,:focus-visible){border-color:var(--hover-edge)!important}
html.dark[data-accent=forest] .story-card:not(.home-featured-story):is(:hover,:focus-visible){box-shadow:0 0 0 1px #e9b94955,0 8px 24px #0003}
html.dark[data-accent=forest] .theme-hover-bg:is(:hover,:focus-visible){background-color:var(--hover-surface)!important}
html.dark[data-accent=forest] footer a:not(.site-icon-link):is(:hover,:focus-visible),
html.dark[data-accent=forest] :is(.admin-link,.admin-method summary,.recent-listening-heading>a,.recent-listening-empty>a,.story-breadcrumb a,.story-login-prompt a):is(:hover,:focus-visible){color:var(--hover-accent)!important;text-decoration:underline;text-underline-offset:4px}
html.dark[data-accent=forest] :is(.chapter-row,.story-side-row):is(:hover,:focus-within){background:var(--hover-surface)!important;border-color:var(--hover-edge)}
html.dark[data-accent=forest] .chapter-row:is(:hover,:focus-within) .chapter-info strong,
html.dark[data-accent=forest] .story-side-row:is(:hover,:focus-within) .story-side-info strong{color:var(--hover-accent)}
html.dark[data-accent=forest] :is(.admin-table,.member-table,.account-table) tbody tr:is(:hover,:focus-within){background-color:var(--hover-surface)!important}
html.dark[data-accent=forest] :is(#player-speed-toggle,#player-sleep,#player-download,#player-close):is(:hover,:focus-visible){color:var(--hover-accent)!important;border-color:var(--hover-edge);background:var(--hover-surface)}
html.dark[data-accent=forest] :focus-visible{outline:2px solid var(--hover-accent)!important;outline-offset:3px}
/* Text controls use only their existing inner border, never an extra focus ring. */
html.dark[data-accent=forest] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]),select,textarea):is(:focus,:focus-visible){border-color:var(--hover-edge)!important;outline:none!important;box-shadow:none!important}
html.dark[data-accent=forest] .border:has(> :is(input,select,textarea):focus){border-color:var(--hover-edge)!important;outline:none!important;box-shadow:none!important}
html.dark[data-accent=forest] .chapter-search:focus-within{border-color:var(--hover-edge)!important;outline:none!important;box-shadow:none!important}
html.dark[data-accent=forest] :is(input[type=checkbox],input[type=radio]){accent-color:var(--hover-accent)!important}
html.dark[data-accent=forest] header button[aria-expanded=true]{color:var(--hover-accent)!important}
/* Filled controls and white cards need their own text color, including while hovered. */
html.dark[data-accent=forest] :is(.theme-solid,.theme-gradient,.story-primary,.admin-primary,.payment-confirm,.connection-test-button,.admin-story-search-button,.admin-story-add,.admin-story-edit):is(:hover,:focus-visible){color:#fff!important}
html.dark[data-accent=forest] .home-premium-card a:first-child:is(:hover,:focus-visible),
html.dark[data-accent=forest] .bg-white.theme-accent-text:is(:hover,:focus-visible){color:#075c40!important}
html.dark[data-accent=forest] .action-button[data-method=DELETE]:is(:hover,:focus-visible){color:#fecdd3!important;border-color:#fb7185!important;background:#4c1526!important}
/* The promotion is a raised card, distinct from amber focus and selection borders. */
html[data-accent=forest] body a:has(.promotion-label){border-color:#466f60!important;border-top-color:#80aa96!important;border-bottom-color:#254f40!important;box-shadow:0 18px 30px -12px #0009,0 5px 10px #0004!important;transition:transform .2s,border-color .2s,box-shadow .2s}
html[data-accent=forest] body a:has(.promotion-label)>.theme-gradient{background-image:radial-gradient(ellipse at 12% 0%,#43866855,transparent 65%),linear-gradient(125deg,#205542,#153e32 60%,#10352c)!important}
html[data-accent=forest] body a:has(.promotion-label)>.theme-gradient>.absolute{background:#9ce9c2!important;opacity:.12}
html[data-accent=forest] body a:has(.promotion-label) h3{color:#fff!important;line-height:1.4;text-shadow:0 2px 5px #0003}
html[data-accent=forest] body a:has(.promotion-label) p.theme-accent-text{color:#dceee4!important;line-height:1.75}
html[data-accent=forest] body a:has(.promotion-label):hover{border-color:#719d88!important;border-top-color:#a4cdb7!important;box-shadow:0 23px 36px -12px #000a,0 7px 14px #0004!important}
html.light[data-accent=forest] body a:has(.promotion-label){box-shadow:0 16px 28px -12px #123b384d,0 4px 9px #123b3826!important}
@media(prefers-reduced-motion:reduce){html[data-accent=forest] body a:has(.promotion-label){transition:none;transform:none!important}}