/* ===== デザインシステム: 実用的で整然としたUI ===== */
/* 色階層: 背景 / surface / accent はテーマトークンだけで切り替える */
:root{
  /* ===== 統一デザイントークン（確定版） ===== */
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-num:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  /* Color: lightを初期値にし、旧名は下で互換エイリアスにする */
  --bg:#F2F2F7;
  --surface:#FFFFFF;
  --surface-secondary:#F7F7FA;
  --text:#1C1C1E;
  --text-subtle:#636366;
  --text-muted:#8E8E93;
  --border:rgba(60,60,67,.18);
  --border-strong:rgba(60,60,67,.28);
  --divider:rgba(60,60,67,.12);
  --accent:#636366;
  --accent-rgb:99,99,102;
  --accent-soft:#F2F2F7;
  --button-bg:#F2F2F7;
  --button-text:#636366;
  --input-bg:#FFFFFF;
  --time-primary:#1C1C1E;
  --time-secondary:#636366;
  --toggle-bg:#C7C7CC;
  --toggle-active:#636366;
  --danger-bg:rgba(179,69,61,.10);
  --danger-text:#B3453D;
  --success:#34C759;
  --disabled-bg:#C7C7CC;
  --blue-primary:var(--accent);
  --blue-hover:var(--accent);
  --blue-active:var(--accent);
  --blue-text:var(--accent);
  --theme-accent:var(--accent);
  --theme-accent-rgb:var(--accent-rgb);
  --theme-soft:var(--accent-soft);
  --theme-line:var(--card-border);
  --signal:var(--accent);
  --signal-rgb:var(--accent-rgb);
  --text-primary:var(--text);
  --text-secondary:var(--text-subtle);
  --card-bg:var(--surface);
  --bg-light:var(--surface-secondary);
  --bg-lighter:var(--surface-secondary);
  --bg-blue-light:var(--surface-secondary);
  --red-error:var(--danger-text);
  --red-error-hover:var(--danger-text);
  --red-error-bg:var(--danger-bg);
  --btn-disabled:var(--disabled-bg);
  --text-tertiary:var(--divider);
  /* Radius: 0を基本にしつつ、操作要素とカードだけ小さな丸みを許可 */
  --radius:0;
  --radius-control:10px;
  --control-radius:10px;
  --radius-control-sm:8px;
  --card-radius:12px;
  --radius-card:var(--card-radius);
  --preview-radius:10px;
  --card-border:var(--border);
  --preview-border:var(--border);
  /* Shadow: 常設カード用の控えめな影と、一時的に浮くオーバーレイ用の2種類のみ */
  --shadow:0 1px 3px rgba(0,0,0,0.05);
  --shadow-rest:0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.04);
  --clock-shadow:0 2px 6px rgba(28,28,30,.03),0 8px 18px rgba(28,28,30,.035);
  --shadow-overlay:0 8px 24px rgba(0,0,0,0.18);
  --member-settings-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.14.38.36.72.66 1 .3.27.68.41 1.08.4H21v4h-.09A1.7 1.7 0 0 0 19.4 15Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --spacing:12px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --touch-target:44px;
  --control-height:44px;
  --motion-signal-dur:.8s;
  /* 王城決戦・着弾時刻・スイッチ、3タブ共通のレイアウト寸法。
     タブ下から「計算開始」までの縦位置をここだけで揃える */
  --settings-row-height:56px;
  --settings-top-gap:6px;
  --settings-bottom-gap:24px;
  --settings-rows-max:3;
  --settings-area-height:calc(var(--settings-row-height) * var(--settings-rows-max));
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){
  body,
  button,
  input,
  select,
  .clock,
  .page-tabs,
  .page-tab-btn,
  .mode-card,
  .collapsible-card,
  .collapsible-header,
  .copy-preview-card,
  .preview-text-box,
  .device-settings-modal,
  .device-settings-panel,
  .device-settings-group,
  .device-settings-row,
  .clock-quick-menu,
  .clock-quick-menu-item,
  .toast,
  svg,
  svg *{
    transition-property:background-color,color,border-color,box-shadow,fill,stroke;
    transition-duration:.25s;
    transition-timing-function:ease;
  }
}
body{
  background:var(--bg);
  font-family:var(--font-ui);
  color:var(--text-primary);
  font-size:16px;
  line-height:1.6;
  margin:0;
  padding:var(--spacing);
  padding-bottom:16px;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:450px;
  margin:0 auto;
}

/* ===== 共通パーツ ===== */
label{
  font-size:15px;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:8px;
}
select{
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:var(--control-radius);
  padding:10px 12px;
  font-size:16px;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  min-height:var(--touch-target);
  transition:border-color 0.2s;
}
select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}
input{
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:var(--control-radius);
  padding:10px 12px;
  font-size:16px;
  color:var(--text-secondary);
  min-height:var(--touch-target);
  transition:border-color 0.2s;
}
input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}

/* ===== ボタン ===== */
button{
  background:var(--button-bg);
  color:var(--button-text);
  border:none;
  border-radius:var(--radius);
  padding:12px 20px;
  font-size:17px;
  font-weight:700;
  width:100%;
  cursor:pointer;
  margin-top:var(--spacing);
  min-height:var(--touch-target);
  transition:background 0.2s, transform 0.1s;
}
.collapsible-header{
  -webkit-tap-highlight-color:transparent;
}
button:hover{
  background:var(--button-bg);
}
button:active{
  background:var(--button-bg);
  transform:scale(0.98);
}
button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20);
}

/* ===== ヘッダー（UTC時計） ===== */
.header{
  text-align:center;
  margin-bottom:var(--spacing);
}
.clock{
  font-size:40px;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-family:var(--font-num);
}
#utc-now{
  text-shadow:none;
}
.utc-label{
  font-size:0.5em;
  color:var(--text-secondary);
  font-weight:500;
  margin-left:4px;
}
.mode-card{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  margin:var(--spacing) 0;
  box-shadow:var(--shadow);
  box-sizing:border-box;
  width:100%;
  padding:var(--spacing);
}
.impact-display{
  display:none;
  text-align:center;
}
.impact-display-inner{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  line-height:1.5;
  margin-left:-20px;
}
.collapsible-card{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  margin:var(--spacing) 0;
  box-shadow:var(--shadow);
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  margin-top:0 !important;
}
.collapsible-header{
  padding:6px var(--spacing);
  cursor:pointer;
  padding-top:4px !important;
  padding-bottom:4px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-light);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  min-height:30px;
  transition:background 0.2s;
  border:none;
  width:100%;
  text-align:left;
  font-family:inherit;
  font-size:inherit;
}
.collapsible-header:hover{
  background:var(--bg-lighter);
}
.collapsible-header:focus{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}
.collapsible-header-title{
  font-size:15px;
  font-weight:600;
  color:var(--text-secondary);
}
.collapsible-arrow{
  font-size:16px;
  color:var(--text-muted);
}
.collapsible-content{
  overflow:hidden;
  transition:height 0.3s ease;
}
.collapsible-content[aria-hidden="true"]{
  height:0;
  overflow:hidden;
}
.collapsible-content-inner{
  padding:0;
  background:var(--surface);
  border-radius:0;
  border:1px solid var(--divider);
}
#time-input-group{
  margin-right:4px;
}
.hidden{
  display:none;
}
.aligned-box{
  width:100%;
  margin:0;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
  text-align:center;
  box-shadow:var(--shadow);
}
/* ===== セクション（カード風アコーディオン） ===== */

/* “カードっぽさ”は最小限 */

/* 結果ボックス（強調） */
/* メンバーテーブル */
#sec-members{
  overflow-x:hidden;
  padding:0;
  margin:0;
}

/* ===== 集結主リスト ===== */
.members-list{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* メンバー行ラッパー */
.member-row-wrapper{
  position: relative;
  overflow: hidden;
}

/* モーダル表示中はスワイプ無効 */
body.modal-open .member-row-wrapper{
  pointer-events: none;
}
.member-row-wrapper .delete-bg{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: var(--danger-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 0;
  visibility: hidden;
}
.member-row-wrapper.swiping .delete-bg{
  visibility: visible;
}

/* 集結主行 */
.member-row{
  display:block;
  padding:0;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
  min-height: 44px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.member-identity-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:6px 10px 6px 14px;
}
.member-identity-row .name-text{
  flex:1;
  min-width:0;
}
.member-departure-inline{
  display:inline-flex;
  align-items:baseline;
  margin-left:auto;
  white-space:nowrap;
}
.member-departure-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:30px;
  padding:3px 7px;
  border-radius:8px;
  background:var(--bg);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
  letter-spacing:-0.02em;
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
}
.member-departure-status.counting{
  background:var(--accent-soft);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.10);
}
.member-departure-status.departed{
  background:var(--surface-secondary);
  color:var(--text-secondary);
}

@media (max-width:350px){
.member-departure-status{
    gap:3px;
    padding-left:5px;
    padding-right:5px;
    font-size:11px;
  }
}
.member-settings-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  min-width:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:9px;
  background:var(--surface-secondary);
  color:var(--text-secondary);
  font-size:0;
  line-height:1;
  box-shadow:none;
  transform:none;
}
.member-settings-toggle::before{
  content:"";
  width:20px;
  height:20px;
  background-color:currentColor;
  -webkit-mask:var(--member-settings-icon) center / contain no-repeat;
  mask:var(--member-settings-icon) center / contain no-repeat;
}
.member-settings-toggle:hover, .member-settings-toggle:focus, .member-settings-toggle:active, .member-settings-toggle[aria-expanded="true"]{
  background:var(--accent-soft);
  color:var(--accent);
  box-shadow:none;
  transform:none;
}
.member-auto-settings{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:44px;
  padding:10px 12px 12px;
  border-top:1px solid var(--divider);
  background:var(--surface-secondary);
  color:var(--text-secondary);
  font-size:13px;
}
.member-auto-settings[hidden]{
  display:none !important;
}
.member-coordinates{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  color:var(--text-subtle);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.member-settings-pet-control{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-subtle);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.member-settings-pet-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.member-settings-pet-toggle:checked + .stat-boost-switch{
  border-color:var(--accent);
  background:var(--accent);
}
.member-settings-pet-toggle:checked + .stat-boost-switch::after{
  display:block;
}
.member-pet-remaining{
  color:var(--text-secondary);
  font-family:var(--font-num);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
}
.coord-input{
  width:46px;
  min-width:46px;
  min-height:36px;
  height:36px;
  padding:3px 4px;
  border:1px solid var(--border);
  border-radius:var(--control-radius);
  background:var(--input-bg);
  color:var(--text-primary);
  font-family:var(--font-num);
  font-size:15px;
  font-weight:700;
  text-align:center;
  user-select:text;
}
.coord-input:focus{
  border-color:var(--accent);
  background:var(--input-bg);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12);
}
.stat-boost-control{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-subtle);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.stat-boost-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.stat-boost-switch{
  position:relative;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:2px solid var(--toggle-bg);
  border-radius:5px;
  background:var(--surface);
  transition:background .2s, border-color .2s;
}
.stat-boost-switch::after{
  content:'';
  position:absolute;
  display:none;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:2px solid var(--surface);
  border-top:0;
  border-left:0;
  transform:rotate(42deg);
}
.stat-boost-toggle:checked + .stat-boost-switch{
  border-color:var(--accent);
  background:var(--accent);
}
.stat-boost-toggle:checked + .stat-boost-switch::after{
  display:block;
}
.march-control{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  min-width:0;
}
.march-auto-badge{
  margin:0;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.auto-march-active .march-auto-badge{
  color:var(--accent);
}
.auto-march-missing .march-auto-badge{
  color:var(--danger-text);
}

/* ペット発動中の集結主行 */
.member-row.pet-active{
  background:var(--accent-soft);
}

/* 名前：入力枠なし、テキストだけ */
.name-text{
  font-family:var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
  min-height: 1.2em;
  min-width: 50px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-text:empty:before{
  content: attr(data-placeholder);
  color: var(--text-muted);
}
.name-text:focus{
  background:var(--accent-soft);
}

/* 行軍セレクト */
.march-select{
  width: 68px;
  min-height:36px;
  padding: 6px 4px 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family:var(--font-ui);
  font-size: 15px !important;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: calc(100% - 2px) center;
  background-size: 10px;
  padding-right: 14px;
  justify-self: start;
  text-align: left;
}
.march-select:focus{
  background-color:var(--accent-soft);
}
.march-select:disabled{
  opacity:1;
  color:var(--accent);
  cursor:default;
  background-image:none;
  -webkit-text-fill-color:var(--accent);
}

@media (max-width:380px){
.member-auto-settings{
    padding-left:8px;
    padding-right:8px;
  }
.coord-input{
    width:42px;
    min-width:42px;
  }
.stat-boost-control, .member-coordinates, .member-settings-pet-control{
    font-size:12px;
  }
.march-select{
    width:64px;
    font-size:14px !important;
  }
.member-pet-remaining{
    font-size:12px;
  }
}

/* 時刻（自動） */

/* 削除ボタン - 非表示 */
.button-controls{
  display:flex;
  align-items:center;
  gap:16px;
  margin:12px 12px;
  justify-content:space-between;
}

/* コントロールボタン */
.control-btn{
  flex:1;
  background:var(--surface);
  color:var(--accent);
  border:2px solid var(--accent);
  border-radius:8px;
  padding:12px 12px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  min-height:var(--touch-target);
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .1s;
  margin:0;
}
.control-btn:hover{
  background:var(--accent);
  color:var(--surface);
}
.control-btn:active{
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(0.98);
}

/* プレビューテキストボックス */
.preview-text-box{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.6;
  color:var(--text-primary);
  white-space:pre-wrap;
  word-break:break-word;
  background:var(--surface-secondary);
  padding:12px;
  border-radius:var(--preview-radius);
  border:1px solid var(--preview-border);
}

/* 集結主テーブルの外枠 */
.members-table{
  border:2px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.members-table.flash{
  animation:tableFlashEffect var(--motion-signal-dur) ease;
}
#l-result-inner{
  border:2px solid transparent;
  border-radius:var(--radius);
  transition:border-color .3s ease,box-shadow .3s ease;
}
/* ===== Tab1 (王城決戦) スコープ限定 ===== */
#page-calc #impact-display .impact-display{ display:block; }
/* ===== /Tab1 ===== */

/* ===== Tab2 (着弾時刻発行) スコープ限定 ===== */
#page-landing .mode-card{
  padding:12px !important;
  margin:12px 0 !important;
}
#l-result .impact-display{ display:block; }
/* ===== /Tab2 ===== */

/* ===== Tab3 (スイッチ) スコープ限定 ===== */
#page-switch .mode-card{
  padding:12px;
  margin:12px 0;
}
#page-switch .sw-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 2px;
  border-bottom:1px solid var(--border);
}
#page-switch .sw-row:last-of-type{
  border-bottom:none;
}
/* ラベル・単位の文字サイズ/色を王城決戦・着弾時刻の同種の行（departure-setting-name / departure-after-text）に揃える */
#page-switch .sw-row-label{
  font-size:17px;
  font-weight:600;
  color:var(--text-primary);
}
#page-switch .sw-row-control{
  display:flex;
  align-items:center;
  gap:8px;
}
#page-switch .sw-row-control select{
  -webkit-appearance:none;
  appearance:none;
  background-image:none;
  font-family:inherit;
}
/* 同じ行にある select（55秒）と書体を揃える。font-numだと「30」だけ字形が変わり、
   同じスイッチタブの中で行ごとに高さ・太さの見え方がずれて見える原因になっていた */
