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

@layer km-base {
  button {
    padding: var(--km-space-md) var(--km-space-md);
    min-height: var(--km-control-min-height);
    font-weight: var(--km-weight-medium);
    cursor: pointer;
  }

  .control {
    min-height: var(--km-control-min-height);
    padding: var(--km-space-md);
    border-radius: var(--km-radius-control);
    font-size: var(--km-font-body);
    line-height: 1.45;
    font-weight: var(--km-weight-medium);
  }

  .danger-control {
    border: 1px solid var(--km-color-state-red-border);
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
  }

  .wide {
    width: 100%;
  }

  /* Width and spacing are separate responsibilities. Use only where a
     standalone action explicitly needs 12px before it. */
  .action-space-before {
    margin-top: var(--km-space-md);
  }

  .hidden {
    display: none;
  }

  /* Semantic typography: role-based and shared across pages. */
  .page-title,
  .app-page-title,
  .settings-page-title {
    margin: var(--km-page-title-top) var(--km-page-title-side) var(--km-page-title-bottom);
    font-size: var(--km-font-page);
    line-height: 1.4;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  .section-title {
    margin: 0;
    font-size: var(--km-font-section);
    line-height: 1.55;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  /* Heading spacing is opt-in at the parent level.
     Stack parents continue to own spacing through gap. */
  .heading-gap-md > .section-title {
    margin-bottom: var(--km-space-md);
  }

  .heading-gap-sm > .section-title {
    margin-bottom: var(--km-space-sm);
  }

  .body-text {
    font-size: var(--km-font-body);
    line-height: 1.75;
    color: var(--km-color-body);
  }

  /* Shared vertical rhythm primitives. Parent gap owns ordinary spacing. */
  .stack-small:not(.hidden):not([hidden]),
  .stack:not(.hidden):not([hidden]),
  .stack-card:not(.hidden):not([hidden]),
  .stack-section:not(.hidden):not([hidden]) {
    display: flex;
    flex-direction: column;
  }
  .stack-small { gap: var(--km-space-xs); }
  .stack { gap: var(--km-space-sm); }
  .stack-card { gap: var(--km-space-md); }
  .stack-section { gap: var(--km-space-lg); }

  /* Navigation card shared by settings root and accordion headings. */
  .nav-card {
    width: 100%;
    margin: 0;
    padding: var(--km-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    background: var(--km-color-card);
    color: var(--km-color-title);
    box-shadow: var(--km-shadow-card);
    text-align: left;
    font-size: var(--km-font-section);
    line-height: 1.5;
    font-weight: var(--km-weight-semibold);
    cursor: pointer;
    box-sizing: border-box;
  }

  .nav-card__indicator {
    flex: 0 0 auto;
    color: var(--km-color-muted);
    font-size: 20px;
    line-height: 1;
    font-weight: var(--km-weight-regular);
  }

  label {
    display: block;
    margin: 0;
    font-weight: var(--km-weight-medium);
    font-size: var(--km-font-body);
    line-height: 1.6;
    color: var(--km-color-body);
  }

  /* Field spacing is opt-in at the parent level; generic labels stay margin-free. */
  .field-flow > label {
    margin: 0 0 var(--km-space-sm);
  }

  .field-flow > label:not(:first-child) {
    margin-top: var(--km-space-md);
  }

  input,textarea,select {
    width: 100%;
    padding: var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    font: inherit;
    background: var(--km-color-card);
  }

  textarea {
    min-height: var(--km-textarea-min-height);
    resize: none;
  }

  .meta-text,
  .muted {
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
  }

  .secondary-btn {
    border: 1px solid var(--km-color-border);
    background: var(--km-color-card);
    color: var(--km-color-body);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-sm) var(--km-space-md);
    font-weight: var(--km-weight-medium);
    cursor: pointer;
  }

  .danger-outline {
    background: var(--km-color-card);
    color: var(--km-color-danger);
    border: 1px solid var(--km-color-state-red-border);
  }

  /* Bottom navigation: one component owns position, geometry and typography. */
  .bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    isolation: isolate;
    display: block;
    min-height: var(--km-bottom-nav-height);
    overflow: visible;
    padding: 0 0 env(safe-area-inset-bottom,0);
    background: var(--km-color-card);
    border-top-color: var(--km-color-border);
    box-shadow: var(--km-shadow-nav);
  }

  .bottom-nav-inner {
    width: 100%;
    max-width: var(--km-app-max-width);
    min-height: var(--km-bottom-nav-height);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    align-items: stretch;
  }

  .bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--km-space-xs);
    min-width: 0;
    min-height: var(--km-bottom-nav-height);
    padding: var(--km-space-sm) var(--km-space-xs);
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
    line-height: 1.35;
    font-weight: var(--km-weight-regular);
  }

  .bottom-nav button.active {
    color: var(--km-color-accent);
    font-weight: var(--km-weight-medium);
  }

  .bottom-nav .nav-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: var(--km-font-section);
    line-height: 1;
    visibility: visible;
    opacity: 1;
  }

  .bottom-nav .nav-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: visible;
    opacity: 1;
  }

  .bottom-nav .nav-label {
    display: block;
    width: 100%;
    min-height: 14px;
    text-align: center;
    white-space: nowrap;
    visibility: visible;
    opacity: 1;
    color: inherit;
    font-size: var(--km-font-meta);
    line-height: 1.26;
    font-weight: inherit;
  }

  [data-km-modal][hidden] {
    display: none;
  }

  .app-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-md);
    box-sizing: border-box;
  }

  .app-delete-backdrop {
    position: absolute;
    inset: 0;
    background: var(--km-color-overlay-strong);
  }

  .km-dialog {
    width: min(var(--km-dialog-max,var(--km-dialog-width-medium)),100%);
    padding: var(--km-space-md);
    box-sizing: border-box;
  }

  .km-dialog--medium { --km-dialog-max: var(--km-dialog-width-medium); }
  .km-dialog--large { --km-dialog-max: var(--km-dialog-width-large); }
  .km-dialog--wide { --km-dialog-max: var(--km-dialog-width-wide); }

  @media (max-width:600px) {
    .km-dialog {
      width: 100%;
      max-width: none;
    }
  }

  .app-delete-dialog {
    position: relative;
    z-index: 1;
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    box-shadow: var(--km-shadow-dialog);
    box-sizing: border-box;
  }

  .app-delete-dialog h3 {
    margin: 0 0 var(--km-space-sm);
    font-size: var(--km-font-section);
    line-height: 1.55;
    color: var(--km-color-title);
  }

  .app-delete-dialog p {
    margin: 0;
    color: var(--km-color-muted);
    font-size: var(--km-font-body);
    line-height: 1.7;
    white-space: pre-line;
  }

  .app-delete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--km-space-sm);
    margin-top: var(--km-space-md);
  }

  .app-delete-actions.single {
    grid-template-columns: 1fr;
  }

  .app-delete-actions button {
    min-height: var(--km-control-height);
    border-radius: var(--km-radius-control);
    font-weight: var(--km-weight-semibold);
  }

  .app-delete-confirm-btn {
    border: 1px solid var(--km-color-accent);
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
  }

  .app-delete-confirm-btn:active {
    transform: translateY(1px);
  }

  button {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-body);
    box-shadow: none;
  }

  .wide:not(.secondary-btn):not(.danger-outline):not(.danger-control),
  .primary-btn,
  #loginSubmitBtn,
  #signupSubmitBtn,
  #forgotSubmitBtn {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .secondary-btn,
  .mini-btn:not(.danger-mini),
  .plan-add-btn,
  .trend-control-btn,
  .inquiry-switch-btn {
    background: var(--km-color-card);
    border-color: var(--km-color-border);
    border-radius: var(--km-radius-control);
  }

  .settings-back-btn,.auth-link,.settings-default-reset {
    background: transparent;
    border: 0;
    color: var(--km-color-accent);
    box-shadow: none;
  }

  .danger-outline,
  .danger-text-btn,
  .app-delete-confirm-btn {
    border-color: var(--km-color-state-red-border);
  }

  #deleteConfirmModal {
    z-index: 10200;
  }

  #deleteNoticeModal {
    z-index: 10210;
  }

  .billing-return-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    background: var(--km-color-bg-soft);
    color: var(--km-color-title);
    padding: var(--km-space-lg);
  }

  html.billing-return-boot body.auth-pending #authGate {
    display: none;
  }

  html.billing-return-boot body.auth-pending #billingReturnGate {
    display: flex;
  }

  html.billing-return-boot body.auth-signed-in #billingReturnGate,
  html.billing-return-boot body.auth-signed-out #billingReturnGate {
    display: none;
  }

  .billing-return-gate-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--km-space-md);
    font-weight: var(--km-weight-semibold);
    text-align: center;
  }

  .billing-return-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--km-color-border);
    border-top-color: var(--km-color-accent);
    border-radius: var(--km-radius-circle);
    animation: billingTransitionSpin .75s linear infinite;
  }

  .billing-transition-mask {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--km-color-bg-soft);
    color: var(--km-color-title);
    padding: var(--km-space-lg);
  }

  .billing-transition-mask[hidden] {
    display: none;
  }

  .billing-transition-mask-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--km-space-md);
    font-weight: var(--km-weight-semibold);
    text-align: center;
  }

  .billing-transition-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--km-color-border);
    border-top-color: var(--km-color-accent);
    border-radius: var(--km-radius-circle);
    animation: billingTransitionSpin .75s linear infinite;
  }

  .state {
    display: inline-block;
    padding: var(--km-space-sm) var(--km-space-md);
    border-radius: var(--km-radius-pill);
    font-weight: var(--km-weight-semibold);
    margin: var(--km-space-sm) 0 var(--km-space-xs);
  }

  .green {
    background: var(--km-color-state-green-soft);
  }

  .yellow {
    background: var(--km-color-state-yellow-soft);
  }

  .orange {
    background: var(--km-color-state-red-soft);
  }

  .range-row {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
  }

  .range-row input {
    padding: 0;
    border: 0;
  }

  .score {
    width: 32px;
    text-align: center;
    font-weight: var(--km-weight-semibold);
  }

  .plan-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
    padding-bottom: var(--km-space-xs);
  }

  .plan {
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
    min-height: 310px;
    width: 100%;
  }

  .plan h3 {
    margin: 0;
  }

  .plan small {
    color: var(--km-color-muted);
  }

  .plan textarea {
    min-height: 62px;
    background: var(--km-color-card-translucent);
  }

  .goal {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
    margin: var(--km-space-md) 0;
  }

  .goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }

  .short-goal {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-sm);
    margin: 0;
  }

  .goal strong {
    display: block;
    margin-bottom: var(--km-space-sm);
  }

  .history-item {
    padding: var(--km-space-md) 0;
    border-bottom: 1px solid var(--km-color-border);
  }

  .fill {
    height: 100%;
    border-radius: var(--km-radius-pill);
  }

  canvas {
    width: 100%;
    height: 230px;
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
  }

  .goal-input {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  @media print {
    .state-item {
      display: flex;
      gap: var(--km-space-sm);
    }

    .state-item textarea {
      flex: 1;
    }

    .goal-input {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    @page {size:A4 portrait;margin: 12mm}
  }

  .state-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) var(--km-action-side-width);
    gap: var(--km-space-sm);
    align-items: center;
    margin-top: var(--km-space-sm);
    width: 100%;
  }

  .state-item input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--km-control-min-height);
    padding: var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    font: inherit;
    background: var(--km-color-card);
  }

  .state-item 
  .remove-text-btn {
    width: var(--km-action-side-width);
    height: var(--km-control-compact-height);
    padding: 0;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-body);
    font-size: var(--km-font-meta);
    cursor: pointer;
  }

  .remove-btn {
    width: var(--km-record-nav-size);
    height: var(--km-control-compact-height);
    padding: 0;
    font-size: 20px;
    line-height: var(--km-control-compact-height);
    cursor: pointer;
  }

  .state-item .remove-spacer {
    width: var(--km-action-side-width);
    height: var(--km-control-compact-height);
    visibility: hidden;
    pointer-events: none;
  }

  .calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--km-space-sm) 0 var(--km-space-md);
  }

  .calendar-nav {
    width: var(--km-icon-control-size);
    height: var(--km-icon-control-size);
    padding: 0;
    border-radius: var(--km-radius-control);
  }

  .calendar-week,.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: var(--km-space-xs);
  }

  .calendar-week {
    margin-bottom: var(--km-space-sm);
    text-align: center;
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
  }

  .calendar-cell {
    min-height: var(--km-calendar-cell-min-height);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-xs);
    background: var(--km-color-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--km-space-xs);
    color: inherit;
  }

  .calendar-cell.empty {
    border-color: transparent;
    background: transparent;
  }

  .calendar-cell.has-record {
    cursor: pointer;
  }

  .calendar-day {
    font-size: var(--km-font-meta);
    line-height: 1;
  }

  .calendar-face {
    width: var(--km-face-sm);
    height: var(--km-face-sm);
  }

  .record-detail-head {
    display: flex;
    justify-content: space-between;
    gap: var(--km-space-md);
    align-items: flex-start;
  }

  .record-detail-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
  }

  .record-detail-state {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
  }

  #detailFace {
    width: var(--km-face-md);
    height: var(--km-face-md);
    min-width: var(--km-face-md);
    flex: 0 0 var(--km-face-md);
    background: transparent;
    border-radius: 0;
  }

  .detail-metrics>div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--km-color-border);
  }

  .detail-note p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .detail-actions {
    display: flex;
  }

  .detail-actions button {
    flex: 1;
  }

  @media (max-width:520px) {
    .calendar-cell {
      min-height: var(--km-calendar-cell-mobile-min-height);
      padding: var(--km-space-xs);
    }

    .calendar-face {
      width: var(--km-face-sm);
      height: var(--km-face-sm);
    }

  }

  .calendar-title-btn {
    background: transparent;
    color: var(--km-color-title);
    padding: var(--km-space-sm) var(--km-space-sm);
    border-radius: var(--km-radius-control);
    font-weight: var(--km-weight-medium);
    width: auto;
    min-width: 120px;
  }

  .calendar-title-btn:hover {
    background: var(--km-color-bg-soft);
  }

  .calendar-empty-recordable {
    cursor: pointer;
    background: var(--km-color-card);
  }

  .calendar-empty-recordable:hover {
    background: var(--km-color-bg-soft);
  }

  .calendar-add-mark {
    font-size: var(--km-font-section);
    line-height: 1;
    color: var(--km-color-muted);
    font-weight: var(--km-weight-regular);
    margin-top: var(--km-space-xs);
  }

  .context-help {
    margin: 0 0 var(--km-space-sm);
  }

  .context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-space-sm);
  }

  .context-chip {
    background: var(--km-color-card);
    color: var(--km-color-body);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-pill);
    padding: var(--km-space-sm) var(--km-space-md);
    font-weight: var(--km-weight-medium);
  }

  .context-chip.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .item-settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
    margin-top: var(--km-space-md);
  }

  .item-setting-row {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
  }

  .item-setting-main {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    min-width: 0;
  }


  .item-setting-row.dragging {
    opacity: .55;
    box-shadow: var(--km-shadow-soft);
  }

  .item-setting-actions {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    flex-wrap: wrap;
    margin-top: var(--km-space-sm);
  }

  .mini-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-sm);
    margin: 0 var(--km-space-xs) 0 0;
    font-weight: var(--km-weight-medium);
  }

  .mini-toggle input {
    width: auto;
    margin: 0;
  }

  .mini-btn {
    padding: var(--km-space-xs) var(--km-space-xs);
    border-radius: var(--km-radius-control);
    font-size: var(--km-font-meta);
  }

  .mini-btn:disabled {
    opacity: .35;
    cursor: default;
  }

  .danger-mini {
    color: var(--km-color-danger);
    background: var(--km-color-danger-soft);
    border-color: var(--km-color-state-red-border);
  }

  .danger-mini:hover {
    background: var(--km-color-state-red-soft);
  }

  .settings-add-trigger {
    margin-top: var(--km-space-md);
  }

  .detail-context-chips {
    display: flex;
    flex-wrap: wrap;
  }

  .detail-context-chip {
    display: inline-block;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-pill);
    background: var(--km-color-bg-soft);
  }

  @media (max-width:520px) {
    .item-setting-actions {
      gap: var(--km-space-xs);
    }

    .mini-btn {
      padding: var(--km-space-sm) var(--km-space-sm);
    }
  }

  .trend-mode-title {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--km-color-title);
    text-align: left;
    font-size: var(--km-font-section);
    font-weight: var(--km-weight-semibold);
    line-height: 1.55;
    cursor: pointer;
  }

  .trend-mode-title:hover {
    background: transparent;
    color: var(--km-color-body);
  }

  .trend-selectors {
    margin: 0;
  }

  .trend-select-wrap:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  .trend-context-select-wrap:not(.hidden) {
    gap: var(--km-space-md);
  }

  .trend-select-wrap label {
    margin: 0;
  }

  .trend-select-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--km-space-sm);
  }

  .trend-chart-message {
    padding: var(--km-space-md) var(--km-space-sm);
    text-align: center;
  }

  .context-legend-filters {
    display: flex;
    gap: var(--km-space-sm);
    flex-wrap: wrap;
    margin: 0;
  }

  .context-filter-btn {
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-medium);
  }

  .trend-key {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-sm);
  }

  .trend-key-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--km-radius-circle);
    border: 2px solid var(--km-color-muted);
    display: inline-block;
  }

  #chart2 {
    height: 280px;
  }

  .trend-analysis-card canvas {
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
  }

  .trend-analysis-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--km-space-md);
  }

  .trend-analysis-card > .trend-analysis-head {
    margin-bottom: var(--km-space-sm);
  }

  .trend-analysis-card > .trend-selectors:not(.hidden) {
    margin-bottom: var(--km-space-md);
  }

  .trend-selectors select {
    background: var(--km-color-card);
  }

  @media (max-width:520px) {
    #chart2 {
      height: 260px;
    }
  }

  #recordDetailModal .detail-metric-label>span {
    flex: 0 0 auto;
  }

  #recordDetailModal .detail-metric-label small {
    display: inline;
    margin: 0;
    white-space: normal;
  }

  .calendar-nav,.calendar-title-btn,.year-month-nav,.year-month-title-btn,.app-date-nav,.app-date-title {
    background: var(--km-color-card);
    color: var(--km-color-accent);
    border-color: var(--km-color-border);
  }

  .calendar-cell,.app-date-cell,.year-month-btn,.app-date-month-btn,.app-date-year-btn {
    border-color: var(--km-color-border);
    color: var(--km-color-title);
  }

  .year-month-btn.selected,.app-date-cell.selected,.app-date-month-btn.selected,.app-date-year-btn.selected {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .app-date-cell.today {
    box-shadow: inset 0 0 0 1px var(--km-color-primary);
  }

  .app-date-cell:disabled,.year-month-btn:disabled,.app-date-month-btn:disabled {
    opacity: .58;
  }

  @media (max-width:600px) {
    #recordDetailModal .detail-metric-label {
      flex-wrap: nowrap;
    }

    #recordDetailModal .detail-metric-label small {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .trend-context-select-grid {
    align-items: end;
  }

  .trend-context-select-field label {
    display: block;
    margin: 0;
  }

  .trend-context-select-field select {
    width: 100%;
  }

  .context-filter-btn {
    background: var(--km-color-card);
    color: var(--km-color-title);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-sm) var(--km-space-md);
  }

  .context-filter-btn.selected {
    background: var(--km-blue-soft-strong);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .trend-key-dot {
    background: var(--km-color-chart-accent);
    border-color: var(--km-color-chart-accent);
  }

  .trend-key-dot.hollow {
    background: var(--km-color-card);
    border-color: var(--km-color-chart-accent);
  }

  .detail-metric-label {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-xs);
    min-width: 0;
    padding-right: var(--km-space-md);
  }

  .detail-metric-label small {
    font-size: var(--km-font-meta);
    line-height: 1.35;
    color: var(--km-color-muted);
    font-weight: var(--km-weight-medium);
    overflow-wrap: anywhere;
  }

  @media (max-width:600px) {
    #planEvaluationFields .plan-eval-option,
      #historyEvaluationFields .plan-eval-option {
      margin: 0;
    }
  }

  .range-row input[type="range"] {
    accent-color: var(--km-color-body);
  }

  .range-row input[type="range"]::-webkit-slider-runnable-track {
    background: var(--km-color-value-track);
    border-radius: var(--km-radius-pill);
  }

  .range-row input[type="range"]::-moz-range-track {
    background: var(--km-color-value-track);
    border-radius: var(--km-radius-pill);
  }

  .range-row input[type="range"]::-moz-range-progress {
    background: var(--km-color-body);
    border-radius: var(--km-radius-pill);
  }

  .remove-text-btn {
    width: var(--km-action-side-width);
    height: var(--km-control-compact-height);
    min-width: var(--km-action-side-width);
    padding: 0;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
    cursor: pointer;
    text-align: center;
  }

  .remove-text-btn:hover {
    background: var(--km-color-bg-soft);
  }

  .remove-spacer {
    width: var(--km-action-side-width);
    height: var(--km-control-compact-height);
    visibility: hidden;
    pointer-events: none;
  }

  .plan-mode-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--km-space-md);
    margin: var(--km-page-title-top) var(--km-page-title-side) var(--km-page-title-bottom);
  }

  #plan .plan-mode-bar h2 {
    margin: 0;
  }

  .plan-view-mode,
  .plan-edit-mode,
  .plan-evaluation-mode,
  .plan-history-mode {
    flex-direction: column;
  }

  .plan-view-mode[hidden],
  .plan-edit-mode[hidden],
  .plan-evaluation-mode[hidden],
  .plan-history-mode[hidden] {
    display: none;
  }

  .plan-edit-top {
    margin: 0;
  }

  .plan-view-card,
  .plan-state-view-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    background: var(--km-color-card);
    padding: var(--km-space-md);
    margin: 0;
  }

  .plan-view-card h3,
  .plan-state-view-card h3 {
    margin: 0 0 var(--km-space-sm);
  }

  .plan-view-text {
    white-space: pre-wrap;
    line-height: 1.7;
  }

  .plan-long-goal-row,
  .plan-short-goal-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--km-space-md);
  }

  .plan-short-goal-row {
    padding: 0;
    border: 0;
  }

  .plan-short-goal-row + .plan-short-goal-row {
    padding-top: var(--km-space-sm);
    border-top: 1px solid var(--km-color-border);
  }

  .plan-state-head {
    display: flex;
    gap: var(--km-space-sm);
    margin-bottom: var(--km-space-md);
  }

  .plan-view-section {
    margin-top: var(--km-space-md);
  }

  .plan-view-label {
    font-weight: var(--km-weight-semibold);
    margin-bottom: var(--km-space-sm);
  }

  .plan-view-list {
    margin: 0;
    padding-left: 1.3em;
    line-height: 1.7;
  }

  .plan-current-state {
    margin: 0;
    flex: 0 0 auto;
  }

  .plan-current-state .current-box {
    min-height: var(--km-control-min-height);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-sm) var(--km-space-sm);
    border: 1px solid var(--km-color-border);
    background: var(--km-color-bg-soft);
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-semibold);
    white-space: nowrap;
  }

  @media (max-width:600px) {
    .plan-mode-bar {
      align-items: center;
    }

    .plan-short-goal-row {
      flex-direction: column;
      gap: var(--km-space-xs);
    }
  }

  #planEditMode input,
  #planEditMode textarea {
    pointer-events: auto;
    user-select: text;
  }

  #planEditMode #longGoal,
  #planEditMode .short-goal input {
    position: relative;
    z-index: 2;
    background: var(--km-color-card);
  }

  .plan-long-goal-row {
    min-width: 0;
  }

  .plan-long-goal-row #viewLongGoal {
    flex: 1 1 auto;
    min-width: 0;
  }

  .plan-long-goal-row #viewLongDeadline {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
  }

  @media (max-width:600px) {
    .plan-long-goal-row {
      flex-direction: column;
      gap: var(--km-space-xs);
    }

    .plan-long-goal-row #viewLongDeadline {
      text-align: left;
    }
  }

  #planEditMode .plan-add-btn {
    appearance: none;
    border: 1px solid var(--km-color-border);
    background: var(--km-color-card);
    color: var(--km-color-title);
    border-radius: var(--km-radius-control);
    padding: 0 var(--km-space-md);
    min-height: var(--km-control-height);
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--km-space-xs);
    margin: 0;
  }

  #planEditMode .plan-add-btn:hover {
    background: var(--km-color-bg-soft);
  }

  #planEditMode .state-list + .plan-add-btn {
    margin-top: var(--km-space-sm);
  }

  #planEditMode .plan-delete-btn {
    appearance: none;
    border: 1px solid var(--km-color-state-red-border);
    background: var(--km-color-card);
    color: var(--km-color-danger);
    border-radius: var(--km-radius-control);
    padding: var(--km-action-padding-y) var(--km-action-padding-x);
    min-height: var(--km-control-min-height);
    width: auto;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    line-height: 1.45;
    cursor: pointer;
    flex: 0 0 auto;
  }

  #planEditMode .plan-delete-btn:hover {
    background: var(--km-color-danger-soft);
  }

  #planEditMode .remove-spacer {
    display: inline-flex;
    align-items: center;
    padding: var(--km-action-padding-y) var(--km-action-padding-x);
    min-height: var(--km-control-min-height);
    width: auto;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    line-height: 1.45;
    visibility: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  #planEditMode .remove-spacer::before {
    content: "削除";
  }

  #planEditMode .short-goal {
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  #planEditMode .short-goal + .short-goal {
    padding-top: 0;
    border-top: 0;
  }

  #planEditMode .goal-head > label {
    display: block;
    padding: 0;
    font-size: var(--km-font-section);
    line-height: 1.55;
    font-weight: var(--km-weight-medium);
    color: var(--km-color-title);
  }

  #planEditMode .short-goal label,
  #planEditMode .plan-goal-group > label {
    display: block;
    padding: 0;
    font-size: var(--km-font-body);
    line-height: 1.6;
    font-weight: var(--km-weight-medium);
    color: var(--km-color-body);
  }

  #planEditMode .goal-section {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
  }

  #planEditMode .goal-field {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #planEditMode #shortGoals {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
  }

  /* The 44px add button makes the heading row taller than its 18px label.
     The row itself supplies the visual breathing room, so no extra stack gap is added here. */
  #planEditMode .short-goal-section {
    gap: 0;
  }

  #planEditMode .goal-head--single {
    justify-content: flex-start;
  }

  #planEditMode .short-goal input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--km-control-height);
    box-sizing: border-box;
  }

  #planEditMode .state-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: var(--km-space-sm);
    align-items: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  #planEditMode .state-item input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--km-control-height);
    padding: var(--km-space-md);
    box-sizing: border-box;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    font: inherit;
    background: var(--km-color-card);
  }

  #planEditMode .state-item .plan-delete-btn,
  #planEditMode .state-item .remove-spacer {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: var(--km-control-min-height);
    box-sizing: border-box;
    margin: 0;
  }

  .plan-state-face {
    width: var(--km-face-md);
    height: var(--km-face-md);
    flex: 0 0 var(--km-face-md);
    display: block;
  }

  .plan-state-head {
    align-items: center;
  }

  .current-state-box {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
  }

  .current-state-face {
    width: var(--km-face-sm);
    height: var(--km-face-sm);
    flex: 0 0 var(--km-face-sm);
    display: block;
  }

  .edit-state-title {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
  }

  /* Plan state edit cards use explicit semantic rhythm instead of inherited child margins. */
  #planEditMode .plan-state-edit-card {
    display: flex;
    flex-direction: column;
  }

  #planEditMode .plan-state-edit-card > .plan-add-btn {
    align-self: flex-start;
  }

  #planEditMode .plan-state-edit-card > .edit-state-title {
    margin: 0 0 var(--km-space-xs);
  }

  #planEditMode .plan-state-edit-card > small {
    display: block;
    margin: 0 0 var(--km-space-md);
  }

  #planEditMode .plan-state-edit-card > label {
    margin: 0 0 var(--km-space-sm);
  }

  #planEditMode .plan-state-edit-card > .plan-add-btn + label {
    margin-top: var(--km-space-md);
  }

  #planEditMode .plan-state-edit-card > .state-list {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  .edit-state-face {
    width: var(--km-face-md);
    height: var(--km-face-md);
    flex: 0 0 var(--km-face-md);
    display: block;
  }

  .state-tone-green,
  .state-tone-yellow,
  .state-tone-orange {
    border-left-width: 4px;
    border-left-style: solid;
  }

  .state-tone-green {
    background: var(--state-green-soft);
    border-left-color: var(--state-green);
  }

  .state-tone-yellow {
    background: var(--state-yellow-soft);
    border-left-color: var(--state-yellow);
  }

  .state-tone-orange {
    background: var(--state-orange-soft);
    border-left-color: var(--state-orange);
  }

  .plan-state-view-card {
    border-top: 1px solid var(--km-color-border);
    border-right: 1px solid var(--km-color-border);
    border-bottom: 1px solid var(--km-color-border);
  }

  .plan-state-view-card.state-tone-green {
    border-color: var(--state-green-border);
    border-left-color: var(--state-green);
  }

  .plan-state-view-card.state-tone-yellow {
    border-color: var(--state-yellow-border);
    border-left-color: var(--state-yellow);
  }

  .plan-state-view-card.state-tone-orange {
    border-color: var(--state-orange-border);
    border-left-color: var(--state-orange);
  }

  #planEditMode .plan.state-tone-green {
    background: var(--state-green-soft);
    border-color: var(--state-green-border);
    border-left-color: var(--state-green);
  }

  #planEditMode .plan.state-tone-yellow {
    background: var(--state-yellow-soft);
    border-color: var(--state-yellow-border);
    border-left-color: var(--state-yellow);
  }

  #planEditMode .plan.state-tone-orange {
    background: var(--state-orange-soft);
    border-color: var(--state-orange-border);
    border-left-color: var(--state-orange);
  }

  #homeState,
  .current-state-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border-radius: var(--km-radius-pill);
    font-weight: var(--km-weight-semibold);
  }

  .current-state-box {
    padding: var(--km-space-sm);
    border-left-width: 1px;
  }

  .current-state-box.state-tone-green {
    background: var(--state-green-soft);
    border: 1px solid var(--state-green-border);
  }

  .current-state-box.state-tone-yellow {
    background: var(--state-yellow-soft);
    border: 1px solid var(--state-yellow-border);
  }

  .current-state-box.state-tone-orange {
    background: var(--state-orange-soft);
    border: 1px solid var(--state-orange-border);
  }

  #trendChartScroller {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--km-radius-control);
  }

  #trendChartScroller #chart2 {
    display: block;
    max-width: none;
    min-width: 100%;
    flex: none;
  }

  #trendChartScroller {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-y;
  }

  #trendChartScroller::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  #trendChartScroller.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  #trendChartScroller #chart2 {
    touch-action: pan-y;
  }

  body.record-modal-open {
    overflow: hidden;
  }

  .record-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-md);
    background: var(--km-color-overlay-strong);
  }

  #recordDetail.record-detail-dialog {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: var(--km-radius-card);
    background: var(--km-color-card);
    box-shadow: var(--km-shadow-dialog);
  }

  .record-detail-nav {
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto var(--km-record-nav-size);
    align-items: center;
    gap: var(--km-space-sm);
    background: var(--km-color-card);
    border-bottom: 1px solid var(--km-color-border);
  }

  .record-detail-nav button {
    margin: 0;
  }

  .record-day-nav,.record-date-button,.record-modal-close {
    min-height: var(--km-control-compact-height);
    padding: var(--km-space-sm) var(--km-space-sm);
    border: 0;
    background: transparent;
    color: var(--km-color-title);
    box-shadow: none;
  }

  .record-date-button {
    font-weight: var(--km-weight-medium);
    text-align: center;
  }

  .record-modal-close {
    width: var(--km-record-nav-size);
    padding: 0;
  }

  .record-detail-date-picker {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width:520px) {
    #recordDetail.record-detail-dialog {
      max-height: 88vh;
    }

    .record-detail-nav {
      top: -16px;
      grid-template-columns: auto 1fr auto var(--km-record-nav-size);
    }

    .record-day-nav {
      padding: var(--km-space-sm) var(--km-space-xs);
    }
  }

  #recordDetail.record-detail-dialog {
    max-height: none;
    overflow: visible;
  }

  .record-detail-nav {
    position: relative;
    top: auto;
    margin: calc(-1 * var(--km-space-md)) calc(-1 * var(--km-space-md)) var(--km-space-sm);
    padding: var(--km-space-sm) var(--km-space-sm) var(--km-space-sm);
  }

  .record-detail-head {
    margin-bottom: var(--km-space-sm);
  }

  .record-detail-state {
    margin-top: var(--km-space-xs);
  }

  .detail-metrics {
    margin: var(--km-space-sm) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--km-space-md);
  }

  .detail-metrics>div {
    padding: var(--km-space-sm) 0;
    font-size: var(--km-font-body);
  }

  .detail-context {
    margin: var(--km-space-sm) 0;
  }

  .detail-context-chips {
    gap: var(--km-space-xs);
    margin-top: var(--km-space-xs);
  }

  .detail-context-chip {
    padding: var(--km-space-xs) var(--km-space-xs);
    font-size: var(--km-font-meta);
  }

  .detail-note {
    margin: var(--km-space-sm) 0;
  }

  .detail-note p {
    margin: var(--km-space-xs) 0 0;
    font-size: var(--km-font-body);
    line-height: 1.45;
  }

  .detail-empty {
    color: var(--km-color-muted);
    font-size: var(--km-font-body);
    line-height: 1.75;
    font-weight: var(--km-weight-regular);
  }

  .detail-note > .detail-empty {
    display: block;
    margin-top: var(--km-space-xs);
  }

  .detail-actions {
    gap: var(--km-space-sm);
  }

  .detail-actions button {
    padding: var(--km-space-sm) var(--km-space-sm);
  }

  .record-empty-detail {
    padding: var(--km-space-xs) 0 0;
  }

  @media (max-width:520px) {
    .record-detail-modal {
      align-items: center;
      padding: var(--km-space-md);
    }

    #recordDetail.record-detail-dialog {
      border-radius: var(--km-radius-card);
    }

    .record-detail-nav {
      margin: calc(-1 * var(--km-space-md)) calc(-1 * var(--km-space-md)) var(--km-space-sm);
      padding: var(--km-space-sm) var(--km-space-sm) var(--km-space-sm);
    }

    .detail-metrics {
      grid-template-columns: 1fr 1fr;
      column-gap: var(--km-space-sm);
    }

    .detail-metrics>div {
      padding: var(--km-space-xs) 0;
      font-size: var(--km-font-meta);
    }

    .detail-actions {
      flex-direction: row;
    }
  }

  #plan .plan-mode-bar {
    display: block;
    margin: var(--km-page-title-top) var(--km-page-title-side) 0;
  }

  #plan .plan-header-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--km-space-sm);
    margin-top: var(--km-space-md);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #plan .plan-command-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--km-space-sm);
    margin-left: auto;
  }

  #plan .plan-header-actions .secondary-btn {
    white-space: nowrap;
  }

  #plan .plan-history-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--km-color-border);
    background: var(--km-color-card);
    padding: var(--km-space-md) var(--km-space-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-md);
    text-align: left;
    color: var(--km-color-title);
  }

  #plan .plan-history-row:last-child {
    border-bottom: 0;
  }

  #plan .plan-history-row span:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-xs);
  }

  #plan .plan-history-row small {
    color: var(--km-color-muted);
    font-weight: var(--km-weight-regular);
  }

  #plan .plan-history-detail-top {
    margin: 0;
  }

  #plan .plan-history-detail-card {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
  }

  #plan .plan-history-detail-meta {
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
    padding: 0;
    margin: 0;
  }

  #plan .danger-text-btn {
    width: 100%;
    border: 1px solid var(--km-color-state-red-border);
    background: var(--km-color-card);
    color: var(--km-color-danger);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-md);
    font-weight: var(--km-weight-semibold);
  }

  @media (max-width:600px) {
    #plan .plan-header-actions {
      margin-top: var(--km-space-sm);
      padding-bottom: var(--km-space-xs);
    }

    #plan .plan-header-actions .secondary-btn {
      padding: var(--km-space-sm) var(--km-space-sm);
      font-size: var(--km-font-meta);
    }
  }

  #plan .plan-history-face {
    width: var(--km-face-md);
    height: var(--km-face-md);
    min-width: var(--km-face-md);
    min-height: var(--km-face-md);
    max-width: var(--km-face-md);
    max-height: var(--km-face-md);
    flex: 0 0 var(--km-face-md);
    display: block;
    object-fit: contain;
  }

  .new-plan-choice-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-md);
  }

  .new-plan-choice-backdrop {
    position: absolute;
    inset: 0;
    background: var(--km-color-overlay-soft);
  }

  .new-plan-choice-dialog {
    position: relative;
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    box-shadow: var(--km-shadow-popover);
  }

  .new-plan-choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-md);
  }

  .new-plan-choice-head h3 {
    margin: 0;
    font-size: var(--km-font-section);
  }

  .new-plan-choice-close {
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    padding: var(--km-space-xs) var(--km-space-xs);
    color: var(--km-color-muted);
  }

  .new-plan-choice-text {
    margin: 0;
    color: var(--km-color-muted);
  }

  .new-plan-choice-option {
    width: 100%;
    border: 1px solid var(--km-color-border);
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-xs);
    margin: 0;
  }

  .new-plan-choice-option strong {
    font-size: var(--km-font-body);
    color: var(--km-color-title);
  }

  .new-plan-choice-option span {
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
    line-height: 1.5;
  }

  .new-plan-choice-cancel {
    width: 100%;
    margin: 0;
  }

  body.modal-open {
    overflow: hidden;
  }

  #plan .plan-eval-card {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
    margin: 0;
    background: var(--km-color-card);
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #plan .plan-eval-label {
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
    margin: 0;
  }

  #plan .plan-eval-goal {
    font-weight: var(--km-weight-semibold);
    margin: 0;
    line-height: 1.5;
  }

  #plan .plan-eval-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-space-sm) var(--km-space-md);
    margin: 0;
  }

  #plan .plan-eval-options label {
    font-size: var(--km-font-body);
  }

  #plan .plan-eval-note-label {
    display: block;
    margin: 0;
    font-size: var(--km-font-meta);
    color: var(--km-color-body);
  }

  #plan .plan-eval-note {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  #plan .plan-history-actions {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  .history-eval-dialog {
    max-height: 90vh;
    overflow: auto;
  }

  #historyEvaluationFields .plan-eval-card {
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-md);
    margin: 0;
    background: var(--km-color-card);
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #historyEvaluationFields .plan-eval-label {
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
    margin: 0;
  }

  #historyEvaluationFields .plan-eval-goal {
    font-weight: var(--km-weight-semibold);
    margin: 0;
  }

  #historyEvaluationFields .plan-eval-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-space-sm) var(--km-space-md);
    margin: 0;
  }

  #historyEvaluationFields .plan-eval-note {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  #plan .plan-inline-evaluation {
    margin-top: var(--km-space-sm);
    padding-top: var(--km-space-sm);
    border-top: 1px solid var(--km-color-border);
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #plan .plan-inline-evaluation-result {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    font-size: var(--km-font-meta);
  }

  #plan .plan-inline-evaluation-result span,
  #plan .plan-inline-evaluation-note span {
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
    min-width: 3.5em;
  }

  #plan .plan-inline-evaluation-note {
    display: flex;
    align-items: flex-start;
    gap: var(--km-space-sm);
    font-size: var(--km-font-meta);
    line-height: 1.5;
  }

  #plan .plan-inline-evaluation-note div {
    white-space: pre-wrap;
    min-width: 0;
  }

  #plan .plan-short-goal-history {
    display: block;
    padding: var(--km-space-sm) 0;
  }

  #plan .plan-short-goal-history + .plan-short-goal-history {
    border-top: 1px solid var(--km-color-border);
  }

  #plan .plan-history-goal-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--km-space-md);
    min-width: 0;
  }

  #plan .plan-history-goal-line > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #plan .plan-history-goal-date {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
  }

  #plan .plan-inline-evaluation-result {
    flex-wrap: wrap;
  }

  #plan .plan-inline-evaluation-date {
    margin-left: auto;
    min-width: auto;
    white-space: nowrap;
    color: var(--km-color-muted);
  }

  @media (max-width:520px) {
    #plan .plan-history-goal-line {
      gap: var(--km-space-sm);
    }

    #plan .plan-history-goal-date {
      font-size: var(--km-font-meta);
    }

    #plan .plan-inline-evaluation-date {
      width: 100%;
      margin-left: 0;
    }
  }

  #plan .plan-eval-options,
  #historyEvaluationFields .plan-eval-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-space-sm);
  }

  #plan .plan-eval-option,
  #historyEvaluationFields .plan-eval-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-pill);
    background: var(--km-color-card);
    color: var(--km-color-body);
    padding: var(--km-space-sm) var(--km-space-md);
    cursor: pointer;
    transition: background .15s ease,border-color .15s ease,color .15s ease;
    user-select: none;
  }

  #plan .plan-eval-option input,
  #historyEvaluationFields .plan-eval-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  #plan .plan-eval-option.is-selected,
  #historyEvaluationFields .plan-eval-option.is-selected {
    background: var(--km-color-accent);
    border-color: var(--km-color-accent);
    color: var(--km-color-on-strong);
    font-weight: var(--km-weight-semibold);
  }

  #plan .plan-eval-option:focus-within,
  #historyEvaluationFields .plan-eval-option:focus-within {
    outline: 2px solid var(--km-color-focus-outline);
    outline-offset: 2px;
  }

  #planEvaluationFields .plan-eval-goal-line,
  #historyEvaluationFields .plan-eval-goal-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--km-space-md);
  }

  #planEvaluationFields .plan-eval-goal,
  #historyEvaluationFields .plan-eval-goal {
    min-width: 0;
    flex: 1 1 auto;
  }

  #planEvaluationFields .plan-eval-due,
  #historyEvaluationFields .plan-eval-due {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
  }

  #planEvaluationFields .plan-eval-options,
  #historyEvaluationFields .plan-eval-options {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: var(--km-space-sm);
    flex-wrap: nowrap;
  }

  #planEvaluationFields .plan-eval-option,
  #historyEvaluationFields .plan-eval-option {
    width: 100%;
    min-width: 0;
    padding: var(--km-space-xs) var(--km-space-xs);
    white-space: nowrap;
    font-size: var(--km-font-meta);
  }

  @media (max-width:600px) {
    #planEvaluationFields .plan-eval-options,
      #historyEvaluationFields .plan-eval-options {
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: var(--km-space-sm);
    }

    #planEvaluationFields .plan-eval-option,
      #historyEvaluationFields .plan-eval-option {
      font-size: var(--km-font-meta);
      padding: var(--km-space-xs);
    }

    #planEvaluationFields .plan-eval-goal-line,
      #historyEvaluationFields .plan-eval-goal-line {
      gap: var(--km-space-xs);
    }

    #planEvaluationFields .plan-eval-due,
      #historyEvaluationFields .plan-eval-due {
      font-size: var(--km-font-meta);
    }
  }

  #plan .plan-edit-actions {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
  }

  #plan .plan-current-delete-btn {
    align-self: center;
    margin-top: 0;
  }

  #plan .plan-empty-state {
    text-align: center;
    padding: var(--km-space-lg) var(--km-space-md);
  }

  #savePlanEvaluationBtn:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .trend-chart-shell {
    position: relative;
    width: 100%;
  }

  .trend-y-axis-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 260px;
    z-index: 8;
    pointer-events: none;
    background: transparent;
  }

  .trend-control-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 52px;
    padding: var(--km-space-xs) var(--km-space-xs);
    border: 1px solid var(--km-color-accent);
    border-radius: var(--km-radius-pill);
    background: var(--km-color-card);
    color: var(--km-color-title);
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-medium);
    line-height: 1;
  }

  .trend-control-btn.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  #trendValueToggle {
    min-width: 58px;
  }

  #trendYAxisOverlay {
    border: 0;
    box-shadow: none;
    outline: 0;
  }

  .data-delete-group {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  .data-delete-description {
    margin: 0 var(--km-space-xs);
    font-size: var(--km-font-meta);
    line-height: 1.65;
  }

  body.auth-pending .app {
    visibility: hidden;
    pointer-events: none;
  }

  body.auth-signed-out .app {
    display: none;
  }

  body:not(.auth-signed-in) .bottom-nav {
    display: none;
  }

  body.auth-signed-in #authGate {
    display: none;
  }

  .auth-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-lg) var(--km-space-md);
    background: var(--km-color-bg-soft);
    color: var(--km-color-title);
  }

  .auth-card {
    width: min(100%,430px);
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    padding: var(--km-space-lg) var(--km-space-md) var(--km-space-md);
    box-shadow: var(--km-shadow-float);
  }

  .auth-brand {
    text-align: center;
    margin-bottom: var(--km-space-lg);
  }

  .auth-brand h1 {
    margin: 0;
  }

  .auth-brand p {
    margin: var(--km-space-xs) 0 0;
    color: var(--km-color-muted);
    font-size: var(--km-font-body);
  }

  .auth-panel h2 {
    margin: 0 0 var(--km-space-md);
  }

  .auth-panel label {
    margin: var(--km-space-md) 0 var(--km-space-sm);
  }

  .auth-panel input {
    height: var(--km-control-height);
  }

  .auth-help {
    margin: var(--km-space-sm) 0 var(--km-space-md);
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
    line-height: 1.6;
  }

  .auth-links {
    display: flex;
    justify-content: space-between;
    gap: var(--km-space-md);
    margin-top: var(--km-space-md);
    flex-wrap: wrap;
  }

  .auth-link {
    border: 0;
    background: transparent;
    padding: var(--km-space-sm) 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .auth-back-link {
    margin-top: var(--km-space-md);
  }

  .auth-loading {
    text-align: center;
    color: var(--km-color-muted);
    padding: var(--km-space-md) 0;
  }

  .auth-message {
    border-radius: var(--km-radius-control);
    padding: var(--km-space-md) var(--km-space-md);
    margin: 0 0 var(--km-space-md);
  }

  .auth-message.info {
    background: var(--km-color-page);
  }

  .auth-message.success {
    background: var(--km-color-state-green-soft);
    color: var(--km-color-success-text);
    border: 1px solid var(--km-color-state-green-border);
  }

  .auth-message.error {
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
    border: 1px solid var(--km-color-state-red-border);
  }

  .auth-panel button:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .auth-password-wrap {
    position: relative;
    width: 100%;
  }

  .auth-password-wrap input {
    width: 100%;
    padding-right: var(--km-layout-password-action-reserve);
  }

  .auth-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: var(--km-control-inline-action-min-width);
    height: var(--km-control-compact-height);
    padding: var(--km-space-xs) var(--km-space-sm);
    border: 0;
    border-radius: var(--km-radius-control);
    background: transparent;
    color: var(--km-color-body);
    cursor: pointer;
  }

  .auth-password-toggle:hover,
  .auth-password-toggle:focus-visible {
    outline: none;
  }

  .year-month-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-md);
    background: var(--km-color-overlay-soft);
  }

  .year-month-picker-dialog {
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    box-shadow: var(--km-shadow-popover);
  }

  .year-month-picker-head {
    display: grid;
    grid-template-columns: var(--km-icon-control-size) 1fr var(--km-icon-control-size);
    align-items: center;
    gap: var(--km-space-sm);
    margin-bottom: var(--km-space-md);
  }

  .year-month-picker-head h3 {
    margin: 0;
    text-align: center;
    font-size: var(--km-font-section);
  }

  .year-month-nav {
    width: var(--km-icon-control-size);
    height: var(--km-icon-control-size);
    padding: 0;
    border-radius: var(--km-radius-control);
    background: var(--km-color-bg-soft);
    color: var(--km-color-title);
    font-size: var(--km-font-page);
  }

  .year-month-nav:disabled {
    opacity: .3;
    cursor: default;
  }

  .year-month-picker-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: var(--km-space-sm);
  }

  .year-month-btn {
    background: var(--km-color-card);
    color: var(--km-color-title);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-md) var(--km-space-xs);
    font-weight: var(--km-weight-medium);
  }

  .year-month-btn:hover:not(:disabled) {
    background: var(--km-color-bg-soft);
  }

  .year-month-btn.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .year-month-btn:disabled {
    background: var(--km-color-bg-soft);
    color: var(--km-color-muted);
    border-color: var(--km-color-border);
    cursor: default;
  }

  .year-month-picker-close {
    width: 100%;
    margin-top: var(--km-space-md);
  }


  .app-date-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-space-md);
    background: var(--km-color-overlay-soft);
  }

  .app-date-picker-dialog {
    background: var(--km-color-card);
    border-radius: var(--km-radius-card);
    box-shadow: var(--km-shadow-popover);
  }

  .app-date-picker-head {
    display: grid;
    grid-template-columns: var(--km-icon-control-size) 1fr var(--km-icon-control-size);
    gap: var(--km-space-sm);
    align-items: center;
    margin-bottom: var(--km-space-md);
  }

  .app-date-nav {
    width: var(--km-icon-control-size);
    height: var(--km-icon-control-size);
    padding: 0;
    background: var(--km-color-bg-soft);
    color: var(--km-color-title);
    border-radius: var(--km-radius-control);
  }

  .app-date-title {
    background: transparent;
    color: var(--km-color-title);
    padding: var(--km-space-sm);
  }

  .app-date-week,
  .app-date-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: var(--km-space-xs);
  }

  .app-date-week {
    margin-bottom: var(--km-space-sm);
    text-align: center;
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
  }

  .app-date-cell {
    min-height: var(--km-control-height);
    padding: var(--km-space-xs);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-title);
    font-weight: var(--km-weight-medium);
  }

  .app-date-cell.empty {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
  }

  .app-date-cell.today {
    border-color: var(--km-color-muted);
  }

  .app-date-cell.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .app-date-cell:disabled {
    cursor: default;
  }

  .app-date-close {
    width: 100%;
    margin-top: var(--km-space-md);
  }

  .year-month-title-btn {
    border: 0;
    background: transparent;
    color: var(--km-color-title);
    padding: var(--km-space-sm);
    margin: 0;
    text-align: center;
    font-weight: var(--km-weight-medium);
  }

  .year-month-caret {
    font-size: var(--km-font-body);
  }

  .year-month-year-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
    padding: var(--km-space-xs) var(--km-space-xs);
    margin-bottom: var(--km-space-xs);
    scrollbar-gutter: stable;
  }

  .year-month-year-list.hidden {
    display: none;
  }

  .year-list-btn {
    width: 100%;
    background: var(--km-color-card);
    color: var(--km-color-title);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-sm);
    font-size: var(--km-font-body);
  }

  .year-list-btn.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .app-date-month-choice.hidden,
  .app-date-year-list.hidden,
  .app-date-month-grid.hidden,
  #appDateDayView.hidden {
    display: none;
  }

  .app-date-month-choice {
    min-height: 286px;
  }

  .app-date-month-choice-year {
    display: block;
    width: auto;
    margin: 0 auto var(--km-space-md);
    padding: var(--km-space-sm) var(--km-space-md);
    border: 0;
    border-radius: var(--km-radius-control);
    background: transparent;
    color: var(--km-color-title);
  }

  .app-date-month-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: var(--km-space-sm);
  }

  .app-date-month-btn {
    min-height: var(--km-control-height);
    padding: var(--km-space-sm) var(--km-space-xs);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-title);
    font-weight: var(--km-weight-medium);
  }

  .app-date-month-btn.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .app-date-month-btn:disabled {
    cursor: default;
  }

  .app-date-year-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
    padding: var(--km-space-xs) var(--km-space-xs);
    scrollbar-gutter: stable;
  }

  .app-date-year-btn {
    width: 100%;
    padding: var(--km-space-sm);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-title);
    font-size: var(--km-font-body);
  }

  .app-date-year-btn.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .deadline-field {
    width: 100%;
  }



  .app-date-year-list,
  .year-month-year-list {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .app-date-year-list.dragging-years,
  .year-month-year-list.dragging-years {
    cursor: grabbing;
  }

  .app-date-year-btn,
  .year-list-btn {
    user-select: none;
    -webkit-user-select: none;
  }


  .date-inline-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--km-space-sm);
    width: 100%;
  }

  .date-quick-actions,
  .deadline-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--km-space-sm);
  }

  .app-date-input {
    width: var(--km-date-input-width);
    min-width: var(--km-date-input-width);
    max-width: var(--km-date-input-width);
    flex: 0 0 var(--km-date-input-width);
    height: var(--km-control-date-height);
    min-height: var(--km-control-date-height);
    max-height: var(--km-control-date-height);
    box-sizing: border-box;
    padding: 0 var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    font-weight: var(--km-weight-medium);
    text-align: center;
    vertical-align: middle;
  }


  .date-quick-btn,
  .deadline-presets button {
    min-height: var(--km-control-date-height);
    height: var(--km-control-date-height);
    padding: 0 var(--km-space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    white-space: nowrap;
    box-sizing: border-box;
  }

  @media (max-width:600px) {
    .app-date-input {
      width: var(--km-date-input-width-mobile);
      min-width: var(--km-date-input-width-mobile);
      max-width: var(--km-date-input-width-mobile);
      flex-basis: var(--km-date-input-width-mobile);
    }
  }

  .cloud-sync-status {
    margin: 0;
    padding: var(--km-space-xs) var(--km-space-xs);
    border-radius: var(--km-radius-control);
    background: var(--km-color-bg-soft);
    border: 1px solid var(--km-color-border);
    font-size: var(--km-font-meta);
    line-height: 1.5;
  }

  .cloud-sync-status[data-state="ok"] {
    background: var(--km-color-state-green-soft);
    border-color: var(--km-color-state-green-border);
    color: var(--km-color-success-text);
  }

  .cloud-sync-status[data-state="working"] {
    background: var(--km-color-bg-soft);
    color: var(--km-color-body);
  }

  .cloud-sync-status[data-state="error"] {
    background: var(--km-color-state-red-soft);
    border-color: var(--km-color-state-red-border);
    color: var(--km-color-danger);
  }

  .cloud-migration-dialog .cloud-migration-note {
    margin-top: var(--km-space-sm);
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
  }

  .cloud-migration-primary {
    border: 1px solid var(--km-color-accent);
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
  }

  .account-delete-dialog label {
    display: block;
    margin: var(--km-space-md) 0 var(--km-space-sm);
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-semibold);
  }

  .account-delete-dialog input {
    width: 100%;
    min-height: var(--km-control-min-height);
    height: var(--km-control-min-height);
    box-sizing: border-box;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: 0 var(--km-space-sm);
    font-size: var(--km-font-body);
  }

  .account-delete-warning {
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-danger);
  }

  .account-delete-error {
    margin-top: var(--km-space-sm);
    color: var(--km-color-danger);
    font-size: var(--km-font-meta);
    line-height: 1.6;
  }

  #accountDeleteConfirmButton:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .custom-item-edit-dialog .custom-item-edit-label {
    display: block;
    margin: var(--km-space-md) 0 0;
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  .custom-item-edit-dialog input {
    width: 100%;
    min-height: var(--km-control-min-height);
    height: var(--km-control-min-height);
    box-sizing: border-box;
    margin-top: var(--km-space-sm);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: 0 var(--km-space-sm);
    background: var(--km-color-card);
    color: var(--km-color-title);
    font-size: var(--km-font-body);
  }

  .custom-item-edit-error {
    margin-top: var(--km-space-sm);
  }

  .app-date-clickable,
  input.app-date-clickable,
  .record-detail-date-picker.app-date-clickable {
    cursor: pointer;
    background: var(--km-color-card);
    -webkit-appearance: none;
    appearance: none;
    font-variant-numeric: tabular-nums;
  }

  .app-date-clickable[readonly] {
    color: var(--km-color-title);
    opacity: 1;
  }

  .app-date-clickable::placeholder {
    color: var(--km-color-muted);
    opacity: 1;
  }

  .app {
    background: transparent;
  }

  .app>.header[hidden] {
    display: none;
  }

  .app>.header h1 {
    color: var(--km-color-title);
  }

  .app>.header p,.muted {
    color: var(--km-color-muted);
  }

  main {
    padding-top: 0;
  }

  .card {
    margin: 0;
    padding: var(--km-space-md);
    background: var(--km-card);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    box-shadow: var(--km-shadow-card);
  }

  .inquiry-admin-reply,
  input,
  textarea,
  select {
    border-color: var(--km-color-border);
    border-radius: var(--km-radius-control);
    color: var(--km-color-title);
  }

  .context-chip,
  .detail-context-chip,
  .trend-control-btn,
  #plan .plan-eval-option,
  #historyEvaluationFields .plan-eval-option,
  .inquiry-category-inline-list button {
    border-radius: var(--km-radius-control);
  }

  .context-chip.selected,
  .trend-control-btn.selected,
  #plan .plan-eval-option.is-selected,
  #historyEvaluationFields .plan-eval-option.is-selected,
  .inquiry-category-inline-list button.selected {
    border-color: var(--km-color-primary);
  }

  .state,#homeState,.inquiry-status {
    border-radius: var(--km-radius-pill);
  }

  .current-state-box {
    border-radius: var(--km-radius-control);
  }

  .plan-delete-btn {
    border-color: var(--km-color-state-red-border);
  }

  .calendar-nav,.calendar-title-btn,.year-month-nav,.year-month-title-btn,.record-day-nav,.record-date-button,.record-modal-close {
    border-radius: var(--km-radius-control);
  }

  .trend-analysis-card .trend-mode-title {
    color: var(--km-color-title);
  }

  canvas:not(.calendar-face):not(.trend-history-face):not(#detailFace) {
    border-radius: var(--km-radius-control);
  }

  #recordDetailModal .record-detail-dialog::before,
  #recordDetailModal .record-detail-dialog::after,
  #recordDetailModal .record-detail-nav::before,
  #recordDetailModal .record-detail-nav::after {
    content: none;
    display: none;
  }

  #recordDetailModal .record-detail-dialog {
    border: 1px solid var(--km-color-border);
    box-shadow: var(--km-shadow-elevated);
  }

  #recordDetailModal .record-detail-nav {
    background: var(--km-color-card);
    border-bottom: 1px solid var(--km-color-border);
  }

  #recordDetailModal .record-modal-close {
    background: transparent;
    border: 0;
  }

  #recordDetailModal .detail-actions button:first-child {
    background: var(--km-color-card);
    color: var(--km-color-title);
    border: 1px solid var(--km-color-border);
  }

  .legal-intro {
    padding: var(--km-space-md) var(--km-space-md);
    border-radius: var(--km-radius-control);
    background: var(--km-blue-soft);
    line-height: 1.8;
  }

  .remove-btn {
    border-radius: var(--km-radius-control);
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
    border: 1px solid var(--km-color-state-red-border);
  }

  #recordDetailDatePicker,
  #recordDetailModal .record-detail-date-picker {
    display: none;
    visibility: hidden;
  }

  #recordDetailModal #detailFace {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  #recordDetailModal .record-detail-nav button {
    box-shadow: none;
  }

  .app>.header h1,
  .page-title,
  .app-page-title,
  .settings-page-title,
  #plan .plan-mode-bar h2 {
    letter-spacing: 0;
  }

  .app>.header p {
    font-weight: var(--km-weight-regular);
  }

  h2 {
    font-size: var(--km-font-section);
    line-height: 1.5;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  h3,
  .record-subtitle,
  .related-inquiry-faq-title {
    color: var(--km-color-title);
  }

  label,
  .inquiry-history-field-label,
  .faq-item summary,
  .related-inquiry-faq-item summary,
  .setting-threshold-preview,
  .item-setting-label strong {
    font-size: var(--km-font-body);
    line-height: 1.6;
    color: var(--km-color-body);
  }

  input,
  textarea,
  select {
    font-weight: var(--km-weight-regular);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--km-color-muted);
    opacity: 1;
  }

  .muted,
  .small,
  .note,
  .auth-help,
  .context-help,
  .billing-note,
  .billing-manage-note,
  .data-delete-description,
  .plan small {
    font-weight: var(--km-weight-regular);
  }

  .calendar-week,
  .calendar-day,
  .inquiry-admin-reply-date,
  .item-setting-range,
  .detail-metric-label small,
  .settings-default-reset {
    font-size: var(--km-font-meta);
    line-height: 1.5;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }

  .score,
  .history-score {
    color: var(--km-color-title);
    font-weight: var(--km-weight-semibold);
  }

  .state,#homeState,.current-state-box,.inquiry-status {
    font-size: var(--km-font-body);
    line-height: 1.5;
    font-weight: var(--km-weight-semibold);
  }

  .faq-item p,
  .related-inquiry-faq-item p,
  .legal-intro {
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-regular);
  }

  #recordDetailModal .detail-metrics>div {
    font-size: var(--km-font-body);
    line-height: 1.6;
    color: var(--km-color-body);
  }

  #recordDetailModal .record-date-button,
  #recordDetailModal .record-day-nav {
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-body);
  }


  .record-modal-close {
    font-size: 24px;
    line-height: 1;
    font-weight: var(--km-weight-regular);
  }


  @media (max-width:520px) {
    body {
      font-size: var(--km-font-body);
    }

    #recordDetailModal .detail-metrics>div {
      font-size: var(--km-font-body);
    }

    .record-day-nav {
      font-size: var(--km-font-meta);
    }

    .record-date-button {
      font-size: var(--km-font-meta);
    }
  }

  .billing-return-gate,.billing-transition-mask,.auth-gate {
    color: var(--km-color-body);
  }

  .auth-brand h1 {
    font-size: var(--km-font-page);
    line-height: 1.4;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  .auth-brand p,.auth-loading {
    font-weight: var(--km-weight-regular);
  }

  .auth-panel h2 {
    font-size: var(--km-font-section);
    line-height: 1.5;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  .auth-link {
    font-weight: var(--km-weight-medium);
    color: var(--km-color-accent);
  }

  .auth-message {
    font-size: var(--km-font-body);
    line-height: 1.65;
    font-weight: var(--km-weight-regular);
  }

  .auth-message.info {
    color: var(--km-color-body);
  }

  .custom-item-edit-dialog .custom-item-edit-label,
  .account-delete-dialog label,
  .inquiry-label {
    font-size: var(--km-font-body);
    line-height: 1.6;
    color: var(--km-color-body);
  }

  .custom-item-edit-dialog input,
  .app-date-clickable[readonly] {
    color: var(--km-color-body);
  }

  .calendar-title-btn,.year-month-title-btn {
    color: var(--km-color-body);
    font-weight: var(--km-weight-medium);
  }

  strong,b {
    font-weight: var(--km-weight-semibold);
  }

  .km-wheel-picker,
  #inquiryCategoryPickerList.inquiry-category-inline-list {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    display: block;
    margin-top: var(--km-space-sm);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    touch-action: auto;
  }

  .km-dropdown-trigger,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-trigger {
    width: 100%;
    height: var(--km-control-height);
    min-height: var(--km-control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-sm);
    margin: 0;
    padding: 0 var(--km-space-sm);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    color: var(--km-color-body);
    font-size: var(--km-font-body);
    text-align: left;
    box-shadow: none;
    cursor: pointer;
  }

  .km-dropdown-picker.open .km-dropdown-trigger,
  #inquiryCategoryPickerList.inquiry-category-inline-list.open .km-dropdown-trigger {
    border-color: var(--km-color-primary);
    background: var(--km-color-card);
  }

  .km-dropdown-value {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .km-dropdown-arrow {
    flex: 0 0 auto;
    color: var(--km-color-muted);
    font-size: var(--km-font-body);
    line-height: 1;
    transition: transform .15s ease;
  }

  .km-dropdown-picker.open .km-dropdown-arrow {
    transform: rotate(180deg);
  }

  .km-dropdown-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: var(--km-space-xs);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    box-shadow: var(--km-shadow-medium);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--km-color-primary) transparent;
    overscroll-behavior: contain;
  }

  .km-dropdown-menu[hidden] {
    display: none;
  }

  .km-dropdown-menu::-webkit-scrollbar {
    width: 5px;
  }

  .km-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .km-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--km-color-primary);
    border-radius: var(--km-radius-pill);
  }

  .km-dropdown-option,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-menu .km-dropdown-option {
    width: 100%;
    min-height: var(--km-control-height);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-sm);
    border: 0;
    background: var(--km-color-card);
    color: var(--km-color-body);
    opacity: 1;
    font-size: var(--km-font-body);
    text-align: left;
    box-shadow: none;
    white-space: normal;
    cursor: pointer;
  }

  .km-dropdown-option.selected,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-menu .km-dropdown-option.selected {
    background: var(--km-blue-soft,var(--km-color-bg-blue-soft));
    color: var(--km-color-accent);
    font-weight: var(--km-weight-semibold);
  }

  .trend-wheel-picker {
    width: 100%;
    margin-top: 0;
  }

  .trend-context-select-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }


  @media (max-width:600px) {
    main {
      padding-left: var(--km-space-sm);
      padding-right: var(--km-space-sm);
    }

    .date-inline-row {
      gap: var(--km-space-sm);
    }

    .date-quick-actions {
      gap: var(--km-space-sm);
    }


    #trend .trend-control-btn {
      width: 100%;
      min-width: 0;
      padding: var(--km-space-sm) var(--km-space-sm);
      white-space: nowrap;
    }

    .record-detail-modal {
      padding: var(--km-space-md);
    }

    #recordDetail.record-detail-dialog {
      max-height: 88vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #recordDetailModal .detail-metrics {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 0;
    }

    #recordDetailModal .detail-metrics>div {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
    }

    #recordDetailModal .detail-metric-label {
      padding-right: 0;
      min-width: 0;
    }

    #recordDetailModal .detail-metric-label small {
      font-size: var(--km-font-meta);
      line-height: 1.45;
    }

    #recordDetailModal .detail-metrics>div>strong {
      white-space: nowrap;
    }

