html[data-suite="checklist"],
html[data-suite="checklist"][data-theme] {
  --suite-bg: #f4f3ee;
  --suite-surface: #faf9f5;
  --suite-ink: #26211c;
  --suite-muted: #625b54;
  --suite-line: #adb8b0;
  --suite-line-strong: #819487;
  --suite-blue: #dce6f0;
  --suite-sand: #f0ead8;
  --suite-lavender: #e5e3e8;
  --suite-peach: #f0e3db;
  --suite-sage: #e3e8e4;
  --suite-accent: #3d6454;
  --suite-accent-hover: #315345;
  --suite-on-accent: #ffffff;
  --suite-header: 57px;
  --suite-radius-shell: 24px;
  --suite-radius-card: 20px;
  --suite-radius-control: 12px;
  --suite-radius-compact: 10px;
  --bg: var(--suite-bg);
  --bg2: var(--suite-sand);
  --surface: var(--suite-surface);
  --surface-2: var(--suite-bg);
  --surface-3: var(--suite-sage);
  --card: var(--suite-surface);
  --card2: var(--suite-bg);
  --panel: var(--suite-surface);
  --panel2: var(--suite-bg);
  --text: var(--suite-ink);
  --text2: var(--suite-muted);
  --text3: var(--suite-muted);
  --muted: var(--suite-muted);
  --t1: var(--suite-ink);
  --t2: var(--suite-muted);
  --t3: var(--suite-muted);
  --border: var(--suite-line);
  --border-l: var(--suite-line);
  --border-s: var(--suite-line-strong);
  --brand: var(--suite-accent) !important;
  --brand-2: var(--suite-accent-hover) !important;
  --brand-light: var(--suite-accent);
  --brand-2-light: var(--suite-accent-hover);
  --brand-dark: var(--suite-accent);
  --brand-2-dark: var(--suite-accent-hover);
  --accent: var(--suite-accent) !important;
  --accent-2: var(--suite-accent-hover);
  --brand-soft: var(--suite-sage);
  --brand-glow: transparent;
  --hero-glow: transparent;
  --gradient: var(--suite-accent);
  --text-on-brand: var(--suite-on-accent);
  --hover: color-mix(in srgb, var(--suite-ink) 5%, transparent);
  --active: var(--suite-sage);
  --focus: var(--suite-accent);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 8px 28px rgb(38 33 28 / 10%);
  --shadow-xl: 0 16px 48px rgb(38 33 28 / 14%);
  --shadow-float: var(--shadow-xl);
  --input-bg: var(--suite-surface);
  --input-text: var(--suite-ink);
  --input-border: var(--suite-line);
  --input-placeholder: var(--suite-muted);
  --button-bg: var(--suite-surface);
  --button-bg-hover: var(--suite-sage);
  --button-text: var(--suite-ink);
  --button-border: var(--suite-line);
  --button-primary-bg: var(--suite-accent);
  --button-primary-bg-hover: var(--suite-accent-hover);
  --button-primary-text: var(--suite-on-accent);
  --card-bg: var(--suite-surface);
  --card-border: var(--suite-line);
  --card-radius: 20px;
  --card-shadow: none;
  background: var(--suite-bg);
  color: var(--suite-ink);
}

html[data-suite="checklist"][data-theme="dark"] {
  color-scheme: dark;
  --suite-bg: #191b1a;
  --suite-surface: #222522;
  --suite-ink: #f1eee7;
  --suite-muted: #bbb6ad;
  --suite-line: #566359;
  --suite-line-strong: #7e9183;
  --suite-blue: #293540;
  --suite-sand: #353327;
  --suite-lavender: #33313d;
  --suite-peach: #3b302d;
  --suite-sage: #2c3730;
  --suite-accent: #a8cbb6;
  --suite-accent-hover: #c0dccb;
  --suite-on-accent: #191b1a;
  --overlay: rgb(0 0 0 / 60%);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 24%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 32%);
}

html[data-suite="checklist"] body {
  background: var(--suite-bg);
  color: var(--suite-ink);
  font-family: var(--font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}
html[data-suite="checklist"] :where(button, input, select, textarea) { font-family: inherit; }
html[data-suite="checklist"] :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--suite-accent);
  outline-offset: 3px;
}
html[data-suite="checklist"] ::selection { background: var(--suite-blue); color: var(--suite-ink); }