#page-switch .impact-display{
  display:block;
}
#page-switch .sw-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  min-width:20px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--border);
  font-size:0;
}
#page-switch .sw-chevron::after{
  content:"";
  display:block;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:rotate(-45deg);
}
#page-switch .sw-chevron:hover, #page-switch .sw-chevron:focus, #page-switch .sw-chevron:active{
  color:var(--accent);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* ===== /Tab3 ===== */

/* signal色はこの計算完了フラッシュ専用。他のUI(ホバー/選択/バッジ等)には流用しない */
@keyframes tableFlashEffect{
  0%{
    border-color:transparent;
    box-shadow:0 0 0 rgba(var(--signal-rgb),0);
  }
  30%{
    border-color:var(--signal);
    box-shadow:0 0 20px rgba(var(--signal-rgb),0.45);
  }
  70%{
    border-color:var(--signal);
    box-shadow:0 0 20px rgba(var(--signal-rgb),0.45);
  }
  100%{
    border-color:transparent;
    box-shadow:0 0 0 rgba(var(--signal-rgb),0);
  }
}
.dep{font-size:1.05rem;font-weight:700;color:var(--accent)}
.copy{white-space:pre-line;background:var(--surface);border:1px solid var(--border);padding:8px;min-height:40px;font-size:14px;line-height:1.4;margin-top:8px;border-radius:var(--radius);color:var(--text-secondary);font-weight:500}
.footer{text-align:center;color:var(--text-tertiary);font-size:12px;margin-top:20px;user-select:none}
body #page-calc #action-btn.calculating{background:var(--btn-disabled);cursor:not-allowed;box-shadow:none}

/* シングルライン */
.inline-select{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--control-radius);
  padding:10px 12px;
  font-size:17px;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  min-width:60px;
  min-height:var(--touch-target);
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  transition:border-color 0.2s;
}
.inline-select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}
.btn-primary{
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .1s;
}
.btn-primary:active{
  transform:translateY(1px);
}
.btn-primary:focus, .btn-primary:focus-visible{
  outline:none;
}

/* コピー時のトースト */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:var(--accent);
  color:var(--surface);
  padding:10px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  z-index:9999;
  white-space:nowrap;
}
.toast.show{opacity:1}

/* オートコンプリートドロップダウン */
.autocomplete-dropdown{
  position:absolute;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:0 4px 8px rgba(0,0,0,0.12);
  max-height:200px;
  overflow-y:auto;
  z-index:1000;
  display:none;
  min-width:200px;
}
.autocomplete-dropdown.show{
  display:block;
}
.autocomplete-item{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background 0.15s;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.autocomplete-item:last-child{
  border-bottom:none;
}
.autocomplete-item:hover, .autocomplete-item.selected{
  background:var(--bg-blue-light);
}
.autocomplete-name{
  font-weight:600;
  color:var(--text-secondary);
  flex:1;
  font-size:15px;
}
.autocomplete-march{
  font-size:13px;
  color:var(--text-muted);
  background:var(--bg-light);
  padding:3px 8px;
  border-radius:4px;
  font-weight:500;
  white-space:nowrap;
}

/* ===== ページタブ ===== */
.page-tabs{
  display:flex;
  gap:var(--space-4);
  margin-bottom:var(--spacing);
  border-bottom:1px solid var(--border);
  background:transparent;
}
.page-tab-btn{
  flex:0 0 auto;
  width:auto;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  margin-bottom:-1px;
  padding:10px 2px;
  font-size:15px;
  font-weight:500;
  color:var(--text-muted);
  cursor:pointer;
  min-height:44px;
  transition:border-color 0.2s;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  outline:none;
  -webkit-appearance:none;
}
.page-tab-btn:hover, .page-tab-btn:focus, .page-tab-btn:active{
  background:transparent;
  outline:none;
}
.page-tab-btn.active{
  color:var(--text-primary);
  border-bottom-color:var(--accent);
  font-weight:700;
}
.page-content{
  display:none;
}
.page-content.active{
  display:block;
}


/* ===== 着弾時刻発行：iOS風レイアウト ===== */
.clock-time-line{
  display:inline-flex;
  align-items:baseline;
}
body.landing-active{
  background:var(--bg);
  padding:28px 18px max(24px, env(safe-area-inset-bottom));
}
body.landing-active .container{
  max-width:480px;
}
body.landing-active .header{
  margin:18px 2px 28px;
  text-align:left;
}
body.landing-active #utc-now{
  color:var(--text-primary);
  font-size:clamp(36px, 11vw, 52px);
  font-weight:800;
  letter-spacing:-.08em;
}
body.landing-active .page-tabs{
  display:flex;
  gap:3px;
  margin:0 0 30px;
  padding:3px;
  border:0;
  border-radius:13px;
  background:var(--surface-secondary);
}
body.landing-active .page-tab-btn{
  min-height:42px;
  margin:0;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  color:var(--text);
  font-size:15px;
  font-weight:700;
  transition:background .2s, box-shadow .2s;
}
body.landing-active .page-tab-btn.active{
  color:var(--text-primary);
  background:transparent;
  border-radius:0;
  border-bottom:2px solid var(--accent);
  font-weight:700;
}
#page-landing .landing-settings-card{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#page-landing .l-setting-row, #page-landing .l-wave-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
  margin:0 16px;
  padding:0 2px;
  border-bottom:1px solid #e7e7e7;
  color:var(--text-primary);
  cursor:pointer;
}
#page-landing .l-setting-row:last-of-type{
  border-bottom:0;
}
#page-landing .l-setting-name{
  color:var(--text-primary);
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
}
#page-landing .l-setting-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
#page-landing .l-setting-control select{
  width:auto;
  min-width:0;
  min-height:44px;
  padding:6px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-secondary);
  font-size:17px;
  font-weight:700;
  text-align:right;
  text-align-last:right;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
#page-landing .l-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--border);
  font-size:30px;
  font-weight:300;
  line-height:1;
  box-shadow:none;
  transform:none;
}
#page-landing .l-chevron:hover, #page-landing .l-chevron:focus, #page-landing .l-chevron:active{
  background:transparent;
  color:var(--accent);
  box-shadow:none;
  transform:none;
}
#page-landing .l-wave-options{
  min-height:60px;
  border-bottom:0;
}
#page-landing #l-result{
  margin-top:18px;
}
#page-landing #l-result-inner{
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
}
#page-landing #l-result .impact-display{
  margin:0 !important;
}
#page-landing #l-result2-row{
  border-top:1px solid #e7e7e7;
}
body.landing-active #page-landing .footer{
  margin-top:34px;
  color:var(--border);
  font-size:13px;
  font-weight:600;
}

@media (max-width:380px){
body.landing-active{
    padding-left:12px;
    padding-right:12px;
  }
body.landing-active #utc-now{
    font-size:34px;
  }
#page-landing .l-setting-name, #page-landing .l-setting-control select{
    font-size:15px;
  }
}

/* ===== 両画面で共通のアプリ外観 ===== */
.container, body.landing-active .container{
  max-width:480px;
}
.header, body.landing-active .header{
  position:relative;
  margin:18px 2px 28px;
  text-align:center;
}
.app-settings-button{
  display:flex;
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  align-items:center;
  justify-content:center;
  width:26px;
  min-width:26px;
  height:26px;
  min-height:26px;
  margin:0;
  padding:0 0 5px;
  border:0;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--text-secondary);
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1;
  box-shadow:none;
  opacity:.85;
}
.app-settings-button.registered::after{
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:7px;
  height:7px;
  border:1.5px solid var(--bg);
  border-radius:50%;
  background:var(--success);
}
.clock, body.landing-active .clock{
  max-width:100%;
  color:var(--text-primary);
  font-family:var(--font-num);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.clock:active{
  opacity:.65;
}
.device-settings-modal{
  display:flex;
  position:fixed;
  inset:0;
  z-index:14500;
  align-items:stretch;
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
  background:var(--bg);
}
.device-settings-modal.show{visibility:visible;pointer-events:auto}
.device-settings-header{display:flex;align-items:center;min-height:44px;margin-bottom:24px}
.device-settings-header h2{flex:1;margin:0;font-size:17px;text-align:center}
.device-settings-panel{width:100%;max-width:480px;padding:max(18px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));background:var(--bg)}
.device-settings-header button{width:78px;min-width:78px;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--accent);font-size:16px;box-shadow:none}
.device-settings-group-title{margin:0 4px 7px;color:var(--text-muted);font-size:13px;font-weight:600}
.device-settings-group{overflow:hidden;border-radius:var(--card-radius);background:var(--surface)}
.device-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:0;padding:6px 14px;color:var(--text);font-size:15px;font-weight:600}
.device-settings-row + .device-settings-row{border-top:1px solid var(--divider)}
button.device-settings-row{width:100%;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
button.device-settings-row[hidden]{display:none}
.device-settings-row select{flex:1;min-width:0;min-height:44px;padding:5px 0;border:0;background:transparent;color:var(--text-muted);text-align:right;text-align-last:right;box-shadow:none}
select#quick-device-member-select{appearance:none;-webkit-appearance:none;background-image:none}
.device-sync-status{margin:9px 4px 0;color:var(--text-muted);font-size:11px;line-height:1.5}
.clock-time-value{
  display:inline;
  white-space:nowrap;
}
#utc-now, body.landing-active #utc-now{
  color:var(--text-primary);
  font-size:clamp(36px, 11vw, 52px);
  font-weight:800;
  letter-spacing:-.08em;
}
#utc-millis, body.landing-active #utc-millis{
  margin-left:2px;
  color:var(--time-secondary);
  font-family:var(--font-num);
  font-size:clamp(18px, 5.5vw, 26px);
  font-weight:800;
  letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
}
.utc-label, body.landing-active .utc-label{
  font-family:var(--font-ui);
}
.utc-clock-overlay{
  display:flex;
  position:fixed;
  inset:0;
  z-index:15000;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:opacity .22s ease, visibility 0s .22s;
}
.utc-clock-overlay.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .22s ease;
}
body.utc-overlay-open{
  overflow:hidden;
}
.utc-clock-overlay-card{
  position:relative;
  width:min(94vw, 380px);
  padding:38px 12px 30px;
  border:1px solid var(--card-border);
  border-radius:22px;
  background:var(--surface);
  color:var(--text);
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.48), 0 6px 18px rgba(0,0,0,.28);
  transform:scale(.94);
  transition:transform .22s ease;
}
.utc-clock-overlay.show .utc-clock-overlay-card{
  transform:scale(1);
}
.utc-clock-overlay-label{
  margin-bottom:8px;
  color:var(--border);
  font-size:15px;
  font-weight:700;
}
.utc-clock-overlay-time-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
#utc-overlay-time{
  font-family:var(--font-num);
  font-size:clamp(34px, 11vw, 44px);
  font-weight:800;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
}
#utc-overlay-millis{
  margin-left:-3px;
  color:var(--time-secondary);
  font-family:var(--font-num);
  font-size:clamp(18px, 5.5vw, 24px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.utc-clock-overlay-countdown{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-top:14px;
  color:var(--time-secondary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}
.utc-clock-overlay-countdown[hidden]{display:none !important}
.utc-clock-overlay-countdown-name{
  color:var(--accent);
  font-size:13px;
  font-weight:800;
}
.utc-clock-overlay-countdown-value{
  font-family:var(--font-num);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.utc-pip-source, .utc-pip-media{
  position:fixed;
  left:1px;
  bottom:1px;
  width:2px;
  height:2px;
  opacity:.001;
  pointer-events:none;
  z-index:0;
  object-fit:cover;
}
.utc-clock-overlay-unit{
  color:var(--border);
  font-size:16px;
  font-weight:700;
}
.utc-clock-overlay-close{
  display:flex;
  position:absolute;
  top:12px;
  right:12px;
  align-items:center;
  justify-content:center;
  width:36px;
  min-width:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-secondary);
  color:var(--text);
  font-size:24px;
  font-weight:400;
  line-height:1;
  box-shadow:none;
}
.page-tabs, body.landing-active .page-tabs{
  display:flex;
  gap:3px;
  margin:0 0 30px;
  padding:3px;
  border:0;
  border-radius:13px;
  background:var(--surface-secondary);
}
.page-tab-btn, body.landing-active .page-tab-btn{
  min-height:42px;
  margin:0;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  color:var(--text);
  background:transparent;
  font-size:15px;
  font-weight:700;
  transition:background .2s, box-shadow .2s;
}
.page-tab-btn:hover, .page-tab-btn:focus, .page-tab-btn:active{
  background:transparent;
}
.page-tab-btn.active, body.landing-active .page-tab-btn.active{
  color:var(--text-primary);
  background:transparent;
  border-radius:0;
  border-bottom:2px solid var(--accent);
  font-weight:700;
}

/* 出発時刻画面も着弾時刻画面と同じ質感に統一 */
#page-calc .mode-card, #page-calc .collapsible-card{
  overflow:hidden;
  border:0;
  border-radius:var(--card-radius);
  background:var(--surface);
  box-shadow:none;
}
#page-calc .mode-card{
  margin:0 0 14px;
  padding:16px;
}
#page-calc .collapsible-card{
  margin-bottom:14px !important;
}
#page-calc .collapsible-header{
  min-height:52px;
  padding:10px 16px !important;
  border-bottom:1px solid var(--divider);
  background:var(--surface);
}
#page-calc .collapsible-header:hover, #page-calc .collapsible-header:active{
  background:var(--surface-secondary);
}
#page-calc .collapsible-content-inner{
  border:0;
  background:var(--surface);
}
#page-calc select{
  border:0;
  border-radius:var(--control-radius);
  background:var(--input-bg);
  color:var(--text);
}
#page-calc .control-btn{
  border-radius:14px;
}
#page-calc .departure-settings-card{
  margin:0 !important;
  padding:0 !important;
  border-radius:16px;
}
#page-calc .departure-setting-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
#page-calc .departure-setting-control select{
  width:auto;
  min-width:0;
  min-height:44px;
  padding:6px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-secondary);
  font-size:17px;
  font-weight:700;
  text-align:right;
  text-align-last:right;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
