/* Dark theme for the shared components (nav, footer, logo, feedback, profile,
   support and share dialogs). Every page with a dark theme loads this first,
   then its own components/dark/<page>.css. Applies only under
   html[data-theme="dark"], which components/preferences.js sets.
   The block between the sentinels is generated by scripts/build_dark_theme.mjs;
   never edit it by hand. The exceptions after it use literal colours, not a
   page's tokens, because each page names its tokens differently. */

/* DARK_THEME:GENERATED:START */
/* Generated by scripts/build_dark_theme.mjs. Do not edit by hand. */
/* components/nav.js */
html[data-theme="dark"] #snav{background:rgba(25,32,48,0.92);border-bottom:1px solid #2c3855;box-shadow:0 1px 12px rgba(14,103,208,0.07)}
html[data-theme="dark"] #snav .snav-links a{color:#afbac0}
html[data-theme="dark"] #snav .snav-links a:hover,html[data-theme="dark"] #snav .snav-links a.snav-active{color:#d2e7f5}
html[data-theme="dark"] #snav .snav-cta{background:#0E67D0;color:#fff !important}
html[data-theme="dark"] #snav .snav-cta:hover{background:#0a539f !important}
html[data-theme="dark"] #snav .snav-support{border:1px solid #5b2f48;background:#171d2c;color:#eb85b2}
html[data-theme="dark"] #snav .snav-support:hover{border-color:#ec4899;background:#361f2b}
html[data-theme="dark"] #snav .snav-auth-btn{border:1px solid #2c3855;background:#171d2c;color:#c4d1d9}
html[data-theme="dark"] #snav .snav-auth-btn:hover{border-color:#0E67D0;color:#7bb3f4}
html[data-theme="dark"] #snav .snav-supporter-heart{color:#f27eb7}
html[data-theme="dark"] #snav .snav-auth-menu{background:#171d2c;border:1px solid #2c3855;box-shadow:0 8px 24px rgba(0,0,0,0.1)}
html[data-theme="dark"] #snav .snav-auth-menu-item{border:none;background:none;color:#c4d1d9}
html[data-theme="dark"] #snav .snav-auth-menu-item:hover{background:#1d2639}
html[data-theme="dark"] #snav .snav-auth-menu-item.snav-logout{color:#f47b7b}
html[data-theme="dark"] #snav .snav-auth-profile-header{border-bottom:1px solid #2c3855}
html[data-theme="dark"] #snav .snav-auth-profile-header img{border:2px solid #0E67D0}
html[data-theme="dark"] #snav .snav-auth-profile-header .snav-auth-profile-name{color:#d2e7f5}
html[data-theme="dark"] #snav .snav-auth-profile-header .snav-auth-profile-email{color:#afbac0}
html[data-theme="dark"] #snav .snav-hamburger{background:none;border:none}
html[data-theme="dark"] #snav .snav-hamburger span{background:#0E2A3C}
@media (max-width: 768px){
  html[data-theme="dark"] #snav .snav-links{background:rgba(25,32,48,0.98);box-shadow:-4px 0 30px rgba(0,0,0,0.1)}
  html[data-theme="dark"] #snav .snav-links a{color:#c4d1d9;border-bottom:1px solid #2c3855}
  html[data-theme="dark"] #snav .snav-links li:last-child a{border-bottom:none}
  html[data-theme="dark"] .snav-overlay{background:rgba(0,0,0,0.3)}
}
/* components/footer.js */
html[data-theme="dark"] #sfooter{border-top:1px solid #2c3855}
html[data-theme="dark"] #sfooter .sft-brand{color:#afbac0}
html[data-theme="dark"] #sfooter .sft-icon{color:#fff}
html[data-theme="dark"] #sfooter .sfi-yt{background:#ff0000}
html[data-theme="dark"] #sfooter .sfi-li{background:#0a66c2}
html[data-theme="dark"] #sfooter .sfi-ig{background:radial-gradient(circle at 30% 107%, #5a562c 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%)}
html[data-theme="dark"] #sfooter .sfi-tg{background:#229ed9}
html[data-theme="dark"] #sfooter .sfi-tm{background:#E44332}
html[data-theme="dark"] #sfooter .sfi-book{background:#0E67D0}
html[data-theme="dark"] #sfooter .sfi-support{background:#ec4899}
html[data-theme="dark"] #sfooter .sft-link-support{color:#7bb3f4 !important}
html[data-theme="dark"] #sfooter .sft-link-support:hover{color:#8abff5 !important}
html[data-theme="dark"] #sfooter .sft-links a{color:#afbac0}
html[data-theme="dark"] #sfooter .sft-links a:hover{color:#d2e7f5}
/* components/logo.js */
html[data-theme="dark"] .alok-logo-name{color:#d2e7f5}
html[data-theme="dark"] .alok-logo-sub{color:#7bb3f4}
/* components/feedback.js */
html[data-theme="dark"] .sfb-backdrop{background:rgba(15,23,42,0.45)}
html[data-theme="dark"] .sfb-modal{background:#171d2c;box-shadow:0 20px 60px rgba(15,23,42,0.22)}
html[data-theme="dark"] .sfb-header{border-bottom:1px solid #27324c}
html[data-theme="dark"] .sfb-header-title{color:#d2e7f5}
html[data-theme="dark"] .sfb-close{background:none;border:none;color:#94a3b8}
html[data-theme="dark"] .sfb-close:hover{color:#d2e7f5;background:#1a2233}
html[data-theme="dark"] .sfb-cat-prompt{color:#afbac0}
html[data-theme="dark"] .sfb-cat{border:1.5px solid #2c3855;background:#192030;color:#c4d1d9}
html[data-theme="dark"] .sfb-cat:hover{border-color:#0E67D0;background:#1c2939;color:#8abff5}
html[data-theme="dark"] .sfb-cat-desc{color:#94a3b8}
html[data-theme="dark"] .sfb-msg.user{background:#0E67D0;color:#fff}
html[data-theme="dark"] .sfb-msg.success{background:#21402c;color:#b3efca}
html[data-theme="dark"] .sfb-msg.error{background:#381c1c;color:#eb8c8c}
html[data-theme="dark"] .sfb-back{background:none;border:none;color:#94a3b8}
html[data-theme="dark"] .sfb-back:hover{color:#7bb3f4}
html[data-theme="dark"] .sfb-screenshot{border-top:1px solid #27324c;color:#afbac0}
html[data-theme="dark"] .sfb-screenshot img{border:1px solid #2c3855}
html[data-theme="dark"] .sfb-screenshot-remove{background:none;border:none;color:#94a3b8}
html[data-theme="dark"] .sfb-screenshot-remove:hover{color:#f47b7b}
html[data-theme="dark"] .sfb-input-area{border-top:1px solid #27324c}
html[data-theme="dark"] .sfb-input-label{color:#afbac0}
html[data-theme="dark"] .sfb-input{border:1.5px solid #2c3855;color:#c4d1d9;background:#192030;outline:none}
html[data-theme="dark"] .sfb-input:focus{border-color:#0E67D0;background:#171d2c}
html[data-theme="dark"] .sfb-input::placeholder{color:#94a3b8}
html[data-theme="dark"] .sfb-send{border:none;background:#0E67D0;color:#fff}
html[data-theme="dark"] .sfb-send:hover{background:#0a539f}
html[data-theme="dark"] .sfb-send:disabled{background:#94a3b8}
/* components/profile.js */
html[data-theme="dark"] .sprofile-overlay{background:rgba(0,0,0,0.75)}
html[data-theme="dark"] .sprofile-modal{background:#171d2c;border:1px solid #2c3855;box-shadow:0 20px 60px rgba(15,23,42,0.15)}
html[data-theme="dark"] .sprofile-title{color:#d2e7f5}
html[data-theme="dark"] .sprofile-sub{color:#afbac0}
html[data-theme="dark"] .sprofile-label{color:#afbac0}
html[data-theme="dark"] .sprofile-input{border:1px solid #2c3855;background:#192030;color:#c4d1d9}
html[data-theme="dark"] .sprofile-input:focus{border-color:#0E67D0;outline:none}
html[data-theme="dark"] .sprofile-input::placeholder{color:#94a3b8}
html[data-theme="dark"] .sprofile-select{border:1px solid #2c3855;background:#192030;color:#c4d1d9}
html[data-theme="dark"] .sprofile-select:focus{outline:none;border-color:#0E67D0}
html[data-theme="dark"] .sprofile-toggle{border:1px solid #2c3855}
html[data-theme="dark"] .sprofile-toggle button{border:none;border-right:1px solid #2c3855;background:#171d2c;color:#afbac0}
html[data-theme="dark"] .sprofile-toggle button:last-child{border-right:none}
html[data-theme="dark"] .sprofile-toggle button.active{background:#0E67D0;color:#fff}
html[data-theme="dark"] .sprofile-toggle button:hover:not(.active){background:#1a2233}
html[data-theme="dark"] .sprofile-chip{border:1px solid #2c3855;background:#171d2c;color:#afbac0}
html[data-theme="dark"] .sprofile-chip.selected{background:#0E67D0;color:#fff;border-color:#0E67D0}
html[data-theme="dark"] .sprofile-chip:hover:not(.selected){border-color:#0E67D0;color:#7bb3f4}
html[data-theme="dark"] .sprofile-exp{color:#85eaaa}
html[data-theme="dark"] .sprofile-footer{border-top:1px solid #2c3855}
html[data-theme="dark"] .sprofile-save{border:none;background:#0E67D0;color:#fff}
html[data-theme="dark"] .sprofile-save:hover{background:#0a539f}
html[data-theme="dark"] .sprofile-close{background:none;border:none;color:#94a3b8}
html[data-theme="dark"] .sprofile-close:hover{color:#d2e7f5}
html[data-theme="dark"] .sprofile-toast{background:#22c55e;color:#fff}
html[data-theme="dark"] [style^="color:#64757e"],html[data-theme="dark"] [style*=";color:#64757e"],html[data-theme="dark"] [style*="; color:#64757e"]{color:#afbac0 !important}
/* components/support-modal.js */
html[data-theme="dark"] .support-supporters{background:linear-gradient(135deg, #391c27, #361f2b);border:1px solid #5b2f48}
html[data-theme="dark"] .support-supporters-count{color:#ed9dbd}
html[data-theme="dark"] .supporter-name{background:#171d2c;border:1px solid #5b2f48;color:#ed9dbd}
html[data-theme="dark"] .support-modal-backdrop{background:rgba(15, 23, 42, 0.55)}
html[data-theme="dark"] .support-modal{background:#171d2c;box-shadow:0 20px 60px rgba(15, 23, 42, 0.2);color:#c4d1d9}
html[data-theme="dark"] .support-modal-close{border:0;background:#1d2639;color:#c4d1d9}
html[data-theme="dark"] .support-modal-close:hover{background:#1d2639;color:#d2e7f5}
html[data-theme="dark"] .support-modal-icon{background:linear-gradient(135deg, #1d2639, #1d2639);color:#7bb3f4}
html[data-theme="dark"] .support-modal-title{color:#d2e7f5}
html[data-theme="dark"] .support-modal-sub{color:#c4d1d9}
html[data-theme="dark"] .support-modal-sub strong{color:#d2e7f5}
html[data-theme="dark"] .support-modal-sustain{background:#3b351d;border:1px solid #6f6336;color:#f4c2a5}
html[data-theme="dark"] .support-tier{background:#171d2c;border:1.5px solid #2c3855;color:inherit}
html[data-theme="dark"] .support-tier:hover{border-color:#0E67D0;box-shadow:0 4px 12px rgba(37, 99, 235, 0.08)}
html[data-theme="dark"] .support-tier:focus-visible{outline:2px solid #0E67D0}
html[data-theme="dark"] .support-tier.support-tier-selected{border-color:#0E67D0;background:#1d2639;box-shadow:0 4px 14px rgba(37, 99, 235, 0.12)}
html[data-theme="dark"] .support-tier-recommended{border-color:#0E67D0}
html[data-theme="dark"] .support-tier-badge{background:#0E67D0;color:#fff}
html[data-theme="dark"] .support-tier-amount{color:#d2e7f5}
html[data-theme="dark"] .support-tier-label{color:#7bb3f4}
html[data-theme="dark"] .support-tier-impact{color:#afbac0}
html[data-theme="dark"] .support-tier-perk{color:#b0bbca}
html[data-theme="dark"] .support-tier-perk::before{color:#7bb3f4}
html[data-theme="dark"] .support-tier-perk strong{color:#d2e7f5}
html[data-theme="dark"] .support-custom-label{color:#afbac0}
html[data-theme="dark"] .support-custom-input{border:1.5px solid #2c3855;background:#171d2c}
html[data-theme="dark"] .support-custom-input:focus-within{border-color:#0E67D0}
html[data-theme="dark"] .support-custom-prefix{color:#c4d1d9}
html[data-theme="dark"] .support-custom-input input{border:0;outline:none;color:#d2e7f5;background:transparent}
html[data-theme="dark"] .support-error{color:#ec8383;background:#381c1c;border:1px solid #5d2e2e}
html[data-theme="dark"] .support-optin-row{color:#c4d1d9}
html[data-theme="dark"] .support-optin-row input[type="checkbox"]{accent-color:#0E67D0}
html[data-theme="dark"] .support-optin-name{border:1.5px solid #2c3855;color:#d2e7f5;background:#171d2c;outline:none}
html[data-theme="dark"] .support-optin-name:focus{border-color:#0E67D0}
html[data-theme="dark"] .support-submit{border:0;background:#0E67D0;color:#fff}
html[data-theme="dark"] .support-submit:hover:not(:disabled){background:#0a539f}
html[data-theme="dark"] .support-submit:disabled{background:#94a3b8}
html[data-theme="dark"] .support-not-now{background:transparent;border:0;color:#afbac0}
html[data-theme="dark"] .support-not-now:hover{color:#7bb3f4;background:#192030}
html[data-theme="dark"] .support-fineprint{color:#afbac0}
html[data-theme="dark"] .support-thanks{background:#171d2c;color:#d2e7f5;border:1px solid #2c3855;border-left:4px solid #0E67D0;box-shadow:0 10px 30px rgba(15, 23, 42, 0.12)}
html[data-theme="dark"] .support-thanks strong{color:#d2e7f5}
html[data-theme="dark"] .support-thanks span{color:#c4d1d9}
/* components/share-card.js */
html[data-theme="dark"] .shr-back{background:rgba(14,42,60,.55)}
html[data-theme="dark"] .shr{background:#192030;color:#c4d1d9;box-shadow:0 24px 70px rgba(14,42,60,.3)}
html[data-theme="dark"] .shr h3{color:#d2e7f5}
html[data-theme="dark"] .shr h3 button{background:none;border:0;color:#d2e7f5}
html[data-theme="dark"] .shr canvas{background:#1d2639;border:1px solid #2c3855}
html[data-theme="dark"] .shr-row label{color:#7bb3f4}
html[data-theme="dark"] .shr-chip{border:1px solid #2c3855;background:#171d2c;color:#d2e7f5}
html[data-theme="dark"] .shr-chip.on{background:#0E2A3C;color:#F7FAF8;border-color:#0E2A3C}
html[data-theme="dark"] .shr select{border:1px solid #2c3855;background:#171d2c;color:#c4d1d9}
html[data-theme="dark"] .shr-text{border:1px solid #2c3855;color:#d2e7f5;background:#171d2c}
html[data-theme="dark"] .shr-actions button{border:0}
html[data-theme="dark"] .shr-wa{background:#0E67D0;color:#fff}
html[data-theme="dark"] .shr-wa:hover{background:#0a539f}
html[data-theme="dark"] .shr-li,html[data-theme="dark"] .shr-x,html[data-theme="dark"] .shr-xgif,html[data-theme="dark"] .shr-ig{background:#0E2A3C;color:#F7FAF8}
html[data-theme="dark"] .shr-li:hover,html[data-theme="dark"] .shr-x:hover,html[data-theme="dark"] .shr-xgif:hover,html[data-theme="dark"] .shr-ig:hover{background:#163b52}
html[data-theme="dark"] .shr-cp,html[data-theme="dark"] .shr-gif{background:transparent;color:#d2e7f5;border:1px solid #2c3855!important}
html[data-theme="dark"] .shr-cp:hover,html[data-theme="dark"] .shr-gif:hover{background:#1d2639}
html[data-theme="dark"] .shr-mediahint{color:#afbac0}
html[data-theme="dark"] .shr-status a{color:#7bb3f4}
html[data-theme="dark"] .shr-status{color:#afbac0}
html[data-theme="dark"] .shr-tog{color:#c4d1d9}
html[data-theme="dark"] .solved-prompt .btn-share{background:#0E67D0;color:#fff}
html[data-theme="dark"] .solved-prompt .btn-share:hover{background:#0a539f}
html[data-theme="dark"] .ab-chip.ab-chip-sharepart{background:#0E67D0;color:#fff;border-color:#0E67D0}
html[data-theme="dark"] .ab-chip.ab-chip-sharepart:hover{background:#0a539f}
html[data-theme="dark"] .shr-pophint{color:#afbac0}
html[data-theme="dark"] .shr-popfoot{border-top:1px solid #2c3855}
html[data-theme="dark"] .shr-popbtn{background:#0E67D0;color:#fff;border:0}
html[data-theme="dark"] .shr-popbtn:hover{background:#0a539f}
html[data-theme="dark"] .ab-chip.ab-chip-sharepart:disabled,html[data-theme="dark"] .shr-popbtn:disabled{background:#1d2639;color:#afbac0;border-color:#2c3855}
html[data-theme="dark"] .hero-streak-nudge .shr-link{color:inherit}
/* DARK_THEME:GENERATED:END */

/* ── Things the generator cannot judge ── */
/* The mark is a picture, so it swaps to the inverse artwork. */
html[data-theme="dark"] .alok-logo-mark,
html[data-theme="dark"] #sfooter .sft-mark { content: url('/logo/mark-inverse.svg'); }
html[data-theme="dark"] .alok-logo-name { color: #e8eef6; }
html[data-theme="dark"] .alok-logo-sub { color: #6aa8f5; }
html[data-theme="dark"] #sfooter .sft-link-support { color: #6aa8f5 !important; }
/* The share card image (canvas) is the artwork being shared; it stays as designed. */
html[data-theme="dark"] .shr canvas { border-color: #2c3855; }
/* The menu icon's bars are drawn with a dark background; on a dark page they are the icon, not a surface. */
html[data-theme="dark"] #snav .snav-hamburger span { background: #e8eef6; }