:root {
  --global-control-bg: rgba(255, 255, 255, 0.045);
  --global-control-bg-hover: rgba(255, 255, 255, 0.08);
  --global-control-border: rgba(255, 255, 255, 0.14);
  --global-control-text: #f4f4f5;
  --global-control-muted: #a1a1aa;
  --global-control-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] {
  color-scheme: light;
  --primary: #4f5fc8;
  --on-primary: #ffffff;
  --primary-hover: #6674df;
  --primary-focus: #3f4fb8;
  --ink: #17181c;
  --ink-muted: #414853;
  --ink-subtle: #68717e;
  --ink-tertiary: #969eaa;
  --canvas: #f3f1ea;
  --surface-1: #fffdf8;
  --surface-2: #f8f5ee;
  --surface-3: #eee9df;
  --surface-4: #e7e1d6;
  --hairline: #ddd5c8;
  --hairline-strong: #c9bead;
  --hairline-tertiary: #b8aa98;
  --overlay: #ffffff;
  --semantic-success: #218a3a;
  --sidebar-shimmer-core: rgba(94, 106, 210, 0.28);
  --sidebar-shimmer-soft: rgba(94, 106, 210, 0.12);
  --global-control-bg: rgba(255, 255, 255, 0.76);
  --global-control-bg-hover: rgba(255, 255, 255, 0.96);
  --global-control-border: rgba(34, 31, 25, 0.12);
  --global-control-text: #17181c;
  --global-control-muted: #6a7280;
  --global-control-shadow: 0 14px 34px rgba(55, 48, 36, 0.14);
}

html[data-theme="light"] body {
  background: var(--canvas);
  color: var(--ink);
}

html[data-theme="light"] body.landing-page {
  background:
    radial-gradient(circle at 24% -8%, rgba(94, 106, 210, 0.13), transparent 40%),
    radial-gradient(circle at 78% 2%, rgba(218, 156, 82, 0.13), transparent 34%),
    linear-gradient(180deg, #f3f1ea 0%, #ebe5da 48%, #f8f5ee 100%) !important;
}

html[data-theme="light"] .top-nav,
html[data-theme="light"] .topbar {
  border-bottom-color: rgba(34, 31, 25, 0.1) !important;
  background: rgba(250, 247, 239, 0.78) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

html[data-theme="light"] .top-nav .brand,
html[data-theme="light"] .top-nav .brand:visited,
html[data-theme="light"] .top-nav .brand:hover,
html[data-theme="light"] .top-nav .brand:active,
html[data-theme="light"] .top-nav .brand:focus {
  color: var(--ink) !important;
}

html[data-theme="light"] .brand-hover__mark {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(34, 31, 25, 0.14);
  border-radius: 10px;
  background:
    radial-gradient(circle at 32% 24%, rgba(154, 168, 255, 0.34), transparent 42%),
    linear-gradient(145deg, #17181c, #07080a);
  box-shadow:
    0 10px 22px rgba(55, 48, 36, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] .brand-hover__mark img,
html[data-theme="light"] .brand-hover__mark svg,
html[data-theme="light"] img.brand-hover__mark {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(154, 168, 255, 0.32));
}

html[data-theme="light"] .brand-hover:hover .brand-hover__mark,
html[data-theme="light"] .brand-hover:focus-visible .brand-hover__mark {
  filter: drop-shadow(0 10px 18px rgba(55, 48, 36, 0.18));
}

html[data-theme="light"] .top-link {
  color: var(--ink-subtle);
}

html[data-theme="light"] .top-link:hover {
  color: var(--ink);
}

html[data-theme="light"] .app-shell,
html[data-theme="light"] .sidebar {
  background: var(--canvas);
}

html[data-theme="light"] .sidebar-item.is-private-entry:not(.is-active)::after {
  background: rgba(79, 95, 200, 0.72);
  box-shadow: 0 0 16px rgba(79, 95, 200, 0.28);
}

html[data-theme="light"] .module-view.is-private-locked {
  filter: blur(3px) saturate(0.82) brightness(1.02);
  opacity: 0.5;
}

html[data-theme="light"] .privacy-curtain {
  border-left-color: rgba(45, 39, 29, 0.1);
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 106, 210, 0.16), transparent 34%),
    radial-gradient(circle at 82% 6%, rgba(218, 156, 82, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.72), rgba(246, 243, 236, 0.54)),
    rgba(255, 253, 248, 0.5);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 28px 80px rgba(61, 55, 42, 0.12);
}

html[data-theme="light"] .privacy-curtain__box {
  border-color: rgba(45, 39, 29, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 253, 248, 0.38)),
    rgba(255, 253, 248, 0.54);
  box-shadow:
    0 28px 80px rgba(61, 55, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .privacy-curtain__icon {
  border-color: rgba(79, 95, 200, 0.2);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.72), transparent 44%),
    rgba(79, 95, 200, 0.14);
  color: #3f4fb8;
  box-shadow: 0 16px 34px rgba(79, 95, 200, 0.18);
}

