:root {
  color-scheme: dark;
  --outer: #080a0b;
  --canvas: #101214;
  --bar-bg: rgba(16, 18, 20, 0.96);
  --ink: #f2f3f1;
  --muted: #a5aaa9;
  --quiet: #747b7b;
  --surface: #181b1d;
  --surface-raised: #1d2123;
  --surface-soft: #141719;
  --field: #121619;
  --line: #303537;
  --line-bright: #474e51;
  --shadow: rgba(0, 0, 0, 0.32);
  --accent: #d78b50;
  --accent-strong: #b96b35;
  --accent-soft: rgba(215, 139, 80, 0.13);
  --accent-border: rgba(215, 139, 80, 0.42);
  --accent-contrast: #1b1008;
  --blue: var(--accent);
  --blue-strong: var(--accent-strong);
  --blue-soft: var(--accent-soft);
  --danger: #ef6464;
  --warning: #f0ad4e;
  --success: #55bf87;
  --sick: #c98eaa;
  --vacation: #78a8cf;
  --time-credit: #67b8ae;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --outer: #d8d6cf;
  --canvas: #f3f1ec;
  --bar-bg: rgba(243, 241, 236, 0.96);
  --ink: #181a1a;
  --muted: #5f6666;
  --quiet: #7b8383;
  --surface: #faf9f6;
  --surface-raised: #ffffff;
  --surface-soft: #eceae4;
  --field: #ffffff;
  --line: #d6d4cd;
  --line-bright: #b7bbb9;
  --shadow: rgba(34, 36, 35, 0.12);
  --danger: #b94040;
  --warning: #a96417;
  --success: #327451;
  --sick: #8d4f6d;
  --vacation: #356f9d;
  --time-credit: #2a766e;
}

:root[data-accent="copper"] {
  --accent: #d78b50;
  --accent-strong: #b96b35;
  --accent-soft: rgba(215, 139, 80, 0.13);
  --accent-border: rgba(215, 139, 80, 0.42);
  --accent-contrast: #1b1008;
}

:root[data-theme="light"][data-accent="copper"] {
  --accent: #985225;
  --accent-strong: #7d4018;
  --accent-soft: rgba(152, 82, 37, 0.1);
  --accent-border: rgba(152, 82, 37, 0.38);
  --accent-contrast: #ffffff;
}

:root[data-accent="petrol"] {
  --accent: #63aaa2;
  --accent-strong: #3b8b84;
  --accent-soft: rgba(99, 170, 162, 0.13);
  --accent-border: rgba(99, 170, 162, 0.42);
  --accent-contrast: #071816;
}

:root[data-theme="light"][data-accent="petrol"] {
  --accent: #236f69;
  --accent-strong: #175851;
  --accent-soft: rgba(35, 111, 105, 0.1);
  --accent-border: rgba(35, 111, 105, 0.38);
  --accent-contrast: #ffffff;
}

:root[data-accent="moss"] {
  --accent: #93aa7b;
  --accent-strong: #738d5d;
  --accent-soft: rgba(147, 170, 123, 0.13);
  --accent-border: rgba(147, 170, 123, 0.42);
  --accent-contrast: #10170b;
}

:root[data-theme="light"][data-accent="moss"] {
  --accent: #557144;
  --accent-strong: #405833;
  --accent-soft: rgba(85, 113, 68, 0.1);
  --accent-border: rgba(85, 113, 68, 0.38);
  --accent-contrast: #ffffff;
}

:root[data-accent="bordeaux"] {
  --accent: #cf7a8b;
  --accent-strong: #ad586a;
  --accent-soft: rgba(207, 122, 139, 0.13);
  --accent-border: rgba(207, 122, 139, 0.42);
  --accent-contrast: #210d12;
}

:root[data-theme="light"][data-accent="bordeaux"] {
  --accent: #8c4053;
  --accent-strong: #703143;
  --accent-soft: rgba(140, 64, 83, 0.1);
  --accent-border: rgba(140, 64, 83, 0.38);
  --accent-contrast: #ffffff;
}

:root[data-accent="indigo"] {
  --accent: #9296c8;
  --accent-strong: #7378ad;
  --accent-soft: rgba(146, 150, 200, 0.13);
  --accent-border: rgba(146, 150, 200, 0.42);
  --accent-contrast: #101124;
}

:root[data-theme="light"][data-accent="indigo"] {
  --accent: #575b8f;
  --accent-strong: #414570;
  --accent-soft: rgba(87, 91, 143, 0.1);
  --accent-border: rgba(87, 91, 143, 0.38);
  --accent-contrast: #ffffff;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  overflow-x: clip;
  background: var(--outer);
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--outer);
  color: var(--ink);
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.theme-options label:focus-within,
.accent-option:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.is-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  position: relative;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: visible;
  background: var(--canvas);
  border-inline: 1px solid var(--line);
  box-shadow: 0 0 42px var(--shadow);
}

.topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  display: flex;
  min-height: 0;
  justify-content: flex-end;
  padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right));
  pointer-events: none;
}

.product-title {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.product-title strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-title span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 800;
  pointer-events: auto;
}

.main-content {
  min-height: 100dvh;
  padding-bottom: calc(102px + var(--safe-bottom));
}

.view {
  display: none;
  padding: 24px calc(18px + var(--safe-right)) 32px calc(18px + var(--safe-left));
}

.view.is-active {
  display: block;
}

/* The manual-entry screen gives the dial the first available screen space. */
.manual-time-mode .view[data-view="time"].is-active {
  display: flex;
  flex-direction: column;
}

.manual-time-mode .view[data-view="time"] > .page-heading,
.manual-time-mode .view[data-view="time"] > #timeProjectButton {
  display: none;
}
.manual-time-mode .view[data-view="time"].is-editing-manual-entry > #timeSummarySection,
.manual-time-mode .view[data-view="time"].is-editing-manual-entry > #timeEventLogSection {
  display: none;
}

.start-view {
  min-height: calc(100dvh - 166px - var(--safe-top) - var(--safe-bottom));
}

.page-heading {
  margin-bottom: 24px;
}

.project-page-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.project-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 7.4vw, 2.3rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.project-list {
  display: block;
  border-block: 1px solid var(--line);
}

.project-list.compact {
  margin-top: 20px;
}

.project-card {
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 14px 2px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.project-card:last-child {
  border-bottom: 0;
}

.project-card:hover {
  background: var(--accent-soft);
}

.project-card:active {
  transform: none;
  background: var(--accent-soft);
}

.project-card.is-current {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.project-code {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.055em;
}

.project-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.project-copy strong {
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-copy small,
.project-detail-heading p,
.photo-details span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.chevron {
  color: var(--quiet);
  font-size: 1.65rem;
  font-weight: 400;
}

.back-button {
  min-height: 44px;
  margin: -10px 0 18px -8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 750;
}

.project-detail-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}

.project-detail-code {
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.075em;
}

.project-detail-heading h1 {
  margin-bottom: 7px;
  font-size: clamp(1.8rem, 7vw, 2.25rem);
}

.project-detail-heading > p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.primary-photo-button,
.primary-wide,
.secondary-button {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 13px;
  font-size: 1.05rem;
  font-weight: 850;
}

.primary-wide {
  border: 1px solid var(--accent-border);
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-contrast);
}

.primary-photo-button {
  min-height: 62px;
  justify-content: flex-start;
  margin: 0;
  padding-inline: 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
}

.primary-photo-button svg,
.secondary-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-photo-button svg {
  color: var(--accent);
}

.secondary-button {
  border: 1px solid var(--line-bright);
  background: var(--surface-raised);
  color: var(--ink);
}

#projectImportButton {
  min-height: 58px;
  justify-content: flex-start;
  padding-inline: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.primary-photo-button:active,
.primary-wide:active,
.secondary-button:active {
  transform: scale(0.987);
}

.primary-photo-button:active,
#projectImportButton:active {
  transform: none;
  background: var(--accent-soft);
}