#page-calc .departure-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--border);
  font-size:30px;
  font-weight:300;
  line-height:1;
  box-shadow:none;
  transform:none;
}
#page-calc .departure-chevron:hover, #page-calc .departure-chevron:focus, #page-calc .departure-chevron:active{
  background:transparent;
  color:var(--accent);
  box-shadow:none;
  transform:none;
}
.departure-edit-modal{
  display:flex;
  position:fixed;
  inset:0;
  z-index:12000;
  align-items:flex-end;
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
  background:transparent;
  transition:visibility 0s .3s;
}
.departure-edit-modal.show{
  visibility:visible;
  pointer-events:auto;
  transition:none;
}
body.departure-edit-open{
  overflow:hidden;
}
.departure-edit-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  transition:opacity .25s ease;
}
.departure-edit-modal.show .departure-edit-backdrop{
  opacity:1;
}
.departure-edit-sheet{
  position:relative;
  z-index:1;
  width:100%;
  max-width:480px;
  max-height:min(80vh, 640px);
  margin:0 auto;
  padding:14px 16px max(18px, env(safe-area-inset-bottom));
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  background:var(--surface);
  box-shadow:var(--shadow-overlay);
  overflow-x:hidden;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,.75,.2,1);
}
.departure-edit-modal.show .departure-edit-sheet{
  transform:translateY(0);
}
.departure-edit-header{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  margin-bottom:12px;
}
.departure-edit-header h3{
  margin:0;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}
.departure-custom-section[hidden], .departure-preset-section[hidden]{
  display:none !important;
}
.departure-custom-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  margin-top:14px;
}
#departure-edit-close, #departure-edit-save{
  width:90px;
  min-width:90px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  line-height:1;
  box-shadow:none;
  transform:none;
}
#departure-edit-close{
  text-align:left;
}
#departure-edit-save{
  text-align:right;
  font-weight:700;
}
#departure-edit-close:hover, #departure-edit-close:focus, #departure-edit-close:active, #departure-edit-save:hover, #departure-edit-save:focus, #departure-edit-save:active{
  background:transparent;
  color:var(--accent);
  box-shadow:none;
  transform:none;
}
.departure-edit-fields{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:var(--surface);
}
.departure-preset-section{
  margin-bottom:0;
}
.departure-preset-list{
  overflow:hidden;
  border-radius:14px;
  background:var(--surface);
}
.departure-preset-row{
  position:relative;
  overflow:hidden;
  background:var(--surface);
}
.departure-preset-delete{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  background:var(--danger-bg);
  color:var(--danger-text);
  font-size:15px;
  font-weight:600;
}
.departure-preset-row .departure-preset-option{
  position:relative;
  z-index:1;
  transition:transform .2s ease;
}
.departure-preset-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:50px;
  margin:0;
  padding:0 16px;
  border:0;
  border-bottom:1px solid var(--divider);
  border-radius:0;
  background:var(--surface);
  color:var(--text-primary);
  font-size:16px;
  font-weight:500;
  text-align:left;
  box-shadow:none;
  transform:none;
}
.departure-preset-row:last-child .departure-preset-option{
  border-bottom:0;
}
.departure-preset-option::after{
  content:'';
  width:8px;
  height:14px;
  margin-left:auto;
  border:solid var(--accent);
  border-width:0 2px 2px 0;
  opacity:0;
  transform:rotate(45deg);
}
.departure-preset-option.selected::after{
  opacity:1;
}
.departure-preset-option:hover, .departure-preset-option:focus, .departure-preset-option:active{
  background:var(--bg);
  color:var(--text-primary);
  box-shadow:none;
  transform:none;
}
.departure-preset-option[data-role="custom"]{
  color:var(--accent);
  font-weight:600;
}
.departure-sheet-cancel{
  display:block;
  width:100%;
  min-height:50px;
  margin-top:8px;
  border:0;
  border-radius:14px;
  background:var(--surface);
  color:var(--accent);
  font-size:17px;
  font-weight:600;
  text-align:center;
  box-shadow:none;
  transform:none;
}
.departure-sheet-cancel:hover, .departure-sheet-cancel:focus, .departure-sheet-cancel:active{
  background:var(--bg);
  color:var(--accent);
  box-shadow:none;
  transform:none;
}
.departure-wheel-group{
  position:relative;
  flex:1;
  min-width:0;
  height:264px;
  overflow:hidden;
}
.departure-wheel-group::before{
  content:'';
  position:absolute;
  z-index:0;
  top:110px;
  left:0;
  right:0;
  height:44px;
  border-top:1px solid var(--divider);
  border-bottom:1px solid var(--divider);
  background:var(--surface-secondary);
  pointer-events:none;
}
.departure-wheel{
  position:relative;
  z-index:1;
  height:264px;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  mask-image:linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.departure-wheel::-webkit-scrollbar{
  display:none;
}
.departure-wheel-spacer{
  height:110px;
  pointer-events:none;
}
.departure-wheel-option{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  height:44px;
  margin:0;
  padding:0 24px 0 4px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--label-secondary);
  font-family:var(--font-num);
  font-size:20px;
  font-weight:500;
  line-height:44px;
  scroll-snap-align:center;
  box-shadow:none;
  transform:none;
}
.departure-wheel-option:hover, .departure-wheel-option:focus, .departure-wheel-option:active{
  background:transparent;
  box-shadow:none;
  transform:none;
}
.departure-wheel-option.selected{
  color:var(--label-strong);
  font-size:23px;
  font-weight:700;
}
.departure-wheel-unit{
  position:absolute;
  z-index:2;
  top:50%;
  right:8px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:700;
  transform:translateY(-50%);
  pointer-events:none;
}

/* ボトムシート化に伴い、行タップでシートを開くため、内側のネイティブコントロール自体は無効化する */
#page-calc .departure-setting-control select, #page-landing .l-setting-control select, #page-switch .sw-row-control select, #page-switch .sw-row-control input[type="number"]{
  pointer-events:none;
}
#page-calc .departure-setting-row:active, #page-calc .departure-setting-control:active, #page-landing .l-setting-row:active, #page-landing .l-wave-options:active, #page-switch .sw-row:active{
  background:var(--accent-soft);
}
#page-calc .footer, #page-landing .footer{
  margin-top:34px;
  color:var(--border);
  font-size:13px;
  font-weight:600;
}

@media (max-width:380px){
body, body.landing-active{
    padding-left:12px;
    padding-right:12px;
  }
#utc-now, body.landing-active #utc-now{
    font-size:34px;
  }
}

/* ===== スマホ：iOS設定画面に近い縦密度 ===== */
@media (max-width:600px){
  /* 左右余白と時計カードの寸法は上の共通指定を維持 */

  .page-tabs,
  body.landing-active .page-tabs{
    margin-bottom:22px;
  }

  .page-tab-btn,
  body.landing-active .page-tab-btn{
    min-height:40px;
    padding-top:6px;
    padding-bottom:6px;
  }

  /* 着弾時刻：1つの設定グループ内だけをコンパクトにする */
  #page-landing .l-setting-row,
  #page-landing .l-wave-options{
    min-height:56px;
  }

  #page-landing .l-setting-control select,
  #page-landing .l-chevron{
    min-height:44px;
  }

  #page-landing .l-wave-options{
    min-height:54px;
  }

  #page-landing .landing-action{
    min-height:56px;
    margin-top:20px;
    font-size:18px;
  }

  #page-landing #l-result{
    margin-top:14px;
  }

  #page-landing #l-result .impact-display{
    padding:13px 14px;
  }

  /* 王城決戦：設定行、一覧行、内部ボタンを同じ基準へ揃える */
  #page-calc .mode-card{
    margin-bottom:12px;
  }

  #page-calc .departure-setting-row{
    min-height:56px;
  }

#page-calc .departure-setting-control select,
#page-calc .departure-chevron{
    min-height:44px;
  }

  #page-calc .departure-action{
    min-height:56px;
    margin-top:20px;
    font-size:18px;
  }

  #page-calc .departure-result{
    margin-top:14px;
  }

  #page-calc > .collapsible-card{
    margin-top:14px;
    margin-bottom:0 !important;
  }

  #page-calc > .collapsible-card + .collapsible-card{
    margin-top:10px;
  }

  #page-calc .collapsible-header{
    min-height:48px;
    padding:8px 14px !important;
  }

  .member-identity-row{
    min-height:44px;
    padding-top:4px;
    padding-bottom:4px;
  }

  .member-settings-toggle{
    width:34px;
    min-width:34px;
    min-height:34px;
  }

  .member-auto-settings{
    padding:8px 10px 10px;
  }


  .button-controls{
    margin-top:8px;
    margin-bottom:8px;
  }

  .control-btn{
    min-height:44px;
    padding-top:9px;
    padding-bottom:9px;
  }

  /* 設定・時間編集画面も同じ行密度に統一 */
  .device-settings-header{
    margin-bottom:20px;
  }

  .device-settings-row{
    min-height:52px;
  }

  .departure-edit-header{
    margin-bottom:22px;
  }

  .departure-preset-option,
  .departure-sheet-cancel{
    min-height:44px;
  }

  #page-calc .footer,
  #page-landing .footer,
  body.landing-active #page-landing .footer{
    margin-top:28px;
  }
}

/* ===== スマホ：共通の縦レイアウトグリッド ===== */
@media (max-width:600px){
  .container{
    --layout-section-gap:18px;
  }

  /* 時計以外の外側ラインをコンテナ幅へ統一 */
  .header,
  body.landing-active .header{
    padding-top:34px;
    margin-right:0;
    margin-bottom:var(--layout-section-gap);
    margin-left:0;
  }

  .page-tabs,
  body.landing-active .page-tabs{
    width:calc(100% - 8px);
    margin:0 0 var(--layout-section-gap);
  }

  #page-calc,
  #page-landing,
  #page-calc > .mode-card,
  #page-calc > .departure-action,
  #page-calc > .departure-result,
  #page-calc > .collapsible-card,
  #page-landing > .mode-card,
  #page-landing > .landing-action,
  #page-landing > #l-result{
    width:100%;
    max-width:none;
    margin-right:0;
    margin-left:0;
    box-sizing:border-box;
  }

  /* 各主要セクションの外側間隔を18pxに統一 */
  #page-calc > .mode-card{
    margin:0 0 var(--layout-section-gap) !important;
  }

  #page-calc > .departure-action{
    margin:0 0 var(--layout-section-gap);
  }

  #page-calc > .departure-result{
    margin:0 0 var(--layout-section-gap);
  }

  #page-calc > .collapsible-card,
  #page-calc > .collapsible-card + .collapsible-card{
    margin:0 0 var(--layout-section-gap) !important;
  }

  #page-landing > .landing-settings-card{
    margin:0 0 var(--layout-section-gap) !important;
  }

  #page-landing > .landing-action{
    margin:0 0 var(--layout-section-gap);
  }

  #page-landing > #l-result{
    margin:0 0 var(--layout-section-gap) !important;
  }

  #page-landing #l-result-inner,
  #page-calc .collapsible-content,
  #page-calc .collapsible-content-inner,
  #page-calc #sec-members,
  #page-calc .members-list{
    width:100%;
    box-sizing:border-box;
  }

  /* 集結一覧：ヘッダー・行・追加ボタンを1枚のカード内に収める */
  #page-calc .collapsible-card{
    overflow:hidden;
  }

  #page-calc .button-controls{
    width:100%;
    margin:0;
    padding:8px 14px 10px;
    border-top:1px solid var(--divider);
    box-sizing:border-box;
  }

  #page-calc .button-controls .control-btn{
    width:100%;
    margin:0;
  }

  #page-calc .member-row-wrapper,
  #page-calc .member-row,
  #page-calc .member-identity-row{
    width:100%;
    box-sizing:border-box;
  }

  /* 補助テキストとフッターはグリッドを乱さない */

  #page-calc .footer,
  #page-landing .footer,
  body.landing-active #page-landing .footer{
    width:100%;
    margin:0;
  }
}

/* ===== スマホ表示レイヤー：値は共通トークンへのエイリアスのみ（独自の色/角丸は持たない） ===== */
/* body[data-theme]で上書きされる実トークンを毎回参照し直すため、:rootではなくbodyで宣言する */
body{
  --ios-bg:var(--bg);
  --ios-card:var(--surface);
  --ios-separator:var(--divider);
  --ios-label:var(--text);
  --ios-secondary:var(--text-subtle);
  --ios-tertiary:var(--text-muted);
  --ios-tint:var(--accent);
  --ios-fill:var(--accent-soft);
  --ios-radius:var(--card-radius);
}
html{
  -webkit-text-size-adjust:100%;
  background:var(--ios-bg);
}
body, body.landing-active{
  padding:max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background:var(--ios-bg);
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- ヘッダーのUTC時計 --- */
body .clock, body.landing-active .clock{
  font-family:var(--font-ui);
}
body #utc-now, body.landing-active #utc-now{
  color:var(--ios-label);
  font-family:var(--font-num);
  font-size:clamp(36px, 10.4vw, 44px);
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body #utc-millis, body.landing-active #utc-millis{
  margin-left:1px;
  color:var(--ios-secondary);
  font-family:var(--font-num);
  font-size:clamp(17px, 4.8vw, 20px);
  font-weight:600;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body .utc-label, body.landing-active .utc-label{
  font-family:var(--font-ui);
  letter-spacing:.01em;
}
body .app-settings-button{
  top:2px;
  background:var(--ios-fill);
  color:var(--ios-secondary);
  font-size:14px;
}

/* --- セグメンテッドコントロール --- */
body .page-tab-btn, body.landing-active .page-tab-btn{
  min-height:30px;
  padding:4px 8px;
  border-radius:7px;
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* --- カード（設定グループ） --- */
body .mode-card, body .collapsible-card, body #page-calc .mode-card, body #page-calc .collapsible-card, body #page-calc .departure-settings-card, body .landing-settings-card{
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:none;
  overflow:hidden;
}

/* --- 設定行（集結時間・準備時間など） --- */
body #page-calc .departure-setting-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .departure-setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:50px;
  margin:0 16px;
  padding:0;
  border-bottom:1px solid var(--ios-separator);
}
body #page-landing .l-wave-options{
  min-height:50px;
  border-bottom:0;
}
body #page-calc .departure-setting-name, body #page-landing .l-setting-name{
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
}
body #page-calc .departure-setting-control select, body #page-calc .departure-after-text, body #page-landing .l-setting-control select{
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.01em;
}
body #page-landing .l-setting-control select[class*="time"]{
  font-family:var(--font-num);
  font-size:17px;
  font-variant-numeric:tabular-nums;
}