html[data-theme="light"] .metric-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .product-screenshot-card,
html[data-theme="light"] .profile-block,
html[data-theme="light"] .panel,
html[data-theme="light"] .auth,
html[data-theme="light"] .hero,
html[data-theme="light"] .card,
html[data-theme="light"] .glass-panel {
  box-shadow: 0 18px 50px rgba(55, 48, 36, 0.1);
}

html[data-theme="light"] .daily-intent-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 106, 210, 0.12), transparent 34%),
    var(--surface-1);
}

html[data-theme="light"] .daily-intent-display {
  background:
    linear-gradient(135deg, rgba(94, 106, 210, 0.13), rgba(218, 156, 82, 0.1)),
    var(--surface-2);
  box-shadow: 0 18px 46px rgba(55, 48, 36, 0.12);
}

html[data-theme="light"] .status-badge--success {
  color: #17672b;
  border-color: rgba(33, 138, 58, 0.32);
  background: rgba(33, 138, 58, 0.12);
}

html[data-theme="light"] .insight-state--feedback {
  color: #17672b;
  border-color: rgba(33, 138, 58, 0.34);
  background: rgba(33, 138, 58, 0.14);
  text-shadow: none;
}

html[data-theme="light"] .insight-state--released {
  border-color: rgba(38, 157, 70, 0.36);
  background-image:
    linear-gradient(120deg, #167a32 0%, #167a32 34%, #ffffff 50%, #b57a00 66%, #167a32 100%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(135deg, rgba(45, 190, 82, 0.2), rgba(255, 211, 93, 0.2) 54%, rgba(45, 190, 82, 0.14));
  box-shadow:
    0 10px 24px rgba(51, 156, 72, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-shadow: none;
}

html[data-theme="light"] .feedback-upload,
html[data-theme="light"] .feedback-image-chip {
  border-color: var(--hairline);
  background: rgba(255, 253, 248, 0.62);
}

html[data-theme="light"] .feedback-upload__head span,
html[data-theme="light"] .feedback-image-chip figcaption span {
  color: var(--ink-subtle);
}

html[data-theme="light"] .feedback-upload__head small,
html[data-theme="light"] .feedback-upload__empty,
html[data-theme="light"] .feedback-image-chip figcaption small,
html[data-theme="light"] .insight-feedback-contact {
  color: var(--ink-tertiary);
}

html[data-theme="light"] .feedback-image-chip__remove {
  border-color: rgba(34, 31, 25, 0.14);
  background: rgba(255, 253, 248, 0.86);
  color: var(--ink);
}

html[data-theme="light"] .toast {
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 18px 42px rgba(55, 48, 36, 0.18);
}

html[data-theme="light"] .text-input,
html[data-theme="light"] .time-picker__trigger,
html[data-theme="light"] .work-choice__trigger,
html[data-theme="light"] .work-date-picker__trigger,
html[data-theme="light"] .work-progress-detail,
html[data-theme="light"] .work-radar-item,
html[data-theme="light"] .kanban-item--rich,
html[data-theme="light"] .work-blocked-row {
  background-color: rgba(255, 253, 248, 0.78);
}

html[data-theme="light"] .work-task-form--rich {
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 106, 210, 0.1), transparent 34%),
    rgba(248, 245, 238, 0.94);
}