#plan .plan-header-actions {
      display: block;
      width: 100%;
      margin-top: var(--km-space-sm);
      overflow: visible;
    }

    #plan .plan-current-state {
      width: 100%;
      margin-bottom: var(--km-space-sm);
    }

    #plan .plan-current-state .current-box {
      width: 100%;
      box-sizing: border-box;
      justify-content: center;
      text-align: center;
    }

    #plan .plan-command-actions {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: var(--km-space-sm);
      width: 100%;
      margin-left: 0;
    }

    #plan .plan-header-actions .secondary-btn {
      width: 100%;
      min-width: 0;
      padding: var(--km-space-sm) var(--km-space-sm);
      white-space: normal;
    }

    .km-dropdown-trigger {
      min-width: 0;
      width: 100%;
    }
  }

  @media (max-width:360px) {
    .trend-select-grid {
      grid-template-columns: 1fr;
    }
  }

  #recordDetailModal .detail-metrics {
    margin-top: var(--km-space-sm);
    margin-bottom: var(--km-space-md);
  }

  #recordDetailModal .detail-metrics>div {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: var(--km-space-sm);
    padding: var(--km-space-xs) 0;
  }

  #recordDetailModal .detail-metric-label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--km-space-sm);
    min-width: 0;
    padding-right: 0;
    white-space: nowrap;
  }

  #recordDetailModal .detail-metric-name {
    flex: 0 0 auto;
    min-width: 0;
    font-size: var(--km-font-body);
    line-height: 1.4;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-body);
  }

  #recordDetailModal .detail-metric-range {
    display: inline;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--km-font-meta);
    line-height: 1.35;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }

  #recordDetailModal .detail-metrics>div>strong {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--km-font-body);
    line-height: 1.4;
  }

  #calendarTitle,
  .calendar-title-btn,
  .year-month-title-btn,
  #yearMonthPickerYear,
  .app-date-title,
  #appDatePickerTitle,
  .app-date-month-choice-year,
  #appDateMonthChoiceYear {
    color: var(--km-color-accent);
    background: transparent;
    border-color: var(--km-color-primary);
  }

  .calendar-nav,
  .year-month-nav,
  .app-date-nav {
    color: var(--km-color-accent);
    background: var(--km-color-card);
    border-color: var(--km-color-primary);
  }

  .year-list-btn,
  .year-month-btn,
  .app-date-year-btn,
  .app-date-month-btn,
  .app-date-cell {
    background: var(--km-color-card);
    color: var(--km-color-body);
    border-color: var(--km-color-border);
  }

  .year-list-btn.selected,
  .year-month-btn.selected,
  .app-date-year-btn.selected,
  .app-date-month-btn.selected,
  .app-date-cell.selected {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
    box-shadow: none;
  }

  .app-date-cell.today:not(.selected) {
    background: var(--km-color-card);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
    box-shadow: inset 0 0 0 1px var(--km-color-primary);
  }

  .year-month-caret {
    color: var(--km-color-muted);
  }

  @media (max-width:600px) {
    #recordDetailModal .detail-metrics>div {
      gap: var(--km-space-sm);
      padding: var(--km-space-xs) 0;
    }

    #recordDetailModal .detail-metric-name {
      font-size: var(--km-font-meta);
    }

    #recordDetailModal .detail-metric-range {
      font-size: var(--km-font-meta);
    }

    #recordDetailModal .detail-metrics>div>strong {
      font-size: var(--km-font-meta);
    }
  }

  @media (max-width:600px) {
    #trendChartScroller {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      touch-action: auto;
      overscroll-behavior-x: contain;
      scroll-behavior: auto;
      cursor: auto;
    }

    #trendChartScroller #chart2 {
      display: block;
      max-width: none;
      min-width: 100%;
      touch-action: auto;
    }
  }

  @media (min-width:601px) {
    #recordDetail.record-detail-dialog {
    }

    #recordDetailModal .record-detail-nav {
      margin: calc(-1 * var(--km-space-md)) calc(-1 * var(--km-space-md)) var(--km-space-md);
    }

    #recordDetailModal .detail-metrics {
      grid-template-columns: repeat(2,minmax(0,1fr));
      column-gap: var(--km-space-lg);
    }

    #recordDetailModal .detail-metrics>div {
      min-width: 0;
    }

    #recordDetailModal .detail-metric-label {
      flex-wrap: nowrap;
      white-space: nowrap;
      gap: var(--km-space-sm);
      overflow: visible;
    }

    #recordDetailModal .detail-metric-name,
      #recordDetailModal .detail-metric-range {
      white-space: nowrap;
    }

    #recordDetailModal .detail-metric-range {
      overflow: visible;
      text-overflow: clip;
    }
  }

  @media (min-width:601px) {
    #recordDetail.record-detail-dialog {
      border-radius: var(--km-radius-card);
      overflow-x: hidden;
      overflow-y: auto;
    }

    #recordDetailModal .record-detail-nav {
      border-radius: var(--km-radius-card) var(--km-radius-card) 0 0;
      overflow: hidden;
    }
  }

  @media (max-width:600px) {
    #planEvaluationFields .plan-eval-options,
      #historyEvaluationFields .plan-eval-options {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      width: 100%;
    }

    #planEvaluationFields .plan-eval-option,
      #historyEvaluationFields .plan-eval-option {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      white-space: normal;
      text-align: center;
      overflow-wrap: anywhere;
    }

    #planEvaluationFields .plan-eval-option:nth-child(5),
      #historyEvaluationFields .plan-eval-option:nth-child(5) {
      grid-column: 1 / -1;
    }

    #planEvaluationFields .plan-eval-goal-line,
      #historyEvaluationFields .plan-eval-goal-line {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #planEvaluationFields .plan-eval-due,
      #historyEvaluationFields .plan-eval-due {
      white-space: normal;
      font-size: var(--km-font-meta);
    }
  }

  #planEvaluationFields .plan-eval-card,
  #historyEvaluationFields .plan-eval-card {
    border-radius: var(--km-radius-card);
  }

  #planHistoryList .plan-history-row {
    padding: var(--km-space-sm) var(--km-space-xs);
    gap: var(--km-space-sm);
  }

  #planHistoryList .plan-history-row span:first-child {
    gap: var(--km-space-xs);
  }

  #planHistoryDetail .plan-short-goal-history {
    padding: var(--km-space-sm) 0;
  }

  #planHistoryDetail .plan-state-head {
    margin-bottom: var(--km-space-sm);
  }

  #planHistoryDetail .plan-view-section {
    margin-top: var(--km-space-sm);
  }

  #planHistoryDetail .plan-view-label {
    margin-bottom: var(--km-space-xs);
  }

  #planHistoryDetail .plan-inline-evaluation {
    margin-top: var(--km-space-sm);
    padding-top: var(--km-space-sm);
    gap: var(--km-space-xs);
  }

  @media (max-width:600px) {
    #planEvaluationFields .plan-eval-option,
      #historyEvaluationFields .plan-eval-option {
      border-radius: var(--km-radius-control);
    }

    #planEvaluationFields .plan-eval-goal-line,
      #historyEvaluationFields .plan-eval-goal-line {
      gap: var(--km-space-xs);
    }

    #planHistoryList .plan-history-row {
      padding: var(--km-space-sm) var(--km-space-xs);
    }

  }

  #planEvaluationFields .plan-eval-card,
  #historyEvaluationFields .plan-eval-card {
    padding: var(--km-space-sm);
    margin: 0;
  }

  @media (max-width:600px) {
    #planEvaluationFields .plan-eval-options,
      #historyEvaluationFields .plan-eval-options {
      column-gap: var(--km-space-sm);
      row-gap: var(--km-space-sm);
      margin: 0;
    }

    #planEvaluationFields .plan-eval-option,
      #historyEvaluationFields .plan-eval-option {
      min-height: var(--km-control-height);
      padding: var(--km-space-xs);
      font-size: var(--km-font-meta);
      line-height: 1.25;
    }

    #planEvaluationFields .plan-eval-card,
      #historyEvaluationFields .plan-eval-card {
      padding: var(--km-space-md);
      margin: 0;
    }

  }

  #trend .trend-analysis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-sm);
    width: 100%;
    margin: 0;
  }

  #trend .trend-analysis-head #trendModeTitle {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 70px);
    margin: 0;
  }

  #trend .trend-analysis-head #trendValueToggle {
    flex: 0 0 auto;
    width: auto;
    min-width: 58px;
    max-width: none;
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-md);
    white-space: nowrap;
  }

  @media (max-width:600px) {
    #trend .trend-analysis-head {
      gap: var(--km-space-sm);
    }

    #trend .trend-analysis-head #trendModeTitle {
      max-width: calc(100% - 62px);
    }

    #trend .trend-analysis-head #trendValueToggle {
      width: auto;
      min-width: 52px;
      max-width: 58px;
      padding: var(--km-space-sm) var(--km-space-sm);
    }
  }

  .pdf-export-status {
    margin: 0;
  }

  .pdf-plan-chips {
    margin: 0;
  }

  .pdf-plan-chips .context-chip {
    cursor: pointer;
  }

  .pdf-plan-select-actions {
    display: flex;
    gap: var(--km-space-sm);
    flex-wrap: wrap;
    margin: 0;
  }

  .pdf-export-help {
    margin: 0 var(--km-space-xs);
    text-align: center;
  }

  #settingsPdfGroup .pdf-month-picker {
    width: 100%;
    margin: 0;
  }

  #settingsPdfGroup .pdf-export-help {
    line-height: 1.65;
  }

  #settingsPdfGroup .pdf-trend-options {
    margin: 0;
    padding-top: var(--km-space-md);
    border-top: 1px solid var(--km-color-border);
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #settingsPdfGroup .pdf-trend-options-label {
    margin: 0;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-muted);
  }

  #settingsPdfGroup .pdf-trend-options-head {
    margin: 0;
  }

  #settingsPdfGroup #pdfTrendModeTitle {
    text-align: left;
  }

  #settingsPdfGroup #pdfTrendValueToggle {
    flex: 0 0 auto;
    width: auto;
    min-width: 58px;
    max-width: none;
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-md);
  }

  #settingsPdfGroup .trend-selectors {
    margin: 0;
  }

  @media (max-width:600px) {
    #settingsPdfGroup #pdfTrendValueToggle {
      min-width: 52px;
      max-width: 58px;
      padding: var(--km-space-sm) var(--km-space-sm);
    }
  }

  #planEvaluationFields .plan-eval-option,
  #historyEvaluationFields .plan-eval-option {
    margin: 0;
  }

  #pdfSettingsCard .pdf-export-card {
    box-shadow: none;
  }

  #pdfSettingsCard .pdf-export-help {
    margin: 0;
  }

  #pdfSettingsCard .pdf-month-picker {
    width: 100%;
    margin: 0;
  }

  #pdfSettingsCard .pdf-trend-options {
    margin: 0;
    padding-top: var(--km-space-md);
    border-top: 1px solid var(--km-color-border);
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  #pdfSettingsCard .pdf-trend-options-label {
    margin: 0;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-muted);
  }

  #pdfSettingsCard .pdf-trend-options-head {
    margin: 0;
  }

  #pdfSettingsCard #pdfTrendModeTitle {
    text-align: left;
  }

  #pdfSettingsCard #pdfTrendValueToggle {
    flex: 0 0 auto;
    width: auto;
    min-width: 58px;
    max-width: none;
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-md);
  }

  #pdfSettingsCard .trend-selectors {
    margin: 0;
  }

  @media (max-width:600px) {


#pdfSettingsCard #pdfTrendValueToggle {
      min-width: 52px;
      max-width: 58px;
      padding: var(--km-space-sm) var(--km-space-sm);
    }
  }