/* --- シェブロン（iOS標準の細い「>」） --- */
body #page-calc .departure-chevron, body #page-landing .l-chevron, body #page-switch .departure-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  min-width:20px;
  min-height:44px;
  color:var(--ios-tertiary);
  font-size:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body #page-calc .departure-chevron::after, body #page-landing .l-chevron::after, body #page-switch .departure-chevron::after{
  content:"";
  display:block;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:rotate(-45deg);
}
body #page-calc .departure-chevron:hover, body #page-calc .departure-chevron:focus, body #page-calc .departure-chevron:active, body #page-landing .l-chevron:hover, body #page-landing .l-chevron:focus, body #page-landing .l-chevron:active, body #page-switch .departure-chevron:hover, body #page-switch .departure-chevron:focus, body #page-switch .departure-chevron:active{
  color:var(--ios-tint);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* --- 主ボタン（計算開始） --- */
body #page-calc .departure-action, body #page-landing .landing-action{
  align-items:center;
  justify-content:center;
  letter-spacing:-.01em;
}
/* --- 折りたたみヘッダー --- */
body .collapsible-card, body #page-calc .collapsible-card{
  margin-bottom:16px !important;
}
body .collapsible-header{
  position:relative;
  min-height:50px;
  padding:0 16px !important;
  border:0;
  background:var(--ios-card);
}
body .collapsible-header-title{
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.01em;
}
body .collapsible-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:var(--ios-tertiary);
  font-size:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:transform .25s ease;
}
body .collapsible-arrow::after{
  content:"";
  display:block;
  width:7px;
  height:7px;
  margin-bottom:3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:rotate(45deg);
}
body .collapsible-content-inner{
  border:0;
  background:var(--ios-card);
}

/* --- 集結一覧：iOSのリストセル（名前／残り時間／設定）--- */
body .member-row{
  position:relative;
  border-bottom:0;
}

/* 区切り線は本文の開始位置に合わせて左を16px空ける */
body .member-row::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:16px;
  height:1px;
  background:var(--ios-separator);
}
body .member-identity-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 16px;
}
body .member-identity-row .name-text{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  overflow:hidden;
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body .name-text:empty:before{
  color:var(--ios-tertiary);
  opacity:.5;
}
body .name-text:focus{
  background:transparent;
}
body .member-departure-inline{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}
body .member-departure-status{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-height:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:400;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  box-shadow:none;
}
body .member-departure-status.counting{
  background:transparent;
  color:var(--ios-tint);
  box-shadow:none;
}
body .member-departure-status.departed{
  background:transparent;
  color:var(--ios-tertiary);
}

/* --- 集結主の詳細設定：1項目1行の設定リスト --- */
body .member-auto-settings{
  display:block;
  gap:0;
  min-height:0;
  padding:0;
  border-top:0;
  background:var(--ios-bg);
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
}
body .member-setting-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  margin:0;
  padding:0 16px;
  border:0;
  background:transparent;
  cursor:pointer;
}
body .member-setting-row::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:16px;
  height:1px;
  background:var(--ios-separator);
}
body .member-setting-row:last-child::after{
  display:none;
}
body .member-setting-label{
  flex:0 0 auto;
  color:var(--ios-label);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.01em;
  white-space:nowrap;
}
body .member-setting-value{
  display:inline-flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  margin-left:auto;
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.01em;
  white-space:nowrap;
}
body .member-coordinates{
  gap:6px;
  color:var(--ios-secondary);
  font-size:17px;
  font-weight:400;
}
body .coord-axis{
  color:var(--ios-tertiary);
  font-size:15px;
}
body .coord-input{
  width:56px;
  min-width:56px;
  height:32px;
  min-height:32px;
  padding:0 8px;
  border:0;
  border-radius:8px;
  background:var(--ios-fill);
  color:var(--ios-label);
  font-family:var(--font-num);
  font-size:17px;
  font-weight:400;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
body .coord-input:focus{
  border:0;
  background:var(--ios-fill);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.30);
}
body #page-calc .march-select, body .march-select{
  width:auto;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:17px !important;
  font-weight:400;
  text-align:right;
  justify-self:end;
  font-variant-numeric:tabular-nums;
}
body .march-select:focus, body #page-calc .march-select:focus{
  background-color:transparent;
}
body .march-select:disabled{
  color:var(--ios-tint);
  -webkit-text-fill-color:var(--ios-tint);
}
body .march-auto-badge{
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
}
body .march-auto-badge::before{content:"（"}
body .march-auto-badge::after{content:"）"}
body .stat-boost-control, body .member-settings-pet-control{
  display:flex;
  color:var(--ios-label);
  font-size:17px;
  font-weight:400;
}

/* --- ステ強化・ペットはiOS標準のトグルスイッチ --- */
body .stat-boost-switch{
  position:relative;
  flex:0 0 51px;
  width:51px;
  height:31px;
  min-width:51px;
  border:0;
  border-radius:16px;
  background:var(--toggle-bg);
  transition:background .2s ease;
}
body .stat-boost-switch::after{
  content:'';
  display:block;
  position:absolute;
  top:2px;
  left:2px;
  width:27px;
  height:27px;
  border:0;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transform:none;
  transition:transform .2s ease;
}
body .stat-boost-toggle:checked + .stat-boost-switch, body .member-settings-pet-toggle:checked + .stat-boost-switch{
  border:0;
  background:var(--ios-tint);
}
body .stat-boost-toggle:checked + .stat-boost-switch::after, body .member-settings-pet-toggle:checked + .stat-boost-switch::after{
  display:block;
  border:0;
  transform:translateX(20px);
}
/* 行軍時間が手動（マスタ表に一致しない）のときは、効果のないステ強化・ペットトグルを操作不可にする */
body .stat-boost-toggle:disabled + .stat-boost-switch, body .member-settings-pet-toggle:disabled + .stat-boost-switch{
  opacity:.35;
}
body .stat-boost-control:has(.stat-boost-toggle:disabled), body .member-settings-pet-control:has(.member-settings-pet-toggle:disabled){
  cursor:not-allowed;
}
body .member-pet-remaining{
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:400;
  letter-spacing:-.01em;
}

/* --- 「＋ 集結主」も同じリスト内のセルとして扱う --- */
body #page-calc .button-controls{
  width:100%;
  margin:0;
  padding:0;
  border-top:0;
}
body .button-controls .control-btn, body #page-calc .button-controls .control-btn, body #add-member{
  width:100%;
  min-height:48px;
  margin:0;
  padding:0 16px;
}
body .member-settings-toggle{
  flex:0 0 auto;
  width:20px;
  min-width:20px;
  min-height:48px;
  border-radius:0;
  background:transparent;
  color:var(--ios-tertiary);
  transition:transform .25s ease;
}
body .member-settings-toggle::before{
  content:"";
  width:7px;
  height:7px;
  margin-bottom:3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  background-color:transparent;
  -webkit-mask:none;
  mask:none;
  transform:rotate(45deg);
}
body .member-settings-toggle:hover, body .member-settings-toggle:focus, body .member-settings-toggle:active, body .member-settings-toggle[aria-expanded="true"]{
  background:transparent;
  color:var(--ios-tint);
}

/* --- 追加ボタンはiOSの「青文字の行」に --- */
body .button-controls{
  margin:0;
  padding:0;
}
body .button-controls .control-btn, body #add-member{
  flex:1;
  min-height:50px;
  margin:0;
  padding:0 16px;
  text-align:left;
  border:0;
  border-radius:0;
  background:var(--ios-card);
  color:var(--ios-tint);
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  letter-spacing:-.01em;
  box-shadow:none;
}
body .button-controls .control-btn:hover, body .button-controls .control-btn:active, body #add-member:hover, body #add-member:active{
  background:var(--bg);
  color:var(--ios-tint);
  border:0;
  transform:none;
}

/* --- 結果表示 --- */
body .impact-time{
  font-feature-settings:"tnum" 1;
}

/* --- フッター --- */
body .footer, body #page-calc .footer, body #page-landing .footer, body.landing-active #page-landing .footer{
  margin-top:var(--compact-gap);
  color:var(--ios-tertiary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:400;
}

/* --- トースト・モーダルの文字 --- */
body .toast{
  border-radius:14px;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:400;
  letter-spacing:-.01em;
}
body .departure-edit-sheet, body .departure-edit-header h3, body .departure-preset-option, body .departure-sheet-cancel, body .departure-wheel-option{
  font-family:var(--font-ui);
  letter-spacing:-.01em;
}

/* --- 数字が動いても幅が変わらないようにする --- */
body select, body input, body button, body pre, body .members-table{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body .preview-text-box{
  font-family:var(--font-num);
  font-size:14px;
  line-height:1.6;
}

/* --- 時計オーバーレイ --- */
body .utc-clock-overlay-card{
  width:min(88vw, 340px);
  padding:30px 20px 24px;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
body .utc-clock-overlay-time-line{
  gap:0;
}
body .utc-clock-overlay-label{
  margin-bottom:6px;
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:400;
}
body #utc-overlay-time{
  font-family:var(--font-num);
  font-size:clamp(38px, 11vw, 46px);
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body #utc-overlay-millis{
  margin-left:1px;
  color:var(--ios-secondary);
  font-family:var(--font-num);
  font-size:clamp(18px, 5vw, 21px);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body .utc-clock-overlay-unit{
  margin-left:8px;
  color:var(--ios-secondary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
}
body .utc-clock-overlay-countdown{
  margin-top:12px;
  font-family:var(--font-ui);
  font-size:13px;
}
body .utc-clock-overlay-countdown-value{
  color:var(--accent);
  font-family:var(--font-num);
  font-size:19px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
body .utc-clock-overlay-close{
  top:10px;
  right:10px;
  width:30px;
  min-width:30px;
  min-height:30px;
  background:var(--surface-secondary);
  color:var(--text);
  font-size:19px;
  box-shadow:none;
}


/* --- 編集シート：区切り線をiOS流に左インセット --- */
body .departure-preset-option:not(:last-child){
  border-bottom:1px solid var(--ios-separator);
}
body .departure-edit-header h3{
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:400;
  color:var(--ios-secondary);
}

/* ===== モバイル表示の最終上書き層：これも独自の色/角丸は持たず、共通トークンへエイリアス ===== */
/* --space-1〜5・--radius-control・--control-heightは基本:rootの値をそのまま継承するため、ここでは再宣言しない */
:root{
  --radius-section:var(--card-radius);
  --surface-primary:var(--surface);
  --surface-tertiary:var(--accent-soft);
  --separator-soft:var(--divider);
  --label-strong:var(--text);
  --label-secondary:var(--text-subtle);
  --label-tertiary:var(--text-muted);
  --action-primary:var(--accent);
  --action-primary-pressed:var(--accent);
  --danger-soft:var(--danger-bg);
  --danger-text:var(--red-error);
}
body, body.landing-active{
  padding:max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background:var(--surface-secondary);
  color:var(--label-strong);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  font-size:16px;
  line-height:1.45;
}
body .container, body.landing-active .container{
  max-width:430px;
}
body .header, body.landing-active .header{
  margin:0 0 var(--space-4);
  padding-top:var(--space-5);
}
body .app-settings-button::before, body.landing-active .app-settings-button::before{
  content:'';
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:var(--surface-tertiary);
}
body .app-settings-button, body .app-settings-button::after, body.landing-active .app-settings-button, body.landing-active .app-settings-button::after{
  z-index:2;
}
body .utc-clock-overlay-label{
  color:var(--label-secondary);
  font-size:13px;
  font-weight:500;
}
body #utc-millis, body.landing-active #utc-millis, body #utc-overlay-millis{
  color:var(--label-secondary);
  font-size:clamp(18px, 4.8vw, 22px);
  font-weight:600;
}
body .utc-clock-overlay-unit{
  margin-left:8px;
  color:var(--label-secondary);
  font-size:13px;
  font-weight:500;
}
body .member-pet-remaining, body .march-auto-badge, body .coord-axis, body .device-sync-status, body .footer, body #page-calc .footer, body #page-landing .footer, body.landing-active #page-landing .footer{
  color:var(--label-tertiary);
  font-size:13px;
  font-weight:400;
}
body .page-tabs, body.landing-active .page-tabs{
  gap:var(--space-4);
  margin:0 0 var(--space-5);
  padding:0;
  border-radius:0;
  background:transparent;
  border-bottom:1px solid var(--border);
}
body .page-tab-btn, body.landing-active .page-tab-btn{
  position:relative;
  min-height:var(--control-height);
  padding:0 var(--space-2);
  border-radius:0;
  background:transparent;
  color:var(--text-muted);
  font-size:15px;
  font-weight:500;
  border-bottom:2px solid transparent;
}
body .page-tab-btn.active, body.landing-active .page-tab-btn.active{
  box-shadow:none;
  background:transparent;
  color:var(--text-primary);
  font-weight:600;
  border-bottom:2px solid transparent;
}
body .page-tab-btn.active::after, body.landing-active .page-tab-btn.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  width:54px;
  height:2px;
  transform:translateX(-50%);
  background:var(--accent);
  border-radius:1px;
}
body #page-calc > .mode-card, body #page-landing > .mode-card{
  margin:0 0 var(--space-4) !important;
}
body #page-calc > #impact-display, body #page-landing > #l-result{
  margin:0 0 var(--space-4) !important;
}
body #page-calc > .collapsible-card, body #page-calc > .collapsible-card + .collapsible-card{
  margin:0 0 var(--compact-gap) !important;
}

/* ===== #page-switch: 他タブと同じ余白密度に揃える（追加のみ、既存ルールは無変更） ===== */
body #page-switch > .mode-card{
  margin:0 0 var(--space-4) !important;
}
body #page-switch > #sw-result{
  margin:0 0 var(--space-4) !important;
}
body #page-switch > .collapsible-card{
  margin:0 0 var(--compact-gap) !important;
}
body #page-switch .sw-row-control{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-1);
  min-height:var(--control-height);
  padding:0;
  border-radius:0;
  background:transparent;
}
body .collapsible-card, body #page-calc .collapsible-card{
  border-radius:var(--radius-card);
  background:var(--surface);
  border:1px solid var(--card-border);
  box-shadow:none;
}