.project-photos {
  margin-top: 34px;
}

.section-caption {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.count-badge {
  display: grid;
  min-width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 750;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  touch-action: pan-y;
}

.photo-card-select {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 17, 18, 0.82);
  border: 1px solid rgba(255,255,255,.45);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(.86);
  transition: opacity .15s ease, transform .15s ease;
}

.project-photos.is-selecting .photo-card { cursor: pointer; }
.project-photos.is-selecting .photo-card-select { opacity: 1; transform: scale(1); }

.photo-card-select input { width: 18px; height: 18px; pointer-events: none; accent-color: var(--accent); }
.photo-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.project-photos:has(.photo-submit-dock:not(.is-hidden)) { padding-bottom: 72px; }

.photo-submit-dock {
  position: fixed;
  z-index: 45;
  right: max(calc((100vw - 448px) / 2), 16px);
  bottom: calc(86px + var(--safe-bottom));
  left: max(calc((100vw - 448px) / 2), 16px);
  min-height: 52px;
  padding: 7px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 10px 32px rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.photo-dock-state { display: grid; min-height: 38px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; }
.photo-dock-state[data-photo-dock-state="choose"] { grid-template-columns: 38px minmax(0,1fr) auto auto; }
.photo-dock-state > span { color: var(--muted); font-size: .84rem; }
.photo-dock-state > button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink); font: inherit; font-weight: 740; }
.photo-dock-state > .photo-dock-close { width: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; font-weight: 400; }
.photo-dock-main { grid-column: 1 / -1; display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0 !important; background: transparent !important; color: var(--accent) !important; }
.photo-dock-main span { font-size: 1.35rem; font-weight: 400; }
.photo-dock-state > .photo-submit-next { border-color: transparent; background: var(--accent); color: var(--accent-contrast); }
.photo-submit-next:disabled { opacity: .4; }
.photo-upload-state > div { display: grid; gap: 6px; min-width: 0; }
.photo-upload-state > div > span { overflow: hidden; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.photo-upload-state > strong { min-width: 42px; color: var(--muted); font-size: .78rem; text-align: right; }
.photo-upload-track { overflow: hidden; height: 4px; border-radius: 4px; background: var(--line); }
.photo-upload-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--accent), var(--accent-strong)); background-size: 180% 100%; transition: width .25s ease; animation: photo-upload-flow 1.1s linear infinite; }
.photo-success-state > span { display: grid; gap: 2px; min-width: 0; }
.photo-success-state > span strong, .photo-success-state > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-success-state > span strong { color: var(--success); font-size: .8rem; }
.photo-success-state > span small { color: var(--muted); font-size: .72rem; }
.photo-success-check { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: rgba(85,191,135,.16); color: var(--success); font-size: 1.05rem; font-style: normal; font-weight: 900; }
.submitted-photos { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.submitted-photos .photo-card { opacity: .78; }
.submitted-photos .photo-card-copy strong { color: var(--success); }

@keyframes photo-upload-flow { to { background-position: -180% 0; } }

.photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-soft);
}

.photo-card-copy {
  display: grid;
  gap: 3px;
  padding: 10px 11px 12px;
}

.photo-card-copy strong {
  font-size: 0.92rem;
}

.photo-card-copy span {
  color: var(--muted);
  font-size: 0.8rem;
}

.empty-state {
  display: grid;
  min-height: 196px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 26px;
  text-align: center;
  border: 1px dashed var(--line-bright);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
}