@media (max-width:600px) {

}

  #planEditMode .plan-goal-input-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: var(--km-space-sm);
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  #planEditMode .plan-goal-input-row > input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--km-control-height);
    box-sizing: border-box;
  }

  #planEditMode .plan-goal-input-row > .plan-delete-btn {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: var(--km-control-min-height);
    margin: 0;
    box-sizing: border-box;
  }

  #plan .plan-state-face,
  #plan .current-state-face,
  #plan .edit-state-face,
  #plan .plan-history-face,
  .home-plan-guidance .plan-state-face {
    background: transparent;
    background-color: transparent;
  }

  #billingSettingsCard .billing-plan-compare {
    margin: 0;
    padding: var(--km-space-md) var(--km-space-md) var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-bg-soft);
    color: var(--km-color-body);
  }

  #billingSettingsCard .billing-plan-compare-title {
    display: block;
    margin-bottom: var(--km-space-sm);
  }

  #billingSettingsCard .billing-plan-compare-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #billingSettingsCard .billing-plan-compare-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--km-color-card);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    overflow: hidden;
  }

  #billingSettingsCard .billing-plan-compare-table th,
  #billingSettingsCard .billing-plan-compare-table td {
    padding: var(--km-space-xs) var(--km-space-xs);
    border-bottom: 1px solid var(--km-color-border);
    border-right: 1px solid var(--km-color-border);
    font-size: var(--km-font-meta);
    line-height: 1.45;
    vertical-align: middle;
  }

  #billingSettingsCard .billing-plan-compare-table th:last-child,
  #billingSettingsCard .billing-plan-compare-table td:last-child {
    border-right: 0;
  }

  #billingSettingsCard .billing-plan-compare-table tbody tr:last-child td {
    border-bottom: 0;
  }

  #billingSettingsCard .billing-plan-compare-table th {
    background: var(--km-color-bg-blue-soft);
    font-weight: var(--km-weight-semibold);
    text-align: center;
  }

  #billingSettingsCard .billing-plan-compare-table th:first-child,
  #billingSettingsCard .billing-plan-compare-table td:first-child {
    width: 46%;
    text-align: left;
  }

  #billingSettingsCard .billing-plan-compare-table th:nth-child(2),
  #billingSettingsCard .billing-plan-compare-table td:nth-child(2) {
    width: 18%;
    text-align: center;
  }

  #billingSettingsCard .billing-plan-compare-table th:nth-child(3),
  #billingSettingsCard .billing-plan-compare-table td:nth-child(3) {
    width: 36%;
    text-align: center;
  }

  @media (max-width:600px) {
    #billingSettingsCard .billing-plan-compare {
      padding: var(--km-space-sm);
    }

    #billingSettingsCard .billing-plan-compare-table {
      min-width: 0;
      table-layout: fixed;
    }

    #billingSettingsCard .billing-plan-compare-table th,
      #billingSettingsCard .billing-plan-compare-table td {
      padding: var(--km-space-xs) var(--km-space-xs);
      font-size: var(--km-font-meta);
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    #billingSettingsCard .billing-plan-compare-table th:first-child,
      #billingSettingsCard .billing-plan-compare-table td:first-child {
      width: 43%;
    }

    #billingSettingsCard .billing-plan-compare-table th:nth-child(2),
      #billingSettingsCard .billing-plan-compare-table td:nth-child(2) {
      width: 19%;
    }

    #billingSettingsCard .billing-plan-compare-table th:nth-child(3),
      #billingSettingsCard .billing-plan-compare-table td:nth-child(3) {
      width: 38%;
    }
  }
}