/* mode-cardの色・枠・角丸はテーマトークンだけを見る */
body .mode-card, body #page-calc .mode-card, body #page-calc .departure-settings-card, body .landing-settings-card, body #page-landing .landing-settings-card{
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:none;
}
body #l-result-inner{
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body .collapsible-header{
  min-height:44px;
  padding:0 var(--space-3) !important;
}
body .collapsible-header-title, body label, body .member-setting-label{
  color:var(--label-strong);
  font-size:17px;
  font-weight:600;
}
body #page-landing .l-wave-options{
  margin:0 var(--space-3);
}
body #page-calc .departure-setting-control, body #page-landing .l-setting-control, body #page-switch .departure-setting-control{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-1);
  min-height:var(--control-height);
  padding:0;
  border-radius:0;
  background:transparent;
}
body #time-input-group, body #prep-input-group{
  margin-right:0;
}
body #page-calc .departure-setting-control select, body #page-calc .departure-after-text, body #page-landing .l-setting-control select, body #page-switch .departure-setting-control select, body .inline-select, body select, body input:not([type="checkbox"]){
  min-height:var(--control-height);
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--text-primary);
  font-size:16px;
  font-weight:600;
}
body #page-calc .departure-schedule-label{
  display:inline-flex;
  align-items:center;
  min-height:var(--control-height);
}
body #page-calc .departure-after-text{
  color:var(--label-secondary);
  font-size:15px;
  font-weight:500;
}
body #page-calc .departure-after-text{
  display:inline-flex;
  align-items:center;
  min-height:var(--control-height);
  line-height:1;
}
body #page-calc .departure-chevron, body #page-landing .l-chevron, body .member-settings-toggle{
  min-height:var(--control-height);
}

/* 結果もカードにしない。時計と同じ「基準点」の言語で、罫線と数字だけで見せる */
body #page-calc .member-row-wrapper, body #page-calc .member-row, body #page-calc .button-controls{
  background:var(--surface-primary);
}
body .member-row::after, body .member-setting-row::after{
  background:var(--divider);
}
body .member-identity-row .name-text{
  color:var(--label-strong);
  font-size:18px;
  font-weight:700;
}
body .member-departure-status{
  color:var(--label-secondary);
  font-size:15px;
  font-weight:600;
}
body .member-departure-status.counting{
  color:var(--action-primary);
}
body .member-departure-status.departed{
  color:var(--label-tertiary);
}
body .member-auto-settings{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:transparent;
  border-top:1px solid var(--border);
  padding:8px var(--space-3) 10px;
}
body .member-setting-row{
  min-height:0;
  margin:0;
  padding:0;
}
body .member-setting-row::after{
  display:none;
}

/* 座標+行軍時間、ステ強化+ペットを、それぞれ横並び2カラムの1行にまとめる。
   縦4行だった詳細を横並び2行に圧縮し、1人分の高さをできるだけコンパクトにする */
body .member-setting-pair{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
body .member-setting-pair .member-setting-row{
  flex:1 1 0;
  min-width:0;
  gap:6px;
}
/* 座標・行軍時間：ラベルと値を詰めて並べる */
body .member-setting-pair div.member-setting-row{
  justify-content:flex-start;
}
/* ステ強化・ペット：ラベルとトグルを両端に振る */
body .member-setting-pair label.member-setting-row{
  justify-content:space-between;
}
body .member-setting-label{
  flex:0 0 auto;
  color:var(--text-muted);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
body .member-setting-value, body .member-coordinates{
  color:var(--text-muted);
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 座標・行軍時間・ステ強化・ペットを均等な4項目の縦並びにしない、という元の考え方は、
   今回は横2カラム×2行という配置そのもので表現するため、行軍時間だけを大きくする強調はやめ、
   他の値と同じ文字サイズに揃えて一覧性を優先する */
body .march-select, body #page-calc .march-select{
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
body .coord-input{
  width:34px;
  min-width:34px;
  min-height:22px;
  height:22px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  color:var(--text-muted);
  font-size:13px;
  font-weight:500;
  text-align:center;
}
body .march-control{
  gap:4px;
}

/* 1人分の中の間隔はそのまま。展開されているブロックの前後の境目だけ余白を広く取り、
   罫線の種類は増やさずに「どこからどこまでが1人分か」を空間のリズムだけで伝える。
   折りたたみ同士が並ぶ通常のリストはこれまで通り詰めたまま変えない */
body #players .member-row-wrapper:not(:first-child):has(.member-auto-settings:not([hidden])), body #players .member-row-wrapper:has(.member-auto-settings:not([hidden])) + .member-row-wrapper{
  margin-top:var(--space-4);
}
body .march-auto-badge, body .coord-axis, body .member-pet-remaining{
  font-size:12px;
  font-weight:500;
  color:var(--text-muted);
}
body .delete-bg, body .member-row-wrapper .delete-bg{
  width:72px;
  background:var(--danger-soft);
  color:var(--danger-text);
  font-size:13px;
  font-weight:600;
}
body .button-controls .control-btn, body #page-calc .button-controls .control-btn, body #add-member{
  min-height:50px;
  color:var(--action-primary);
  font-size:17px;
  font-weight:500;
}
body .preview-text-box, body .copy{
  padding:var(--space-3);
  border:0;
  border-radius:0;
  background:var(--surface-secondary);
  color:var(--label-secondary);
  font-family:var(--font-num);
  font-size:14px;
  line-height:1.65;
}

@media (max-width:380px){
body .header, body.landing-active .header{
    padding-top:28px;
  }
body .page-tabs, body.landing-active .page-tabs{
    margin-bottom:var(--space-4);
  }
body #utc-now, body.landing-active #utc-now{
    font-size:34px;
  }
body .impact-display-inner > .impact-time{
    font-size:28px;
  }
}

/* ==========================================================================
   3タブ（王城決戦・着弾時刻・スイッチ）レイアウト統一
   タブ下から「計算開始」ボタンまでの縦位置を、コンテンツ量が違っても揃える。
   数値は :root の --settings-* 変数だけで管理し、タブごとの個別margin/paddingは持たせない。
   既存の重複ルールが !important で散在しているため、ここで最終的に一括上書きする。
   ========================================================================== */
body .page-tabs, body.landing-active .page-tabs{
  margin:0 4px var(--settings-top-gap) 4px;
}

/* 設定エリア（mode-card）：内側の余白を0にし、行の高さだけで積み上げる。
   コンテンツが少ないタブは min-height で不足分を空白として補い、
   常に3行分の高さ（--settings-area-height）で揃える */

/* 各設定行の行高を3タブ共通で64pxに */
body #page-calc .departure-setting-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .sw-row, body #page-switch .departure-setting-row{
  min-height:var(--settings-row-height) !important;
  align-items:center;
}

/* ボタン（計算開始）：高さ・角丸・配色を3タブ共通の1ルールにまとめる */
body #page-calc .departure-action, body #page-landing .landing-action, body #page-switch .switch-action{
  display:block;
}

/* ==========================================================================
   時計ヘッダー：「現在時刻」「タップでオーバーレイ」の文言をやめ、
   時計の右側にモノクロの小窓（PiP）アイコンだけを添える
   ========================================================================== */
body .clock, body.landing-active .clock{
  flex-direction:row;
  gap:10px;
}
body .clock-pip-icon{
  display:none;
  position:absolute;
  top:27px;
  right:58px;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:var(--label-tertiary);
}
body .clock-pip-icon svg{
  display:block;
  width:20px;
  height:20px;
}

/* ==========================================================================
   UTC時計まわりの微調整：
   ・小窓（PiP）アイコンは時計の横並び要素から外し、ヘッダー基準の絶対配置で
     右上の操作領域（「…」設定ボタンの左）に独立して置く。
     時計側（.clock の flex）には中央揃えを補正するための要素を残さない。
   ・ヘッダーを少し上へ、「…」ボタンに余白を追加
   ・UTC時計本体（整数・小数・UTC）にごく弱いtext-shadowを付けて浮遊感を出す
   ========================================================================== */
body #utc-now, body.landing-active #utc-now, body #utc-millis, body.landing-active #utc-millis{
  text-shadow:0 2px 4px rgba(30,28,25,.16);
}

/* ==========================================================================
   小窓（タップ時オーバーレイ／ドキュメントPiPウィンドウ／実PiP映像）の再設計。
   「集結主名・出発時刻・残り秒数」を常に白〜明るいグレーの文字だけで表示し、
   残り時間による色変化（赤字化など）は行わない。強調はサイズ・ウェイトのみ。
   ========================================================================== */
body .utc-clock-overlay-countdown{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:14px;
}
body .utc-clock-overlay-countdown-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
body .utc-clock-overlay-countdown-label{
  color:var(--time-secondary);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:500;
}
body .utc-clock-overlay-countdown-name{
  color:var(--time-primary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:700;
}
body .utc-clock-overlay-countdown-time{
  color:var(--time-primary);
  font-family:var(--font-num);
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
body .utc-clock-overlay-countdown-unit{
  color:var(--time-secondary);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
}
body .utc-clock-overlay-countdown-value{
  color:var(--time-primary);
  font-family:var(--font-num);
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
body .utc-clock-overlay-countdown-suffix{
  color:var(--time-secondary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
}

/* チャット貼り付け用プレビュー：文字と上下余白を少し詰める */
body .preview-text-box{
  padding:6px 16px;
  font-size:13px;
  line-height:1.5;
}

/* 設定画面：見出しにアイコンを追加、PiP欄をカード＋行タップに変更 */
body .device-settings-group-title{
  display:flex;
  align-items:center;
  gap:6px;
}
body .device-settings-row-chevron{
  color:var(--text-muted);
  font-size:19px;
  line-height:1;
}

/* タブ（王城決戦／着弾時刻／スイッチ）：文字幅任せの左寄せをやめ、3等分で均等配置 */
body .page-tab-btn, body.landing-active .page-tab-btn{
  flex:1 1 0;
  text-align:center;
}

/* 設定ボタン：丸い背景と登録済みを示す緑の点を非表示に */
body .app-settings-button::before, body.landing-active .app-settings-button::before, body .app-settings-button.registered::after, body.landing-active .app-settings-button.registered::after{
  display:none;
}

/* ==========================================================================
   3タブ共通の入力行レイアウト。
   ラベル＝1列目の左端、値＋chevron＝2列目の右端。
   位置は個別のmargin/paddingではなく、この1ブロックだけで決める。
   ========================================================================== */
:root{
  --row-inset:16px;
  --row-gap:8px;
  --row-chevron-w:28px;
}
body #page-calc .departure-setting-row, body #page-calc .departure-schedule-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .sw-row{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  gap:0 var(--row-gap);
  min-height:var(--settings-row-height) !important;
  margin:0 var(--row-inset) !important;
  padding:0 !important;
  border-top:0;
  border-bottom:1px solid var(--divider);
}
body #page-calc .departure-setting-name, body #page-landing .l-setting-name, body #page-switch .sw-row-label{
  grid-column:1;
  justify-self:start;
  color:var(--label-strong);
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
}
body #page-calc .departure-setting-control, body #page-landing .l-setting-control, body #page-switch .sw-row-control{
  grid-column:2;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--row-gap);
  min-width:0;
  min-height:var(--control-height);
  margin:0 !important;
  padding:0 !important;
}
body #page-calc .departure-setting-control select, body #page-landing .l-setting-control select, body #page-switch .sw-row-control select{
  text-align:right;
  text-align-last:right;
}
body #page-calc .departure-chevron, body #page-landing .l-chevron, body #page-switch .sw-chevron{
  flex:0 0 var(--row-chevron-w);
  width:var(--row-chevron-w);
  min-width:var(--row-chevron-w);
  min-height:var(--control-height);
  margin:0;
  padding:0;
  color:var(--label-tertiary);
  font-size:0;
  background:transparent;
}
body #page-calc .departure-chevron::after, body #page-landing .l-chevron::after, body #page-switch .sw-chevron::after{
  content:"";
  display:block;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:rotate(-45deg);
}

/* ==========================================================================
   集結一覧：ヘッダーなしの一覧＋行タップで開く詳細
   ========================================================================== */

/* 連番は名前より控えめに。並べ替え・削除でも自動で振り直される */
body .member-identity-row::before{
  content:counter(member-index);
  flex:0 0 auto;
  min-width:16px;
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:13px;
  font-weight:500;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
body .member-identity-row{ cursor:pointer; }

/* 閉：› ／ 開：⌄ */
body .member-settings-toggle{
  width:var(--row-chevron-w);
  min-width:var(--row-chevron-w);
}
body .member-settings-toggle::before{
  margin:0;
  transform:rotate(-45deg);
}
body .member-settings-toggle[aria-expanded="true"]{
  transform:rotate(90deg);
}

/* 座標と行軍時間は同じ1行（左＝座標／右＝行軍時間） */
body .member-setting-pair{
  justify-content:space-between;
  gap:var(--space-2);
  min-height:36px;
}
body .member-setting-pair .member-setting-row{ flex:0 0 auto; }
body .member-setting-pair div.member-setting-row:last-child{ justify-content:flex-end; }

/* ステ強化・ペットは1項目1行、右端にトグル */
body .member-auto-settings > label.member-setting-row{
  justify-content:space-between;
  min-height:36px;
}
body .member-setting-label{
  color:var(--text-secondary);
  font-size:15px;
}
body .member-pet-remaining{
  display:inline;
  color:var(--text-muted);
  font-size:13px;
}
body #page-switch .departure-setting-control select{
  padding-left: 6px;
  padding-right: 6px;
}



/* ==========================================================================\n   FINAL UI ALIGNMENT OVERRIDES — 2026-08-24\n   3タブの文字・行・ボタン・結果・コピー対象の見た目をここだけで確定する。\n   計算ロジックには触れない。\n   ========================================================================== */
:root{
  --final-row-height:56px;
  --final-section-gap:16px;
  --final-row-inset:16px;
  --final-chevron-w:28px;
}

/* 入力行数が違うタブに空白行を足さない。最後の入力行から同じ余白でボタンへ。 */
body #page-calc .mode-card, body #page-landing .mode-card, body #page-switch .mode-card{
  min-height:0 !important;
  height:auto !important;
  margin:0 0 var(--final-section-gap) !important;
  padding:0 !important;
}

/* スイッチ2行目も、他の入力行と同じグリッドへ含める。 */
body #page-calc .departure-setting-row, body #page-calc .departure-schedule-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .sw-row, body #page-switch .departure-setting-row{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  min-height:var(--final-row-height) !important;
  margin:0 var(--final-row-inset) !important;
  padding:0 !important;
  border-top:0;
  border-bottom:1px solid var(--divider);
}
body #page-calc .departure-settings-card > div:last-of-type, body #page-landing .landing-settings-card > div:last-of-type, body #page-switch .switch-settings-card > div:last-of-type{
  border-bottom:0;
}

/* 左ラベルは全タブ同じサイズ・太さ。 */
body #page-calc .departure-setting-name, body #page-landing .l-setting-name, body #page-switch .sw-row-label, body #page-switch .departure-setting-name{
  grid-column:1;
  justify-self:start;
  font-family:var(--font-ui);
  font-size:17px !important;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--label-strong);
  white-space:nowrap;
}