.empty-state svg {
  width: 38px;
  height: 38px;
  margin-bottom: 3px;
  fill: none;
  stroke: var(--quiet);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state strong {
  color: var(--ink);
  font-size: 1rem;
}

.empty-state span {
  font-size: 0.88rem;
}

.project-selector {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}

.project-selector.is-required {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.project-selector.is-required small {
  color: var(--accent);
}

.project-selector > span:first-child {
  display: grid;
  gap: 4px;
}

.project-selector small {
  color: var(--muted);
  font-size: 0.8rem;
}

.project-selector strong {
  font-size: 1rem;
}

.project-selector-action {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
}

.project-selector-action b {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.project-selector-action i {
  color: var(--quiet);
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 400;
}

.timer-card {
  display: grid;
  justify-items: center;
  margin-bottom: 14px;
  padding: 28px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.time-config-loading {
  margin: 0 0 14px;
  padding: 24px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.timer-card.is-running {
  border-color: rgba(85, 191, 135, 0.47);
}

.timer-card.is-paused {
  border-color: rgba(240, 173, 78, 0.52);
}

.timer-status {
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.timer-value {
  margin: 12px 0 7px;
  font-size: clamp(2.65rem, 13vw, 4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  line-height: 1;
}

.timer-project {
  min-height: 21px;
  color: var(--muted);
  font-size: 0.9rem;
}

.timer-actions {
  display: grid;
  width: 100%;
  gap: 10px;
  margin-top: 24px;
}

.timer-actions.two {
  grid-template-columns: 1fr 1fr;
}

.timer-actions .secondary-button,
.timer-actions .danger-button {
  min-height: 56px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 850;
}

.timer-actions .primary-wide:disabled {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--muted);
  opacity: 1;
}

.time-summary {
  margin: 18px 0 16px;
  border-block: 1px solid var(--line);
}

.time-summary-heading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.time-summary-heading h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.time-summary-heading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.time-summary-projects {
  border-bottom: 1px solid var(--line);
}

.time-summary-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.time-summary-projects .time-summary-row:last-child,
.time-summary > .time-summary-row:last-child {
  border-bottom: 0;
}

.time-summary-row span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.time-summary-row strong {
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.time-summary-total span,
.time-summary-total strong {
  color: var(--ink);
  font-weight: 750;
}

.time-summary-total strong {
  color: var(--accent);
  font-size: 1.05rem;
}

.time-event-log {
  margin: 18px 0 16px;
  border-block: 1px solid var(--line);
}

.time-event-log-heading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.time-event-log-heading h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.time-event-log-heading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.time-event-log ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.time-event-log li {
  display: block;
  border-bottom: 1px solid var(--line);
}

.time-event-log li:last-child {
  border-bottom: 0;
}

.time-event-entry {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.time-event-entry:disabled {
  opacity: 1;
}

.time-event-log.is-correction-mode .time-event-entry:not(:disabled) {
  padding-inline: 8px;
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.event-marker {
  width: 9px;
  height: 9px;
  justify-self: center;
  border: 2px solid var(--canvas);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-border);
}

.time-event-entry strong {
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 650;
}

.time-event-entry time {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.time-event-entry small {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.time-event-entry .correction-status {
  color: var(--accent);
  font-weight: 650;
}

.danger-button {
  border: 1px solid rgba(239, 100, 100, 0.5);
  background: rgba(239, 100, 100, 0.12);
  color: var(--danger);
}

.time-entry-toggle {
  margin-top: 2px;
}

.correction-mode-button {
  margin-top: 2px;
}

.manual-entry {
  display: grid;
  gap: 15px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.manual-time-mode .manual-entry {
  gap: 10px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.manual-entry-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.manual-entry-heading h2 { margin: 2px 0 0; }
.manual-entry-heading .eyebrow { margin-bottom: 3px; }

.manual-date-field { width: min(190px, 46%); }
.manual-date-field input { min-height: 42px; font-size: 0.9rem; }

.manual-time-step {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 0 0;
}

.manual-time-readout {
  display: grid;
  gap: 0;
  text-align: center;
}

.manual-time-readout span { color: var(--muted); font-size: 0.82rem; }
.manual-time-readout small { color: var(--accent); font-size: 0.68rem; font-weight: 750; }
.manual-time-readout strong { font-size: clamp(1.9rem, 7vw, 2.65rem); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.manual-time-readout #manualTimeLabel { min-height: 1.2em; }
.manual-time-readout #manualTimeValue { display: block; min-height: 1.1em; }
.manual-time-readout #manualTimeValue { margin-bottom: 32px; }
.manual-summary-block { display: grid; align-content: center; gap: 0; width: min(100%, calc(100vw - 36px)); height: 72px; min-height: 72px; margin: 0 auto; overflow: visible; }
.manual-time-readout .manual-time-duration { display: grid; width: 312px; min-height: 24px; margin: 0 auto; color: #648b6a; font-size: 1.04rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manual-summary-row { display: grid; grid-template-columns: 80px 50px 10px 50px 122px; align-items: baseline; justify-content: start; column-gap: 0; width: 312px; min-height: 24px; margin-inline: auto; font-size: 1.04rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
.manual-summary-row > * { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.manual-time-readout .manual-summary-row > * { font-size: inherit !important; }
.manual-summary-label { text-align: left; }
.manual-summary-row.manual-start-preview { grid-template-columns: max-content max-content; justify-content: center; column-gap: 8px; }
.manual-summary-start, .manual-summary-end { text-align: center; }
.manual-summary-separator { text-align: center; }
.manual-summary-duration { display: grid; grid-template-columns: 2.4ch 1.3ch 2.4ch 1.4ch; align-items: baseline; justify-content: end; width: 122px; overflow: visible; font-size: inherit !important; font-weight: inherit !important; line-height: inherit; }
.manual-summary-duration .manual-duration-value { text-align: right; }
.manual-summary-duration .manual-duration-unit { text-align: left; }
.manual-time-readout .manual-summary-duration .manual-duration-value, .manual-time-readout .manual-summary-duration .manual-duration-unit { font-size: inherit !important; }
.manual-time-readout .manual-time-duration > *, .manual-time-readout .manual-time-duration .manual-duration-value, .manual-time-readout .manual-time-duration .manual-duration-unit { color: #648b6a; }
.manual-time-readout .manual-break-row { color: #7198bd; }
.manual-time-readout .manual-break-row .manual-summary-label, .manual-time-readout .manual-break-row .manual-summary-start, .manual-time-readout .manual-break-row .manual-summary-end, .manual-time-readout .manual-break-row .manual-summary-separator, .manual-time-readout .manual-break-row .manual-duration-value, .manual-time-readout .manual-break-row .manual-duration-unit { color: #7198bd; }
.manual-summary-block.is-multiproject { align-content: start; }
.manual-summary-block.is-multiproject .manual-break-list { height: 72px; max-height: 72px; overflow-y: auto; }
.manual-project-segment-row { grid-template-columns: minmax(72px, 1fr) minmax(92px, auto) 122px; width: min(100%, 312px); color: #d58a4b; font-size: .91rem; }
.manual-project-segment-name { overflow: hidden; text-align: left; text-overflow: ellipsis; }
.manual-project-segment-range { text-align: center; }
.manual-project-segment-duration { width: 122px; color: inherit; }
.manual-project-segment-row > .manual-project-segment-duration { overflow: visible; }
.manual-project-segment-duration .manual-duration-value { text-align: right; }
.manual-project-segment-duration .manual-duration-unit { text-align: left; }
.manual-project-segment-row.is-preview { opacity: .78; }
.manual-project-color-0 { color: #d58a4b; }
.manual-project-color-1 { color: #e0a264; }
.manual-project-color-2 { color: #bd7137; }
.manual-project-color-3 { color: #edb77e; }

.time-dial {
  position: relative;
  width: min(310px, 78vw);
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.time-dial:focus-visible { border-radius: 50%; outline: 3px solid var(--accent); outline-offset: 3px; }
.time-dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial-track { fill: none; stroke: var(--line); stroke-width: 14; }
.dial-tick { stroke: var(--muted); stroke-linecap: butt; stroke-width: 2; opacity: 0.68; }
.dial-tick.major { stroke: var(--accent); stroke-width: 3; opacity: 0.95; }
.dial-label { fill: var(--muted); font: 600 11px system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.time-dial line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transform-origin: 130px 130px; }
.time-dial.is-guiding #manualDialHand { animation: manual-hand-guide 1.25s ease-in-out infinite alternate; }
.time-dial.is-grabbed #manualDialHand { animation: none; }
.dial-confirm {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 750;
  box-shadow: 0 4px 18px var(--shadow);
}

.dial-confirm.is-start-indicator { font-size: 2.15rem; line-height: 1; }
.dial-confirm:hover { border-color: var(--accent); background: var(--surface-soft); }
.manual-dial-hint { margin: 0; color: var(--muted); font-size: 0.78rem; text-align: center; }

.manual-entry-editor { position: relative; }
.manual-entry-topbar { position: absolute; z-index: 2; top: 0; right: 0; width: 100%; height: 0; }
.manual-entry-close {
  position: absolute;
  top: 5px;
  right: 11px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 350;
  line-height: 1;
}
.manual-entry-close:hover { color: var(--accent); }
.manual-entry-date { margin: 0 0 2px; color: var(--ink); font-size: 1.04rem; font-weight: 700; line-height: 1.3; text-align: center; }
.manual-project-picker { display: grid; gap: 7px; }
.manual-project-picker input { min-height: 42px; }
.manual-project-picker.needs-project #manualProjectSearch { border-color: #bf625d; box-shadow: 0 0 0 3px rgba(191,98,93,.18); }
.manual-project-picker.needs-project.is-guide-target #manualProjectSearch { animation: none; }
.manual-project-required { margin: -2px 0 0; color: #a64742; font-size: .82rem; font-weight: 650; }
.manual-project-options { display: grid; max-height: 164px; gap: 5px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.manual-project-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.manual-project-option strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.manual-project-option-details { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.manual-project-option-mark { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 1rem; }
.manual-project-option.is-selected { border-color: var(--accent); background: var(--surface-soft); }
.manual-project-option.is-selected .manual-project-option-mark { color: var(--accent); font-weight: 800; }
.manual-project-empty { margin: 0; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .78rem; text-align: center; }

.manual-entry-options { display: grid; gap: 10px; }
.manual-break-choice { display: flex !important; align-items: center; gap: 10px !important; }
.manual-break-choice input { width: 20px; min-height: 20px; accent-color: var(--accent); }
.manual-break-choice span { font-size: 0.86rem !important; }
.manual-pause-minutes { max-width: 240px; }
.manual-pause-minutes input { min-height: 42px; }
.manual-entry-error { margin: 0; padding: 10px 12px; border-radius: 9px; background: rgba(239, 100, 100, 0.12); color: var(--danger); font-size: 0.84rem; }

.manual-entry-history { display: grid; gap: 11px; padding-top: 15px; border-top: 1px solid var(--line); }
.manual-entry-history-list { display: grid; gap: 8px; }
.manual-day-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.manual-day-row.is-empty { border-style: dashed; background: var(--surface-soft); }
.manual-day-row.is-confirmed-day { border-color: rgba(100,139,106,.46); background: rgba(100,139,106,.07); }
.manual-day-row:focus-visible, .manual-day-row:hover { border-color: var(--line); outline: none; }
.manual-day-main { display: grid; grid-template-columns: 100px 42px 98px minmax(max-content, 1fr); grid-template-rows: auto auto; justify-content: stretch; gap: 3px 5px; align-items: baseline; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.manual-day-main:disabled { cursor: default; opacity: 1; }
.manual-day-main:hover:not(:disabled) { background: transparent; }
.manual-day-copy { display: contents; }
.manual-day-weekday { overflow: visible; color: var(--accent); font-weight: 750; text-overflow: clip; text-transform: capitalize; white-space: nowrap; }
.manual-day-date, .manual-day-range, .manual-day-net, .manual-day-pause-total { overflow: hidden; font-size: 0.82rem; text-overflow: clip; white-space: nowrap; }
.manual-day-date { color: var(--muted); }
.manual-day-range { color: var(--ink); font-variant-numeric: tabular-nums; }
.manual-day-net { display: grid; grid-column: 4; grid-row: 1; grid-template-columns: 2ch 1ch 2ch 2.7ch; justify-self: end; width: max-content; align-items: baseline; column-gap: 2px; min-width: 0; color: var(--accent); font-weight: 750; font-variant-numeric: tabular-nums; }
.manual-day-pause-label { white-space: nowrap; }
.manual-day-pause-total { display: grid; grid-column: 2 / -1; grid-row: 2; grid-template-columns: auto 2ch 1ch 2ch 2.7ch; align-items: baseline; justify-self: start; width: max-content; column-gap: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.manual-duration-value { text-align: right; }
.manual-duration-unit { text-align: left; }
.manual-day-placeholder { visibility: hidden; }
.manual-day-pause, .manual-day-status { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.manual-day-status.is-confirmed { color: var(--accent); }
.manual-day-action { grid-column: 2; grid-row: 1; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border-radius: 50%; white-space: nowrap; }
.manual-day-reset { grid-column: auto; grid-row: auto; width: 100%; height: auto; min-height: 34px; justify-self: stretch; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--danger); font-size: .67rem; font-weight: 700; text-align: left; }
.manual-day-reset:hover { border-color: var(--danger); }
.manual-day-add { border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.manual-day-row.is-empty:hover .manual-day-add { border-color: var(--accent); color: var(--accent); }
.manual-day-edit { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.manual-day-edit:hover { border-color: var(--accent); color: var(--accent); }
.manual-day-lock { border: 1px solid rgba(100,139,106,.32); background: rgba(100,139,106,.1); color: #648b6a; }
.manual-day-icon { display: block; width: 17px; height: 17px; }
.manual-day-correction-list { position: relative; width: 34px; min-width: 34px; min-height: 0; padding: 0; border: 0; }
.manual-day-correction-list > summary { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; list-style: none; white-space: nowrap; }
.manual-day-correction-list > summary::-webkit-details-marker { display: none; }
.manual-day-correction-list[open] { grid-column: 1 / -1; grid-row: auto; }
.manual-day-correction-options { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; display: grid; width: min(250px, calc(100vw - 40px)); gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.manual-day-correction-options button { min-height: 34px; padding: 5px 8px; text-align: left; }
.manual-day-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.manual-day-bar-track { position: relative; height: 100%; width: 100%; }
.manual-day-work, .manual-day-break { position: absolute; top: 0; height: 100%; border-radius: 99px; }
.manual-day-work { background: #648b6a; }
.manual-day-break { background: #7198bd; }
.manual-entry-history-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 0.8rem; }
.manual-entry-editor { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.manual-entry-editor.is-hidden { display: none; }
.manual-entry-controls { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 68px; margin-top: -12px; padding-inline: clamp(14px, calc((100vw - 376px) / 4), 26px); transform: translateY(-36px); }
.manual-entry-controls button { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; padding: 0; border-radius: 50%; font-size: 1.7rem; font-weight: 750; }
.manual-entry-controls .manual-multiproject-toggle { position: absolute; z-index: 2; top: calc(50% + 20px); left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(213,138,75,.65); background: rgba(213,138,75,.1); color: #c77b39; }
.manual-entry-controls .manual-multiproject-toggle:hover, .manual-entry-controls .manual-multiproject-toggle.is-active { border-color: #c77b39; background: rgba(213,138,75,.19); }
.manual-multiproject-icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#confirmManualTime:disabled { cursor: not-allowed; opacity: .38; }
.manual-entry-controls button.is-guide-target { animation: manual-guide-pulse 1.45s ease-in-out 2 both; }
.manual-project-picker.is-guide-target #manualProjectSearch,
.manual-project-picker.is-guide-target .manual-project-options { animation: manual-guide-pulse 1.45s ease-in-out 2 both; }
.manual-entry-controls button:active:not(:disabled) { transform: translateY(1px) scale(.94); }
.dial-confirm:active:not(:disabled) { transform: translate(-50%, calc(-50% + 1px)) scale(.94); }
@keyframes manual-hand-guide {
  from { stroke-width: 4; opacity: .78; }
  to { stroke-width: 5.5; opacity: 1; }
}
@keyframes manual-guide-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86, 170, 160, 0); }
  45% { box-shadow: 0 0 0 5px rgba(86, 170, 160, .16); }
}
@media (prefers-reduced-motion: reduce) {
  .time-dial.is-guiding #manualDialHand,
  .dial-confirm.is-guide-target,
  .manual-entry-controls button.is-guide-target,
  .manual-project-picker.is-guide-target #manualProjectSearch,
  .manual-project-picker.is-guide-target .manual-project-options { animation: none; }
  .manual-entry-controls button, .dial-confirm { transition: none; }
}
.manual-round-action { transition: transform .12s ease, opacity .12s ease; }
.manual-round-action:active:not(:disabled) { transform: scale(.95); }
.manual-round-action:disabled { cursor: not-allowed; opacity: .38; }
.manual-pause-action { position: relative; border: 1px solid rgba(105,145,183,.56); background: rgba(105,145,183,.15); color: #7198bd; }
.manual-pause-action:hover { border-color: #7198bd; background: rgba(105,145,183,.23); }
.manual-action-plus { position: absolute; top: -3px; right: -3px; display: grid; width: 22px; height: 22px; place-items: center; padding-bottom: 2px; border: 1px solid var(--surface); border-radius: 50%; background: #7198bd; color: #fff; font-size: .95rem; line-height: 1; }
.manual-save-action { border: 1px solid rgba(100,139,106,.58); background: rgba(100,139,106,.15); color: #648b6a; }
.manual-save-action:hover:not(:disabled) { border-color: #648b6a; background: rgba(100,139,106,.23); }
.manual-entry-controls .is-hidden { display: none; }
.manual-break-list { display: grid; align-content: start; justify-content: center; gap: 0; width: 100%; min-height: 0; margin: 0; overflow-y: auto; scrollbar-width: none; color: #7198bd; font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manual-break-list::-webkit-scrollbar { display: none; }
.manual-break-row { color: #7198bd; }
.manual-break-edit, .manual-break-remove { display: grid; width: 24px; min-height: 24px; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1; }
.manual-break-edit:hover, .manual-break-remove:hover { text-decoration: underline; text-underline-offset: 3px; }
.manual-break-remove { font-size: 1.1rem; }
.manual-summary-action { display: block; }
.manual-discard-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 56px var(--shadow);
}
.manual-discard-dialog::backdrop { background: rgba(0,0,0,.38); }
.manual-discard-copy { padding: 20px 20px 12px; }
.manual-discard-copy .dialog-kicker { margin: 0 0 5px; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.manual-discard-copy h2 { margin: 0 0 8px; font-size: 1.2rem; }
.manual-discard-copy p:last-child { margin: 0; color: var(--muted); font-size: .86rem; }
.manual-discard-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.manual-discard-actions button { min-height: 40px; padding: 7px 12px; }
.dial-work-arc, .dial-break-arc { fill: none; stroke-width: 14; stroke-linecap: butt; transform-origin: 130px 130px; }
.dial-work-arc { stroke: #648b6a; }
.dial-break-arc { stroke: #7198bd; }
.dial-multiproject-base-work { opacity: .34; }
.dial-multiproject-base-break { opacity: .58; }
.dial-project-arc, .dial-project-preview { fill: none; stroke-width: 14; stroke-linecap: butt; transform-origin: 130px 130px; opacity: .8; }
.dial-project-arc-0, .dial-project-preview { stroke: #d58a4b; }
.dial-project-arc-1 { stroke: #e0a264; }
.dial-project-arc-2 { stroke: #bd7137; }
.dial-project-arc-3 { stroke: #edb77e; }
.dial-work-start-pin { fill: #648b6a; stroke: var(--surface); stroke-width: 3px; }
@media (max-width: 440px) {
  .manual-day-main { grid-template-columns: 76px 39px 86px minmax(max-content, 1fr); gap: 3px; }
  .manual-day-weekday { font-size: .7rem; }
  .manual-day-date, .manual-day-range, .manual-day-net, .manual-day-pause-total { font-size: .75rem; }
}
@media (max-width: 380px) {
  .manual-day-action { min-width: 0 !important; }
  .manual-day-main { grid-template-columns: 66px 32px 72px minmax(max-content, 1fr); gap: 2px; }
  .manual-day-weekday { font-size: .66rem; }
  .manual-day-date, .manual-day-range, .manual-day-net, .manual-day-pause-total { font-size: .68rem; }
  .manual-day-net { grid-template-columns: 1.8ch 1ch 1.8ch 2.5ch; column-gap: 1px; }
  .manual-day-pause-total { grid-template-columns: auto 1.8ch 1ch 1.8ch 2.5ch; column-gap: 1px; }
  .manual-time-readout .manual-time-duration, .manual-break-list { font-size: 1.04rem; }
  .manual-time-readout .manual-time-duration { width: 294px; }
  .manual-summary-row { grid-template-columns: 72px 50px 8px 50px 114px; column-gap: 0; width: 294px; }
  .manual-summary-duration { grid-template-columns: 2.4ch 1.3ch 2.4ch 1.4ch; width: 114px; }
  .manual-project-segment-row { grid-template-columns: minmax(68px, 1fr) minmax(82px, auto) 114px; width: 294px; }
  .manual-project-segment-duration { width: 114px; }
  .manual-break-edit, .manual-break-remove { width: 22px; }
}

.manual-entry h2 {
  margin-bottom: 3px;
}

.manual-entry label {
  display: grid;
  gap: 7px;
}

.manual-entry label > span {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.manual-entry input {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
}

.time-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-message {
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(239, 100, 100, 0.12);
  color: var(--danger);
  font-size: 0.9rem;
}

.net-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0 3px;
  border-top: 1px solid var(--line);
}

.net-time span {
  color: var(--muted);
}

.net-time strong {
  font-size: 1.1rem;
}

.calendar-page-heading {
  margin-bottom: 18px;
}

.calendar-view {
  overflow-x: clip;
}

.calendar-month-content {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.calendar-month-content.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.calendar-month-content.is-transitioning {
  pointer-events: none;
}

.calendar-month-toolbar {
  display: grid;
  grid-template-columns: 48px max-content minmax(58px, 1fr) 48px;
  min-height: 56px;
  align-items: center;
  border-block: 1px solid var(--line);
}

.calendar-month-toolbar button {
  display: grid;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.75rem;
}

.calendar-month-toolbar strong {
  min-width: 0;
  padding-left: 5px;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.calendar-month-toolbar .calendar-today-button {
  width: 100%;
  min-width: 58px;
  justify-self: stretch;
  padding-inline: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.calendar-panel {
  margin-top: 18px;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.calendar-weekdays,
.calendar-week-row {
  display: grid;
  grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-weekdays {
  min-height: 30px;
  align-items: center;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  gap: 3px;
}

.calendar-week-row {
  min-height: 64px;
}

.calendar-week-number {
  display: grid;
  place-items: center;
  color: var(--quiet);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.calendar-day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 62px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1px;
  align-items: center;
  justify-items: center;
  padding: 5px 2px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
}

.calendar-day:active {
  background: var(--accent-soft);
}

.calendar-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar-day-number {
  width: 100%;
  padding-right: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.calendar-day-status {
  display: grid;
  min-width: 18px;
  min-height: 18px;
  align-self: center;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.calendar-day.status-locked .calendar-day-status,
.calendar-lock-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  min-width: 14px;
  height: 16px;
  min-height: 16px;
  color: var(--success);
}

.calendar-day.status-locked .calendar-day-status::before,
.calendar-lock-icon::before {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  content: "";
}

.calendar-day.status-locked .calendar-day-status::after,
.calendar-lock-icon::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  content: "";
}

.calendar-day.status-locked {
  background: var(--surface-soft);
}

.calendar-day.status-complete .calendar-day-status,
.calendar-day.status-running .calendar-day-status {
  color: var(--success);
}

.calendar-day.status-missing {
  background: rgba(239, 100, 100, 0.09);
}

.calendar-day.status-missing .calendar-day-status {
  color: var(--danger);
}

.calendar-day.status-pending {
  background: rgba(240, 173, 78, 0.09);
}

.calendar-day.status-pending .calendar-day-status {
  color: var(--warning);
  font-size: 0.72rem;
}

.calendar-day.status-sick {
  background: color-mix(in srgb, var(--sick) 12%, transparent);
}

.calendar-day.status-sick .calendar-day-status {
  color: var(--sick);
}

.calendar-day.status-vacation {
  background: color-mix(in srgb, var(--vacation) 12%, transparent);
}

.calendar-day.status-vacation .calendar-day-status {
  color: var(--vacation);
}

.calendar-day.status-timecredit {
  background: color-mix(in srgb, var(--time-credit) 12%, transparent);
}

.calendar-day.status-timecredit .calendar-day-status {
  color: var(--time-credit);
}

.calendar-day.has-composition {
  padding-bottom: 9px;
}

.calendar-day.has-composition .calendar-day-status {
  transform: translateY(-1px);
}

.calendar-day-composition {
  position: absolute;
  right: 5px;
  bottom: 4px;
  left: 5px;
  display: flex;
  height: 4px;
  gap: 1px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.calendar-composition-part {
  min-width: 1px;
  height: 100%;
  flex-basis: 0;
}

.calendar-composition-part.part-work {
  background: var(--success);
}

.calendar-composition-part.part-sick {
  background: var(--sick);
}

.calendar-composition-part.part-vacation {
  background: var(--vacation);
}

.calendar-composition-part.part-timecredit {
  background: var(--time-credit);
}

.calendar-composition-part.part-uncovered {
  background: var(--line-bright);
}

.calendar-day.status-free .calendar-day-status,
.calendar-day.status-planned .calendar-day-status {
  color: var(--quiet);
}

.calendar-day-outside {
  min-height: 62px;
}

.calendar-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.calendar-legend::-webkit-scrollbar {
  display: none;
}

.calendar-legend span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.calendar-legend b {
  min-width: 12px;
  color: inherit;
  font-size: 0.84rem;
  text-align: center;
}

.calendar-legend .calendar-lock-icon {
  width: 13px;
  min-width: 13px;
}

.calendar-legend [data-legend-status="complete"],
.calendar-legend [data-legend-status="locked"] {
  color: var(--success);
}

.calendar-legend [data-legend-status="missing"] {
  color: var(--danger);
}

.calendar-legend [data-legend-status="sick"] {
  color: var(--sick);
}

.calendar-legend [data-legend-status="vacation"] {
  color: var(--vacation);
}

.calendar-legend [data-legend-status="timecredit"] {
  color: var(--time-credit);
}

.calendar-legend [data-legend-status="pending"] {
  color: var(--warning);
}

.calendar-summary {
  margin-top: 20px;
  border-block: 1px solid var(--line);
}

.calendar-summary-heading {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.calendar-summary-heading h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.calendar-summary-heading span {
  color: var(--muted);
  font-size: 0.78rem;
}

.calendar-summary-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.calendar-summary-values > div {
  display: grid;
  min-width: 0;
  min-height: 74px;
  align-content: center;
  gap: 5px;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
}

.calendar-summary-values > div:first-child {
  padding-left: 0;
}

.calendar-summary-values > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.calendar-summary-values span,
.calendar-status-counts small {
  color: var(--muted);
  font-size: 0.72rem;
}

.calendar-summary-values strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-summary-values strong.is-negative {
  color: var(--danger);
}

.calendar-summary-values strong.is-positive {
  color: var(--success);
}

.calendar-time-account {
  border-bottom: 1px solid var(--line);
}

.calendar-time-account-heading,
.calendar-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.calendar-time-account-heading {
  min-height: 42px;
  border-bottom: 1px solid var(--line);
}

.calendar-time-account-heading strong {
  font-size: 0.85rem;
  font-weight: 700;
}

.calendar-time-account-heading small {
  color: var(--muted);
  font-size: 0.72rem;
}

.calendar-account-row {
  min-height: 43px;
  color: var(--muted);
  font-size: 0.8rem;
}

.calendar-account-row + .calendar-account-row {
  border-top: 1px solid var(--line);
}

.calendar-account-row strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calendar-account-row strong.is-positive {
  color: var(--success);
}

.calendar-account-row strong.is-negative {
  color: var(--danger);
}

.calendar-account-total {
  color: var(--ink);
  font-weight: 650;
}

.calendar-account-total strong {
  font-size: 1rem;
}

.calendar-status-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-status-counts > div {
  display: grid;
  min-width: 0;
  min-height: 62px;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.calendar-status-counts > div:first-child {
  padding-left: 0;
}

.calendar-status-counts > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.calendar-status-counts strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-missing-count {
  color: var(--danger);
}

.calendar-pending-count {
  color: var(--warning);
}

.calendar-status-counts strong.is-zero {
  color: var(--muted);
}

.bottom-nav {
  position: fixed;
  z-index: 40;
  right: max(calc((100vw - 480px) / 2), 0px);
  bottom: 0;
  left: max(calc((100vw - 480px) / 2), 0px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: calc(78px + var(--safe-bottom));
  padding: 8px max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
  border-top: 1px solid var(--line);
  background: var(--bar-bg);
  box-shadow: 0 -8px 24px var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.nav-item {
  position: relative;
  display: grid;
  min-height: 60px;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--quiet);
  font-size: 0.67rem;
  font-weight: 800;
}

.nav-item > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item::before {
  position: absolute;
  top: -8px;
  width: 28px;
  height: 2px;
  background: var(--accent);
  content: "";
  opacity: 0;
}

.nav-item.is-active {
  color: var(--ink);
}

.nav-item.is-active::before {
  opacity: 1;
}

.nav-camera {
  color: var(--quiet);
}

dialog {
  color: var(--ink);
}

dialog::backdrop {
  background: rgba(3, 6, 10, 0.76);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.sheet-dialog {
  width: min(calc(100% - 20px), 460px);
  max-height: calc(88dvh - var(--safe-top));
  margin: auto auto max(10px, var(--safe-bottom));
  padding: 10px 16px calc(20px + var(--safe-bottom));
  overflow: auto;
  border: 1px solid var(--line-bright);
  border-radius: 14px 14px 8px 8px;
  background: var(--canvas);
  box-shadow: 0 -24px 60px var(--shadow);
}

.sheet-dialog[open] {
  animation: sheet-in 180ms ease-out;
}

.sheet-handle {
  width: 42px;
  height: 5px;
  margin: 1px auto 15px;
  border-radius: 999px;
  background: var(--line-bright);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dialog-header h2 {
  font-size: 1.65rem;
}

.dialog-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.close-button,
.review-header button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.65rem;
}

.appearance-dialog {
  padding-bottom: calc(24px + var(--safe-bottom));
}

.appearance-group {
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.appearance-group legend {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}

.theme-options label {
  position: relative;
  min-width: 0;
}

.theme-options input,
.accent-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.theme-options span {
  display: grid;
  min-height: 52px;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.theme-options label:last-child span {
  border-right: 0;
}

.theme-options input:checked + span {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.accent-options {
  border-block: 1px solid var(--line);
}

.accent-option {
  display: grid;
  min-height: 54px;
  grid-template-columns: 24px 1fr 24px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
  font-weight: 650;
}

.accent-option:last-child {
  border-bottom: 0;
}

.accent-dot {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(127, 127, 127, 0.34);
  border-radius: 50%;
  background: var(--swatch);
}

.accent-option[data-accent-option="copper"] { --swatch: #c8763e; }
.accent-option[data-accent-option="petrol"] { --swatch: #327d76; }
.accent-option[data-accent-option="moss"] { --swatch: #6f875b; }
.accent-option[data-accent-option="bordeaux"] { --swatch: #9e4d60; }
.accent-option[data-accent-option="indigo"] { --swatch: #686c9d; }

.accent-option i {
  color: var(--accent);
  font-size: 1rem;
  font-style: normal;
  font-weight: 850;
  opacity: 0;
}

.accent-option input:checked ~ i {
  opacity: 1;
}

.appearance-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.time-action-summary {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.time-action-summary span,
.time-action-note {
  color: var(--muted);
  font-size: 0.86rem;
}

.time-action-summary strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.time-action-note {
  margin: 14px 0 20px;
  line-height: 1.45;
}

.confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.confirmation-actions .secondary-button,
.confirmation-actions .primary-wide,
.confirmation-actions .danger-button {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  border-radius: 13px;
  font-size: 0.96rem;
  font-weight: 850;
}

.time-correction-dialog {
  width: min(100%, 480px);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-block: 0;
  border-radius: 0;
}

.correction-shell {
  display: grid;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.correction-dialog-top {
  padding: calc(10px + var(--safe-top)) calc(18px + var(--safe-right)) 16px calc(18px + var(--safe-left));
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.correction-dialog-top .sheet-handle {
  margin-bottom: 12px;
}

.correction-body {
  min-height: 0;
  padding: 20px calc(18px + var(--safe-right)) 22px calc(18px + var(--safe-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.correction-step {
  display: grid;
  gap: 14px;
}

.correction-original {
  display: grid;
  gap: 6px;
  margin: 0 0 2px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}

.correction-original strong {
  font-size: 1.05rem;
}

.correction-original span,
.correction-note {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.correction-form {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.correction-step-title {
  margin: 2px 0 -8px;
  font-size: 1.08rem;
  font-weight: 800;
}

.correction-instruction {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.correction-step > label {
  display: grid;
  gap: 7px;
}

.correction-step > label > span,
.correction-reason-group legend {
  font-size: 0.86rem;
  font-weight: 700;
}

.correction-form input,
.correction-form select,
.correction-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
}

.correction-form textarea {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  resize: none;
  line-height: 1.4;
}

.field-hint,
.field-error {
  font-size: 0.8rem;
  line-height: 1.35;
}

.field-hint {
  color: var(--muted);
}

.field-error {
  color: var(--danger);
  font-weight: 700;
}

.correction-form [aria-invalid="true"] {
  border-color: var(--danger);
}

.correction-form-message {
  margin: -2px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.correction-form-message.is-error {
  border-color: rgba(239, 100, 100, 0.35);
  background: rgba(239, 100, 100, 0.08);
  color: var(--danger);
}

.correction-form-message.is-valid {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.correction-reason-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.correction-reason-group legend {
  margin-bottom: 8px;
}

.correction-reason-options {
  display: grid;
  gap: 8px;
}

.correction-reason-options label {
  position: relative;
  min-width: 0;
}

.correction-reason-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.correction-reason-options span {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-bright);
  border-radius: 11px;
  background: var(--field);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.correction-reason-options span::after {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 2px solid var(--quiet);
  border-radius: 50%;
  content: "";
}

.correction-reason-options input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.correction-reason-options input:checked + span::after {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--canvas);
}

.correction-reason-options input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.correction-detail-field {
  display: grid;
  gap: 7px;
}

.correction-preview {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}

.correction-preview > div:first-child {
  display: grid;
  gap: 2px;
}

.correction-preview > div:first-child span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.correction-preview h3 {
  font-size: 1rem;
}

#correctionPreviewRows {
  display: grid;
  gap: 8px;
}

.correction-preview-row {
  display: grid;
  grid-template-columns: minmax(76px, auto) 1fr;
  gap: 12px;
  align-items: start;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.correction-preview-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.correction-preview-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  text-align: right;
}

.correction-note {
  margin: 0;
}

.correction-actions {
  z-index: 2;
  padding: 12px calc(18px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(18px + var(--safe-left));
  border-top: 1px solid var(--line);
  background: var(--canvas);
  box-shadow: 0 -10px 24px var(--shadow);
}

.calendar-day-dialog {
  width: min(100%, 480px);
  height: 100dvh;
  max-width: 480px;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--canvas);
  color: var(--ink);
}

.calendar-day-dialog::backdrop {
  background: rgba(3, 6, 10, 0.76);
}

.calendar-day-shell {
  display: grid;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.calendar-day-header {
  display: flex;
  min-height: calc(76px + var(--safe-top));
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: calc(14px + var(--safe-top)) calc(18px + var(--safe-right)) 14px calc(18px + var(--safe-left));
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.calendar-day-header h2 {
  font-size: 1.55rem;
  font-weight: 650;
}

.calendar-day-header .dialog-kicker {
  color: var(--accent);
  font-weight: 750;
  text-transform: none;
}

.calendar-day-body {
  min-height: 0;
  padding: 20px calc(18px + var(--safe-right)) 28px calc(18px + var(--safe-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.calendar-day-state {
  display: grid;
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--line);
}

.calendar-day-state-symbol {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
}

.calendar-day-state > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.calendar-day-state strong {
  font-size: 1.04rem;
}

.calendar-day-state small {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.calendar-day-state[data-status="missing"] .calendar-day-state-symbol {
  border-color: rgba(239, 100, 100, 0.4);
  background: rgba(239, 100, 100, 0.1);
  color: var(--danger);
}

.calendar-day-state[data-status="pending"] .calendar-day-state-symbol {
  border-color: rgba(240, 173, 78, 0.45);
  background: rgba(240, 173, 78, 0.1);
  color: var(--warning);
}

.calendar-day-state[data-status="sick"] .calendar-day-state-symbol {
  border-color: color-mix(in srgb, var(--sick) 48%, transparent);
  background: color-mix(in srgb, var(--sick) 12%, transparent);
  color: var(--sick);
}

.calendar-day-state[data-status="vacation"] .calendar-day-state-symbol {
  border-color: color-mix(in srgb, var(--vacation) 48%, transparent);
  background: color-mix(in srgb, var(--vacation) 12%, transparent);
  color: var(--vacation);
}

.calendar-day-state[data-status="timecredit"] .calendar-day-state-symbol {
  border-color: color-mix(in srgb, var(--time-credit) 48%, transparent);
  background: color-mix(in srgb, var(--time-credit) 12%, transparent);
  color: var(--time-credit);
}

.calendar-day-state[data-status="complete"] .calendar-day-state-symbol,
.calendar-day-state[data-status="running"] .calendar-day-state-symbol {
  border-color: color-mix(in srgb, var(--success) 48%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.calendar-day-state[data-status="locked"] .calendar-day-state-symbol {
  position: relative;
  border-color: color-mix(in srgb, var(--success) 48%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.calendar-day-state[data-status="locked"] .calendar-day-state-symbol::before {
  position: absolute;
  width: 16px;
  height: 12px;
  transform: translateY(3px);
  border: 2px solid currentColor;
  border-radius: 3px;
  content: "";
}

.calendar-day-state[data-status="locked"] .calendar-day-state-symbol::after {
  position: absolute;
  width: 10px;
  height: 9px;
  transform: translateY(-5px);
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
}

.calendar-day-section {
  margin-top: 22px;
  border-block: 1px solid var(--line);
}

.calendar-day-section h3 {
  margin: 0;
  padding: 13px 0 11px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-detail-row {
  display: grid;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.calendar-detail-row:last-child {
  border-bottom: 0;
}

.calendar-detail-row span {
  color: var(--muted);
  font-size: 0.88rem;
}

.calendar-detail-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calendar-detail-total strong {
  color: var(--accent);
  font-size: 1rem;
}

.calendar-part-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar-part-label::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line-bright);
  content: "";
}

.calendar-breakdown-row[data-calendar-part="work"] .calendar-part-label::before {
  background: var(--success);
}

.calendar-breakdown-row[data-calendar-part="sick"] .calendar-part-label::before {
  background: var(--sick);
}

.calendar-breakdown-row[data-calendar-part="vacation"] .calendar-part-label::before {
  background: var(--vacation);
}

.calendar-breakdown-row[data-calendar-part="timecredit"] .calendar-part-label::before {
  background: var(--time-credit);
}

.calendar-day-info {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

.calendar-day-footer {
  padding: 12px calc(18px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(18px + var(--safe-left));
  border-top: 1px solid var(--line);
  background: var(--canvas);
  box-shadow: 0 -10px 24px var(--shadow);
}

.calendar-day-footer .primary-wide {
  min-height: 56px;
}

.photo-review-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #070a0e;
}

.photo-review-shell {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.review-header {
  position: absolute;
  z-index: 3;
  top: var(--safe-top);
  right: var(--safe-right);
  left: var(--safe-left);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(16, 18, 20, .58);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.review-header div {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.review-header small {
  color: var(--muted);
  font-size: 0.8rem;
}

.preview-stage {
  position: absolute;
  inset: 0;
  display: grid;
  /* Intrinsic photo dimensions must not enlarge the viewport's grid tracks. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: calc(88px + var(--safe-top)) calc(14px + var(--safe-right)) calc(158px + var(--safe-bottom)) calc(14px + var(--safe-left));
  background: #030405;
}

.preview-stage::before {
  content: "";
  position: absolute;
  inset: -30px;
  background-image: linear-gradient(rgba(3,4,5,.28), rgba(3,4,5,.28)), var(--preview-image);
  background-position: center;
  background-size: cover;
  filter: blur(24px) saturate(.9);
  opacity: .72;
  transform: scale(1.08);
}

.preview-stage img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-orientation: from-image;
}

.preview-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 14px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.preview-toggle button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.preview-toggle button.is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

.photo-details {
  display: grid;
  gap: 4px;
  padding: 0 2px 10px;
}

.photo-review-overlay {
  position: absolute;
  z-index: 3;
  right: calc(14px + var(--safe-right));
  bottom: calc(14px + var(--safe-bottom));
  left: calc(14px + var(--safe-left));
  padding: 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(16,18,20,.48);
  box-shadow: 0 12px 34px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.photo-capture-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
}

.photo-capture-actions > button {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 11px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-weight: 800;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.photo-capture-actions > #usePhoto { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.07)); }

.processing-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 15px;
  padding: 24px;
  background: rgba(6, 10, 15, 0.88);
}

.spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 750ms linear infinite;
}

.toast {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: calc(96px + var(--safe-bottom));
  left: 18px;
  max-width: 420px;
  margin: 0 auto;
  padding: 13px 16px;
  transform: translateY(18px);
  border: 1px solid var(--line-bright);
  border-radius: 13px;
  background: var(--surface-raised);
  box-shadow: 0 16px 40px var(--shadow);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 750;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@keyframes sheet-in {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .app-shell {
    width: 100%;
    border: 0;
    box-shadow: none;
  }

  .bottom-nav {
    right: 0;
    left: 0;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .photo-review-dialog {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
  }
  .photo-review-shell {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
  }
  .app-shell { width: 100%; max-width: none; border: 0; box-shadow: none; }
  .bottom-nav { right: 0; left: 0; min-height: calc(64px + var(--safe-bottom)); }
  .main-content { padding-bottom: calc(78px + var(--safe-bottom)); }
  .view { padding-top: 18px; }
  .project-detail-heading { grid-template-columns: auto minmax(0,1fr); align-items: end; column-gap: 14px; }
  .project-detail-heading h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
  .project-detail-heading > p:last-child { grid-column: 2; }
  .photo-review-overlay {
    right: calc(12px + var(--safe-right));
    bottom: calc(10px + var(--safe-bottom));
    left: calc(12px + var(--safe-left));
    width: auto;
    min-height: 64px;
    padding: 8px 9px 8px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-radius: 15px;
    background: rgba(13, 17, 20, .42);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
  .photo-review-overlay .photo-details {
    min-width: 0;
    padding: 0;
    gap: 1px;
  }
  .photo-review-overlay .photo-details strong,
  .photo-review-overlay .photo-details span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .photo-review-overlay .photo-details strong { font-size: .9rem; }
  .photo-review-overlay .photo-details span { font-size: .72rem; }
  .photo-review-overlay .photo-capture-actions {
    display: flex;
    gap: 7px;
  }
  .photo-review-overlay .photo-capture-actions > button {
    width: auto;
    min-width: 118px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: .82rem;
  }
  .preview-stage {
    padding: 0;
  }
  .preview-stage img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .review-header {
    top: calc(8px + var(--safe-top));
    right: auto;
    left: calc(10px + var(--safe-left));
    width: auto;
    grid-template-columns: 42px auto;
    padding: 0;
    border-radius: 999px;
    background: rgba(13, 17, 20, .38);
  }
  .review-header > div { display: none; }
  .review-header > span { display: none; }
  .review-header > button { width: 42px; height: 42px; }
  .photo-submit-dock { right: calc(22px + var(--safe-right)); left: auto; width: min(460px, 48vw); bottom: calc(72px + var(--safe-bottom)); }
}

@media (max-width: 420px) {
  .calendar-view {
    padding-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right));
  }

  .calendar-weekdays,
  .calendar-week-row {
    grid-template-columns: 28px repeat(7, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .view {
    padding-inline: calc(15px + var(--safe-left));
  }

  .topbar {
    padding-inline: calc(15px + var(--safe-left));
  }

  .project-card {
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    gap: 10px;
    padding-inline: 2px;
  }

  .timer-actions.two {
    grid-template-columns: 1fr;
  }

  .calendar-weekdays,
  .calendar-week-row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
  }

  .calendar-weekdays > span:first-child,
  .calendar-week-number {
    display: none;
  }

  .calendar-month-toolbar {
    grid-template-columns: 44px max-content minmax(58px, 1fr) 44px;
  }

  .calendar-month-toolbar button {
    min-width: 44px;
  }

  .calendar-month-toolbar strong {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}