@layer km-base {
  .km-page--settings #settingsRoot > .settings-page-title {
    margin: var(--km-space-md) var(--km-space-xs) 0;
  }

  .km-page--settings .settings-subpage > .settings-page-title {
    margin: 0 var(--km-space-xs);
  }

  .km-page--settings .settings-category-list {
    margin-top: 0;
  }

  .km-page--settings .settings-back-btn {
    align-self: flex-start;
    width: auto;
    border: 0;
    background: transparent;
    color: var(--km-color-accent);
    min-height: 0;
    padding: var(--km-space-xs) 0;
    margin: 0;
    font-size: var(--km-font-body);
    line-height: 1.5;
    font-weight: var(--km-weight-medium);
    cursor: pointer;
    box-shadow: none;
  }

  /* Account card spacing is entirely parent-owned: every direct row is 12px apart. */
  .km-page--settings #accountSettingsCard > p {
    margin: 0;
  }


  .km-page--settings .setting-threshold-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-md);
    margin: 0;
    padding: var(--km-space-md);
    border-radius: var(--km-radius-control);
    border-bottom: none;
  }

  .km-page--settings .setting-threshold-row.state-tone-green {
    border: 1px solid var(--state-green-border);
    border-left: 4px solid var(--state-green);
  }

  .km-page--settings .setting-threshold-row.state-tone-yellow {
    border: 1px solid var(--state-yellow-border);
    border-left: 4px solid var(--state-yellow);
  }

  .km-page--settings .setting-threshold-row.state-tone-orange {
    border: 1px solid var(--state-orange-border);
    border-left: 4px solid var(--state-orange);
  }

  .km-page--settings .setting-threshold-label {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    min-width: 0;
  }

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

  .km-page--settings .setting-number-wrap {
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    white-space: nowrap;
  }

  .km-page--settings .setting-number-wrap input {
    width: 74px;
    height: var(--km-control-min-height);
    text-align: center;
    box-sizing: border-box;
  }

  .km-page--settings .setting-threshold-preview {
    font-weight: var(--km-weight-medium);
    white-space: nowrap;
  }

  .km-page--settings .setting-example {
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-sm);
    border-radius: var(--km-radius-control);
    background: var(--km-blue-soft);
    line-height: 1.7;
    font-size: var(--km-font-body);
  }

  /* Record-item editor: one shared layout for 今日の調子 / 今日のこと.
     Outer item rhythm and action rhythm are both 8px; text actions use the standard action sizing. */
  .km-page--settings #conditionItemSettings.item-settings-list,
  .km-page--settings #contextItemSettings.item-settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
  }

  .km-page--settings #conditionItemSettings .item-setting-row,
  .km-page--settings #contextItemSettings .item-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--km-space-sm);
    min-height: var(--km-control-min-height);
    padding: var(--km-space-sm);
    border-radius: var(--km-radius-control);
  }

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

  .km-page--settings .item-setting-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--km-space-sm);
    white-space: nowrap;
    overflow: hidden;
  }

  .km-page--settings .item-setting-label strong {
    flex: 0 0 auto;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    color: var(--km-color-body);
  }

  .km-page--settings .item-setting-range {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
  }

  .km-page--settings #conditionItemSettings .item-setting-actions,
  .km-page--settings #contextItemSettings .item-setting-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--km-space-sm);
    margin: 0;
    width: auto;
    white-space: nowrap;
  }

  .km-page--settings #conditionItemSettings .mini-toggle,
  .km-page--settings #contextItemSettings .mini-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-xs);
    margin: 0;
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    color: var(--km-color-body);
    white-space: nowrap;
  }

  .km-page--settings #conditionItemSettings .mini-toggle input,
  .km-page--settings #contextItemSettings .mini-toggle input {
    width: auto;
    margin: 0;
  }

  .km-page--settings #conditionItemSettings .mini-btn,
  .km-page--settings #contextItemSettings .mini-btn {
    padding: var(--km-action-padding-y) var(--km-action-padding-x);
    min-height: var(--km-control-min-height);
    width: auto;
    border-radius: var(--km-radius-control);
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    line-height: 1.45;
    white-space: nowrap;
  }

  .km-page--settings .settings-default-reset {
    display: block;
    width: auto;
    margin: var(--km-space-sm) 0 0 auto;
    padding: var(--km-space-xs) var(--km-space-sm);
    border: 0;
    background: transparent;
    color: var(--km-color-muted);
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--km-font-meta);
    line-height: 1.5;
    font-weight: var(--km-weight-regular);
  }

  .km-page--settings .billing-current-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--km-space-md);
    padding: 0;
  }

  .km-page--settings .billing-plan-name,
  .km-page--settings .billing-plan-price {
    font-size: var(--km-font-section);
    line-height: 1.5;
    font-weight: var(--km-weight-semibold);
    color: var(--km-color-title);
  }

  .km-page--settings .billing-plan-name {
    margin-bottom: var(--km-space-xs);
  }

  .km-page--settings .billing-plan-price {
    white-space: nowrap;
  }

  .km-page--settings .billing-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--km-space-sm);
  }

  .km-page--settings .billing-choice {
    min-height: 82px;
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    background: var(--km-color-card);
    color: var(--km-color-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--km-space-sm);
    padding: var(--km-space-md);
  }

  .km-page--settings .billing-choice strong {
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    color: var(--km-color-body);
  }

  .km-page--settings .billing-choice span {
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    color: var(--km-color-body);
  }

  .km-page--settings .billing-note {
    margin: var(--km-space-sm) 0 0;
    font-size: var(--km-font-body);
    line-height: 1.65;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }


  .km-page--settings .billing-manage-btn {
    width: 100%;
  }

  .km-page--settings .billing-manage-note {
    margin: var(--km-space-sm) var(--km-space-xs) 0;
    font-size: var(--km-font-body);
    line-height: 1.65;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }

  .km-page--settings .inquiry-switch-btn.active {
    border-color: var(--km-color-primary);
  }

  .km-page--settings .legal-updated {
    margin: calc(-1 * var(--km-space-xs)) 0 0;
    color: var(--km-color-muted);
    font-size: var(--km-font-body);
    line-height: 1.65;
    font-weight: var(--km-weight-regular);
  }

  .km-page--settings #legalPrivacy h3,
  .km-page--settings #legalTerms h3,
  .km-page--settings #legalCommerce h3 {
    border-top: 1px solid var(--km-color-border);
    padding-top: var(--km-space-md);
    margin-top: var(--km-space-md);
  }

  .km-page--settings #legalPrivacy .legal-updated,
  .km-page--settings #legalTerms .legal-updated,
  .km-page--settings #legalCommerce .legal-updated {
    border-top: 1px solid var(--km-color-border);
    padding-top: var(--km-space-md);
    margin-top: var(--km-space-md);
  }

  @media (max-width:600px) {
    .km-page--settings .settings-category-list {
      gap: var(--km-space-sm);
    }

    .km-page--settings .billing-choice-grid {
      grid-template-columns: 1fr;
    }
  }


  @media (max-width:600px) {
    /* Keep item name + 表示 / 編集 / 削除 on one row on phones.
       The action sizing stays at the shared 16px / 44px standard; only the
       item-name column is allowed to shrink and ellipsize when space is tight. */
    .km-page--settings #conditionItemSettings .item-setting-row,
    .km-page--settings #contextItemSettings .item-setting-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--km-space-sm);
      padding: var(--km-space-sm);
    }

    .km-page--settings #conditionItemSettings .item-setting-main,
    .km-page--settings #contextItemSettings .item-setting-main {
      width: auto;
      min-width: 0;
    }

    .km-page--settings #conditionItemSettings .item-setting-actions,
    .km-page--settings #contextItemSettings .item-setting-actions {
      width: auto;
      min-width: max-content;
      gap: var(--km-space-sm);
    }

    .km-page--settings #conditionItemSettings .item-setting-range {
      display: none;
    }

    .km-page--settings #conditionItemSettings .item-setting-label,
    .km-page--settings #contextItemSettings .item-setting-label {
      min-width: 0;
    }

    .km-page--settings #conditionItemSettings .item-setting-label strong,
    .km-page--settings #contextItemSettings .item-setting-label strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .inquiry-history-item {
    position: relative;
    display: grid;
    gap: var(--km-space-sm);
    padding: var(--km-layout-inquiry-action-reserve) var(--km-space-md) var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    background: var(--km-color-card);
  }

  .inquiry-history-item>.inquiry-status {
    position: absolute;
    top: var(--km-space-md);
    right: var(--km-space-md);
  }

  .inquiry-history-field-label {
    font-size: var(--km-font-body);
    font-weight: var(--km-weight-medium);
    color: inherit;
    line-height: 1.7;
  }

  .inquiry-history-category,.inquiry-history-date {
    font-size: var(--km-font-body);
    line-height: 1.7;
    min-width: 0;
  }

  .inquiry-history-message {
    line-height: 1.7;
    min-width: 0;
  }

  .inquiry-history-date {
    margin: 0;
  }

  .inquiry-category-inline-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
    margin-top: var(--km-space-sm);
    padding: var(--km-space-sm);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    background: var(--km-color-card);
    scrollbar-gutter: stable;
    touch-action: pan-y;
  }

  .inquiry-category-inline-list.hidden {
    display: none;
  }

  .inquiry-category-inline-list.dragging {
    cursor: grabbing;
    user-select: none;
  }

  .inquiry-category-inline-list button {
    width: 100%;
    background: var(--km-color-card);
    color: var(--km-color-body);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-control);
    padding: var(--km-space-sm);
    font-size: var(--km-font-body);
    text-align: left;
    flex: 0 0 auto;
  }

  .inquiry-category-inline-list button.selected {
    background: var(--km-color-accent);
    color: var(--km-color-on-strong);
    border-color: var(--km-color-accent);
  }

  .related-inquiry-faq {
    margin: 0;
    padding: var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-radius: var(--km-radius-card);
    background: var(--km-color-bg-soft);
  }

  .related-inquiry-faq[hidden],#inquiryMessageSection[hidden] {
    display: none;
  }

  .related-inquiry-faq-title {
    font-weight: var(--km-weight-semibold);
    margin: 0;
  }

  .related-inquiry-faq-list {
    display: grid;
    gap: 0;
  }

  .related-inquiry-faq-item {
    border-top: 1px solid var(--km-color-border);
  }

  .related-inquiry-faq-item:last-child {
    border-bottom: 1px solid var(--km-color-border);
  }

  .related-inquiry-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--km-space-md) var(--km-space-lg) var(--km-space-md) 0;
    font-weight: var(--km-weight-semibold);
    line-height: 1.6;
    position: relative;
  }

  .related-inquiry-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .related-inquiry-faq-item summary::after {
    content: "＋";
    position: absolute;
    right: 2px;
    top: 11px;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }

  .related-inquiry-faq-item[open] summary::after {
    content: "−";
  }

  .related-inquiry-faq-item p {
    margin: 0 0 var(--km-space-md);
    line-height: 1.75;
    color: var(--km-color-body);
  }

  .related-inquiry-continue {
    margin: 0;
  }

  .inquiry-status-received {
    background: var(--km-color-bg-soft);
    color: var(--km-color-body);
  }


  .km-page--settings .legal-nav-link {
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-medium);
    color: var(--km-color-accent);
  }

  .legal-doc-card {
    line-height: 1.75;
  }

  .legal-doc-card h3 {
    margin: var(--km-space-lg) 0 var(--km-space-sm);
    font-size: var(--km-font-body);
  }

  .legal-doc-card p {
    margin: var(--km-space-sm) 0;
  }

  .legal-doc-card ul {
    margin: var(--km-space-sm) 0 var(--km-space-sm) 1.2em;
    padding: 0;
  }

  .legal-doc-card li+li {
    margin-top: var(--km-space-sm);
  }


  .legal-note {
    margin: 0;
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
  }


  .inquiry-form {
    margin: 0;
  }

  .inquiry-field {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-sm);
    margin: 0;
  }

  .inquiry-label {
    display: block;
    font-weight: var(--km-weight-medium);
    margin: 0;
  }

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

  .inquiry-field textarea {
    height: var(--km-inquiry-message-height);
    min-height: var(--km-inquiry-message-height);
    max-height: var(--km-inquiry-message-height);
    resize: none;
    line-height: 1.7;
  }

  .inquiry-field select:focus,.inquiry-field textarea:focus {
    outline: 2px solid var(--km-color-focus-outline);
    border-color: var(--km-color-primary-hover);
  }

  .inquiry-char-count {
    display: block;
    margin: 0;
    text-align: right;
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
  }

  .inquiry-form-message {
    margin: 0;
    padding: var(--km-space-sm) var(--km-space-sm);
    border-radius: var(--km-radius-control);
    font-size: var(--km-font-body);
    line-height: 1.6;
  }

  .inquiry-form-message.success {
    background: var(--km-color-state-green-soft);
    color: var(--km-color-success-text);
  }

  .inquiry-form-message.error {
    background: var(--km-color-danger-soft);
    color: var(--km-color-danger);
  }

  .inquiry-form-message.info {
    background: var(--km-color-page);
    color: inherit;
  }

  .inquiry-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--km-space-sm);
    margin: 0;
  }

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

  .inquiry-switch-btn.active {
    background: var(--km-color-bg-blue-soft);
    border-color: var(--km-color-primary-hover);
  }

  .inquiry-panel[hidden] {
    display: none;
  }

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

  .inquiry-history-head .muted {
    margin: 0;
  }

  .inquiry-refresh-btn {
    width: auto;
    min-width: 86px;
    padding: var(--km-space-sm) var(--km-space-md);
    flex: 0 0 auto;
  }

  .inquiry-history-list {
    display: grid;
    gap: var(--km-space-md);
  }

  .inquiry-history-category {
    font-size: var(--km-font-body);
    line-height: 1.5;
  }

  .inquiry-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--km-radius-pill);
    padding: var(--km-space-xs) var(--km-space-xs);
    font-size: var(--km-font-meta);
    font-weight: var(--km-weight-medium);
    background: var(--km-color-bg-soft);
    color: var(--km-color-body);
  }

  .inquiry-status-replied {
    background: var(--km-color-state-green-soft);
    color: var(--km-color-success-text);
  }

  .inquiry-history-date {
    margin-top: var(--km-space-xs);
    color: var(--km-color-muted);
    font-size: var(--km-font-meta);
  }

  .inquiry-history-message {
    margin: var(--km-space-md) 0 0;
  }

  .inquiry-admin-reply {
    margin-top: var(--km-space-md);
    padding: var(--km-space-md);
    border-radius: var(--km-radius-control);
    background: var(--km-color-bg-soft);
  }

  .inquiry-admin-reply strong {
    display: block;
    font-size: var(--km-font-meta);
    margin-bottom: var(--km-space-sm);
  }

  .inquiry-admin-reply p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  @media (max-width:520px) {
    .inquiry-history-head {
      align-items: flex-start;
    }

    .inquiry-switch-btn {
      font-size: var(--km-font-meta);
    }
  }

  .inquiry-history-field {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
  }

  .inquiry-history-field-label,
  .inquiry-history-category,
  .inquiry-history-message,
  .inquiry-history-date {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--km-font-body);
    line-height: 1.7;
  }

  .inquiry-history-field-label {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .inquiry-history-category,
  .inquiry-history-message,
  .inquiry-history-date {
    min-width: 0;
    color: inherit;
  }

  .inquiry-history-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .faq-list {
    display: grid;
    gap: var(--km-space-sm);
    margin-top: 0;
  }

  .faq-item {
    border-top: 1px solid var(--km-color-border);
    padding: 0;
  }

  .faq-item:last-child {
    border-bottom: 1px solid var(--km-color-border);
  }

  .faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--km-space-md) var(--km-space-xs);
    font-weight: var(--km-weight-semibold);
    line-height: 1.6;
    position: relative;
    padding-right: var(--km-space-lg);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item summary::after {
    content: "＋";
    position: absolute;
    right: 2px;
    top: 13px;
    font-weight: var(--km-weight-regular);
    color: var(--km-color-muted);
  }

  .faq-item[open] summary::after {
    content: "−";
  }

  .faq-item p {
    margin: 0 var(--km-space-xs) var(--km-space-md);
    line-height: 1.8;
    color: var(--km-color-body);
  }

  .inquiry-admin-reply-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--km-space-sm);
    margin-bottom: var(--km-space-sm);
  }

  .inquiry-admin-reply-head strong {
    margin: 0;
  }

  .inquiry-admin-reply-date {
    font-size: var(--km-font-meta);
    color: var(--km-color-muted);
    white-space: nowrap;
    line-height: 1.6;
  }

  @media (max-width:520px) {
    .inquiry-admin-reply-head {
      display: block;
    }

    .inquiry-admin-reply-date {
      display: block;
      margin-top: var(--km-space-xs);
      white-space: normal;
    }
  }

  /* Accordion outer shell is structural only. The toggle itself is the visible
     heading card, matching the settings top cards exactly when closed. */
  #settings .settings-accordion-card:not(.hidden):not([hidden]) {
    display: block;
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #settings .settings-accordion-card.is-open .settings-accordion-toggle {
    border-radius: var(--km-radius-card) var(--km-radius-card) 0 0;
    border-bottom-color: var(--km-color-border);
    box-shadow: none;
  }

  #settings .settings-accordion-chevron {
    transition: transform .15s ease;
  }

  #settings .settings-accordion-card.is-open .settings-accordion-chevron {
    transform: rotate(180deg);
  }

  #settings .settings-accordion-content {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-md);
    padding: var(--km-space-md);
    border: 1px solid var(--km-color-border);
    border-top: 0;
    border-radius: 0 0 var(--km-radius-card) var(--km-radius-card);
    background: var(--km-color-card);
    box-shadow: var(--km-shadow-card);
  }

  #settings .settings-accordion-content[hidden] {
    display: none;
  }

  /* Every settings accordion uses the same 12px internal rhythm. */
  #settings .settings-accordion-content > p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .km-page--settings .settings-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-sm);
    margin-top: 0;
  }

  .km-page--settings .settings-list-footer .settings-add-trigger,
  .km-page--settings .settings-list-footer .settings-default-reset {
    margin-top: 0;
  }

  .km-page--settings .settings-list-footer .settings-default-reset {
    margin-left: auto;
  }

  .settings-add-dialog {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .settings-add-head {
    margin: 0 0 var(--km-space-sm);
  }

  .settings-add-head h3 {
    margin: 0;
  }

  .settings-add-dialog .custom-item-edit-label {
    display: block;
    margin: 0 0 var(--km-space-sm);
  }

  .settings-add-dialog .custom-item-edit-label + .custom-item-edit-label {
    margin-top: var(--km-space-md);
  }

  .settings-add-dialog .custom-item-edit-label input {
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--km-space-sm);
  }

  .settings-add-confirm {
    background: var(--km-color-primary);
    border-color: var(--km-color-primary);
    color: var(--km-color-accent);
  }

  #faqSettingsCard .faq-list .faq-item:first-child {
    border-top: 0;
  }
}