/* 右の値エリアは全タブ同じ基準。 */
body #page-calc .departure-setting-control, body #page-landing .l-setting-control, body #page-switch .sw-row-control, body #page-switch .departure-setting-control{
  grid-column:2;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
}

/* 値の文字サイズを統一。Safariのnative select矢印は表示しない。 */
body #page-calc .departure-setting-control select, body #page-landing .l-setting-control select, body #page-switch .sw-row-control select, body #page-switch .departure-setting-control select{
  -webkit-appearance:none;
  appearance:none;
  background-image:none;
  border:0;
  box-shadow:none;
  min-height:44px !important;
  padding:0 !important;
  font-family:var(--font-ui);
  font-size:17px !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--text-primary);
  text-align:right;
  text-align-last:right;
}
body #page-calc .departure-after-text{
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  color:var(--label-secondary);
}

/* 共通chevron。 */
body #page-calc .departure-chevron, body #page-landing .l-chevron, body #page-switch .sw-chevron{
  flex:0 0 var(--final-chevron-w);
  width:var(--final-chevron-w);
  min-width:var(--final-chevron-w);
  min-height:44px;
  margin:0;
  padding:0;
}

/* 計算開始：最後の入力行から16px。3タブ同じ寸法。 */
body #page-calc .departure-action, body #page-landing .landing-action, body #page-switch .switch-action{
  font-family:var(--font-ui);
  font-weight:700;
  line-height:1.2;
}

/* 結果表示：タイトル・時刻・UTCの文字基準を3タブ共通化。 */
body #page-calc > #impact-display, body #page-landing > #l-result, body #page-switch > #sw-result{
  width:100% !important;
  margin:0 0 var(--final-section-gap) !important;
  box-sizing:border-box;
}
body .impact-display, body #page-calc .impact-display, body #page-landing #l-result .impact-display, body #page-switch #sw-result .impact-display{
  padding:10px 0 0 !important;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
body .impact-display-inner, body #page-landing #l-result .impact-display-inner, body #page-switch #sw-result .impact-display-inner{
  display:grid;
  width:calc(100% - 32px) !important;
  height:68px !important;
  min-height:68px !important;
  grid-template-columns:max-content max-content;
  grid-template-areas:"label label" "time unit";
  justify-content:center;
  align-items:end;
  column-gap:8px;
  row-gap:2px;
  margin:0 auto !important;
  padding:7px 12px !important;
  border:1px solid transparent;
  border-radius:var(--radius-card);
  background:transparent;
  box-sizing:border-box;
}
body .impact-display-inner > .impact-label:first-child{
  grid-area:label;
  font-family:var(--font-ui);
  font-size:13px !important;
  font-weight:500;
  line-height:1.2;
  color:var(--label-secondary);
}
body .impact-display-inner > .impact-time{
  grid-area:time;
  font-family:var(--font-num);
  font-size:32px !important;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
body .impact-display-inner > .impact-label:last-child{
  grid-area:unit;
  align-self:end;
  padding-bottom:4px !important;
  font-family:var(--font-ui);
  font-size:12px !important;
  font-weight:500;
  line-height:1.2;
  color:var(--label-secondary);
}

/* チャットに実際にコピーされるプレビューを、同じ枠・同じ文字で表示。 */
body .copy-preview-card{
  width:100%;
  margin:0 0 var(--final-section-gap);
  border:1px solid var(--preview-border);
  border-radius:var(--preview-radius);
  background:var(--surface);
  box-shadow:none;
  box-sizing:border-box;
  overflow:hidden;
}
body .copy-preview-card .collapsible-header{
  min-height:36px;
  height:36px;
  padding:0 12px;
  border:0;
  background:transparent;
}
body .copy-preview-card .collapsible-header-title{
  font-family:var(--font-ui);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
  line-height:1;
}
body .copy-preview-card .collapsible-content-inner{
  border:0;
  background:transparent;
}
body .copy-preview-card .preview-text-box{
  margin:0;
  padding:6px 12px;
  border:0;
  border-top:1px solid var(--preview-border);
  border-radius:0;
  background:var(--surface-secondary);
  color:var(--text-subtle);
  font-family:var(--font-num);
  font-size:13px;
  line-height:1.42;
}
@keyframes copyPreviewFlash{
  0%{box-shadow:inset 0 0 0 0 rgba(var(--signal-rgb),0)}
  35%,70%{box-shadow:inset 0 0 0 2px rgba(var(--signal-rgb),.95),0 0 16px rgba(var(--signal-rgb),.25)}
  100%{box-shadow:inset 0 0 0 0 rgba(var(--signal-rgb),0)}
}
body .copy-preview-card.flash{
  animation:copyPreviewFlash var(--motion-signal-dur) ease !important;
}

/* ===== 2026-08-24 最終調整: 今から固定 / フッター / コピー完了フラッシュ ===== */
body .footer, body #page-calc .footer, body #page-landing .footer, body #page-switch .footer, body.landing-active #page-landing .footer{
  color:var(--text-muted);
  font-weight:400;
}

/* hidden互換コントロールはレイアウトに一切参加させない */
body #time-input-group[hidden]{
  display:none !important;
}

/* コピー完了の光はレイアウトを動かさない inset shadow で統一 */
@keyframes copyTargetFlash{
  0%{ box-shadow:inset 0 0 0 0 rgba(var(--signal-rgb),0), 0 0 0 rgba(var(--signal-rgb),0); }
  35%,70%{ box-shadow:inset 0 0 0 2px rgba(var(--signal-rgb),.95), 0 0 16px rgba(var(--signal-rgb),.24); }
  100%{ box-shadow:inset 0 0 0 0 rgba(var(--signal-rgb),0), 0 0 0 rgba(var(--signal-rgb),0); }
}
body #page-calc .members-table, body #page-landing #l-result-inner, body #page-switch #sw-result-inner{
  width:100% !important;
  box-sizing:border-box;
  border:0;
  outline:0;
}

/* ===== split from index.html ===== */

/* ===== 時計横「…」クイックメニュー：本体と同じデザイン言語 ===== */
.header{ position:relative; }
.clock-quick-menu{
  position:absolute;
  top:66px;
  right:0;
  z-index:15000;
  width:min(238px, calc(100vw - 40px));
  overflow:hidden;
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  background:var(--surface);
  box-shadow:var(--shadow-overlay);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity .16s ease, transform .16s ease, visibility 0s .16s;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.clock-quick-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .16s ease, transform .16s ease;
}
.clock-quick-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:54px;
  margin:0;
  padding:0 14px;
  border:0;
  border-bottom:1px solid var(--divider);
  border-radius:0;
  background:transparent;
  color:var(--text);
  box-shadow:none;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:500;
  text-align:left;
}
.clock-quick-menu-item:last-child{ border-bottom:0; }
.clock-quick-menu-item:active{ background:var(--accent-soft); }
.clock-quick-menu-title{ white-space:nowrap; }
.clock-quick-menu-value{
  overflow:hidden;
  color:var(--text-subtle);
  font-size:15px;
  font-weight:400;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.clock-quick-menu-chevron{
  flex:0 0 auto;
  margin-left:10px;
  color:var(--text-muted);
  font-size:22px;
  font-weight:300;
  line-height:1;
}
/* 同期専用画面：既存設定画面と同一の行・余白・背景 */
.device-sync-modal .device-settings-panel{
  background:var(--bg);
}
.device-sync-select-wrap{
  display:flex;
  flex:1;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.device-sync-select-wrap select{
  flex:1;
  min-width:0;
  color:var(--text-subtle);
  font-size:16px;
  font-weight:500;
  text-align:right;
  text-align-last:right;
}
/* 「…」は見た目は裸、タップ領域のみ十分確保 */

/* ===== split from index.html ===== */

/* ===== 2026-08-24 UI仕上げ：時計を浮かせる／補助カードを弱める ===== */
body .clock:active, body.landing-active .clock:active{
  box-shadow:var(--clock-shadow) !important;
}
/* …は円や背景を持たず、文字だけ */
/* 集結主一覧は補助情報として一段弱く */
body #page-calc .member-identity-row .name-text{
  font-size:17px;
  font-weight:600;
}
body #page-calc .member-departure-status{
  font-size:14px;
  font-weight:500;
}
/* 貼り付けプレビューも主役より弱く */
/* 端末同期メニューは「端末同期：マリン」の一文表示 */
.clock-quick-menu-value{
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
}
/* 自動再生デモ：実際の画面の上に指アイコンと小窓の模擬表示だけを重ねる（設定・同期状態は変更しない） */
.demo-finger{
  position:fixed;
  z-index:20002;
  width:42px;
  height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 72%);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(1);
  transition:left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.demo-finger.show{ opacity:1; }
.demo-finger.tap{ animation:demoFingerTap .45s ease; }
@keyframes demoFingerTap{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  40%{ transform:translate(-50%,-50%) scale(.72); }
}
.demo-mini-clock{
  position:fixed;
  z-index:20000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:top .5s cubic-bezier(.4,0,.2,1), left .5s cubic-bezier(.4,0,.2,1), width .5s cubic-bezier(.4,0,.2,1), height .5s cubic-bezier(.4,0,.2,1), border-radius .5s ease, opacity .25s ease;
}
.demo-mini-clock.show{ opacity:1; }
.demo-mini-time{
  color:var(--time-primary);
  font-family:var(--font-num);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(14px, 7vw, 22px);
  letter-spacing:-.02em;
}
.demo-mini-countdown{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:var(--time-primary);
}
.demo-mini-name{ font-size:11px; font-weight:700; }
.demo-mini-label{ font-size:10px; color:var(--time-secondary); }
.demo-mini-value{
  font-family:var(--font-num);
  font-size:17px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.demo-mini-unit{ font-size:10px; color:var(--time-secondary); }
.demo-sync-list{
  position:fixed;
  z-index:20000;
  min-width:120px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-overlay);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(.97);
  transform-origin:top right;
  transition:opacity .18s ease, transform .18s ease;
}
.demo-sync-list.show{ opacity:1; transform:translateY(0) scale(1); }
.demo-sync-list-item{
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
}
.demo-caption{
  position:fixed;
  left:50%;
  bottom:max(28px, calc(env(safe-area-inset-bottom) + 14px));
  z-index:20001;
  transform:translateX(-50%) translateY(6px);
  margin:0;
  max-width:min(320px, calc(100vw - 48px));
  padding:8px 16px;
  border-radius:999px;
  background:var(--surface-secondary);
  color:var(--text);
  font-size:12.5px;
  font-weight:500;
  text-align:center;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.demo-caption.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.demo-skip{
  position:fixed;
  top:max(14px, env(safe-area-inset-top));
  right:14px;
  z-index:20002;
  background:var(--accent-soft);
  border:0;
  border-radius:999px;
  color:var(--text-subtle);
  font-size:12.5px;
  font-weight:600;
  padding:7px 14px;
  min-height:0;
  width:auto;
  margin:0;
  cursor:pointer;
}
.demo-replay{
  position:fixed;
  left:50%;
  bottom:max(32px, calc(env(safe-area-inset-bottom) + 18px));
  transform:translateX(-50%);
  z-index:20002;
  background:var(--accent);
  color:var(--surface);
  border:0;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  padding:10px 20px;
  min-height:0;
  width:auto;
  margin:0;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  cursor:pointer;
}

/* ===== split from index.html ===== */

/* ===== テーマ共通部品：色は下の5テーマ変数だけから受け取る ===== */
/* UTC時計：形は共通。テーマ差はよく見れば分かる程度 */
body .header, body.landing-active .header{padding-top:var(--compact-gap);margin-bottom:var(--compact-gap);}
body .clock, body.landing-active .clock{position:relative;width:calc(100% - 8px);min-height:94px;margin:0 auto;padding:13px 16px 14px;border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--surface);box-shadow:var(--clock-shadow);overflow:hidden;}
body .clock-time-line, body.landing-active .clock-time-line{display:flex;align-items:baseline;justify-content:center;gap:0;width:100%;line-height:1;}
body #utc-now, body.landing-active #utc-now{font-size:clamp(48px,13.3vw,58px);font-weight:650;letter-spacing:-.045em;line-height:.98;text-shadow:0 2px 5px rgba(30,28,25,.13);color:var(--time-primary);}
body #utc-millis, body.landing-active #utc-millis{margin-left:3px;font-size:clamp(18px,5vw,22px);font-weight:600;line-height:1;text-shadow:none;color:var(--time-secondary);}
body .utc-label, body.landing-active .utc-label{margin-left:8px;font-size:13px;font-weight:600;line-height:1;text-shadow:none;color:var(--time-secondary);}
/* テーマ選択は「…」メニュー内で完結 */
.quick-theme-panel{display:none;border-top:1px solid var(--divider);background:var(--surface);}
.clock-quick-menu.theme-open .clock-quick-menu-main{display:none;}
.clock-quick-menu.theme-open .quick-theme-panel{display:block;}
.quick-theme-head{display:flex;align-items:center;min-height:48px;padding:0 12px;border-bottom:1px solid var(--divider);font-size:15px;font-weight:650;color:var(--text);}
.quick-theme-back{width:32px;min-width:32px;min-height:32px;margin:0 4px 0 -6px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-subtle);font-size:25px;font-weight:300;line-height:1;}
.quick-theme-choice{display:flex;align-items:center;width:100%;min-height:48px;margin:0;padding:0 14px;border:0;border-bottom:1px solid var(--divider);border-radius:0;background:transparent;box-shadow:none;color:var(--text);font-size:15px;font-weight:500;text-align:left;}
.quick-theme-choice:last-child{border-bottom:0}
.quick-theme-choice::after{content:"";margin-left:auto;width:6px;height:10px;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg)}

/* ===== split from index.html ===== */

/* ===== Final polish: 色・余白・テーマ表現を役割ごとに統一 ===== */

/* 文字色：黒・紺・茶の混在をなくす */
body .l-setting-name, body .departure-setting-name, body #page-switch .sw-row-label, body .name-text, body .collapsible-header-title, body .quick-theme-choice, body .clock-quick-menu-title{
  color:var(--text-primary);
}
body .impact-label, body .utc-label, body .footer, body .departure-after-text{
  color:var(--text-secondary);
}
/* UTC時計：単色。色の発光はやめ、テーマごとの差は境界線と文字にだけ入れる */
body .clock, body.landing-active .clock{
  min-height:94px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--card-border);
  box-shadow:0 2px 7px rgba(28,28,30,.045),0 10px 24px rgba(28,28,30,.055);
}

