/* Home and Cloud: neutral surfaces, theme details and accent interactions.
   Loaded only by these two pages, after their existing layout styles. */
html:root { --nyx-theme: #60ccfe; }
html:root[data-theme="teal"] { --nyx-theme: #4fd9c8; }
html:root[data-theme="purple"] { --nyx-theme: #b69bff; }
html:root[data-theme="rose"] { --nyx-theme: #ff8fa6; }
html:root[data-theme="green"] { --nyx-theme: #6ccb5f; }
html:root[data-theme="red"] { --nyx-theme: #ff7a68; }

/* Velké plochy jsou vždy neutrální. Motiv mění jen dekorativní detaily,
   akcent ovládací prvky a výběr. */
html:root {
  --nyx-ground:#202020; --nyx-paper:#282828;
  --nyx-ink:#ffffff; --nyx-muted:#c8c8c8; --nyx-quiet:#aaaaaa;
  --sol-base:#202020; --sol-alt:#1c1c1c; --sol-tert:#282828; --sol-quart:#2c2c2c;
  --sol-sec:#1b1b1b; --mica:#1f1f1f;
  --tx-1:var(--nyx-ink); --tx-2:var(--nyx-muted); --tx-3:var(--nyx-quiet);
  --stroke:#303030; --stroke-2:#393939; --stroke-strong:#494949; --divider:var(--stroke);
  --ctrl:color-mix(in srgb,var(--acc) 9%,var(--sol-tert));
  --ctrl-hover:color-mix(in srgb,var(--acc) 18%,var(--sol-tert));
  --ctrl-press:color-mix(in srgb,var(--acc) 25%,var(--sol-tert));
  --subtle-hover:var(--ctrl-hover); --subtle-press:var(--ctrl-press);
  --nyx-selected:color-mix(in srgb,var(--acc) 24%,var(--sol-tert));
  --nyx-accent-ink:var(--acc);
  --nyx-theme-ink:var(--nyx-theme);
  --nyx-theme-soft:color-mix(in srgb,var(--nyx-theme) 12%,var(--sol-tert));
}
html:root[data-mode="light"] {
  --nyx-ground:#f3f3f3; --nyx-paper:#ffffff;
  --nyx-ink:#202020; --nyx-muted:#505050; --nyx-quiet:#666666;
  --sol-base:#f3f3f3; --sol-alt:#eeeeee; --sol-tert:#ffffff; --sol-quart:#ffffff;
  --sol-sec:#eeeeee; --mica:#f3f3f3;
  --stroke:#dddddd; --stroke-2:#cccccc; --stroke-strong:#aaaaaa;
  --nyx-selected:color-mix(in srgb,var(--acc) 15%,var(--sol-tert));
  --nyx-theme-ink:color-mix(in srgb,var(--nyx-theme) 55%,#000000);
}

/* Home: grey panels with colour confined to icons and thin decorative lines. */
html:root body#nyxHome {
  --home-panel: var(--sol-tert);
  background: var(--sol-base) !important;
}
html:root body#nyxHome .home-header {
  background: var(--sol-alt) !important;
  border-bottom-color: var(--stroke-strong);
  box-shadow: inset 0 3px var(--nyx-theme);
}
html:root body#nyxHome .dash-overview {
  background: var(--sol-tert);
  color: var(--tx-1);
  border-color: var(--stroke-strong);
  box-shadow: inset 4px 0 var(--nyx-theme);
}
html:root body#nyxHome .dash-cloud-icon {
  background: var(--nyx-theme-soft); border-color: var(--stroke-strong); color: var(--nyx-theme-ink);
}
html:root body#nyxHome :is(.dash-eyebrow, .dash-totals span) { color: var(--tx-2); }
html:root body#nyxHome .dash-totals { border-color: var(--stroke); }
html:root body#nyxHome .dash-open,
html:root body#nyxHome .home-filters button[aria-pressed="true"] {
  background: var(--acc-deep); border-color: transparent; color: #fff;
}
html:root body#nyxHome .dash-open:hover { background: color-mix(in srgb, var(--acc-deep) 88%, #000); border-color: var(--acc); }
html:root body#nyxHome .dash-panel { border-color: var(--stroke-2); }
html:root body#nyxHome :is(.dash-panel-head, .dash-panel-foot) { background: var(--sol-quart); }
html:root body#nyxHome .dash-file-tabs button[aria-pressed="true"] { color: var(--nyx-accent-ink); background: var(--ctrl); }
html:root body#nyxHome .dash-file-tabs button { padding-inline: 7px; border-radius: 5px 5px 0 0; }
html:root body#nyxHome .home-app { border-color: var(--stroke); }
html:root body#nyxHome .home-app:hover, html:root body#nyxHome .home-app:focus-within {
  border-color: var(--acc); background: var(--ctrl-hover); box-shadow: 0 6px 18px #0001;
}
html:root body#nyxHome .home-app-icon {
  --cyan: var(--nyx-accent-ink); --magenta: var(--nyx-accent-ink); --green: var(--nyx-accent-ink);
  background: var(--ctrl-hover); border-color: var(--stroke-strong); color: var(--nyx-accent-ink);
}
html:root body#nyxHome .home-app-icon :is(.s1, .s2) { stroke: var(--nyx-accent-ink); }
html:root body#nyxHome .home-app-icon .s2f { fill: var(--nyx-accent-ink); }
html:root body#nyxHome :is(.home-nav-link:hover, .dash-storage-mark, .home-search svg) { color: var(--nyx-accent-ink); }
html:root body#nyxHome .home-account { background: var(--ctrl-hover); border-color: var(--stroke-strong); }