html[data-theme="light"] .time-picker__panel {
  border-color: rgba(94, 106, 210, 0.2);
  background:
    radial-gradient(circle at 10% 0%, rgba(94, 106, 210, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 253, 248, 0.34)),
    rgba(255, 253, 248, 0.8);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
  box-shadow: 0 24px 50px rgba(55, 48, 36, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

html[data-theme="light"] .work-choice__panel,
html[data-theme="light"] .work-date-picker__panel {
  border-color: rgba(94, 106, 210, 0.2);
  background:
    radial-gradient(circle at 12% 0%, rgba(94, 106, 210, 0.13), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 248, 0.36)),
    rgba(255, 253, 248, 0.82);
  box-shadow: 0 24px 50px rgba(55, 48, 36, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

html[data-theme="light"] .planning-picker-field .work-choice__panel,
html[data-theme="light"] .planning-picker-field .work-date-picker__panel {
  border-color: rgba(94, 106, 210, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(94, 106, 210, 0.1), transparent 40%),
    linear-gradient(150deg, #ffffff, #f9f6ee),
    #fffaf0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 52px rgba(55, 48, 36, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

html[data-theme="light"] .planning-picker-field .work-choice__option.is-selected,
html[data-theme="light"] .planning-picker-field .work-date-picker__day.is-selected {
  background: linear-gradient(135deg, #5e6ad2, #7883ed);
}

html[data-theme="light"] .time-picker__option:hover,
html[data-theme="light"] .work-choice__option:hover,
html[data-theme="light"] .work-date-picker__day:hover {
  background: rgba(94, 106, 210, 0.08);
}

html[data-theme="light"] .work-date-picker__nav,
html[data-theme="light"] .work-date-picker__action {
  background: rgba(255, 253, 248, 0.52);
}

html[data-theme="light"] .work-date-picker__day.is-today {
  color: #3f4fb8;
}

html[data-theme="light"] .kanban-item--rich.is-blocked {
  background:
    linear-gradient(145deg, rgba(218, 156, 82, 0.13), transparent 44%),
    rgba(255, 253, 248, 0.82);
}

html[data-theme="light"] .work-priority--medium {
  color: #3f4fb8;
}

html[data-theme="light"] .work-priority--high,
html[data-theme="light"] .work-card-meta__item.due-soon,
html[data-theme="light"] .work-blocker-note {
  color: #9a6418;
}

html[data-theme="light"] .work-priority--urgent,
html[data-theme="light"] .work-chip--blocked,
html[data-theme="light"] .work-card-meta__item.due-overdue {
  color: #b43b3b;
}

html[data-theme="light"] body.landing-page #landing-particle-canvas {
  opacity: 0.72;
  filter: none;
}

html[data-theme="light"] body.landing-page #landing-meteor-canvas {
  opacity: 0.68;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body.landing-page .particle-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 253, 248, 0.05), transparent 34%),
    linear-gradient(to bottom, rgba(243, 241, 234, 0.04), rgba(243, 241, 234, 0.24)) !important;
}

html[data-theme="light"] .site-shell {
  color: #1a1a1d;
}

html[data-theme="light"] .site-shell > header {
  border-bottom-color: rgba(39, 35, 27, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.84), rgba(247, 243, 235, 0.68)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.84) inset,
    0 18px 42px rgba(72, 61, 43, 0.08);
}

html[data-theme="light"] .site-shell .text-text,
html[data-theme="light"] .site-shell .brand-hover,
html[data-theme="light"] .site-shell .brand-hover:visited {
  color: #18191d !important;
}

html[data-theme="light"] .site-shell .text-muted,
html[data-theme="light"] .site-shell .text-subtle {
  color: #626b78 !important;
}

html[data-theme="light"] .site-shell .hover\:text-text:hover {
  color: #18191d !important;
}

html[data-theme="light"] .grid-overlay::before {
  background-image:
    linear-gradient(rgba(42, 37, 29, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 37, 29, 0.055) 1px, transparent 1px) !important;
  opacity: 0.3 !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.12), transparent) !important;
}

html[data-theme="light"] .hero-title {
  color: #18191d !important;
}

html[data-theme="light"] .hero-title.is-done {
  text-shadow: 0 18px 50px rgba(55, 48, 36, 0.12) !important;
}

html[data-theme="light"] .hero-title::before {
  background: linear-gradient(to bottom, transparent, rgba(55, 48, 36, 0.24), transparent) !important;
}

html[data-theme="light"] .hero-title-wrap::after {
  background: linear-gradient(to right, transparent, rgba(55, 48, 36, 0.24), transparent) !important;
}

html[data-theme="light"] .hero-word:nth-child(2) {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(24, 25, 29, 0.58) !important;
  text-stroke-color: rgba(24, 25, 29, 0.58) !important;
}

html[data-theme="light"] .hero-word:nth-child(3) {
  color: rgba(24, 25, 29, 0.82) !important;
}

html[data-theme="light"] .section-kicker {
  color: rgba(74, 81, 92, 0.82) !important;
}

html[data-theme="light"] .glass-panel,
html[data-theme="light"] .module-card,
html[data-theme="light"] .showcase-fade {
  border-color: rgba(45, 39, 29, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.82), rgba(255, 253, 248, 0.48)),
    rgba(250, 247, 239, 0.72) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 24px 70px rgba(65, 53, 35, 0.13) !important;
}

