:root {
  --lch-bg: #101315;
  --lch-surface: #15191b;
  --lch-raised: #20272a;
  --lch-text: #eef2f3;
  --lch-muted: #a7b4ba;
  --lch-line: #596469;
  --lch-info: #8edcff;
}
html[data-theme="light"] {
  color-scheme: light;
  --lch-bg: #f5f7f8;
  --lch-surface: #ffffff;
  --lch-raised: #edf2f4;
  --lch-text: #18252c;
  --lch-muted: #52636d;
  --lch-line: #b8c5cc;
  --lch-info: #086c8c;
  --lch-success: #216b41;
  --lch-warning: #845716;
  --lch-danger: #ad3044;
  --lch-purple: #654985;
  --lch-info-bg: #eaf5fa;
  --lch-success-bg: #edf6ef;
  --lch-warning-bg: #fff5e4;
  --lch-danger-bg: #fff0f2;
  --lch-purple-bg: #f5f0fa;
}
.appearance-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 8px;
  border: 1px solid var(--lch-line);
  border-radius: 5px;
  background: var(--lch-surface);
  color: var(--lch-text);
  cursor: pointer;
}
.appearance-open svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appearance-dialog {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--lch-line);
  border-radius: 8px;
  background: var(--lch-surface);
  color: var(--lch-text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  box-shadow: 0 16px 60px rgb(0 0 0 / 20%);
}
.appearance-dialog:not([open]) { display: none; }
.appearance-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.appearance-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appearance-dialog h2 { margin: 0; font-size: 20px; }
.appearance-dialog .appearance-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; min-height: 40px; border: 1px solid var(--lch-line); border-radius: 5px; background: var(--lch-surface); color: var(--lch-text); font-size: 26px; line-height: 1; cursor: pointer; }
.appearance-caption, .appearance-status { margin: 12px 0; font-size: 13px; color: var(--lch-muted); }
.appearance-status { min-height: 20px; }
.appearance-settings { padding: 20px 0; border-block: 1px solid var(--lch-line); margin-bottom: 20px; }
.appearance-settings h2 { margin: 0 0 12px; font-size: 17px; }
.appearance-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; max-width: 460px; }
.appearance-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 14px 6px 12px; border: 1px solid var(--lch-line); border-radius: 6px; background: var(--lch-surface); color: var(--lch-text); font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; }
.appearance-option input { position: absolute; width: 18px; height: 18px; top: 6px; right: 6px; margin: 0; accent-color: #1481a1; }
.appearance-option:has(input:checked) { border: 2px solid #1481a1; padding: 13px 5px 11px; }
.appearance-option:has(input:focus-visible) { outline: 3px solid var(--lch-info); outline-offset: 3px; }
.appearance-swatch { display: block; width: 44px; height: 32px; margin-top: 8px; border: 1px solid #a2b2ba; border-radius: 4px; background: #ffffff; box-shadow: inset 0 7px #e1e7ea; }
.appearance-swatch[data-mode="dark"] { background: #15191b; box-shadow: inset 0 7px #080a0b; }
.appearance-swatch[data-mode="system"] { background: linear-gradient(90deg, #ffffff 50%, #15191b 50%); box-shadow: inset 0 7px #7c8a92; }
.appearance-swatch[data-mode="schedule"] { background: linear-gradient(135deg, #ffffff 50%, #15191b 50%); box-shadow: inset 0 7px #7c8a92; }
.appearance-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 460px) {
  .appearance-dialog { padding: 18px; }
  .appearance-option { font-size: 12px; }
  .guide-header { flex-wrap: wrap; gap: 8px; }
  .guide-header nav { flex-wrap: wrap; margin-left: auto; }
  .help-header nav { flex-wrap: wrap; align-items: center; }
}
@media screen {
  html[data-theme="light"][data-appearance-styles~="styles"] { --ai-accent: #11789e; }
  html[data-theme="light"][data-appearance-styles~="browser-device-login"] .primary-action { background: #11769a; }
  html[data-theme="light"][data-appearance-styles~="hub-care-tables"] .care-main button.care-primary:hover:not(:disabled) { background: #0d5861; }
  html[data-theme="light"][data-appearance-styles~="hub-care-tables"] :is(.board-tools, .board-history, .board-zoom, .lane-moves) .care-icon { filter: none; }
  html[data-theme="light"] :is(.screen-hint, .profile-close, .image-attachment-name) { background: #ffffff; color: #18252c; border-color: #b8c5cc; }
}
@media print { .appearance-open, .appearance-dialog, .appearance-settings { display: none !important; } }