/* QuickWerk two-theme palette. Dark is the default; the original light design remains available. */
.theme-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  min-height:38px;padding:7px 11px;border:1px solid #dce7dc;border-radius:10px;
  background:#f1f6ef;color:#344d40;font-size:12px;font-weight:800;line-height:1;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.theme-switch:hover{background:#e0f0d9;border-color:#a6d396;transform:translateY(-1px)}
.theme-switch-icon{font-family:system-ui,sans-serif;font-size:17px;line-height:1}
.theme-switch:focus-visible{outline:3px solid #93d98b;outline-offset:3px}
body[data-scene="dark"] .theme-switch{background:#214039;border-color:#507c6b;color:#eeffe7}
body[data-scene="dark"] .theme-switch:hover{background:#305749}
@media(max-width:760px){
  .theme-switch{min-height:37px;padding:7px 9px;gap:5px}
  .header-actions{gap:9px}
}
@media(max-width:365px){
  .theme-switch-text{display:none}
  .theme-switch{min-width:39px}
}

/* Set the native form/widget palette as well as our own variables. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e4f3ec;--muted:#a1b8ac;--bg:#08171c;--dark:#081820;
  --line:#29443f;--white:#11272b;
}
:root[data-theme="light"]{color-scheme:light}
html[data-theme="dark"] body{background:#08171c;color:#e4f3ec}
html[data-theme="dark"] ::selection{background:#aaf4a9;color:#0d2b20}

/* Frosted navigation stays legible over every section and while scrolling. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] body[data-scene="dark"] .site-header{
  background:rgba(7,23,28,.92);color:#e9f7ef;
  border-bottom:1px solid #3c63534f;
  box-shadow:0 8px 30px #0411163d;
}
html[data-theme="dark"] .desktop-nav,
html[data-theme="dark"] body[data-scene="dark"] .desktop-nav{color:#b7cebf}
html[data-theme="dark"] .desktop-nav a:hover,
html[data-theme="dark"] .idea-nav-button:hover{color:#c3f79c}
html[data-theme="dark"] .brand>span:not(.brand-mark){color:#c0d6c9}
html[data-theme="dark"] .brand i{color:#b7f48c}
html[data-theme="dark"] .brand-mark{background:#1b3835;color:#bcf69e}
html[data-theme="dark"] .free-pill,
html[data-theme="dark"] body[data-scene="dark"] .free-pill{color:#b7d0bf}
html[data-theme="dark"] .lang-switch,
html[data-theme="dark"] body[data-scene="dark"] .lang-switch{color:#effff2}
html[data-theme="dark"] .lang-switch span{color:#b7dda5}
html[data-theme="dark"] .header-cta,
html[data-theme="dark"] body[data-scene="dark"] .header-cta{background:#b9f18e;color:#142a20}
html[data-theme="dark"] .header-cta:hover{background:#d0ffb5}
html[data-theme="dark"] .theme-switch,
html[data-theme="dark"] body[data-scene="dark"] .theme-switch{
  background:#1b3739;border-color:#335754;color:#e7fce4;
}
html[data-theme="dark"] .theme-switch:hover{background:#28494a;border-color:#72ad92}
/* The hero is already dark. Slightly deepen its edges to match the rest. */
html[data-theme="dark"] .hero{
  background:radial-gradient(ellipse at 72% 39%,#143a3b 0%,#0b232c 40%,#06151d 100%);
}
html[data-theme="dark"] .hero-subtitle{color:#c5ded4}
html[data-theme="dark"] .hero-trust{color:#d0e5d7}

/* Tool collection: dark cards, readable titles, and luminous details. */
html[data-theme="dark"] .tools-section{
  background:#08171c;color:#e6f3e9;
}
html[data-theme="dark"] .tools-section::before{
  background:radial-gradient(ellipse at 85% 8%,#21485591,transparent 42%),
             radial-gradient(ellipse at 5% 70%,#214c3875,transparent 46%);
}
html[data-theme="dark"] .overline{color:#abd7b2}
html[data-theme="dark"] .section-top h2{color:#edf8f1}
html[data-theme="dark"] .section-top h2 em{color:#b5f199}
html[data-theme="dark"] .section-top p{color:#9eb8ab}
html[data-theme="dark"] .count-bubble{
  background:#17362f;border:1px solid #335d4b;color:#d1f7c4;
}
html[data-theme="dark"] .search-wrap input{
  background:#12282c;border-color:#32504a;color:#f0fff4;
}
html[data-theme="dark"] .search-wrap input::placeholder{color:#9eb6ac}
html[data-theme="dark"] .search-wrap svg{color:#a5c7b0}
html[data-theme="dark"] .search-wrap kbd{background:#20363a;color:#bed4cb}
html[data-theme="dark"] .filter{color:#b4c9c0}
html[data-theme="dark"] .filter.active{background:#baf18c;color:#10291f}
html[data-theme="dark"] .filter:not(.active):hover{background:#173d37;color:#f4fff8}
html[data-theme="dark"] .tool-card{
  background:linear-gradient(150deg,#142e30 0%,#0f2529 80%);
  color:#e8f8ed;border-color:#34534d;
  box-shadow:0 9px 30px #020d1350;
}
html[data-theme="dark"] .tool-card strong{color:#e9f7ee}
html[data-theme="dark"] .tool-card p{color:#aac1b7}
html[data-theme="dark"] .tool-arrow{color:#b7dcad}
html[data-theme="dark"] .tool-card:hover,
html[data-theme="dark"] .tool-card:focus-visible{
  border-color:#8dc4a2;box-shadow:0 20px 47px #010b0e88;
}
html[data-theme="dark"] .tool-card::after{
  background:radial-gradient(circle,#65bfab4d 0%,#6099c12c 38%,transparent 74%);
}
html[data-theme="dark"] .tool-card .tool-symbol{background:#24473d;color:#bbf6a1}
html[data-theme="dark"] .tool-card:nth-child(4n+2) .tool-symbol{background:#322d4c;color:#c5b7ff}
html[data-theme="dark"] .tool-card:nth-child(4n+3) .tool-symbol{background:#43372a;color:#f6cf94}
html[data-theme="dark"] .tool-card:nth-child(4n+4) .tool-symbol{background:#213e4c;color:#ade6ff}
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state h3{color:#c9e1d2}
html[data-theme="dark"] .idea-invite{
  background:linear-gradient(115deg,#173930,#162e3c 62%,#282b42);
  color:#e5f4ee;border-color:#3b5d56;
  box-shadow:0 17px 49px #010c1285;
}
html[data-theme="dark"] .idea-invite h3{color:#edf9ef}
html[data-theme="dark"] .idea-invite p{color:#bdd0c8}
html[data-theme="dark"] .idea-invite-mark{background:#275244;color:#c9f49f}
html[data-theme="dark"] .idea-invite-button{background:#c1f295;color:#163024}
html[data-theme="dark"] .idea-invite-button:hover{background:#d6ffb0}

/* Mid-page showcase: teal/navy instead of a large bright pastel area. */
html[data-theme="dark"] .experience-section{
  background:linear-gradient(120deg,#0c242a 0%,#102d35 45%,#1a233c 100%);
  color:#e9f7ee;
}
html[data-theme="dark"] .experience-section::before{
  background:radial-gradient(ellipse at 73% 49%,#4d4a8c4f,transparent 33%),
             radial-gradient(ellipse at 23% 46%,#28755f61,transparent 42%);
}
html[data-theme="dark"] .experience-glow{background:#317b835b}
html[data-theme="dark"] .experience-overline,
html[data-theme="dark"] .experience-overline>span:first-child{color:#a1d7b0}
html[data-theme="dark"] .experience-copy h2{color:#f2faf5}
html[data-theme="dark"] .experience-copy h2 em{
  background:linear-gradient(110deg,#bcf19b,#89e4b9 54%,#a8bbfc);
  -webkit-background-clip:text;background-clip:text;
}
html[data-theme="dark"] .experience-copy p{color:#b4cbc6}
html[data-theme="dark"] .experience-link{background:#bdf09d;color:#142a22}
html[data-theme="dark"] .experience-link:hover{background:#d1ffb0}
html[data-theme="dark"] .stage-aura{
  background:radial-gradient(circle,#2b8d7994 0%,#345f8080 43%,#5d579070 64%,transparent 75%);
}
html[data-theme="dark"] .stage-panel{
  border-color:#9ec7b35e;box-shadow:0 36px 85px #000b108c,0 0 0 9px #1c526154;
}
html[data-theme="dark"] .stage-chip{background:#1b403c;color:#d1f6d9;border-color:#609488}
html[data-theme="dark"] .chip-img{background:#292c4e;color:#d4ccff;border-color:#5d638b}
html[data-theme="dark"] .chip-code{background:#1b453e;color:#d5ffb5}

/* Why QuickWerk section already has a dark palette; match nearby surfaces. */
html[data-theme="dark"] .why-section{background:#071920}
html[data-theme="dark"] .why-section::after{
  background:radial-gradient(ellipse at 71% 44%,#1a5c576c,transparent 56%),
             linear-gradient(145deg,#071920,#0b2630);
}
html[data-theme="dark"] .why-card{
  border-color:#456b63;background:linear-gradient(144deg,#163739,#10232c);
}
html[data-theme="dark"] .why-copy>p,
html[data-theme="dark"] .feature-list p{color:#adc7bd}
html[data-theme="dark"] .feature-icon{background:#1d4441;border-color:#467d66}
html[data-theme="dark"] .why-card-bottom{color:#e1f6e6}

/* FAQ and footer complete the dark canvas. */
html[data-theme="dark"] .faq-section{background:#08171c}
html[data-theme="dark"] .faq-section::before{
  background:radial-gradient(ellipse at 78% 25%,#3d356c3c,transparent 42%),
             radial-gradient(ellipse at 15% 64%,#27584c51,transparent 40%);
}
html[data-theme="dark"] .faq-item{
  background:#11292d;border-color:#304d48;color:#eaf4ee;
}
html[data-theme="dark"] .faq-item:hover,
html[data-theme="dark"] .faq-item[open]{border-color:#6f9c89;box-shadow:0 13px 34px #020f1466}
html[data-theme="dark"] .faq-item summary{color:#eefaf1}
html[data-theme="dark"] .faq-item summary::after{color:#b7efa0}
html[data-theme="dark"] .faq-item p{color:#b4c9bf}
html[data-theme="dark"] .footer{
  background:#07151b;border-top:1px solid #2a4b46;
}
html[data-theme="dark"] .footer-main p{color:#abc1b8}
html[data-theme="dark"] .footer-links{color:#c1d5ca}
html[data-theme="dark"] .footer-link{color:#c1d5ca}
html[data-theme="dark"] .footer-link:hover,
html[data-theme="dark"] .footer-links a:hover{color:#ccf6a5}
html[data-theme="dark"] .footer-bottom{
  border-top-color:#2c4a44;color:#a5bfb0;
}

/* Every native modal, form field, file list and feedback surface. */
html[data-theme="dark"] dialog{
  background:#102429;color:#e9f7ec;border:1px solid #42605a;
  box-shadow:0 28px 105px #000c;
}
html[data-theme="dark"] dialog::backdrop{background:#020c11d9}
html[data-theme="dark"] .dialog-head h2{color:#edf9ee}
html[data-theme="dark"] .dialog-title-wrap small{color:#abd7b4}
html[data-theme="dark"] .dialog-symbol{background:#25483a;color:#c4f7a3}
html[data-theme="dark"] .icon-button{background:#28413e;color:#e7f6e8}
html[data-theme="dark"] .icon-button:hover{background:#375c50}
html[data-theme="dark"] .dialog-desc{color:#b7ccc2}
html[data-theme="dark"] .dialog-footer{
  background:#0c2024;border-top-color:#32534b;color:#a9c9b6;
}
html[data-theme="dark"] .dialog-footer span:first-child{color:#b8ed9c}
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .idea-form>label{color:#d1e6d7}
html[data-theme="dark"] .control-input,
html[data-theme="dark"] .control-select,
html[data-theme="dark"] .control-textarea{
  background:#0b1c22;color:#edf8ee;border-color:#426059;
}
html[data-theme="dark"] .control-input::placeholder,
html[data-theme="dark"] .control-textarea::placeholder{color:#99b2a9}
html[data-theme="dark"] .control-input:focus,
html[data-theme="dark"] .control-select:focus,
html[data-theme="dark"] .control-textarea:focus{border-color:#a5e393;box-shadow:0 0 0 3px #a2ed9135}
html[data-theme="dark"] .control-select option{background:#102429;color:#f1fff3}
html[data-theme="dark"] .dropzone{
  background:#112d2c;border-color:#487367;color:#e5f5e6;
}
html[data-theme="dark"] .dropzone.drag{background:#1e4940;border-color:#aeeca2}
html[data-theme="dark"] .dropzone strong{color:#e6f6e5}
html[data-theme="dark"] .dropzone small{color:#a8c5b1}
html[data-theme="dark"] .notice{background:#19372d;border-color:#416b56;color:#c3e3bd}
html[data-theme="dark"] .error-notice{background:#442c24;border-color:#a45b43;color:#ffd0af}
html[data-theme="dark"] .result-box{background:#172f2d;border-color:#416056;color:#eaf5e8}
html[data-theme="dark"] .action-btn{background:#b9f08f;color:#133020}
html[data-theme="dark"] .action-btn:hover{background:#d3ffad}
html[data-theme="dark"] .action-btn:disabled{background:#586b61;color:#c3d1c6;opacity:.75}
html[data-theme="dark"] .action-secondary{
  background:#284239;color:#e1f3e0;border:1px solid #4d7161;
}
html[data-theme="dark"] .action-secondary:hover{background:#385849}
html[data-theme="dark"] .checkrow{color:#d4ebdb}
html[data-theme="dark"] .stat{background:#1b3635}
html[data-theme="dark"] .stat strong{color:#effbef}
html[data-theme="dark"] .stat small{color:#aac4b6}
html[data-theme="dark"] .timer-display{
  background:#173b35;color:#c5f5a0;border:1px solid #406654;
}
html[data-theme="dark"] .file-list,
html[data-theme="dark"] .files-summary,
html[data-theme="dark"] .file-name{color:#d4e9dc}
html[data-theme="dark"] .file-row{background:#18322f;border-color:#406057}
html[data-theme="dark"] .file-remove{background:#233d37;border-color:#4c7566;color:#e0f2de}
html[data-theme="dark"] .file-remove:hover{background:#315549}
html[data-theme="dark"] .file-hint{color:#b5cbbd}
html[data-theme="dark"] .result-muted{color:#b3c8bb}
html[data-theme="dark"] .legal-content,
html[data-theme="dark"] .idea-privacy{color:#b0cbbd}
html[data-theme="dark"] .legal-content h3{color:#f0faf1}
html[data-theme="dark"] .idea-status{
  background:#20372f;border-color:#456751;color:#d2f1d6;
}
html[data-theme="dark"] .idea-status[data-type=success]{
  background:#1b4832;border-color:#5c9870;color:#cbf8cc;
}
html[data-theme="dark"] .idea-status[data-type=error]{
  background:#4d3027;border-color:#a56c50;color:#ffdfc5;
}
html[data-theme="dark"] .toast{
  background:#baf18d;color:#12291e;box-shadow:0 10px 30px #000a;
}
html[data-theme="dark"] .preview-image{border-color:#416359}

/* Subtle mode transitions without introducing lag or ignoring reduced motion. */
body,.site-header,.tool-card,.faq-item,.footer,.idea-invite,.experience-section,
dialog,.control-input,.control-select,.control-textarea{
  transition-property:background-color,border-color,color,box-shadow;
  transition-duration:.28s;
  transition-timing-function:ease;
}
/* Preserve existing hover and reveal transforms from styles.css. */
.tool-card{transition-property:transform,background-color,border-color,color,box-shadow}
@media(prefers-reduced-motion:reduce){
  body,.site-header,.tool-card,.faq-item,.footer,.idea-invite,.experience-section,
  dialog,.control-input,.control-select,.control-textarea{transition:none!important}
}