body #page-calc .impact-display-inner .impact-label:first-child, body #page-landing #l-result .impact-display-inner .impact-label:first-child, body #page-switch #sw-result .impact-display-inner .impact-label:first-child{
  flex:0 0 100%;
  text-align:center;
  margin:0 0 1px !important;
  font-size:13px !important;
  font-weight:600;
}
body .impact-time{
  color:var(--time-primary);
}

/* コピー対象の光：上下左右同じ余白。テーマ色はごく薄く */
body #page-calc #impact-display, body #page-landing #l-result-inner, body #page-switch #sw-result-inner{
  padding:12px 8px !important;
  border-radius:10px;
}
@keyframes proCopyFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--signal-rgb),0),0 0 0 rgba(var(--signal-rgb),0);}
  32%,72%{box-shadow:0 0 0 1px rgba(var(--signal-rgb),.62),0 0 9px rgba(var(--signal-rgb),.12);}
}
body #page-calc .members-table.flash{
  animation:proCopyFlash var(--motion-signal-dur) ease !important;
  border-color:transparent !important;
}

/* 集結主：1 マリン / 出発まで残り / 23.5秒 の視覚階層 */
body .member-identity-row{
  min-height:56px;
  padding:0 10px 0 14px;
  gap:8px;
}
body .member-row-wrapper{
  counter-increment:member-row;
}
body .member-identity-row::before{
  content:counter(member-row);
  flex:0 0 22px;
  width:22px;
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:13px;
  font-weight:600;
  text-align:center;
}
body .name-text{
  font-size:16px;
  font-weight:650;
}
body .member-departure-inline{
  margin-left:auto;
}
body .member-departure-status{
  padding:0;
  gap:5px;
  min-height:auto;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
}
body .member-departure-status.counting::before{
  content:"出発まで残り";
  margin-right:5px;
  color:var(--text-muted);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:500;
}
body .member-settings-toggle{
  background:transparent;
  color:var(--text-secondary);
}
body .member-row{
  border-bottom-color:var(--border);
}

.quick-theme-head, .quick-theme-choice{
  min-height:46px;
}

/* 区切り線・chevronを同じ薄さに */
body .l-chevron, body .sw-chevron, body .departure-edit-trigger, body .clock-quick-menu-chevron{
  color:var(--text-muted);
}
body .l-setting-row, body .departure-setting-row, body #page-switch .sw-row{
  border-bottom-color:var(--border);
}


/* ==========================================================================
   2026-08-25 final vertical-grid alignment
   3タブの「設定行 → 計算開始 → 結果」のY座標を共通化。
   時計・タブ自体の位置/サイズには触れない。
   ========================================================================== */
:root{
  --three-tab-row-h:56px;
  --three-tab-settings-h:168px; /* 56px × 3行 */
  --three-tab-button-gap:24px;
  --three-tab-result-gap:12px;
  --three-tab-result-h:104px;
}

/* 設定エリアは全タブ3行分を必ず確保。
   王城決戦/スイッチの3行目は「空白行」として残るためボタンが上がらない。 */
body #page-calc .departure-settings-card, body #page-landing .landing-settings-card, body #page-switch .switch-settings-card{
  height:var(--three-tab-settings-h) !important;
  min-height:var(--three-tab-settings-h) !important;
  margin:0 0 var(--three-tab-button-gap) !important;
  padding:0 !important;
  overflow:hidden;
}

/* 1行目・2行目・3行目を完全に同じピッチへ。 */
body #page-calc .departure-setting-row, body #page-calc .departure-schedule-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .sw-row, body #page-switch .departure-setting-row{
  height:var(--three-tab-row-h) !important;
  min-height:var(--three-tab-row-h) !important;
  max-height:var(--three-tab-row-h);
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 計算開始は3タブで同じY座標・同じ高さ。 */

/* 結果の開始位置も同じ。 */

/* 王城決戦：計算前も結果1段分を予約し、集結主一覧が計算後に下へ跳ねない。
   計算後は実際の結果がその予約領域を使う。 */
body #page-calc > #impact-display:not([style*="display: block"]) + .collapsible-card{
  margin-top:calc(var(--three-tab-result-gap) + var(--three-tab-result-h)) !important;
}
body #page-calc > #impact-display[style*="display: block"] + .collapsible-card{
  margin-top:0 !important;
}

body #page-switch > #sw-result[style*="display: block"] + .copy-preview-card{
  margin-top:0 !important;
}

/* 結果表示内のラベル/時刻は各タブで同じ中央位置。 */


/* ===== 2026-08-25 UI polish =====
   2行タブは空の3行目を予約せず、最後の入力行から計算開始までの間隔を統一。
   プレビューは全タブで同じコンパクトなヘッダー／単一chevronにする。 */

/* 最終入力行 → 計算開始 の間隔 */

/* チャット貼り付け用プレビュー：高さ・上下余白・文字を全タブ共通化 */
body .copy-preview-card .collapsible-arrow.is-open{
  transform:rotate(180deg) !important;
}

/* 集結主の連番：0にならないよう実際の行でカウントする */

/* 王城決戦：着弾時刻と入力済み集結主を同じsignalで光らせる */
body #page-calc .members-table.flash{
  animation:copyTargetFlash var(--motion-signal-dur) ease !important;
}

/* ===== split from index.html ===== */

/* ===== Final spec 2026-08-25 ===== */
:root{
  --compact-row-h:46px;
  --compact-gap:14px;
  --compact-result-h:74px;
}

/* Palette tokens: flavor names are intentionally not shown in UI. */

/* Clock: keep size, narrow the glow to the digits only. */
body .clock, body.landing-active .clock{
  background:var(--surface);
  border-color:var(--card-border);
  box-shadow:0 2px 6px rgba(28,28,30,.035),0 8px 18px rgba(28,28,30,.04);
}
body #utc-now, body.landing-active #utc-now{
  text-shadow:0 2px 4px rgba(var(--theme-accent-rgb,143,169,178),.10);
}

/* Settings -> button: no invisible third row. Same relative rhythm in all tabs. */
body #page-calc .departure-settings-card, body #page-switch .switch-settings-card{height:calc(var(--compact-row-h) * 2) !important;min-height:calc(var(--compact-row-h) * 2) !important;}
body #page-landing .landing-settings-card{height:calc(var(--compact-row-h) * 3) !important;min-height:calc(var(--compact-row-h) * 3) !important;}
body #page-calc .departure-settings-card, body #page-landing .landing-settings-card, body #page-switch .switch-settings-card{margin-bottom:10px !important;}
body #page-calc .departure-setting-row, body #page-calc .departure-schedule-row, body #page-landing .l-setting-row, body #page-landing .l-wave-options, body #page-switch .sw-row, body #page-switch .departure-setting-row{height:var(--compact-row-h) !important;min-height:var(--compact-row-h) !important;}

/* Calculate buttons: same dimensions, slightly quieter and tighter. */
body #page-calc #action-btn, body #page-landing #l-action-btn, body #page-switch #sw-action-btn{
  width:calc(100% - 32px);height:44px;min-height:44px;
  margin:0 auto 10px;padding:0 16px;
  border:1.25px solid var(--border-strong);
  background:var(--button-bg);color:var(--button-text);
  border-radius:var(--control-radius);box-shadow:var(--shadow);font-size:16px;
  -webkit-tap-highlight-color:transparent;
}
body #page-calc #action-btn:active, body #page-landing #l-action-btn:active, body #page-switch #sw-action-btn:active{
  background:var(--button-bg);color:var(--button-text);
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
}

/* Result: compact, equal internal whitespace, only result receives calculation glow. */
body #page-calc > #impact-display, body #page-landing > #l-result, body #page-switch > #sw-result{margin-top:0 !important;margin-bottom:var(--compact-gap) !important;}
body #page-calc .impact-display-inner, body #page-landing #l-result .impact-display-inner, body #page-switch #sw-result .impact-display-inner{row-gap:2px;}
body .impact-display-inner > .impact-label:last-child{padding-bottom:2px !important;}
body .impact-display-inner.flash{animation:resultSoftGlow .8s ease !important;}
@keyframes resultSoftGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--theme-accent-rgb),0)}40%,70%{box-shadow:0 0 0 1px rgba(var(--theme-accent-rgb),.28),0 0 10px rgba(var(--theme-accent-rgb),.11)}}

/* Remove pre-reserved result space: content follows naturally before calculation. */
body #page-calc > #impact-display:not([style*="display: block"]) + .collapsible-card, body #page-switch > #sw-result[style*="display: none"] + .copy-preview-card{margin-top:0 !important;}

/* Member numbering and active editing glow. */
body #players{counter-reset:member-index;}
body #players .member-row-wrapper{counter-increment:none;}
body #players .member-identity-row{counter-increment:member-index;}
body #players .member-identity-row::before{content:counter(member-index);min-width:18px;font-size:12px;font-weight:500;color:var(--text-muted);}

/* Preview: one centered chevron, compact 36px header in every tab. */
body .copy-preview-card{margin-bottom:var(--compact-gap);}
body .copy-preview-card .collapsible-arrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:0;transform:none;}
body .copy-preview-card .collapsible-arrow::before{display:none;content:none;}
body .copy-preview-card .collapsible-arrow::after{content:"";display:block;width:7px;height:7px;margin:0;border:0;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg);transform-origin:center;}
body .copy-preview-card .collapsible-arrow.is-open::after{transform:rotate(225deg) !important;}

/* Theme panel: vertical, icon-only mode + 3-color palettes; labels stay accessible only. */
.quick-theme-panel{background:var(--surface);}
.quick-theme-choice{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;height:48px;min-height:48px;margin:0;padding:0 14px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;color:var(--text-primary);}
.quick-theme-choice[aria-checked="true"]{background:rgba(var(--accent-rgb),.06);}
.quick-theme-choice::after{content:"";position:absolute;right:17px;width:6px;height:10px;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);}
.quick-theme-choice[aria-checked="true"]::after{border-color:var(--theme-accent);}
.quick-theme-choice::before{display:none;content:none;}
.theme-palette{display:inline-flex;align-items:center;height:22px;}
.theme-palette i{display:block;width:22px;height:22px;border-radius:50%;border:1px solid var(--divider);margin-left:-5px;}
.theme-palette i:first-child{margin-left:0;}

/* ===== split from index.html ===== */

/* ===== Exclusive 5-theme system ===== */
html[data-theme="light"],
body[data-theme="light"]{
  --bg:#F2F2F7; --surface:#FFFFFF; --surface-secondary:#F7F7FA;
  --text:#1C1C1E; --text-subtle:#636366; --text-muted:#8E8E93;
  --border:rgba(60,60,67,.18); --border-strong:rgba(60,60,67,.28); --divider:rgba(60,60,67,.12);
  --accent:#636366; --accent-rgb:99,99,102; --accent-soft:#F2F2F7;
  --button-bg:#F2F2F7; --button-text:#636366;
  --input-bg:#FFFFFF; --result-bg:transparent;
  --toggle-bg:#C7C7CC; --toggle-active:#636366;
  --danger-bg:rgba(179,69,61,.10); --danger-text:#B3453D; --success:#34C759; --disabled-bg:#C7C7CC;
  --time-primary:#1C1C1E; --time-secondary:#636366;
  --card-border:rgba(60,60,67,.14); --preview-border:rgba(60,60,67,.14);
  --control-radius:10px; --card-radius:12px; --preview-radius:10px;
  --clock-shadow:0 2px 6px rgba(28,28,30,.03),0 8px 18px rgba(28,28,30,.035);
  color-scheme:light;
}
html[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#101014; --surface:#1C1C1E; --surface-secondary:#2C2C2E;
  --text:#F5F5F7; --text-subtle:#C7C7CC; --text-muted:#8E8E93;
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.22); --divider:rgba(255,255,255,.10);
  --accent:#C7C7CC; --accent-rgb:199,199,204; --accent-soft:#2C2C2E;
  --button-bg:#2C2C2E; --button-text:#C7C7CC;
  --input-bg:#1C1C1E; --result-bg:transparent;
  --toggle-bg:#48484A; --toggle-active:#C7C7CC;
  --danger-bg:rgba(255,69,58,.16); --danger-text:#FF6961; --success:#34C759; --disabled-bg:#48484A;
  --time-primary:#FFFFFF; --time-secondary:#A1A1A6;
  --card-border:transparent; --preview-border:transparent;
  --control-radius:10px; --card-radius:12px; --preview-radius:10px;
  --clock-shadow:none;
  color-scheme:dark;
}
html[data-theme="mint"],
body[data-theme="mint"]{
  --bg:#F5F8F6; --surface:#FFFFFF; --surface-secondary:#EDF4F1;
  --text:#40322D; --text-subtle:#6F625D; --text-muted:#9B928D;
  --border:#D9E5E0; --border-strong:#C8DAD3; --divider:#E7EFEC;
  --accent:#7AD9BD; --accent-rgb:122,217,189; --accent-soft:#E8F6F1;
  --button-bg:#E8F6F1; --button-text:#5D756C;
  --input-bg:#FFFFFF; --result-bg:transparent;
  --toggle-bg:#C5C1BC; --toggle-active:#7AD9BD;
  --danger-bg:rgba(179,69,61,.10); --danger-text:#B3453D; --success:#34C759; --disabled-bg:#C5C1BC;
  --time-primary:#40322D; --time-secondary:#776A64;
  --card-border:#D9E5E0; --preview-border:#D9E5E0;
  --control-radius:10px; --card-radius:12px; --preview-radius:10px;
  --clock-shadow:0 2px 6px rgba(28,28,30,.03),0 8px 18px rgba(28,28,30,.035);
  color-scheme:light;
}
html[data-theme="cookies"],
body[data-theme="cookies"]{
  --bg:#F4F7F9; --surface:#FFFFFF; --surface-secondary:#EDF2F5;
  --text:#585257; --text-subtle:#70777C; --text-muted:#98A2A8;
  --border:#DDE5E8; --border-strong:#C8D4D9; --divider:#E8EEF1;
  --accent:#94B5B2; --accent-rgb:148,181,178; --accent-soft:#EDF4F4;
  --button-bg:#EDF4F4; --button-text:#66777A;
  --input-bg:#FFFFFF; --result-bg:transparent;
  --toggle-bg:#C7C7CC; --toggle-active:#94B5B2;
  --danger-bg:rgba(179,69,61,.10); --danger-text:#B3453D; --success:#34C759; --disabled-bg:#C7C7CC;
  --time-primary:#585257; --time-secondary:#7D878B;
  --card-border:#DDE5E8; --preview-border:#DDE5E8;
  --control-radius:10px; --card-radius:12px; --preview-radius:10px;
  --clock-shadow:0 2px 6px rgba(28,28,30,.03),0 8px 18px rgba(28,28,30,.035);
  color-scheme:light;
}
html[data-theme="truffle"],
body[data-theme="truffle"]{
  --bg:#F8F5F1; --surface:#FFFFFF; --surface-secondary:#F2ECE7;
  --text:#482404; --text-subtle:#756354; --text-muted:#A59485;
  --border:#E6D9CF; --border-strong:#D7C5B8; --divider:#EFE6DF;
  --accent:#9A7250; --accent-rgb:154,114,80; --accent-soft:#F3EBE4;
  --button-bg:#F3EBE4; --button-text:#70543E;
  --input-bg:#FFFFFF; --result-bg:transparent;
  --toggle-bg:#C5C1BC; --toggle-active:#9A7250;
  --danger-bg:rgba(179,69,61,.10); --danger-text:#B3453D; --success:#34C759; --disabled-bg:#C5C1BC;
  --time-primary:#5C3417; --time-secondary:#8B7564;
  --card-border:#E6D9CF; --preview-border:#E6D9CF;
  --control-radius:10px; --card-radius:12px; --preview-radius:10px;
  --clock-shadow:0 2px 6px rgba(28,28,30,.03),0 8px 18px rgba(28,28,30,.035);
  color-scheme:light;
}
html[data-theme],
body[data-theme]{
  --theme-accent:var(--accent);
  --theme-accent-rgb:var(--accent-rgb);
  --theme-soft:var(--accent-soft);
  --theme-line:var(--card-border);
  --card-bg:var(--surface);
  --bg-light:var(--surface-secondary);
  --bg-lighter:var(--surface-secondary);
  --bg-blue-light:var(--surface-secondary);
  --text-primary:var(--text);
  --text-secondary:var(--text-subtle);
  --label-strong:var(--text);
  --label-secondary:var(--text-subtle);
  --label-tertiary:var(--text-muted);
  --blue-primary:var(--accent);
  --blue-hover:var(--accent);
  --blue-active:var(--accent);
  --blue-text:var(--accent);
  --signal:var(--accent);
  --signal-rgb:var(--accent-rgb);
  --red-error-bg:var(--danger-bg);
  --red-error:var(--danger-text);
  --btn-disabled:var(--disabled-bg);
  --text-tertiary:var(--divider);
  --surface-primary:var(--surface);
  --surface-tertiary:var(--accent-soft);
  --separator-soft:var(--divider);
  --radius-control:var(--control-radius);
  --radius-card:var(--card-radius);
  --action-primary:var(--accent);
  --action-primary-pressed:var(--accent);
  --danger-soft:var(--danger-bg);
  background:var(--bg);
  color:var(--text);
}