html[data-theme="light"] .module-card::before {
  background:
    radial-gradient(circle at 20% 12%, rgba(218, 156, 82, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 46%) !important;
}

html[data-theme="light"] .module-number,
html[data-theme="light"] .workflow-dot {
  border-color: rgba(45, 39, 29, 0.14) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  color: rgba(24, 25, 29, 0.62) !important;
}

html[data-theme="light"] .workflow-line {
  background: linear-gradient(to bottom, rgba(65, 53, 35, 0.24), rgba(65, 53, 35, 0.05)) !important;
}

html[data-theme="light"] .workflow-dot::after {
  background: rgba(24, 25, 29, 0.72) !important;
}

html[data-theme="light"] .final-cta::before {
  background:
    radial-gradient(circle at 22% 42%, rgba(218, 156, 82, 0.18), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(218, 156, 82, 0.16), transparent 26%) !important;
}

html[data-theme="light"] .showcase-fade::after {
  background: linear-gradient(to top, #f3f1ea 5%, rgba(243, 241, 234, 0.7) 50%, transparent 100%) !important;
}

html[data-theme="light"] .showcase-fade > div {
  border-color: rgba(45, 39, 29, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(235, 229, 218, 0.7)) !important;
}

html[data-theme="light"] .showcase-fade .border-white\/10,
html[data-theme="light"] .showcase-fade .border-white\/20 {
  border-color: rgba(45, 39, 29, 0.12) !important;
}

html[data-theme="light"] .showcase-fade .bg-white\/35 {
  background-color: rgba(62, 55, 43, 0.34) !important;
}

html[data-theme="light"] .showcase-fade .bg-white\/20 {
  background-color: rgba(62, 55, 43, 0.22) !important;
}

html[data-theme="light"] .showcase-fade .bg-white\/12 {
  background-color: rgba(62, 55, 43, 0.14) !important;
}

html[data-theme="light"] .showcase-fade .bg-white\/10,
html[data-theme="light"] .showcase-fade .bg-white\/5,
html[data-theme="light"] .showcase-fade .bg-white\/\[0\.03\] {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme="light"] .showcase-fade .from-\[\#16171A\] {
  --tw-gradient-from: rgba(255, 253, 248, 0.88) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 253, 248, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme="light"] .showcase-fade .to-\[\#101114\] {
  --tw-gradient-to: rgba(238, 233, 223, 0.86) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] .showcase-fade .from-accent\/20 {
  --tw-gradient-from: rgba(94, 106, 210, 0.16) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(94, 106, 210, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme="light"] .showcase-fade .to-white\/\[0\.02\] {
  --tw-gradient-to: rgba(255, 255, 255, 0.58) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] .jump-dashboard,
html[data-theme="light"] .bg-white {
  background-color: #18191d !important;
  color: #fffdf8 !important;
}

html[data-theme="light"] .site-shell .border-white\/15,
html[data-theme="light"] .site-shell .border-white\/20 {
  border-color: rgba(45, 39, 29, 0.15) !important;
}

html[data-theme="light"] .site-shell .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.56) !important;
}

html[data-theme="light"] #top-signup-link,
html[data-theme="light"] .site-shell a[href="#features"],
html[data-theme="light"] .site-shell a[href="./signup.html"] {
  color: #18191d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 14px 32px rgba(65, 53, 35, 0.1) !important;
}

body.landing-page #top-auth-link,
body.landing-page #top-signup-link {
  min-height: 38px;
  border: 1px solid var(--global-control-border) !important;
  border-radius: 18px !important;
  background: var(--global-control-bg) !important;
  color: var(--global-control-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: var(--global-control-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

body.landing-page .top-actions {
  min-width: 330px;
  justify-content: flex-end;
}

body.landing-page .global-controls {
  flex: 0 0 auto;
}

body.landing-page #top-auth-link {
  min-width: 84px;
}

body.landing-page #top-signup-link {
  min-width: 78px;
}

body.landing-page #top-auth-link:hover,
body.landing-page #top-signup-link:hover {
  background: var(--global-control-bg-hover) !important;
  color: var(--global-control-text) !important;
  transform: translateY(-1px);
}

body.landing-page:not(.auth-ready) #top-auth-link,
body.landing-page:not(.auth-ready) #top-signup-link {
  visibility: hidden;
  pointer-events: none;
}

html[data-theme="light"] footer {
  border-top-color: rgba(45, 39, 29, 0.12) !important;
}

.global-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.global-control {
  min-height: 38px;
  border: 1px solid var(--global-control-border);
  border-radius: 18px;
  background: var(--global-control-bg);
  color: var(--global-control-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: var(--global-control-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.global-control:hover {
  background: var(--global-control-bg-hover);
  transform: translateY(-1px);
}

.global-control svg,
.global-control i {
  width: 17px;
  height: 17px;
  flex: none;
}

.global-control__icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-control__meta {
  color: var(--global-control-muted);
  font-weight: 500;
}

.global-control__compact {
  display: none;
}

@media (max-width: 640px) {
  .global-controls {
    gap: 6px;
  }

  .global-control {
    min-height: 36px;
    padding: 8px 11px;
  }

  .global-control__label {
    display: none;
  }

  .global-control__compact {
    display: inline;
  }
}