html[data-suite="checklist"] .suite-masthead {
  position: relative;
  z-index: 1001;
  height: calc(var(--suite-header) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--suite-surface);
  border-bottom: 1px solid var(--suite-line);
}
html[data-suite="checklist"] body[data-app="locket"] .suite-masthead {
  position: fixed;
  inset: 0 0 auto;
}
html[data-suite="checklist"] .suite-header-inner {
  width: min(1200px, calc(100% - 48px));
  height: var(--suite-header);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
html[data-suite="checklist"] .suite-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  color: var(--suite-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.3px;
  text-decoration: none;
  white-space: nowrap;
}
html[data-suite="checklist"] .suite-brand-mark { width: 25px; height: 25px; flex-shrink: 0; }
html[data-suite="checklist"] .suite-brand-product { font-weight: 400; color: var(--suite-muted); margin-left: 3px; }
html[data-suite="checklist"] .suite-header-inner #ducdz-nav-slot {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  margin: 0;
}
html[data-suite="checklist"] #ducdz-nav.suite-navigation.inline {
  display: flex;
  position: static;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  gap: 17px;
  color: var(--suite-ink);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
  backdrop-filter: none;
  overflow: visible !important;
}
html[data-suite="checklist"] .suite-site-links { display: flex; align-items: center; gap: 26px; margin-right: auto; margin-left: auto; }
html[data-suite="checklist"] :is(.suite-home-link, .suite-apps > summary) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--suite-muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
html[data-suite="checklist"] :is(.suite-home-link:hover, .suite-apps[open] > summary, .suite-apps > summary:hover) { color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-home-link { font-size: 13px; font-weight: 400; color: var(--suite-muted); }
html[data-suite="checklist"] #ducdz-nav .suite-apps { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
html[data-suite="checklist"] .suite-apps > summary { list-style: none; }
html[data-suite="checklist"] .suite-apps > summary::-webkit-details-marker { display: none; }
html[data-suite="checklist"] .suite-apps > summary svg { width: 13px; height: 13px; }
html[data-suite="checklist"] #ducdz-nav svg { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border: 2px solid var(--suite-line-strong);
  border-radius: 14px;
  background: var(--suite-surface);
  box-shadow: 0 12px 32px rgb(20 32 24 / 16%);
  white-space: normal;
}
html[data-suite="checklist"] #ducdz-nav .suite-apps:not([open]) > .suite-apps-menu { display: none; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu,
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu * { box-sizing: border-box; }
html[data-suite="checklist"] #ducdz-nav .suite-menu-label { display: block; padding: 10px 12px 7px; font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--suite-muted); text-transform: uppercase; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu a { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; color: var(--suite-ink); font-weight: 400; text-decoration: none; border-radius: 9px; white-space: normal; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu a:hover { background: var(--hover); border-color: var(--suite-line); }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu a[aria-current="page"] { background: var(--suite-sage); border-color: var(--suite-line); }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu a > span:nth-child(2) { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; min-width: 0; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu strong { font-size: 14px; font-weight: 600; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu small { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--suite-muted); white-space: normal; overflow-wrap: anywhere; }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--suite-line); border-radius: 10px; background: var(--suite-sage); color: var(--suite-accent); }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon svg { width: 20px; height: 20px; }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon--email { background: var(--suite-blue); color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon--locket { background: var(--suite-sand); color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon--tiktok { background: var(--suite-peach); color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon--video { background: var(--suite-lavender); color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-app-icon--animation { background: var(--suite-peach); color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu a[aria-current="page"].suite-docs-link { background: transparent; color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .suite-app-current { margin-left: auto; flex-shrink: 0; font-size: 10px; color: var(--suite-accent); white-space: nowrap; }
html[data-suite="checklist"] #ducdz-nav .suite-apps-menu .suite-docs-link { margin-top: 6px; padding-top: 14px; border: 0; border-top: 1px solid var(--suite-line); border-radius: 0; font-size: 12px; color: var(--suite-muted); }
html[data-suite="checklist"] #ducdz-nav .suite-docs-link svg { width: 15px; height: 15px; margin-left: auto; }
html[data-suite="checklist"] #ducdz-nav :is(.nav-signin, .nav-user, .nav-bell, .suite-theme-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0;
  color: var(--suite-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
html[data-suite="checklist"] #ducdz-nav :is(.nav-signin, .nav-user, .nav-bell, .suite-theme-toggle):hover { color: var(--suite-ink); }
html[data-suite="checklist"] #ducdz-nav .nav-signin .nav-icon { display: none; }
html[data-suite="checklist"] #ducdz-nav .nav-signin .nav-label { display: inline; }
html[data-suite="checklist"] #ducdz-nav :is(.nav-bell, .suite-theme-toggle) { width: 30px; }
html[data-suite="checklist"] .suite-theme-toggle svg { width: 17px; height: 17px; }
html[data-suite="checklist"] .suite-theme-sun, html[data-suite="checklist"][data-theme="dark"] .suite-theme-moon { display: none; }
html[data-suite="checklist"][data-theme="dark"] .suite-theme-sun { display: block; }
html[data-suite="checklist"] #ducdz-nav .nav-avatar { background: var(--suite-sage); color: var(--suite-ink); border-radius: 8px; }
html[data-suite="checklist"] #ducdz-nav .nav-menu {
  background: var(--suite-surface);
  border-color: var(--suite-line);
  border-radius: 14px;
  padding: 6px;
}
html[data-suite="checklist"] #ducdz-nav .nav-menu :is(a, button) { border-radius: 8px; }
@media (max-width: 720px) {
  html[data-suite="checklist"] .suite-header-inner { width: calc(100% - 32px); gap: 16px; }
  html[data-suite="checklist"] .suite-brand-product { display: none; }
  html[data-suite="checklist"] #ducdz-nav .suite-home-link { display: none; }
  html[data-suite="checklist"] .suite-site-links { margin-left: 0; }
  html[data-suite="checklist"] #ducdz-nav.suite-navigation.inline { gap: 12px; }
  html[data-suite="checklist"] #ducdz-nav .nav-username { display: none; }
  html[data-suite="checklist"] #ducdz-nav .suite-apps-menu { position: fixed; top: calc(var(--suite-header) + env(safe-area-inset-top) + 8px); left: auto; right: 12px; }
}
@media (max-width: 360px) {
  html[data-suite="checklist"] .suite-header-inner { width: calc(100% - 24px); gap: 12px; }
  html[data-suite="checklist"] #ducdz-nav.suite-navigation.inline { gap: 8px; }
  html[data-suite="checklist"] #ducdz-nav .nav-signin { font-size: 12px; }
  html[data-suite="checklist"] .suite-apps > summary { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-suite="checklist"] *, html[data-suite="checklist"] *::before,
  html[data-suite="checklist"] *::after { scroll-behavior: auto !important; }
}
