/* Main desktop surface: quiet white paper by default, user wallpaper remains visible around it. */
html {
  height: 100%;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  --home-paper: #fff;
  --home-paper-soft: #fafafa;
  --home-paper-hover: #f2f2f2;
  --home-line: #e7e7e7;
  --home-ink: #2f2f2f;
  --home-muted: #737373;
  --home-shadow: 0 18px 48px rgb(0 0 0 / 8%);
  font-family: 'AI Noto Sans', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  color: var(--home-ink);
  background: #fff;
  min-height: 100%;
  padding-bottom: 0;
  overflow: hidden !important;
  scrollbar-width: none;
}

body.nt-main-custom {
  --home-paper: rgb(255 255 255 / 88%);
  --home-paper-soft: rgb(255 255 255 / 78%);
  --home-paper-hover: rgb(255 255 255 / 92%);
  --home-line: rgb(255 255 255 / 62%);
  --home-shadow: 0 18px 48px rgb(0 0 0 / 12%);
}

body.nt-main-white-default .wallpaper {
  background: #fff;
  filter: brightness(var(--nt-audio-brightness)) saturate(var(--nt-audio-saturation));
}

body.nt-main-white-default .wallpaper::before {
  background:
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 86%), transparent 30%),
    radial-gradient(circle at 86% 18%, rgb(255 255 255 / 72%), transparent 28%),
    radial-gradient(circle at 72% 88%, rgb(225 235 239 / 18%), transparent 32%);
  opacity: .72;
  mix-blend-mode: normal;
}

body.nt-main-white-default .wallpaper::after {
  background:
    linear-gradient(120deg, rgb(255 255 255 / 38%), transparent 30%, transparent 72%, rgb(107 157 174 / 5%)),
    repeating-linear-gradient(0deg, rgb(40 45 50 / 1.5%) 0, rgb(40 45 50 / 1.5%) 1px, transparent 1px, transparent 4px);
}

.page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 22px;
  overflow: hidden;
}