/* Cloud's independent Windows-style palette now follows the same surfaces. */
html:root[data-page="home"], html:root[data-page="home"][data-mode="light"] {
  --w11-bg: var(--sol-base);
  --w11-tabbar: var(--sol-alt);
  --w11-bar: var(--sol-quart);
  --w11-field: var(--sol-tert);
  --w11-field-br: var(--stroke-strong);
  --w11-line: var(--stroke);
  --w11-line-2: var(--stroke-2);
  --w11-line-2b: var(--stroke);
  --w11-line-hd: var(--stroke-strong);
  --w11-line-nav: var(--stroke);
  --w11-hover: var(--ctrl-hover);
  --w11-hover-bar: var(--ctrl-hover);
  --w11-sel: var(--nyx-selected);
  --w11-sel-soft: var(--ctrl);
  --w11-status: var(--sol-alt);
  --w11-tx: var(--tx-1);
  --w11-tx-2: var(--tx-2);
  --w11-tx-3: var(--tx-3);
  --w11-acc: var(--nyx-accent-ink);
  --w11-ctrl: var(--ctrl);
  --w11-ctrl-hover: var(--ctrl-hover);
  --w11-ctrl-hover-2: var(--ctrl-hover);
  --w11-ctrl-on: var(--nyx-selected);
  --w11-ctrl-off: var(--sol-tert);
  --w11-dlg-btn: var(--ctrl);
  --w11-dlg-btn-hover: var(--ctrl-hover);
  --w11-pop-br: var(--stroke-strong);
  --w11-card-br: var(--stroke-2);
  --w11-line-up: var(--stroke);
  --w11-menu-bg: var(--sol-quart);
  --w11-drop: var(--nyx-selected);
  --w11-marquee: color-mix(in srgb, var(--acc) 20%, transparent);
  --w11-prim-btn: var(--acc-deep);
  --w11-prim-btn-hover: color-mix(in srgb, var(--acc-deep) 88%, #000);
  --w11-up-bezi: var(--acc-deep);
  --w11-chk-on-tx: var(--sol-base);
}
html[data-nyxapp="cloud"] body.w11 .nyx-hl { background: var(--sol-alt); border-bottom-color: var(--stroke-strong); box-shadow: inset 0 2px var(--nyx-theme); }
body.w11 .w11-nav, body.w11 .w11-det { background: var(--sol-tert); }
body.w11 .w11-tab.on { background: var(--nyx-selected); box-shadow: inset 0 2px var(--acc); }
body.w11 .w11-nav-item.sel { box-shadow: inset 3px 0 var(--acc); }
body.w11 .w11-row.sel { border-color: color-mix(in srgb, var(--acc) 60%, var(--stroke)); }
body.w11 .w11-new { background: var(--acc-deep); color: #fff; border-radius: 5px; }
body.w11 .w11-new:hover { background: var(--w11-prim-btn-hover); }
body.w11 .w11-new svg:first-child { color: inherit; }

/* Use the existing home palette control with the same themed surfaces. */
#nyxHome .home-palette-pop { background: var(--sol-quart); border-color: var(--stroke-strong); }
#nyxHome .home-swatch[aria-pressed="true"] { background: var(--nyx-selected); border-color: var(--nyx-accent-ink); }

/* Small decorative marks follow the theme while controls retain the accent. */
html:root body#nyxHome .home-dot { background:var(--nyx-theme); box-shadow:0 0 0 4px var(--nyx-theme-soft); }
body.w11 .w11-tab.on { box-shadow:inset 0 2px var(--nyx-theme); }