/* Common themed components: theme names only set tokens above. */
body #utc-now,
body .impact-time{
  color:var(--time-primary);
  -webkit-text-fill-color:var(--time-primary);
}
body #utc-millis,
body .utc-label,
body .utc-clock-overlay-unit{
  color:var(--time-secondary);
  -webkit-text-fill-color:var(--time-secondary);
}
body #utc-now{ text-shadow:0 1px 4px rgba(var(--accent-rgb),.08); }
body .clock,
body.landing-active .clock{
  background:var(--surface);
  background-image:none;
  border-color:var(--card-border);
  box-shadow:var(--clock-shadow);
}

@keyframes compactResultGlow{
  0%,100%{border-color:transparent;box-shadow:0 0 0 rgba(var(--accent-rgb),0);}
  35%,70%{border-color:rgba(var(--accent-rgb),.38);box-shadow:0 0 9px rgba(var(--accent-rgb),.12);}
}
body .impact-display-inner > .impact-label:first-child{font-size:12px !important;line-height:1.1;}
body .impact-display-inner > .impact-time{font-size:30px !important;line-height:1;}

body #players .member-row-wrapper.is-editing .member-row{
  background:rgba(var(--accent-rgb),.045);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16),0 0 7px rgba(var(--accent-rgb),.055);
}

.theme-choice-list{display:flex;flex-direction:column;}
.theme-choice-list .quick-theme-choice{height:48px;min-height:48px;}
.theme-symbol{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.quick-theme-choice[aria-checked="true"]{background:rgba(var(--accent-rgb),.055);}
.quick-theme-choice[aria-checked="true"]::after{border-color:var(--accent);}
.palette-mint .theme-palette i:nth-child(1){background:#EAF3F0}
.palette-mint .theme-palette i:nth-child(2){background:#8FBDB1}
.palette-mint .theme-palette i:nth-child(3){background:#5F4D45}
.palette-cookies .theme-palette i:nth-child(1){background:#F3F6F7}
.palette-cookies .theme-palette i:nth-child(2){background:#B7CBD4}
.palette-cookies .theme-palette i:nth-child(3){background:#56616A}
.palette-truffle .theme-palette i:nth-child(1){background:#F3EFEC}
.palette-truffle .theme-palette i:nth-child(2){background:#B8A397}
.palette-truffle .theme-palette i:nth-child(3){background:#665247}

body #page-calc .setting-row,
body #page-landing .setting-row,
body #page-switch .setting-row{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  min-height:46px !important;
  margin:0 16px !important;
  padding:0 !important;
  border-bottom:1px solid var(--divider);
}
body #page-landing .setting-row:last-child,
body #page-switch .setting-row:last-child{border-bottom:0;}
body #page-landing .setting-label,
body #page-switch .setting-label{
  grid-column:1;
  justify-self:start;
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
}
body .l-setting-name-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
body .prep-help-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  font:600 13px/1 var(--font-ui);
  box-shadow:none;
}
body .prep-help-button:hover,
body .prep-help-button:focus,
body .prep-help-button:active{
  background:transparent;
  color:var(--text-muted);
  box-shadow:none;
  transform:none;
}
body .prep-help-popover{
  position:absolute;
  z-index:20;
  left:0;
  top:calc(100% + 8px);
  width:max-content;
  max-width:260px;
  padding:8px 10px;
  border:1px solid var(--card-border);
  border-radius:var(--control-radius);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-overlay);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  white-space:normal;
}
body #page-calc .setting-control,
body #page-landing .setting-control,
body #page-switch .setting-control{
  gap:8px;
  font-size:17px;
  font-weight:500;
  white-space:nowrap;
}
body #page-landing .setting-control,
body #page-switch .setting-control{
  grid-column:2;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-height:44px;
}
body #page-landing .setting-control .inline-select,
body #page-switch .setting-control .inline-select,
body #page-landing .setting-control .departure-after-text,
body #page-switch .setting-control .departure-after-text{
  margin:0;
  font-size:17px;
  line-height:1;
  text-align:right;
}
body #page-calc .setting-chevron,
body #page-landing .setting-chevron,
body #page-switch .setting-chevron{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:28px;
  font-weight:300;
  line-height:1;
}
body #page-calc .setting-chevron::before,
body #page-calc .setting-chevron::after,
body #page-landing .setting-chevron::before,
body #page-landing .setting-chevron::after,
body #page-switch .setting-chevron::before,
body #page-switch .setting-chevron::after{
  content:none;
  display:none;
}

body #page-calc .departure-settings-card,
body #page-landing .landing-settings-card,
body #page-switch .switch-settings-card{margin-top:6px !important;}
body #page-landing .landing-settings-card,
body #page-switch .switch-settings-card{padding:0 !important;}
body #page-landing .footer,
body.landing-active #page-landing .footer{margin-top:0;}

body #page-calc #action-btn,
body #page-landing #l-action-btn,
body #page-switch #sw-action-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:calc(100% - 32px);
  height:44px;
  min-height:44px;
  margin:0 auto 10px;
  padding:0 16px !important;
  box-sizing:border-box;
  background:var(--button-bg);
  color:var(--button-text);
  border-color:var(--border-strong);
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
  line-height:1 !important;
  letter-spacing:-.01em;
  -webkit-appearance:none;
  appearance:none;
}

body .app-settings-button,
body.landing-active .app-settings-button{
  top:-16px;
  right:4px;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-secondary);
  box-shadow:none;
  color:var(--text-secondary);
  font-size:20px;
  font-weight:600;
}
body .app-settings-button::before,
body .app-settings-button::after,
body.landing-active .app-settings-button::before,
body.landing-active .app-settings-button::after{
  content:none;
  display:none;
}
body .app-settings-button:hover,
body .app-settings-button:focus,
body .app-settings-button:active,
body.landing-active .app-settings-button:hover,
body.landing-active .app-settings-button:focus,
body.landing-active .app-settings-button:active{
  background:var(--accent-soft);
  color:var(--text);
  box-shadow:none;
  transform:none;
}
body .app-settings-button.registered::after,
body.landing-active .app-settings-button.registered::after{
  content:"";
  display:block;
  position:absolute;
  right:0;
  bottom:0;
  width:7px;
  height:7px;
  border:1.5px solid var(--bg);
  border-radius:50%;
  background:var(--success);
}

body .clock-quick-menu{
  border-color:var(--card-border);
  background:var(--surface);
}
body .clock-quick-menu-item,
body .quick-theme-head,
body .quick-theme-choice{
  border-bottom-color:var(--divider);
  background:transparent;
  color:var(--text);
}
body .clock-quick-menu-item:active,
body .quick-theme-choice:hover,
body .quick-theme-choice:focus,
body .quick-theme-choice:active,
body .quick-theme-choice[aria-checked="true"]{
  background:var(--accent-soft);
}
body .clock-quick-menu-value,
body .quick-theme-back{
  color:var(--text-subtle);
  -webkit-text-fill-color:var(--text-subtle);
}
body .clock-quick-menu-chevron{
  color:var(--text-muted);
}
body .quick-theme-panel{
  border-top-color:var(--divider);
  background:var(--surface);
}

@keyframes copyTargetFlashBalanced{
  0%{ box-shadow:0 0 0 0 rgba(var(--signal-rgb),0), 0 0 0 rgba(var(--signal-rgb),0); }
  35%,70%{ box-shadow:0 0 0 1.5px rgba(var(--signal-rgb),.82), 0 0 11px rgba(var(--signal-rgb),.20); }
  100%{ box-shadow:0 0 0 0 rgba(var(--signal-rgb),0), 0 0 0 rgba(var(--signal-rgb),0); }
}
body #page-calc .members-table.flash{
  animation:copyTargetFlashBalanced var(--motion-signal-dur) ease !important;
  border-radius:8px !important;
}

body select:focus,
body input:focus,
body .inline-select:focus,
body .coord-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
body button:focus-visible,
body .page-tab-btn:focus-visible,
body .collapsible-header:focus-visible,
body .departure-preset-option:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
body .setting-chevron,
body .setting-chevron:hover,
body .setting-chevron:focus,
body .setting-chevron:focus-visible,
body .setting-chevron:active,
body .copy-preview-card .collapsible-arrow,
body .copy-preview-card .collapsible-arrow:hover,
body .copy-preview-card .collapsible-arrow:focus,
body .copy-preview-card .collapsible-arrow:focus-visible,
body .copy-preview-card .collapsible-arrow:active,
body .quick-theme-back,
body .quick-theme-back:hover,
body .quick-theme-back:focus,
body .quick-theme-back:focus-visible,
body .quick-theme-back:active,
body .clock-quick-menu-chevron,
body .device-settings-row-chevron{
  outline:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
body button:disabled,
body .btn-primary:disabled,
body #action-btn.calculating{
  background:var(--disabled-bg);
  border-color:var(--disabled-bg);
  color:var(--surface);
  cursor:not-allowed;
  opacity:.78;
  box-shadow:none;
  transform:none;
  transition:none;
}
body .member-row-wrapper .delete-bg,
body .delete-bg,
body .departure-preset-delete{
  background:var(--danger-bg);
  color:var(--danger-text);
}
body .member-row,
body .member-auto-settings,
body .settings-card,
body .collapsible-card:not(.copy-preview-card),
body #page-calc .member-row,
body #page-calc .member-row-wrapper,
body #page-calc .button-controls,
body .departure-edit-sheet,
body .departure-edit-fields,
body .departure-preset-list,
body .departure-preset-row,
body .departure-preset-option,
body .departure-sheet-cancel,
body .device-settings-group{
  background:var(--surface);
  color:var(--text);
  border-color:var(--card-border);
}
body .mode-card,
body #page-calc .mode-card,
body #page-landing .mode-card,
body #page-switch .mode-card{
  background:transparent;
  border-color:transparent;
  border-radius:0;
}
body .member-row,
body .member-setting-row,
body .setting-row,
body .departure-preset-option{border-color:var(--divider);}
body .copy-preview-card,
body .collapsible-card.copy-preview-card,
body #page-calc .collapsible-card.copy-preview-card,
body #page-switch .collapsible-card.copy-preview-card{
  background:var(--surface);
  border-color:var(--preview-border);
  border-radius:var(--preview-radius);
}
body .setting-label,
body .departure-setting-name,
body .l-setting-name,
body .sw-row-label,
body .member-setting-label,
body .clock-quick-menu-title{
  color:var(--text);
}
body .setting-control,
body .departure-setting-control,
body .l-setting-control,
body .sw-row-control,
body .member-setting-value,
body .departure-after-text,
body .footer{
  color:var(--text-muted);
}
body input,
body select,
body .inline-select,
body .coord-input{
  background:var(--input-bg);
  color:var(--text);
  border-color:var(--border);
  border-radius:var(--control-radius);
}
body .setting-control select,
body .setting-control .inline-select,
body .march-select,
body .device-settings-row select{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
body .member-departure-status.counting,
body .member-row.pet-active,
body .member-settings-toggle:hover,
body .member-settings-toggle:focus,
body .member-settings-toggle:active,
body .member-settings-toggle[aria-expanded="true"],
body .name-text:focus,
body .march-select:focus,
body .departure-preset-option:hover,
body .departure-preset-option:focus,
body .departure-preset-option:active,
body .departure-sheet-cancel:hover,
body .departure-sheet-cancel:focus,
body .departure-sheet-cancel:active,
body .clock-quick-menu-item:active{
  background:var(--accent-soft);
}
body .impact-display-inner{background:var(--result-bg);}
body .stat-boost-switch{background:var(--toggle-bg);}
body .stat-boost-toggle:checked + .stat-boost-switch,
body .member-settings-pet-toggle:checked + .stat-boost-switch{
  background:var(--toggle-active);
}
body .stat-boost-switch::after{background:var(--surface);}
body .device-settings-modal,
body .device-settings-panel,
body .departure-edit-modal{background:var(--bg);}
body .device-settings-header button{color:var(--accent);}
body .device-settings-group-title,
body .device-sync-status{color:var(--text-muted);}
body .device-settings-row,
body .device-settings-row select{color:var(--text);}
body .device-settings-row select{
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  background-image:none;
  -webkit-text-fill-color:var(--text-subtle);
}
body .toast{
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent);
}