.page-shell {
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.page-shell > .rail {
  background: var(--home-paper);
  border: 1px solid var(--home-line);
  border-radius: 22px;
  box-shadow: var(--home-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--home-ink);
}

.page-shell > .rail .rail-brand {
  background: var(--home-paper-soft);
  border: 1px solid var(--home-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.page-shell > .rail .rail-item {
  color: #777;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.page-shell > .rail .rail-item:hover,
.page-shell > .rail .rail-item:focus-visible {
  color: #292929;
  background: var(--home-paper-hover);
  border-color: var(--home-line);
  box-shadow: 0 10px 22px rgb(0 0 0 / 7%);
}

.page-shell > .rail .rail-more-toggle {
  color: #555;
  background: var(--home-paper-soft);
  border-color: var(--home-line);
}

.page-shell > .rail .rail-more-toggle[aria-expanded='true'] {
  color: #222;
  background: #eee;
  border-color: #d8d8d8;
  box-shadow: none;
}

.center-stage,
.dashboard {
  color: var(--home-ink);
}

.stage-kicker {
  color: #8a8a8a;
  letter-spacing: .18em;
}

.stage-title {
  color: #282828;
  font-weight: 600;
  letter-spacing: -.035em;
}

.stage-sub {
  color: var(--home-muted);
}

.search-card {
  background: var(--home-paper);
  border: 1px solid var(--home-line);
  border-radius: 18px;
  box-shadow: var(--home-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.search-card::before {
  background: linear-gradient(135deg, rgb(255 255 255 / 85%), transparent 45%, rgb(0 0 0 / 2%));
}

.search-card:focus-within {
  border-color: #bdbdbd;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 5%), var(--home-shadow);
}

.search-input {
  color: #282828;
  font-weight: 400;
}

.search-input::placeholder {
  color: #9a9a9a;
}

.engine-main,
.engine-alt {
  color: #555;
  background: var(--home-paper-soft);
  border-color: var(--home-line);
  box-shadow: none;
}

.engine-main:hover,
.engine-alt:hover,
.engine-alt.active {
  color: #222;
  background: var(--home-paper-hover);
  border-color: #d3d3d3;
  transform: none;
}

.engine-main:focus-visible,
.engine-alt:focus-visible,
.engine-dd-item:focus-visible {
  outline: 2px solid #999;
}

.engine-main .arrow {
  color: #888;
}

.engine-alt .eicon {
  width: 20px;
  height: 20px;
  color: #667085;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
}

.engine-alt .eicon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-submit {
  color: #fff;
  background: #292929;
  border-color: #292929;
  box-shadow: none;
}

.search-submit:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 20px rgb(0 0 0 / 14%);
}

.engine-dropdown {
  background: #fff;
  border: 1px solid var(--home-line);
  box-shadow: 0 18px 36px rgb(0 0 0 / 14%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.engine-dd-item {
  color: #555;
  text-shadow: none;
}

.engine-dd-item:hover,
.engine-dd-item.active {
  color: #222;
  background: #f1f1f1;
}

.dashboard .dash-card {
  background: var(--home-paper);
  border: 1px solid var(--home-line);
  border-radius: 20px;
  box-shadow: var(--home-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard .dash-card::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 80%), transparent 42%);
}

.dashboard .dash-card-title {
  color: #888;
}

.dashboard :is(.dash-clock, .dash-weather-time, .dash-weather-temp) {
  color: #292929;
}

.dashboard :is(.dash-date, .dash-weather, .dash-weather-sub, .dash-weather-update) {
  color: #737373;
}

.dashboard .dash-weather-cond {
  color: #333;
}

.dashboard .dash-weather-icon {
  color: #555;
  filter: none;
}

.dashboard .dash-weather-metric {
  background: var(--home-paper-soft);
  border-color: var(--home-line);
  box-shadow: none;
}

.dashboard .dash-weather-metric-label,
.dashboard .dash-weather-hour > span,
.dashboard .dash-weather-hour > small {
  color: #8a8a8a;
}

.dashboard .dash-weather-metric-value,
.dashboard .dash-weather-hour > strong {
  color: #444;
}

.dashboard .dash-weather-hour {
  background: var(--home-paper-soft);
  border-color: var(--home-line);
}

.dashboard .dash-weather-hour.current {
  background: #f0f0f0;
  border-color: #d5d5d5;
  box-shadow: none;
}

.home-monitor-card {
  background: var(--home-paper) !important;
}

.home-monitor-grid {
  scrollbar-width: none;
}

.home-monitor-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.home-monitor-grid::-webkit-scrollbar-thumb {
  background: transparent;
}

.home-monitor-grid .sv-card {
  background: var(--home-paper-soft);
  border-color: var(--home-line);
  box-shadow: 0 12px 28px rgb(0 0 0 / 6%), inset 0 1px 0 rgb(255 255 255 / 86%);
}

.home-monitor-grid .sv-card::before {
  background: linear-gradient(145deg, rgb(255 255 255 / 72%), transparent 46%, rgb(0 0 0 / 2%));
}

.home-monitor-grid .sv-card:hover {
  box-shadow: 0 18px 34px rgb(0 0 0 / 10%), inset 0 1px 0 rgb(255 255 255 / 90%);
}

.home-monitor-grid .sv-metric,
.home-monitor-grid .sv-total {
  background: #fff;
  box-shadow: none;
}

.home-monitor-empty {
  background: var(--home-paper-soft);
  border-color: var(--home-line);
  color: #777;
}

.nav-fab,
.wallpaper-fab {
  width: 50px;
  height: 50px;
  color: #444;
  background: var(--home-paper);
  border-color: var(--home-line);
  box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-fab:hover,
.wallpaper-fab:hover {
  color: #111;
  background: #f1f1f1;
  box-shadow: 0 16px 32px rgb(0 0 0 / 14%);
}

@media (max-width: 900px) {
  .page { padding: 16px; }
  .page-shell { gap: 14px; }
  .stage-title { font-size: 30px; }
}

@media (max-width: 760px) {
  html { height: auto; overflow-y: auto !important; }
  body { height: auto; min-height: 100vh; overflow-x: hidden !important; overflow-y: auto !important; padding-bottom: calc(var(--nt-mobile-nav-height) + env(safe-area-inset-bottom, 0px)); }
  .page { height: auto; min-height: calc(100dvh - var(--nt-mobile-nav-height)); overflow: visible; }
  .page-shell { height: auto; }
}

@media (max-width: 640px) {
  .page { padding: 12px 12px 24px; }
  .stage-title { font-size: 27px; }
  .dashboard .dash-card { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell > .rail .rail-item,
  .search-card,
  .nav-fab,
  .wallpaper-fab { transition: none !important; }
}