@layer km-priority {
  .km-page--settings .settings-default-reset:hover {
    background: transparent;
    color: var(--km-color-title);
  }

  .km-page--settings .inquiry-switch-btn:hover:not(.active) {
    background: var(--km-color-bg-blue-soft);
    color: var(--km-color-title);
    border-color: var(--km-color-border);
  }

  .km-page--settings .inquiry-switch-btn.active {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
  }

  .km-page--settings .inquiry-switch-btn.active:hover {
    background: var(--km-color-primary-hover);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary-hover);
  }

  .km-page--settings .inquiry-switch-btn:focus-visible {
    outline: 2px solid var(--km-color-focus-outline-strong);
    outline-offset: 2px;
  }

  .km-page--settings .billing-choice:hover:not(:disabled) {
    background: var(--km-color-bg-blue-soft);
    color: var(--km-color-body);
    border-color: var(--km-color-primary);
  }

  .km-page--settings .billing-choice:active:not(:disabled) {
    background: var(--km-color-primary);
    color: var(--km-color-accent);
    border-color: var(--km-color-primary);
  }

  .km-page--settings .billing-choice:focus-visible {
    outline: 2px solid var(--km-color-focus-outline-strong);
    outline-offset: 2px;
  }

  .km-page--settings .about-version {
    margin: 0;
    text-align: center;
  }

  #legalContact .inquiry-panel > p {
    margin: 0;
  }

}


@layer km-pages {
  /* Reordering remains available from the item-name area; the dedicated ≡ handle is no longer shown. */
  .km-page--settings #conditionItemSettings .item-setting-drag-area,
  .km-page--settings #contextItemSettings .item-setting-drag-area {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .km-page--settings #conditionItemSettings .item-setting-drag-area:active,
  .km-page--settings #contextItemSettings .item-setting-drag-area:active {
    cursor: grabbing;
  }
}