/* 全画面共通の配色と装飾。文字・機能・配置は変更しない */
:root {
  color-scheme: dark;
  --background: #080f1c;
  --bg: #080f1c;
  --panel: #122138;
  --card: #101c2e;
  --border: #506782;
  --border-light: #8fa9c5;
  --text: #f3f7ff;
  --muted: #bac9db;
  --secondary: #bac9db;
  --accent: #427eb5;
  --nav-background: #0e1a2c;
}

html, body {
  color: #f3f7ff;
  background: radial-gradient(ellipse at 50% 0%, #1b3455 0%, #0d1a2d 43%, #070e19 100%) fixed !important;
}

.topbar, .bottom-nav, header.topbar {
  background: linear-gradient(135deg, #15263d, #0a1423) !important;
  border-color: #607a9a !important;
  box-shadow: 0 2px 15px #0005, inset 0 1px #bcd7ff1a;
}

.topbar h1, header h1 {
  color: #f5f8ff;
  text-shadow: 0 0 16px #69b6ff40;
}

.search-panel, .reward-card, .card, .stat, .customer, .visit-card,
.record-card, .detail-section, .settlement, .comparison, .panel,
.saved-item, .visit, .settings-panel, .settings-card,
#settings-dialog, .dialog, .filter, .date-range {
  border-color: #637e9e !important;
  background: radial-gradient(circle at 95% 0%, #294a704d, transparent 58%),
              linear-gradient(145deg, #172a43, #0d192a) !important;
  box-shadow: inset 0 1px 0 #c5e1ff24, 0 8px 22px #0005 !important;
}

.search-panel, .reward-card, .card, .customer, .visit-card, .record-card, .stat {
  border-style: solid;
}

.search-panel, .reward-card {
  position: relative;
}

.search-panel::before, .reward-card::before {
  content: "✦";
  position: absolute;
  top: 7px;
  right: 13px;
  font-size: 15px;
  color: #c7dcf5;
  opacity: .55;
  pointer-events: none;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
textarea, select {
  border-color: #6b86a5 !important;
  background-color: #0c192b !important;
  color: #f5f8ff !important;
  box-shadow: inset 0 2px 5px #0003;
}

input::placeholder, textarea::placeholder { color: #a6b9cf !important; }

.search-button, .save-button, .primary, .btn.primary, .settings-primary {
  border: 1px solid #8bc6f5 !important;
  background: linear-gradient(120deg, #183d68, #2b6398 55%, #153558) !important;
  color: #fff !important;
  box-shadow: inset 0 1px #d4ebff60, 0 4px 15px #1978c13b !important;
}

.secondary, .scan-button, .btn:not(.primary):not(.danger),
.rating-choice, .choice, .detail-action, .settlement > summary,
.header-preset, .settings-action-row button {
  border-color: #617c9c !important;
  background: linear-gradient(145deg, #1a2d46, #101e31) !important;
  color: #e8f1fc;
}

.rating-choice:has(input:checked), .choice:has(input:checked),
.header-preset[aria-pressed="true"], .nav-item[aria-current="page"] {
  border-color: #95c9f1 !important;
  background: linear-gradient(135deg, #244e79, #193753) !important;
  color: #f7fbff !important;
  text-shadow: 0 0 10px #65b6ff55;
}

.nav-item { color: #b1c3d9 !important; }
.nav-item[aria-current="page"] {
  background: transparent !important;
  color: #d8efff !important;
}

.description, .note, .sub, .customer-subtitle,
#feedback, #count, .reward-info, .settings-description {
  color: #bdcde0 !important;
}

.reward, #calculated-reward, .stat strong, .reward-total {
  color: #f7fbff;
  text-shadow: 0 0 17px #5aaeff55;
}

:focus-visible { outline-color: #9ed5ff !important; }

/* 撮影映像・写真・保存画像は加工しない */
video, canvas, img { filter: none; }


/* ホームの施術記録ボタン */
.action-tile-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid #a7d8fa !important;
  border-radius: 19px;
  background: linear-gradient(145deg, #426d9e 0%, #285480 30%, #163457 66%, #10233d 100%) !important;
  box-shadow: inset 0 1px 0 #f2f9ff8c, inset 0 -2px 8px #07182b9c, 0 6px 18px #0209138c, 0 0 15px #399df455 !important;
  color: #f8fbff;
  text-shadow: 0 1px 3px #07172e;
}
.action-tile-primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 1px solid #d4e8ff52;
  border-radius: 14px;
  pointer-events: none;
}
.action-tile-primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  left: -35%;
  width: 115%;
  height: 150%;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, #ffffff20 48%, transparent);
  pointer-events: none;
}
.action-tile-primary .tile-icon {
  color: #f6fbff;
  text-shadow: 0 0 12px #91d4ffb3;
}
.action-tile-primary .diagonal-arrow { color: #e4f3ff; }
.action-tile-primary > strong {
  color: #fff;
  text-shadow: 0 0 10px #89c9ff66;
}
.action-tile-primary .tile-description { color: #e1edfb; }
.action-tile-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px #081a32, 0 0 10px #399df433 !important;
}

/* 下部メニューの幅・高さ・アイコン配置を全画面で統一 */
.bottom-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-nav .nav-item {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  text-align: center !important;
}

.bottom-nav .nav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 29px !important;
  line-height: 1 !important;
}

.bottom-nav .nav-icon svg {
  display: block !important;
  width: 29px !important;
  height: 29px !important;
}

.bottom-nav .nav-label {
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* 勤務記録と施術詳細の削除ボタンを統一 */
.detail-actions .delete-action,
.record-actions .danger {
  border: 1px solid #b98484 !important;
  background: #432c35 !important;
  color: #f0f2f4 !important;
}