@layer km-priority {
  .wide:not(.secondary-btn):not(.danger-outline):not(.danger-control):hover,.primary-btn:hover {
    background: var(--km-color-primary-hover);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary-hover);
  }

  .secondary-btn,
  .mini-btn:not(.danger-mini),
  .plan-add-btn,
  .trend-control-btn,
  .inquiry-switch-btn {
    color: var(--km-color-title);
  }

  .secondary-btn:hover,.mini-btn:not(.danger-mini):hover,.plan-add-btn:hover,.date-quick-btn:hover,.deadline-presets button:hover,.trend-control-btn:hover {
    background: var(--km-blue-soft);
  }


  .danger-control,
  .danger-outline,
  .danger-text-btn,
  .app-delete-confirm-btn {
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
  }

  .danger-control:hover,.danger-outline:hover,.danger-text-btn:hover,.app-delete-confirm-btn:hover {
    background: var(--km-color-danger-soft);
  }

  body.auth-pending .app {
    visibility: hidden;
    pointer-events: none;
  }

  .calendar-nav:hover,.calendar-title-btn:hover,.year-month-nav:hover,.year-month-title-btn:hover,.app-date-nav:hover,.app-date-title:hover {
    background: var(--km-blue-soft);
  }

  .calendar-empty-recordable:hover,.calendar-cell.has-record:hover,.app-date-cell:hover:not(:disabled),.year-month-btn:hover:not(:disabled),.app-date-month-btn:hover:not(:disabled),.app-date-year-btn:hover {
    background: var(--km-blue-soft);
  }

  .app-date-cell:disabled,.year-month-btn:disabled,.app-date-month-btn:disabled {
    background: var(--km-soft);
    color: var(--km-color-muted);
    border-color: var(--km-color-border);
  }

  #loginSubmitBtn:hover,
  #signupSubmitBtn:hover,
  #forgotSubmitBtn:hover {
    background: var(--km-color-primary-hover);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary-hover);
  }

  .context-filter-btn:hover {
    background: var(--km-blue-soft);
  }

  .context-filter-btn.selected:hover {
    background: var(--km-blue-soft-strong);
  }

  .record-day-nav:disabled {
    opacity: .28;
    cursor: default;
  }

  .auth-password-toggle {
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-medium);
    line-height: 1;
  }

  .auth-password-toggle:hover,
  .auth-password-toggle:focus-visible {
    background: var(--km-color-bg-soft);
  }

  .app-date-nav {
    font-size: var(--km-font-page);
  }

  .app-date-title {
    font-size: var(--km-font-section);
  }

  .app-date-cell:disabled {
    background: var(--km-color-bg-soft);
    color: var(--km-color-muted);
    border-color: var(--km-color-border);
  }

  .year-month-title-btn {
    font-size: var(--km-font-section);
  }

  .year-month-title-btn:hover {
    background: var(--km-color-bg-soft);
  }

  .app-date-month-choice-year {
    font-size: var(--km-font-section);
    font-weight: var(--km-weight-semibold);
  }

  .app-date-month-choice-year:hover {
    background: var(--km-color-bg-soft);
  }

  .app-date-month-btn:hover:not(:disabled) {
    background: var(--km-color-bg-soft);
  }

  .app-date-month-btn:disabled {
    background: var(--km-color-bg-soft);
    color: var(--km-color-muted);
    border-color: var(--km-color-border);
  }





  .custom-item-edit-error {
    color: var(--km-color-danger);
    font-size: var(--km-font-meta);
    line-height: 1.5;
  }

  input:not([type="range"]):focus,textarea:focus,select:focus {
    outline: 2px solid var(--km-color-focus-outline);
    border-color: var(--km-color-primary-hover);
  }

  /* Goal inputs are ordinary app data, not browser identity/profile fields.
     Keep Chrome autofill from painting the field when switching edit/new modes. */
  #planEditMode .goal-input:-webkit-autofill,
  #planEditMode .goal-input:-webkit-autofill:hover,
  #planEditMode .goal-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--km-color-title);
    -webkit-box-shadow: 0 0 0 1000px var(--km-color-card) inset;
    box-shadow: 0 0 0 1000px var(--km-color-card) inset;
    caret-color: var(--km-color-title);
  }

  .context-chip.selected,
  .trend-control-btn.selected,
  #plan .plan-eval-option.is-selected,
  #historyEvaluationFields .plan-eval-option.is-selected,
  .inquiry-category-inline-list button.selected {
    background: var(--km-blue-soft-strong);
    color: var(--km-color-accent);
  }

  .plan-delete-btn {
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
  }

  .plan-delete-btn:hover {
    background: var(--km-color-danger-soft);
  }

  .legal-intro {
    margin: var(--km-space-xs) 0 var(--km-space-md);
  }

  .app>.header p {
    font-size: var(--km-font-meta);
    line-height: 1.6;
    color: var(--km-color-muted);
  }

  h3,
  .record-subtitle,
  .related-inquiry-faq-title {
    font-size: var(--km-font-section);
    line-height: 1.55;
    font-weight: var(--km-weight-semibold);
  }

  label,
  .inquiry-history-field-label,
  .setting-threshold-preview,
  .item-setting-label strong {
    font-weight: var(--km-weight-medium);
  }

  .faq-item summary,
  .related-inquiry-faq-item summary {
    font-weight: var(--km-weight-semibold);
  }

  p,
  li,
  .inquiry-history-category,
  .inquiry-history-date,
  #homeNote {
    font-size: var(--km-font-body);
    line-height: 1.75;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-body);
  }

  input,
  textarea,
  select {
    font-size: var(--km-font-body);
    line-height: 1.55;
    color: var(--km-color-body);
  }

  button:not(.nav-card),
  .primary-btn,
  .secondary-btn,
  .context-chip,
  .trend-control-btn,
  .context-filter-btn,
  .date-quick-btn,
  .inquiry-switch-btn,
  .inquiry-category-inline-list button,
  .plan-add-btn,
  .mini-btn {
    font-size: var(--km-font-body);
    line-height: 1.45;
    font-weight: var(--km-weight-medium);
  }

  .muted,
  .small,
  .note,
  .auth-help,
  .context-help,
  .billing-note,
  .billing-manage-note,
  .data-delete-description,
  .plan small {
    font-size: var(--km-font-meta);
    line-height: 1.65;
    color: var(--km-color-muted);
  }

  .faq-item p,
  .related-inquiry-faq-item p,
  .legal-intro {
    line-height: 1.8;
  }

  .legal-intro {
    color: var(--km-color-body);
  }

  .calendar-nav,.year-month-nav {
    font-size: var(--km-font-section);
    line-height: 1;
  }

  .auth-brand p,.auth-loading {
    font-size: var(--km-font-body);
    line-height: 1.6;
    color: var(--km-color-muted);
  }

  .auth-link {
    font-size: var(--km-font-body);
  }

  .custom-item-edit-dialog .custom-item-edit-label,
  .account-delete-dialog label,
  .inquiry-label {
    font-weight: var(--km-weight-medium);
  }

  .km-dropdown-trigger,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-trigger {
    font-weight: var(--km-weight-regular);
    line-height: 1.35;
  }

  .km-dropdown-option,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-menu .km-dropdown-option {
    border-radius: var(--km-radius-control);
    font-weight: var(--km-weight-regular);
    line-height: 1.4;
  }

  .km-dropdown-option:hover,
  #inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-menu .km-dropdown-option:hover {
    background: var(--km-blue-soft,var(--km-color-bg-blue-soft));
  }

  @media (max-width:520px) {
    .km-dropdown-trigger,#inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-trigger,.km-dropdown-option,#inquiryCategoryPickerList.inquiry-category-inline-list .km-dropdown-menu .km-dropdown-option {
      font-size: var(--km-font-body);
    }
  }

  @media (max-width:600px) {
    #plan .plan-header-actions .secondary-btn {
      font-size: var(--km-font-meta);
    }
  }

  .calendar-nav:hover,
  .year-month-nav:hover,
  .app-date-nav:hover,
  .calendar-title-btn:hover,
  .year-month-title-btn:hover,
  .app-date-title:hover,
  .app-date-month-choice-year:hover {
    background: var(--km-color-bg-blue-soft);
    color: var(--km-color-accent);
  }

  .year-list-btn:hover,
  .year-month-btn:hover:not(:disabled),
  .app-date-year-btn:hover,
  .app-date-month-btn:hover:not(:disabled),
  .app-date-cell:hover:not(:disabled) {
    background: var(--km-color-bg-blue-soft);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .year-list-btn.selected:hover,
  .year-month-btn.selected:hover,
  .app-date-year-btn.selected:hover,
  .app-date-month-btn.selected:hover,
  .app-date-cell.selected:hover {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .year-month-btn:disabled,
  .app-date-month-btn:disabled,
  .app-date-cell:disabled {
    background: var(--km-color-bg-soft);
    color: var(--km-color-muted);
    border-color: var(--km-color-border);
  }

  #planEvaluationMode > .card > .muted {
    margin-bottom: var(--km-space-sm);
  }

  #calendarNextMonthBtn:disabled {
    opacity: .38;
    cursor: default;
  }

  @media (max-width:600px) {
    #trend .trend-analysis-head #trendValueToggle {
      font-size: var(--km-font-meta);
      line-height: 1;
    }
  }

}